Feat: Wireframe design library (#2068)

* Added wireframes in the design library

* Removed extra image padding, just adjust the screenshots

Author: bfintal

src/components/advanced-toolbar-control/index.js

@@ -119,7 +119,7 @@ const AdvancedToolbarControl = props => {
 	return (
 		<AdvancedControl
 			{ ...controlProps }
-			className={ classnames( 'ugb-advanced-toolbar-control', className ) }
+			className={ classnames( 'ugb-advanced-toolbar-control', className, controlProps.className ) }
 		>
 			<ButtonGroup
 				children={

src/components/design-library-list/index.js

@@ -17,11 +17,16 @@ import { __ } from '@wordpress/i18n'
 
 const DesignLibraryList = props => {
 	const {
-		designs, isBusy, onSelect, apiVersion,
+		className = '',
+		designs,
+		isBusy,
+		onSelect,
+		apiVersion,
 	} = props
 
 	const listClasses = classnames( [
 		'ugb-design-library-items',
+		className,
 	], {
 		[ `ugb-design-library-items--columns-${ props.columns }` ]: ! isBusy && props.columns,
 	} )

src/components/modal-design-library/block-list.js

@@ -10,7 +10,6 @@
  * External dependencies
  */
 import { sortBy } from 'lodash'
-import { AdvancedToolbarControl } from '..'
 import { fetchDesignLibrary } from '~stackable/design-library'
 import { isPro, i18n } from 'stackable'
 import classnames from 'classnames'
@@ -24,12 +23,14 @@ import {
 import { __ } from '@wordpress/i18n'
 import { useLocalStorage } from '~stackable/util'
 
+const isWireframe = design => design.uikit.toLowerCase() === 'wireframes'
+
 const BlockList = props => {
 	const [ uiKitList, setUiKitList ] = useState( [] )
 	const [ categoryList, setCategoryList ] = useState( [] )
+	const [ wireframeList, setWireframeList ] = useState( [] )
 	const [ selected, setSelected ] = useLocalStorage( 'stk__design_library__block-list__selected', '' )
-	const [ viewBy, setViewBy ] = useLocalStorage( 'stk__design_library__block-list__view_by', 'uikit' )
-	const { apiVersion } = props
+	const { viewBy, apiVersion } = props
 
 	// Create our block list.
 	useEffect( () => {
@@ -38,7 +39,8 @@ const BlockList = props => {
 				const design = designs[ name ]
 				const { categories, uikit } = design
 
-				if ( typeof output.uikits[ uikit ] === 'undefined' ) {
+				// Get all UI Kits. Don't include the Wireframe UI Kit.
+				if ( typeof output.uikits[ uikit ] === 'undefined' && ! isWireframe( design ) ) {
 					output.uikits[ uikit ] = {
 						id: uikit,
 						label: design.uikit,
@@ -47,18 +49,36 @@ const BlockList = props => {
 					}
 				}
 
-				categories.forEach( category => {
-					if ( typeof output.categories[ category ] === 'undefined' ) {
-						output.categories[ category ] = {
-							id: category,
-							label: category,
-							count: 0,
+				// Get all wireframe categories.
+				if ( isWireframe( design ) ) {
+					categories.forEach( category => {
+						if ( typeof output.wireframes[ category ] === 'undefined' ) {
+							output.wireframes[ category ] = {
+								id: category,
+								label: category,
+								count: 0,
+							}
 						}
-					}
-				} )
+					} )
+				} else {
+					// Get all block design categories.
+					categories.forEach( category => {
+						if ( typeof output.categories[ category ] === 'undefined' ) {
+							output.categories[ category ] = {
+								id: category,
+								label: category,
+								count: 0,
+							}
+						}
+					} )
+				}
 
 				return output
-			}, { uikits: {}, categories: {} } )
+			}, {
+				uikits: {},
+				categories: {},
+				wireframes: {},
+			} )
 
 			let uikitSort = [ 'label' ]
 			if ( ! isPro ) {
@@ -72,16 +92,23 @@ const BlockList = props => {
 				label: __( 'All', i18n ),
 				count: 0,
 			} )
+			const wireframes = sortBy( Object.values( designList.wireframes ), 'label' )
+			wireframes.unshift( {
+				id: 'all',
+				label: __( 'All', i18n ),
+				count: 0,
+			} )
 
 			setUiKitList( uikits )
 			setCategoryList( categories )
+			setWireframeList( wireframes )
 		} )
 	}, [ apiVersion ] )
 
 	// Update the counts of the designs, but don't update the list, only the counts.
 	useEffect( () => {
 		// If these are empty, then our component hasn't finished initializing.
-		if ( ! uiKitList.length || ! categoryList.length ) {
+		if ( ! uiKitList.length || ! categoryList.length || ! wireframeList.length ) {
 			return
 		}
 
@@ -99,11 +126,31 @@ const BlockList = props => {
 			}
 			return categories
 		}, {} )
+		const newWireframes = wireframeList.reduce( ( categories, category ) => {
+			categories[ category.id ] = {
+				...category,
+				count: 0,
+			}
+			return categories
+		}, {} )
 
 		props.designs.forEach( design => {
+			// Gather all wireframe designs.
+			if ( isWireframe( design ) ) {
+				design.categories.forEach( category => {
+					if ( category && newWireframes[ category ] ) {
+						newWireframes[ category ].count++
+					}
+				} )
+				return
+			}
+
+			// Gather all ui kit designs.
 			if ( design.uikit && newUiKits[ design.uikit ] ) {
 				newUiKits[ design.uikit ].count++
 			}
+
+			// Gather all block design categories.
 			design.categories.forEach( category => {
 				if ( category && newCategories[ category ] ) {
 					newCategories[ category ].count++
@@ -119,50 +166,47 @@ const BlockList = props => {
 
 		// Sort the categories so that the "All" is first.
 		if ( newCategories.all ) {
-			newCategories.all.count = props.designs.length
+			newCategories.all.count = props.designs.filter( design => ! isWireframe( design ) ).length
 			newCategories.all.label = '    ' // Spaces so we will be first when sorting.
 		}
 		const sorted = sortBy( Object.values( newCategories ), 'label' )
 		if ( sorted[ 0 ] ) {
 			sorted[ 0 ].label = __( 'All', i18n )
 		}
 		setCategoryList( sorted )
-	}, [ props.designs.length, JSON.stringify( uiKitList ), JSON.stringify( categoryList ) ] )
+
+		// Sort the wireframes so that the "All" is first.
+		if ( newWireframes.all ) {
+			newWireframes.all.count = props.designs.filter( isWireframe ).length
+			newWireframes.all.label = '    ' // Spaces so we will be first when sorting.
+		}
+		const sortedWireframes = sortBy( Object.values( newWireframes ), 'label' )
+		if ( sortedWireframes[ 0 ] ) {
+			sortedWireframes[ 0 ].label = __( 'All', i18n )
+		}
+		setWireframeList( sortedWireframes )
+	}, [ props.designs.length, JSON.stringify( uiKitList ), JSON.stringify( categoryList ), JSON.stringify( wireframeList ) ] )
 
 	useEffect( () => {
 		// If these are empty, then our component hasn't finished initializing.
-		if ( ! uiKitList.length || ! categoryList.length ) {
+		if ( ! uiKitList.length || ! categoryList.length || ! wireframeList.length ) {
 			return
 		}
 
 		setSelected( viewBy === 'uikit' ? uiKitList[ 0 ].id : 'all' )
 	}, [ viewBy ] )
 
 	useEffect( () => {
-		props.onSelect( { id: selected, type: viewBy } )
+		props.onSelect( selected )
 	}, [ selected ] )
 
+	const list = viewBy === 'uikit'
+		? uiKitList : viewBy === 'category'
+			? categoryList : wireframeList
+
 	return (
 		<ul className="ugb-block-list">
-			<AdvancedToolbarControl
-				controls={ [
-					{
-						value: 'uikit',
-						title: __( 'UI Kits', i18n ),
-					},
-					{
-						value: 'category',
-						title: __( 'Categories', i18n ),
-					},
-				] }
-				value={ viewBy }
-				onChange={ setViewBy }
-				isSmall={ true }
-				fullwidth={ false }
-				isToggleOnly={ true }
-				allowReset={ false }
-			/>
-			{ ( viewBy === 'uikit' ? uiKitList : categoryList ).reduce( ( list, itemData ) => {
+			{ list.reduce( ( list, itemData ) => {
 				const {
 					id,
 					label,

src/components/modal-design-library/editor.scss

@@ -186,3 +186,18 @@
 .stk-design-library__sidebar-item:focus {
 	outline: 1px dashed #777;
 }
+
+// Design library top tabs, switch between block categories, ui kit and wireframe.
+.stk-design-library-tabs .components-button {
+	height: 60px;
+	border: none !important;
+	border-left: 1px solid #ddd !important;
+	box-shadow: none !important;
+	padding: 0 24px;
+	background: transparent;
+	&:hover,
+	&.is-primary {
+		color: #f00069 !important;
+		background: rgba(229, 67, 118, 0.1) !important;
+	}
+}

src/components/modal-design-library/modal.js

@@ -33,7 +33,7 @@ export const ModalDesignLibrary = props => {
 	const [ isBusy, setIsBusy ] = useState( true )
 	const [ doReset, setDoReset ] = useState( false )
 	const [ selectedId, setSelectedId ] = useState( '' )
-	const [ selectedType, setSelectedType ] = useState( '' )
+	const [ selectedType, setSelectedType ] = useLocalStorage( 'stk__design_library__block-list__view_by', 'uikit' )
 	const [ isDevMode, setIsDevMode ] = useLocalStorage( 'stk__design_library_dev_mode', false )
 	// The sidebar designs are used to update the list of blocks in the sidebar.
 	const [ sidebarDesigns, setSidebarDesigns ] = useState( [] )
@@ -85,8 +85,8 @@ export const ModalDesignLibrary = props => {
 		getDesigns( {
 			apiVersion: props.apiVersion,
 			search: searchDebounced,
-			uikit: selectedType === 'uikit' ? selectedId : '',
-			categories: selectedType === 'category' && selectedId !== 'all' ? [ selectedId ] : [],
+			uikit: selectedType === 'wireframe' ? 'Wireframes' : ( selectedType === 'uikit' ? selectedId : '' ),
+			categories: [ 'category', 'wireframe' ].includes( selectedType ) && selectedId !== 'all' ? [ selectedId ] : [],
 		} ).then( designs => {
 			setDisplayDesigns( designs )
 		} ).finally( () => {
@@ -99,6 +99,28 @@ export const ModalDesignLibrary = props => {
 			title={ (
 				<>
 					{ __( 'Stackable Design Library', i18n ) }
+					<AdvancedToolbarControl
+						className="stk-design-library-tabs"
+						controls={ [
+							{
+								value: 'category',
+								title: __( 'Block Designs', i18n ),
+							},
+							{
+								value: 'uikit',
+								title: __( 'UI Kits', i18n ),
+							},
+							{
+								value: 'wireframe',
+								title: __( 'Wireframes', i18n ),
+							},
+						] }
+						value={ selectedType }
+						onChange={ setSelectedType }
+						fullwidth={ false }
+						isToggleOnly={ true }
+						allowReset={ false }
+					/>
 					{ props.hasVersionSwitcher && (
 						<AdvancedToolbarControl
 							controls={ [
@@ -138,12 +160,8 @@ export const ModalDesignLibrary = props => {
 						<BlockList
 							apiVersion={ props.apiVersion }
 							designs={ sidebarDesigns }
-							onSelect={ ( {
-								id, type,
-							} ) => {
-								setSelectedId( id )
-								setSelectedType( type )
-							} }
+							viewBy={ selectedType }
+							onSelect={ id => setSelectedId( id ) }
 						/>
 					</div>
 				</aside>
@@ -192,6 +210,7 @@ export const ModalDesignLibrary = props => {
 
 				<div className="ugb-modal-design-library__designs">
 					<DesignLibraryList
+						className={ `stk-design-library__item-${ selectedType }` }
 						columns={ columns }
 						onSelect={ props.onSelect }
 						isBusy={ isBusy }

src/design-library/init.php

@@ -38,6 +38,13 @@ public static function validate_string( $value, $request, $param ) {
 			return true;
 		}
 
+		public static function validate_boolean( $value, $request, $param ) {
+			if ( ! is_bool( $value ) ) {
+				return new WP_Error( 'invalid_param', sprintf( esc_html__( '%s must be a boolean.', STACKABLE_I18N ), $param ) );
+			}
+			return true;
+		}
+
 		/**
 		 * Register Rest API routes for the design library.
 		 */
@@ -79,7 +86,7 @@ public function register_route() {
 				},
 				'args' => array(
 					'devmode' => array(
-						'validate_callback' => 'is_boolean'
+						'validate_callback' => __CLASS__ . '::validate_boolean'
 					),
 				),
 			) );