From 0fe880b47d1f568ac72d1b4471797f3affe59655 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Fri, 20 Nov 2020 16:28:39 +0200
Subject: [PATCH] Query block grid view (#27067)

* rough implementation

* style with grid

Co-authored-by: Ari Stathopoulos <aristath@gmail.com>

* 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 <aristath@gmail.com>
---
 .../src/post-featured-image/style.scss        |   4 +
 .../block-library/src/query-loop/block.json   |   3 +-
 packages/block-library/src/query-loop/edit.js |  36 +++--
 .../block-library/src/query-loop/editor.scss  |   4 +-
 .../block-library/src/query-loop/index.php    |  18 ++-
 .../block-library/src/query-loop/style.scss   |  32 ++++
 packages/block-library/src/query/block.json   |   9 +-
 .../block-library/src/query/edit/index.js     |  17 ++-
 .../query/edit/query-inspector-controls.js    |  28 +++-
 .../src/query/edit/query-toolbar.js           | 140 ++++++++++--------
 packages/block-library/src/style.scss         |   1 +
 .../fixtures/blocks/core__query.json          |   3 +
 12 files changed, 216 insertions(+), 79 deletions(-)
 create mode 100644 packages/block-library/src/query-loop/style.scss

diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
index eaa2b5f4137330..1deddff9a9fec2 100644
--- 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
index 963afbe71c6300..5373403ea79a53 100644
--- 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
index a87b8b33ca13d1..a32ffd67410507 100644
--- 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
index 294eb615109be8..39a614277d58d7 100644
--- 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
index 5acc340bd66e23..d1aef57b1cb66f 100644
--- 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
new file mode 100644
index 00000000000000..40413f4041a27d
--- /dev/null
+++ 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
index f01c6b66081e35..7477e03d6f8485 100644
--- 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
index 40b9cc4ab755d1..45be4c7f88537c 100644
--- 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
index a558884ca1f917..0be60543a65122 100644
--- 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 } ) }
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index d4c5539df653f1..dd079aa1a81103 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -10,66 +10,88 @@ import {
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { settings } from '@wordpress/icons';
+import { settings, list, grid } from '@wordpress/icons';
 
-export default function QueryToolbar( { query, setQuery } ) {
+export default function QueryToolbar( {
+	attributes: { query, layout },
+	setQuery,
+	setLayout,
+} ) {
+	const layoutControls = [
+		{
+			icon: list,
+			title: __( 'List view' ),
+			onClick: () => setLayout( { type: 'list' } ),
+			isActive: layout?.type === 'list',
+		},
+		{
+			icon: grid,
+			title: __( 'Grid view' ),
+			onClick: () =>
+				setLayout( { type: 'flex', columns: layout?.columns || 3 } ),
+			isActive: layout?.type === 'flex',
+		},
+	];
 	return (
-		<ToolbarGroup>
-			<Dropdown
-				contentClassName="block-library-query-toolbar__popover"
-				renderToggle={ ( { onToggle } ) => (
-					<ToolbarButton
-						icon={ settings }
-						label={ __( 'Display settings' ) }
-						onClick={ onToggle }
-					/>
-				) }
-				renderContent={ () => (
-					<>
-						<BaseControl>
-							<NumberControl
-								__unstableInputWidth="60px"
-								label={ __( 'Items per Page' ) }
-								labelPosition="edge"
-								min={ 1 }
-								max={ 100 }
-								onChange={ ( value ) =>
-									setQuery( { perPage: +value ?? -1 } )
-								}
-								step="1"
-								value={ query.perPage }
-								isDragEnabled={ false }
-							/>
-						</BaseControl>
-						<BaseControl>
-							<NumberControl
-								__unstableInputWidth="60px"
-								label={ __( 'Offset' ) }
-								labelPosition="edge"
-								min={ 0 }
-								max={ 100 }
-								onChange={ ( value ) =>
-									setQuery( { offset: +value } )
-								}
-								step="1"
-								value={ query.offset }
-								isDragEnabled={ false }
-							/>
-						</BaseControl>
-						<BaseControl>
-							<RangeControl
-								label={ __( 'Number of Pages' ) }
-								min={ 1 }
-								allowReset
-								value={ query.pages }
-								onChange={ ( value ) =>
-									setQuery( { pages: value ?? -1 } )
-								}
-							/>
-						</BaseControl>
-					</>
-				) }
-			/>
-		</ToolbarGroup>
+		<>
+			<ToolbarGroup>
+				<Dropdown
+					contentClassName="block-library-query-toolbar__popover"
+					renderToggle={ ( { onToggle } ) => (
+						<ToolbarButton
+							icon={ settings }
+							label={ __( 'Display settings' ) }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ () => (
+						<>
+							<BaseControl>
+								<NumberControl
+									__unstableInputWidth="60px"
+									label={ __( 'Items per Page' ) }
+									labelPosition="edge"
+									min={ 1 }
+									max={ 100 }
+									onChange={ ( value ) =>
+										setQuery( { perPage: +value ?? -1 } )
+									}
+									step="1"
+									value={ query.perPage }
+									isDragEnabled={ false }
+								/>
+							</BaseControl>
+							<BaseControl>
+								<NumberControl
+									__unstableInputWidth="60px"
+									label={ __( 'Offset' ) }
+									labelPosition="edge"
+									min={ 0 }
+									max={ 100 }
+									onChange={ ( value ) =>
+										setQuery( { offset: +value } )
+									}
+									step="1"
+									value={ query.offset }
+									isDragEnabled={ false }
+								/>
+							</BaseControl>
+							<BaseControl>
+								<RangeControl
+									label={ __( 'Number of Pages' ) }
+									min={ 1 }
+									allowReset
+									value={ query.pages }
+									onChange={ ( value ) =>
+										setQuery( { pages: value ?? -1 } )
+									}
+								/>
+							</BaseControl>
+						</>
+					) }
+				/>
+			</ToolbarGroup>
+			<ToolbarGroup controls={ layoutControls } />
+		</>
 	);
 }
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 899f51a4b688a4..eeafa5502873c3 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -26,6 +26,7 @@
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
 @import "./pullquote/style.scss";
+@import "./query-loop/style.scss";
 @import "./quote/style.scss";
 @import "./rss/style.scss";
 @import "./search/style.scss";
diff --git a/packages/e2e-tests/fixtures/blocks/core__query.json b/packages/e2e-tests/fixtures/blocks/core__query.json
index 3e90d6a3f9c0f9..235fcefff51e21 100644
--- a/packages/e2e-tests/fixtures/blocks/core__query.json
+++ b/packages/e2e-tests/fixtures/blocks/core__query.json
@@ -17,6 +17,9 @@
                 "search": "",
                 "exclude": [],
                 "sticky": ""
+            },
+            "layout": {
+                "type": "list"
             }
         },
         "innerBlocks": [],