Query block: Add layout support and rename previous layout prop t…

…o `displayLayout` (#31833)

lib/block-patterns.php

@@ -88,7 +88,7 @@ function register_gutenberg_patterns() {
 			'title'      => __( 'Grid', 'gutenberg' ),
 			'blockTypes' => array( 'core/query' ),
 			'categories' => array( 'query' ),
-			'content'    => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"layout":{"type":"flex","columns":3}} -->
+			'content'    => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
 							<div class="wp-block-query">
 							<!-- wp:query-loop -->
 							<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
@@ -139,7 +139,7 @@ function register_gutenberg_patterns() {
 			'content'    => '<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
 							<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
 							<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
-							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"layout":{"type":"list"}} -->
+							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
 							<div class="wp-block-query"><!-- wp:query-loop -->
 							<!-- wp:post-featured-image /-->
 							<!-- wp:post-title /-->
@@ -151,7 +151,7 @@ function register_gutenberg_patterns() {
 							<!-- /wp:query --></div>
 							<!-- /wp:column -->
 							<!-- wp:column {"width":"50%"} -->
-							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"layout":{"type":"list"}} -->
+							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
 							<div class="wp-block-query"><!-- wp:query-loop -->
 							<!-- wp:spacer {"height":200} -->
 							<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>

packages/block-library/package.json

@@ -28,7 +28,8 @@
 		"build-style/**",
 		"src/**/*.scss",
 		"src/navigation-link/index.js",
-		"src/template-part/index.js"
+		"src/template-part/index.js",
+		"src/query/index.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",

packages/block-library/src/query-loop/block.json

@@ -10,12 +10,13 @@
 		"queryId",
 		"query",
 		"queryContext",
-		"layout",
+		"displayLayout",
 		"templateSlug"
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"align": true
 	},
 	"style": "wp-block-query-loop",
 	"editorStyle": "wp-block-query-loop-editor"

packages/block-library/src/query-loop/edit.js

@@ -43,7 +43,7 @@ export default function QueryLoopEdit( {
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
-		layout: { type: layoutType = 'flex', columns = 1 } = {},
+		displayLayout: { type: layoutType = 'flex', columns = 1 } = {},
 	},
 } ) {
 	const [ { page } ] = queryContext;

packages/block-library/src/query-loop/editor.scss

@@ -1,5 +1,7 @@
-.wp-block.wp-block-query-loop {
-	padding-left: 0;
-	margin-left: 0;
-	list-style: none;
+.editor-styles-wrapper {
+	ul.wp-block-query-loop {
+		padding-left: 0;
+		margin-left: 0;
+		list-style: none;
+	}
 }

packages/block-library/src/query-loop/index.php

@@ -41,9 +41,9 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
 	}
 
 	$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']}";
+	if ( isset( $block->context['displayLayout'] ) && isset( $block->context['query'] ) ) {
+		if ( isset( $block->context['displayLayout']['type'] ) && 'flex' === $block->context['displayLayout']['type'] ) {
+			$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
 		}
 	}
 

packages/block-library/src/query-pagination/block.json

@@ -10,7 +10,11 @@
 	"supports": {
 		"align": true,
 		"reusable": false,
-		"html": false
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		}
 	},
 	"editorStyle": "wp-block-query-pagination-editor",
 	"style": "wp-block-query-pagination"

packages/block-library/src/query-pagination/edit.js

@@ -23,9 +23,5 @@ export default function QueryPaginationEdit() {
 		],
 		orientation: 'horizontal',
 	} );
-	return (
-		<div { ...blockProps }>
-			<div { ...innerBlocksProps } />
-		</div>
-	);
+	return <div { ...innerBlocksProps } />;
 }

packages/block-library/src/query/block.json

@@ -31,7 +31,7 @@
 			"type": "string",
 			"default": "div"
 		},
-		"layout": {
+		"displayLayout": {
 			"type": "object",
 			"default": {
 				"type": "list"
@@ -41,11 +41,16 @@
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",
-		"layout": "layout"
+		"displayLayout": "displayLayout"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"html": false
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-query-editor"
 }

packages/block-library/src/query/edit/index.js

@@ -8,6 +8,7 @@ import {
 	BlockControls,
 	InspectorAdvancedControls,
 	useBlockProps,
+	useSetting,
 	store as blockEditorStore,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	__experimentalBlockPatternSetup as BlockPatternSetup,
@@ -25,13 +26,37 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 
 const TEMPLATE = [ [ 'core/query-loop' ] ];
 export function QueryContent( { attributes, setAttributes } ) {
-	const { queryId, query, layout, tagName: TagName = 'div' } = attributes;
+	const {
+		queryId,
+		query,
+		displayLayout,
+		tagName: TagName = 'div',
+		layout = {},
+	} = attributes;
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
 	const instanceId = useInstanceId( QueryContent );
+	const { themeSupportsLayout } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return { themeSupportsLayout: getSettings()?.supportsLayout };
+	}, [] );
+	const defaultLayout = useSetting( 'layout' ) || {};
+	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const { contentSize, wideSize } = usedLayout;
+	const alignments =
+		contentSize || wideSize
+			? [ 'wide', 'full' ]
+			: [ 'left', 'center', 'right' ];
 	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		__experimentalLayout: {
+			type: 'default',
+			// Find a way to inject this in the support flag code (hooks).
+			alignments: themeSupportsLayout ? alignments : undefined,
+		},
+	} );
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return {
@@ -68,20 +93,22 @@ export function QueryContent( { attributes, setAttributes } ) {
 	}, [ queryId, instanceId ] );
 	const updateQuery = ( newQuery ) =>
 		setAttributes( { query: { ...query, ...newQuery } } );
