Query block grid view (#27067)

* rough implementation * style with grid Co-authored-by: Ari Stathopoulos <[email protected]> * revert to flex * toolbar controls * polish grid view + change to <ul> * regenerate fixtures for query+loop * fix php lint * wrap contents in render callback Co-authored-by: Ari Stathopoulos <[email protected]>
WordPress · Nov 20, 2020 · 0fe880b · 0fe880b
1 parent 3dff67a
commit 0fe880b
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 79 deletions.
diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
@@ -2,4 +2,8 @@
 	a {
 		display: inline-block;
 	}
+	img {
+		max-width: 100%;
+		height: auto;
+	}
 }
diff --git a/packages/block-library/src/query-loop/block.json b/packages/block-library/src/query-loop/block.json
@@ -5,7 +5,8 @@
 	"usesContext": [
 		"queryId",
 		"query",
-		"queryContext"
+		"queryContext",
+		"layout"
 	],
 	"supports": {
 		"reusable": false,

diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -38,6 +43,7 @@ export default function QueryLoopEdit( {
 			sticky,
 		} = {},
 		queryContext,
+		layout: { type: layoutType = 'flex', columns = 1 } = {},
 	},
 } ) {
 	const [ { page } ] = useQueryContext() || queryContext || [ {} ];
@@ -102,7 +108,13 @@ export default function QueryLoopEdit( {
 			} ) ),
 		[ posts ]
 	);
