@wordpress/block-library 7.10.0 → 7.12.2-next.d6164808d3.0

package/src/query/utils.js

@@ -10,6 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { cloneBlock } from '@wordpress/blocks';
 
 /**
  * @typedef IHasNameAndId
@@ -127,21 +128,42 @@ export const useTaxonomies = ( postType ) => {
 };
 
 /**
- * Recurses over a list of blocks and returns the first found
- * Query Loop block's clientId.
+ * Clones a pattern's blocks and then recurses over that list of blocks,
+ * transforming them to retain some `query` attribute properties.
+ * For now we retain the `postType` and `inherit` properties as they are
+ * fundamental for the expected functionality of the block and don't affect
+ * its design and presentation.
  *
- * @param {WPBlock[]} blocks The list of blocks to look through.
- * @return {string=} The first found Query Loop's clientId.
+ * Returns the cloned/transformed blocks and array of existing Query Loop
+ * client ids for further manipulation, in order to avoid multiple recursions.
+ *
+ * @param {WPBlock[]}        blocks               The list of blocks to look through and transform(mutate).
+ * @param {Record<string,*>} queryBlockAttributes The existing Query Loop's attributes.
+ * @return {{ newBlocks: WPBlock[], queryClientIds: string[] }} An object with the cloned/transformed blocks and all the Query Loop clients from these blocks.
  */
-export const getFirstQueryClientIdFromBlocks = ( blocks ) => {
-	const blocksQueue = [ ...blocks ];
+export const getTransformedBlocksFromPattern = (
+	blocks,
+	queryBlockAttributes
+) => {
+	const {
+		query: { postType, inherit },
+	} = queryBlockAttributes;
+	const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
+	const queryClientIds = [];
+	const blocksQueue = [ ...clonedBlocks ];
 	while ( blocksQueue.length > 0 ) {
 		const block = blocksQueue.shift();
 		if ( block.name === 'core/query' ) {
-			return block.clientId;
+			block.attributes.query = {
+				...block.attributes.query,
+				postType,
+				inherit,
+			};
+			queryClientIds.push( block.clientId );
 		}
 		block.innerBlocks?.forEach( ( innerBlock ) => {
 			blocksQueue.push( innerBlock );
 		} );
 	}
+	return { newBlocks: clonedBlocks, queryClientIds };
 };

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

@@ -9,7 +9,7 @@ const TEMPLATE = [
 		'core/paragraph',
 		{
 			placeholder: __(
-				'Add text or blocks that will display when the query returns no results.'
+				'Add text or blocks that will display when a query returns no results.'
 			),
 		},
 	],
@@ -20,9 +20,6 @@ export default function QueryNoResultsEdit() {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
-	return (
-		<>
-			<div { ...innerBlocksProps } />
-		</>
-	);
+
+	return <div { ...innerBlocksProps } />;
 }

package/src/query-pagination/style.scss

@@ -13,6 +13,20 @@ $pagination-margin: 0.5em;
 			margin-right: 0;
 		}
 	}
