@wordpress/block-library 7.1.1 → 7.3.1

package/src/query/edit/index.js

@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { cloneBlock } from '@wordpress/blocks';
+import { store as blocksStore, cloneBlock } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorControls,
@@ -12,9 +12,15 @@ import {
 	useSetting,
 	store as blockEditorStore,
 	useInnerBlocksProps,
+	__experimentalGetMatchingVariation as getMatchingVariation,
 	__experimentalBlockPatternSetup as BlockPatternSetup,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
+import {
+	Button,
+	SelectControl,
+	Placeholder,
+	Modal,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -27,7 +33,11 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 import { getFirstQueryClientIdFromBlocks } from '../utils';
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
-export function QueryContent( { attributes, setAttributes } ) {
+export function QueryContent( {
+	attributes,
+	setAttributes,
+	openPatternSelectionModal,
+} ) {
 	const {
 		queryId,
 		query,
@@ -102,6 +112,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
+					openPatternSelectionModal={ openPatternSelectionModal }
 				/>
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
@@ -124,43 +135,131 @@ export function QueryContent( { attributes, setAttributes } ) {
 	);
 }
 
-function QueryPatternSetup( props ) {
-	const { clientId, name: blockName } = props;
+function QueryPatternSetup( {
+	attributes,
+	clientId,
+	name,
+	openPatternSelectionModal,
+	setAttributes,
+} ) {
+	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
-	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
-	const onBlockPatternSelect = ( blocks ) => {
-		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
-			clonedBlocks
+
+	const { blockType, allVariations, hasPatterns } = useSelect(
+		( select ) => {
+			const { getBlockVariations, getBlockType } = select( blocksStore );
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				blockType: getBlockType( name ),
+				allVariations: getBlockVariations( name ),
+				hasPatterns: !! __experimentalGetPatternsByBlockTypes(
+					name,
+					rootClientId
+				).length,
+			};
+		},
+		[ name, clientId ]
+	);
+
+	const matchingVariation = getMatchingVariation( attributes, allVariations );
+	const icon = matchingVariation?.icon || blockType?.icon?.src;
+	const label = matchingVariation?.title || blockType?.title;
+	if ( isStartingBlank ) {
+		return (
+			<QueryPlaceholder
+				clientId={ clientId }
+				name={ name }
+				setAttributes={ setAttributes }
+				icon={ icon }
+				label={ label }
+			/>
 		);
-		replaceBlock( clientId, clonedBlocks );
-		if ( firstQueryClientId ) {
-			selectBlock( firstQueryClientId );
-		}
-	};
-	// `startBlankComponent` is what to render when clicking `Start blank`
-	// or if no matched patterns are found.
+	}
 	return (
 		<div { ...blockProps }>
-			<BlockPatternSetup
-				blockName={ blockName }
-				clientId={ clientId }
-				startBlankComponent={ <QueryPlaceholder { ...props } /> }
-				onBlockPatternSelect={ onBlockPatternSelect }
-			/>
+			<Placeholder
+				icon={ icon }
+				label={ label }
+				instructions={ __(
+					'Choose a pattern for the query loop or start blank.'
+				) }
+			>
+				{ !! hasPatterns && (
+					<Button
+						variant="primary"
+						onClick={ openPatternSelectionModal }
+					>
+						{ __( 'Choose' ) }
+					</Button>
+				) }
+
+				<Button
+					variant="secondary"
+					onClick={ () => {
+						setIsStartingBlank( true );
+					} }
+				>
+					{ __( 'Start blank' ) }
+				</Button>
+			</Placeholder>
 		</div>
 	);
 }
 
 const QueryEdit = ( props ) => {
-	const { clientId } = props;
+	const { clientId, name } = props;
+	const [
+		isPatternSelectionModalOpen,
+		setIsPatternSelectionModalOpen,
+	] = useState( false );
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const hasInnerBlocks = useSelect(
 		( select ) =>
 			!! select( blockEditorStore ).getBlocks( clientId ).length,
 		[ clientId ]
 	);
 	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
-	return <Component { ...props } />;
+	const onBlockPatternSelect = ( blocks ) => {
+		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
+		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
+			clonedBlocks
+		);
+		replaceBlock( clientId, clonedBlocks );
+		if ( firstQueryClientId ) {
+			selectBlock( firstQueryClientId );
+		}
+	};
+	return (
+		<>
+			<Component
+				{ ...props }
+				openPatternSelectionModal={ () =>
+					setIsPatternSelectionModalOpen( true )
+				}
+			/>
+			{ isPatternSelectionModalOpen && (
+				<Modal
+					className="block-editor-query-pattern__selection-modal"
+					title={ __( 'Choose a pattern' ) }
+					closeLabel={ __( 'Cancel' ) }
+					onRequestClose={ () =>
+						setIsPatternSelectionModalOpen( false )
+					}
+				>
+					<BlockPatternSetup
+						blockName={ name }
+						clientId={ clientId }
+						onBlockPatternSelect={ onBlockPatternSelect }
+					/>
+				</Modal>
+			) }
+		</>
+	);
 };
 
 export default QueryEdit;

package/src/query/edit/query-placeholder.js

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	useBlockProps,
 	__experimentalBlockVariationPicker,
-	__experimentalGetMatchingVariation as getMatchingVariation,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
@@ -13,13 +12,8 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 
-const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
-	const {
-		blockType,
-		defaultVariation,
-		scopeVariations,
-		allVariations,
-	} = useSelect(
+function QueryPlaceholder( { clientId, name, setAttributes, icon, label } ) {
+	const { defaultVariation, scopeVariations } = useSelect(
 		( select ) => {
 			const {
 				getBlockVariations,
@@ -31,16 +25,12 @@ const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
 				blockType: getBlockType( name ),
 				defaultVariation: getDefaultBlockVariation( name, 'block' ),
 				scopeVariations: getBlockVariations( name, 'block' ),
-				allVariations: getBlockVariations( name ),
 			};
 		},
 		[ name ]
 	);
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const blockProps = useBlockProps();
-	const matchingVariation = getMatchingVariation( attributes, allVariations );
-	const icon = matchingVariation?.icon || blockType?.icon?.src;
-	const label = matchingVariation?.title || blockType?.title;
 	return (
 		<div { ...blockProps }>
 			<__experimentalBlockVariationPicker
@@ -64,6 +54,6 @@ const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
 			/>
 		</div>
 	);
-};
+}
 
 export default QueryPlaceholder;

package/src/query/edit/query-toolbar.js

@@ -16,6 +16,7 @@ export default function QueryToolbar( {
 	attributes: { query, displayLayout },
 	setQuery,
 	setDisplayLayout,
+	openPatternSelectionModal,
 } ) {
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
@@ -128,6 +129,11 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
+			<ToolbarGroup className="wp-block-template-part__block-control-group">
+				<ToolbarButton onClick={ openPatternSelectionModal }>
+					{ __( 'Replace' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
 			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);

package/src/query/editor.scss

@@ -5,3 +5,41 @@
 .wp-block-query__create-new-link {
 	padding: 0 $grid-unit-20 $grid-unit-20 56px;
 }
+
+.block-library-query__pattern-selection-content .block-editor-block-patterns-list {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-gap: $grid-unit-10;
+
+	.block-editor-block-patterns-list__list-item {
+		margin-bottom: 0;
+		.block-editor-block-preview__container {
+			max-height: 250px;
+		}
+	}
+}
+
+.block-editor-query-pattern__selection-modal .components-modal__content {
+	overflow: hidden;
+	padding: 0;
+	&::before {
+		margin-bottom: 0;
+	}
+}
+
+.block-editor-query-pattern__selection-modal {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: $break-medium - $grid-unit-20 * 2;
+	}
+	@include break-large() {
+		height: 80%;
+		width: 80%;
+		max-height: none;
+	}
+}

package/src/query/variations.js

@@ -66,6 +66,7 @@ const variations = [
 				[ [ 'core/post-title' ], [ 'core/post-date' ] ],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -81,6 +82,7 @@ const variations = [
 				[ [ 'core/post-title' ], [ 'core/post-excerpt' ] ],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -100,6 +102,7 @@ const variations = [
 				],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -119,6 +122,7 @@ const variations = [
 				],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},

package/src/query-no-results/block.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/query-no-results",
+	"title": "No results",
+	"category": "theme",
+	"description": "Contains the block elements used to render content when no query results are found.",
+	"parent": [ "core/query" ],
+	"textdomain": "default",
+	"usesContext": [ "queryId", "query" ],
+	"supports": {
+		"align": true,
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		}
+	}
+}

package/src/query-no-results/edit.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __(
+				'Add a text or blocks that will display when the query returns no results.'
+			),
+		},
+	],
+];
+
+export default function QueryNoResultsEdit() {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+	return (
+		<>
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/query-no-results/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { loop as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};

package/src/query-no-results/index.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * Server-side rendering of the `core/query-no-results` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/query-no-results` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the wrapper for the no results block.
+ */
+function render_block_core_query_no_results( $attributes, $content, $block ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	$page_key   = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$page       = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$query_args = build_query_vars_from_query_block( $block, $page );
+	// Override the custom query with the global query if needed.
+	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
+	if ( $use_global_query ) {
+		global $wp_query;
+		if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
+			$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
+		}
+	}
+	$query = new WP_Query( $query_args );
+
+	if ( $query->have_posts() ) {
+		return '';
+	}
+
+	wp_reset_postdata();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
+/**
+ * Registers the `core/query-no-results` block on the server.
+ */
+function register_block_core_query_no_results() {
+	register_block_type_from_metadata(
+		__DIR__ . '/query-no-results',
+		array(
+			'render_callback' => 'render_block_core_query_no_results',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_query_no_results' );

package/src/query-no-results/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function QueryNoResultsSave() {
+	return <InnerBlocks.Content />;
+}

package/src/query-pagination/edit.js

@@ -76,7 +76,7 @@ export default function QueryPaginationEdit( {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			<div { ...innerBlocksProps } />
+			<nav { ...innerBlocksProps } />
 		</>
 	);
 }

package/src/query-pagination/index.php

@@ -18,9 +18,16 @@ function render_block_core_query_pagination( $attributes, $content ) {
 		return '';
 	}
 
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'role'       => 'navigation',
+			'aria-label' => __( 'Pagination' ),
+		)
+	);
+
 	return sprintf(
-		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(),
+		'<nav %1$s>%2$s</nav>',
+		$wrapper_attributes,
 		$content
 	);
 }

package/src/query-pagination-numbers/block.json

@@ -10,7 +10,25 @@
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "query-pagination-numbers-editor"
 }

package/src/quote/block.json

@@ -41,6 +41,14 @@
 				"fontSize": true,
 				"fontAppearance": true
 			}
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		}
 	},
 	"styles": [

package/src/quote/index.js

@@ -12,12 +12,13 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import settingsV2 from './v2';
 
 const { name } = metadata;
 
 export { metadata, name };
 
-export const settings = {
+export const settingsV1 = {
 	icon,
 	example: {
 		attributes: {
@@ -51,3 +52,7 @@ export const settings = {
 	},
 	deprecated,
 };
+
+export const settings = window?.__experimentalEnableQuoteBlockV2
+	? settingsV2
+	: settingsV1;

package/src/quote/style.scss

@@ -1,4 +1,5 @@
 .wp-block-quote {
+	box-sizing: border-box;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	// .is-style-large and .is-large are kept for backwards compatibility. The :not pseudo-class is used to enable switching styles. See PR #37580.
 	&.is-style-large:not(.is-style-plain),

package/src/quote/v2/deprecated.js

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import deprecationsForV1Block from '../deprecated';
+
+export const migrateToQuoteV2 = ( attributes ) => {
+	const { value } = attributes;
+
+	return [
+		{
+			...omit( attributes, [ 'value' ] ),
+		},
+		value
+			? parseWithAttributeSchema( value, {
+					type: 'array',
+					source: 'query',
+					selector: 'p',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+					},
+			  } ).map( ( { content } ) =>
+					createBlock( 'core/paragraph', { content } )
+			  )
+			: createBlock( 'core/paragraph' ),
+	];
+};
+
+const v3 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		align: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		__experimentalSlashInserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { align, value, citation } = attributes;
+
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateToQuoteV2,
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v3, ...deprecationsForV1Block ];