-	const blockProps = useBlockProps();
+	const hasLayoutFlex = layoutType === 'flex' && columns > 1;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			'is-flex-container': hasLayoutFlex,
+			[ `columns-${ columns }` ]: hasLayoutFlex,
+		} ),
+	} );
 	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
 
 	if ( ! posts ) {
@@ -114,7 +126,7 @@ export default function QueryLoopEdit( {
 	}
 
 	return (
-		<div { ...blockProps }>
+		<ul { ...blockProps }>
 			{ blockContexts &&
 				blockContexts.map( ( blockContext ) => (
 					<BlockContextProvider
@@ -123,18 +135,20 @@ export default function QueryLoopEdit( {
 					>
 						{ blockContext ===
 						( activeBlockContext || blockContexts[ 0 ] ) ? (
-							<div { ...innerBlocksProps } />
+							<li { ...innerBlocksProps } />
 						) : (
-							<BlockPreview
-								blocks={ blocks }
-								__experimentalLive
-								__experimentalOnClick={ () =>
-									setActiveBlockContext( blockContext )
-								}
-							/>
+							<li>
+								<BlockPreview
+									blocks={ blocks }
+									__experimentalLive
+									__experimentalOnClick={ () =>
+										setActiveBlockContext( blockContext )
+									}
+								/>
+							</li>
 						) }
 					</BlockContextProvider>
 				) ) }
-		</div>
+		</ul>
 	);
 }
diff --git a/packages/block-library/src/query-loop/editor.scss b/packages/block-library/src/query-loop/editor.scss
@@ -1,3 +1,5 @@
-.editor-styles-wrapper .wp-block.wp-block-query-loop {
+.wp-block.wp-block-query-loop {
 	max-width: 100%;
+	padding-left: 0;
+	list-style: none;
 }
diff --git a/packages/block-library/src/query-loop/index.php b/packages/block-library/src/query-loop/index.php
@@ -69,9 +69,18 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
 
 	$posts = get_posts( $query );
 
+	$classnames = '';
+	if ( isset( $block->context['layout'] ) && isset( $block->context['query'] ) ) {
+		if ( isset( $block->context['layout']['type'] ) && 'flex' === $block->context['layout']['type'] ) {
+			$classnames = "is-flex-container columns-{$block->context['layout']['columns']}";
+		}
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+
 	$content = '';
 	foreach ( $posts as $post ) {
-		$content .= (
+		$block_content = (
 			new WP_Block(
 				$block->parsed_block,
 				array(
@@ -80,8 +89,13 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
 				)
 			)
 		)->render( array( 'dynamic' => false ) );
+		$content .= "<li>{$block_content}</li>";
 	}
-	return $content;
+	return sprintf(
+		'<ul %1$s>%2$s</ul>',
+		$wrapper_attributes,
+		$content
+	);
 }
 
 /**

diff --git a/packages/block-library/src/query-loop/style.scss b/packages/block-library/src/query-loop/style.scss
@@ -0,0 +1,32 @@
+.wp-block-query-loop {
+	max-width: 100%;
+	list-style: none;
+	padding: 0;
+
+	li {
+		clear: both;
+	}
+
+	&.is-flex-container {
+		flex-direction: row;
+		display: flex;
+		flex-wrap: wrap;
+
+		li {
+			margin: 0 1.25em 1.25em 0;
+			width: 100%;
+		}
+
+		@include break-small {
+			@for $i from 2 through 6 {
+				&.is-flex-container.columns-#{ $i } > li {
+					width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
+
+					&:nth-child( #{ $i }n ) {
+						margin-right: 0;
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
@@ -22,11 +22,18 @@
 				"exclude": [],
 				"sticky": ""
 			}
+		},
+		"layout": {
+			"type": "object",
+			"default": {
+				"type": "list"
+			}
 		}
 	},
 	"providesContext": {
 		"queryId": "queryId",
-		"query": "query"
+		"query": "query",
+		"layout": "layout"
 	},
 	"usesContext": [
 		"postId"

diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
@@ -21,10 +21,11 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 
 const TEMPLATE = [ [ 'core/query-loop' ] ];
 export function QueryContent( {
-	attributes: { queryId, query },
+	attributes,
 	context: { postId },
 	setAttributes,
 } ) {
+	const { queryId, query, layout } = attributes;
 	const instanceId = useInstanceId( QueryContent );
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
@@ -59,11 +60,21 @@ export function QueryContent( {
 	}, [ queryId, instanceId ] );
 	const updateQuery = ( newQuery ) =>
 		setAttributes( { query: { ...query, ...newQuery } } );
+	const updateLayout = ( newLayout ) =>
+		setAttributes( { layout: { ...layout, ...newLayout } } );
 	return (
 		<>
-			<QueryInspectorControls query={ query } setQuery={ updateQuery } />
+			<QueryInspectorControls
+				attributes={ attributes }
+				setQuery={ updateQuery }
+				setLayout={ updateLayout }
+			/>
 			<BlockControls>
-				<QueryToolbar query={ query } setQuery={ updateQuery } />
+				<QueryToolbar
+					attributes={ attributes }
+					setQuery={ updateQuery }
+					setLayout={ updateLayout }
+				/>
 			</BlockControls>
 			<div { ...blockProps }>
 				<QueryProvider>

diff --git a/packages/block-library/src/query/edit/query-inspector-controls.js b/packages/block-library/src/query/edit/query-inspector-controls.js
@@ -13,6 +13,8 @@ import {
 	TextControl,
 	FormTokenField,
 	SelectControl,
+	RangeControl,
+	Notice,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -31,7 +33,11 @@ const stickyOptions = [
 	{ label: __( 'Only' ), value: 'only' },
 ];
 
-export default function QueryInspectorControls( { query, setQuery } ) {
+export default function QueryInspectorControls( {
+	attributes: { query, layout },
+	setQuery,
+	setLayout,
+} ) {
 	const {
 		order,
 		orderBy,
@@ -139,6 +145,26 @@ export default function QueryInspectorControls( { query, setQuery } ) {
 					label={ __( 'Post Type' ) }
 					onChange={ onPostTypeChange }
 				/>
+				{ layout?.type === 'flex' && (
+					<>
+						<RangeControl
+							label={ __( 'Columns' ) }
+							value={ layout.columns }
+							onChange={ ( value ) =>
+								setLayout( { columns: value } )
+							}
+							min={ 2 }
+							max={ Math.max( 6, layout.columns ) }
+						/>
+						{ layout.columns > 6 && (
+							<Notice status="warning" isDismissible={ false }>
+								{ __(
+									'This column count exceeds the recommended amount and may cause visual breakage.'
+								) }
+							</Notice>
+						) }
+					</>
+				) }
 				<QueryControls
 					{ ...{ order, orderBy } }
 					onOrderChange={ ( value ) => setQuery( { order: value } ) }