-	const updateLayout = ( newLayout ) =>
-		setAttributes( { layout: { ...layout, ...newLayout } } );
+	const updateDisplayLayout = ( newDisplayLayout ) =>
+		setAttributes( {
+			displayLayout: { ...displayLayout, ...newDisplayLayout },
+		} );
 	return (
 		<>
 			<QueryInspectorControls
 				attributes={ attributes }
 				setQuery={ updateQuery }
-				setLayout={ updateLayout }
+				setDisplayLayout={ updateDisplayLayout }
 			/>
 			<BlockControls>
 				<QueryToolbar
 					attributes={ attributes }
 					setQuery={ updateQuery }
-					setLayout={ updateLayout }
+					setDisplayLayout={ updateDisplayLayout }
 				/>
 			</BlockControls>
 			<InspectorAdvancedControls>
@@ -99,9 +126,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 					}
 				/>
 			</InspectorAdvancedControls>
-			<TagName { ...blockProps }>
-				<div { ...innerBlocksProps } />
-			</TagName>
+			<TagName { ...innerBlocksProps } />
 		</>
 	);
 }

packages/block-library/src/query/edit/query-inspector-controls.js

@@ -6,7 +6,6 @@ import { debounce } from 'lodash';
 /**
  * WordPress dependencies
  */
-
 import {
 	PanelBody,
 	QueryControls,
@@ -20,13 +19,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { addQueryArgs } from '@wordpress/url';
-import {
-	useEffect,
-	useState,
-	useCallback,
-	createInterpolateElement,
-} from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -41,21 +34,6 @@ const stickyOptions = [
 	{ label: __( 'Only' ), value: 'only' },
 ];
 
-const CreateNewPostLink = ( { type } ) => {
-	const newPostUrl = addQueryArgs( 'post-new.php', {
-		post_type: type,
-	} );
-	return (
-		<div className="wp-block-query__create-new-link">
-			{ createInterpolateElement(
-				__( '<a>Create a new post</a> for this feed.' ),
-				// eslint-disable-next-line jsx-a11y/anchor-has-content
-				{ a: <a href={ newPostUrl } /> }
-			) }
-		</div>
-	);
-};
-
 // Helper function to get the term id based on user input in terms `FormTokenField`.
 const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
 	// First we check for exact match by `term.id` or case sensitive `term.name` match.
@@ -79,9 +57,9 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
 };
 
 export default function QueryInspectorControls( {
-	attributes: { query, layout },
+	attributes: { query, displayLayout },
 	setQuery,
-	setLayout,
+	setDisplayLayout,
 } ) {
 	const {
 		order,
@@ -198,7 +176,6 @@ export default function QueryInspectorControls( {
 
 	return (
 		<InspectorControls>
-			<CreateNewPostLink type={ postType } />
 			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
 					label={ __( 'Inherit query from URL' ) }
@@ -216,18 +193,18 @@ export default function QueryInspectorControls( {
 						onChange={ onPostTypeChange }
 					/>
 				) }
-				{ layout?.type === 'flex' && (
+				{ displayLayout?.type === 'flex' && (
 					<>
 						<RangeControl
 							label={ __( 'Columns' ) }
-							value={ layout.columns }
+							value={ displayLayout.columns }
 							onChange={ ( value ) =>
-								setLayout( { columns: value } )
+								setDisplayLayout( { columns: value } )
 							}
 							min={ 2 }
-							max={ Math.max( 6, layout.columns ) }
+							max={ Math.max( 6, displayLayout.columns ) }
 						/>
-						{ layout.columns > 6 && (
+						{ displayLayout.columns > 6 && (
 							<Notice status="warning" isDismissible={ false }>
 								{ __(
 									'This column count exceeds the recommended amount and may cause visual breakage.'

packages/block-library/src/query/edit/query-toolbar.js

@@ -13,27 +13,30 @@ import { __ } from '@wordpress/i18n';
 import { settings, list, grid } from '@wordpress/icons';
 
 export default function QueryToolbar( {
-	attributes: { query, layout },
+	attributes: { query, displayLayout },
 	setQuery,
-	setLayout,
+	setDisplayLayout,
 } ) {
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'
 	);
-	const layoutControls = [
+	const displayLayoutControls = [
 		{
 			icon: list,
 			title: __( 'List view' ),
-			onClick: () => setLayout( { type: 'list' } ),
-			isActive: layout?.type === 'list',
+			onClick: () => setDisplayLayout( { type: 'list' } ),
+			isActive: displayLayout?.type === 'list',
 		},
 		{
 			icon: grid,
 			title: __( 'Grid view' ),
 			onClick: () =>
-				setLayout( { type: 'flex', columns: layout?.columns || 3 } ),
-			isActive: layout?.type === 'flex',
+				setDisplayLayout( {
+					type: 'flex',
+					columns: displayLayout?.columns || 3,
+				} ),
+			isActive: displayLayout?.type === 'flex',
 		},
 	];
 	return (
@@ -108,7 +111,7 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
-			<ToolbarGroup controls={ layoutControls } />
+			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);
 }