+
+	// This moves the next link to the right side of the container,
+	// which is important when it's the only block displayed
+	// and the block has a "space-between" justification.
+	&.is-content-justification-space-between {
+		> .wp-block-query-pagination-next:last-child {
+			margin-inline-start: auto;
+		}
+		> .wp-block-query-pagination-previous:first-child {
+			margin-inline-end: auto;
+		}
+	}
+
+
 	.wp-block-query-pagination-previous-arrow {
 		margin-right: 1ch;
 		display: inline-block; // Needed so that the transform works.

package/src/query-pagination-next/edit.js

@@ -35,6 +35,7 @@ export default function QueryPaginationNextEdit( {
 			{ displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
+					aria-hidden={ true }
 				>
 					{ displayArrow }
 				</span>

package/src/query-pagination-previous/edit.js

@@ -25,6 +25,7 @@ export default function QueryPaginationPreviousEdit( {
 			{ displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-previous-arrow is-arrow-${ paginationArrow }` }
+					aria-hidden={ true }
 				>
 					{ displayArrow }
 				</span>

package/src/query-title/block.json

@@ -16,6 +16,14 @@
 		"level": {
 			"type": "number",
 			"default": 1
+		},
+		"showPrefix": {
+			"type": "boolean",
+			"default": true
+		},
+		"showSearchTerm": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {
@@ -29,7 +37,8 @@
 			}
 		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
@@ -46,5 +55,5 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-query-title-editor"
+	"style": "wp-block-query-title"
 }

package/src/query-title/edit.js

@@ -9,9 +9,11 @@ import classnames from 'classnames';
 import {
 	AlignmentControl,
 	BlockControls,
+	InspectorControls,
 	useBlockProps,
 	Warning,
 } from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,21 +21,19 @@ import { __ } from '@wordpress/i18n';
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 
-const SUPPORTED_TYPES = [ 'archive' ];
+const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign },
+	attributes: { type, level, textAlign, showPrefix, showSearchTerm },
 	setAttributes,
 } ) {
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( 'wp-block-query-title__placeholder', {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-query-title__placeholder': type === 'archive',
 		} ),
 	} );
-	// The plan is to augment this block with more
-	// block variations like `Search Title`.
+
 	if ( ! SUPPORTED_TYPES.includes( type ) ) {
 		return (
 			<div { ...blockProps }>
@@ -45,9 +45,53 @@ export default function QueryTitleEdit( {
 	let titleElement;
 	if ( type === 'archive' ) {
 		titleElement = (
-			<TagName { ...blockProps }>{ __( 'Archive title' ) }</TagName>
+			<>
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<ToggleControl
+							label={ __( 'Show archive type in title' ) }
+							onChange={ () =>
+								setAttributes( { showPrefix: ! showPrefix } )
+							}
+							checked={ showPrefix }
+						/>
+					</PanelBody>
+				</InspectorControls>
+				<TagName { ...blockProps }>
+					{ showPrefix
+						? __( 'Archive type: Name' )
+						: __( 'Archive title' ) }
+				</TagName>
+			</>
 		);
 	}
+
+	if ( type === 'search' ) {
+		titleElement = (
+			<>
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<ToggleControl
+							label={ __( 'Show search term in title' ) }
+							onChange={ () =>
+								setAttributes( {
+									showSearchTerm: ! showSearchTerm,
+								} )
+							}
+							checked={ showSearchTerm }
+						/>
+					</PanelBody>
+				</InspectorControls>
+
+				<TagName { ...blockProps }>
+					{ showSearchTerm
+						? __( 'Search results for: "search term"' )
+						: __( 'Search results' ) }
+				</TagName>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<BlockControls group="block">

package/src/query-title/index.php

@@ -17,13 +17,39 @@
 function render_block_core_query_title( $attributes ) {
 	$type       = isset( $attributes['type'] ) ? $attributes['type'] : null;
 	$is_archive = is_archive();
-	if ( ! $type || ( 'archive' === $type && ! $is_archive ) ) {
+	$is_search  = is_search();
+	if ( ! $type ||
+		( 'archive' === $type && ! $is_archive ) ||
+		( 'search' === $type && ! $is_search )
+		) {
 		return '';
 	}
 	$title = '';
 	if ( $is_archive ) {
-		$title = get_the_archive_title();
+		$show_prefix = isset( $attributes['showPrefix'] ) ? $attributes['showPrefix'] : true;
+		if ( ! $show_prefix ) {
+			$filter_title = function( $title, $original_title ) {
+				return $original_title;
+			};
+			add_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			$title = get_the_archive_title();
+			remove_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+		} else {
+			$title = get_the_archive_title();
+		}
 	}
+	if ( $is_search ) {
+		$title = __( 'Search results' );
+
+		if ( isset( $attributes['showSearchTerm'] ) && $attributes['showSearchTerm'] ) {
+			$title = sprintf(
+				/* translators: %s is the search term. */
+				__( 'Search results for: "%s"' ),
+				get_search_query()
+			);
+		}
+	}
+
 	$tag_name           = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h1';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );

package/src/query-title/style.scss

@@ -0,0 +1,4 @@
+.wp-block-query-title {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/query-title/variations.js

@@ -17,6 +17,19 @@ const variations = [
 		},
 		scope: [ 'inserter' ],
 	},
+	{
+		isDefault: false,
+		name: 'search-title',
+		title: __( 'Search Results Title' ),
+		description: __(
+			'Display the search results title based on the queried object.'
+		),
+		icon: title,
+		attributes: {
+			type: 'search',
+		},
+		scope: [ 'inserter' ],
+	},
 ];
 
 /**

package/src/quote/deprecated.js

@@ -1,127 +1,242 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-
-const blockAttributes = {
-	value: {
-		type: 'string',
-		source: 'html',
-		selector: 'blockquote',
-		multiline: 'p',
-		default: '',
-	},
-	citation: {
-		type: 'string',
-		source: 'html',
-		selector: 'cite',
-		default: '',
-	},
-	align: {
-		type: 'string',
-	},
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export const migrateToQuoteV2 = ( attributes ) => {
+	const { value, ...restAttributes } = attributes;
+
+	return [
+		{
+			...restAttributes,
+		},
+		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 deprecated = [
-	{
-		attributes: blockAttributes,
-		save( { attributes } ) {
-			const { align, value, citation } = attributes;
-
-			return (
-				<blockquote style={ { textAlign: align ? align : null } }>
-					<RichText.Content multiline value={ value } />
-					{ ! RichText.isEmpty( citation ) && (
-						<RichText.Content tagName="cite" value={ citation } />
-					) }
-				</blockquote>
-			);
+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',
 		},
 	},
-	{
-		attributes: {
-			...blockAttributes,
-			style: {
-				type: 'number',
-				default: 1,
+	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,
+		} );
 
-		migrate( attributes ) {
-			if ( attributes.style === 2 ) {
-				return {
-					...omit( attributes, [ 'style' ] ),
-					className: attributes.className
-						? attributes.className + ' is-style-large'
-						: 'is-style-large',
-				};
-			}
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateToQuoteV2,
+};
 
-			return attributes;
+const v2 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
 		},
+		align: {
+			type: 'string',
+		},
+	},
+	migrate: migrateToQuoteV2,
+	save( { attributes } ) {
+		const { align, value, citation } = attributes;
 
-		save( { attributes } ) {
-			const { align, value, citation, style } = attributes;
+		return (
+			<blockquote style={ { textAlign: align ? align : null } }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+};
 
-			return (
-				<blockquote
-					className={ style === 2 ? 'is-large' : '' }
-					style={ { textAlign: align ? align : null } }
-				>
-					<RichText.Content multiline value={ value } />
-					{ ! RichText.isEmpty( citation ) && (
-						<RichText.Content tagName="cite" value={ citation } />
-					) }
-				</blockquote>
-			);
+const v1 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
 		},
-	},
-	{
-		attributes: {
-			...blockAttributes,
-			citation: {
-				type: 'string',
-				source: 'html',
-				selector: 'footer',
-				default: '',
-			},
-			style: {
-				type: 'number',
-				default: 1,
-			},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
 		},
+		align: {
+			type: 'string',
+		},
+		style: {
+			type: 'number',
+			default: 1,
+		},
+	},
 
-		migrate( attributes ) {
-			if ( ! isNaN( parseInt( attributes.style ) ) ) {
-				return {
-					...omit( attributes, [ 'style' ] ),
-				};
-			}
+	migrate( attributes ) {
+		if ( attributes.style === 2 ) {
+			const { style, ...restAttributes } = attributes;
+			return migrateToQuoteV2( {
+				...restAttributes,
+				className: attributes.className
+					? attributes.className + ' is-style-large'
+					: 'is-style-large',
+			} );
+		}
 
-			return attributes;
-		},
+		return migrateToQuoteV2( attributes );
+	},
 
-		save( { attributes } ) {
-			const { align, value, citation, style } = attributes;
+	save( { attributes } ) {
+		const { align, value, citation, style } = attributes;
 
-			return (
-				<blockquote
-					className={ `blocks-quote-style-${ style }` }
-					style={ { textAlign: align ? align : null } }
-				>
-					<RichText.Content multiline value={ value } />
-					{ ! RichText.isEmpty( citation ) && (
-						<RichText.Content tagName="footer" value={ citation } />
-					) }
-				</blockquote>
-			);
+		return (
+			<blockquote
+				className={ style === 2 ? 'is-large' : '' }
+				style={ { textAlign: align ? align : null } }
+			>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+};
+
+const v0 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'footer',
+			default: '',
+		},
+		align: {
+			type: 'string',
 		},
+		style: {
+			type: 'number',
+			default: 1,
+		},
+	},
+
+	migrate( attributes ) {
+		if ( ! isNaN( parseInt( attributes.style ) ) ) {
+			const { style, ...restAttributes } = attributes;
+			return migrateToQuoteV2( {
+				...restAttributes,
+			} );
+		}
+
+		return migrateToQuoteV2( attributes );
+	},
+
+	save( { attributes } ) {
+		const { align, value, citation, style } = attributes;
+
+		return (
+			<blockquote
+				className={ `blocks-quote-style-${ style }` }
+				style={ { textAlign: align ? align : null } }
+			>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="footer" value={ citation } />
+				) }
+			</blockquote>
+		);
 	},
-];
+};
 
-export default deprecated;
+/**
+ * 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, v2, v1, v0 ];