@wordpress/block-library 7.11.0 → 7.13.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.'
 			),
 		},
 	],

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-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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -11,11 +10,11 @@ import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export const migrateToQuoteV2 = ( attributes ) => {
-	const { value } = attributes;
+	const { value, ...restAttributes } = attributes;
 
 	return [
 		{
-			...omit( attributes, [ 'value' ] ),
+			...restAttributes,
 		},
 		value
 			? parseWithAttributeSchema( value, {
@@ -151,8 +150,9 @@ const v1 = {
 
 	migrate( attributes ) {
 		if ( attributes.style === 2 ) {
+			const { style, ...restAttributes } = attributes;
 			return migrateToQuoteV2( {
-				...omit( attributes, [ 'style' ] ),
+				...restAttributes,
 				className: attributes.className
 					? attributes.className + ' is-style-large'
 					: 'is-style-large',
@@ -205,8 +205,9 @@ const v0 = {
 
 	migrate( attributes ) {
 		if ( ! isNaN( parseInt( attributes.style ) ) ) {
+			const { style, ...restAttributes } = attributes;
 			return migrateToQuoteV2( {
-				...omit( attributes, [ 'style' ] ),
+				...restAttributes,
 			} );
 		}
 

package/src/quote/transforms.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createBlock,
-	parseWithAttributeSchema,
-	rawHandler,
-} from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -21,19 +17,7 @@ const transforms = {
 						fontSize,
 						style,
 					},
-					parseWithAttributeSchema( value, {
-						type: 'array',
-						source: 'query',
-						selector: 'p',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-						},
-					} ).map( ( { content } ) =>
-						createBlock( 'core/paragraph', { content } )
-					)
+					createBlock( 'core/paragraph', { content: value } )
 				);
 			},
 		},
@@ -59,7 +43,7 @@ const transforms = {
 				},
 			} ),
 			selector: 'blockquote',
-			transform: ( node ) => {
+			transform: ( node, handler ) => {
 				return createBlock(
 					'core/quote',
 					// Don't try to parse any `cite` out of this content.
@@ -68,7 +52,7 @@ const transforms = {
 					// * If the cite is nested in the quoted text, it's wrong to
 					//   remove it.
 					{},
-					rawHandler( {
+					handler( {
 						HTML: node.innerHTML,
 						mode: 'BLOCKS',
 					} )
@@ -110,10 +94,8 @@ const transforms = {
 				innerBlocks
 			) => {
 				const value = innerBlocks
-					.map(
-						( { attributes } ) => `<p>${ attributes.content }</p>`
-					)
-					.join( '' );
+					.map( ( { attributes } ) => `${ attributes.content }` )
+					.join( '<br>' );
 				return createBlock( 'core/pullquote', {
 					value,
 					citation,

package/src/search/index.php

@@ -217,7 +217,7 @@ function apply_block_core_search_border_style( $attributes, $property, $side, &$
 	}
 
 	if ( 'color' === $property && $side ) {
-		$has_color_preset = strpos( $value, 'var:preset|color|' ) !== false;
+		$has_color_preset = str_contains( $value, 'var:preset|color|' );
 		if ( $has_color_preset ) {
 			$named_color_value = substr( $value, strrpos( $value, '|' ) + 1 );
 			$value             = sprintf( 'var(--wp--preset--color--%s)', $named_color_value );

package/src/search/style.scss

@@ -34,6 +34,8 @@
 .wp-block-search__input {
 	padding: 8px;
 	flex-grow: 1;
+	margin-left: 0;
+	margin-right: 0;
 	min-width: 3em;
 	border: 1px solid #949494;
 	font-size: inherit;

package/src/search/test/__snapshots__/edit.native.js.snap

@@ -11,7 +11,14 @@ exports[`Search Block renders block with button inside option 1`] = `
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -119,7 +126,14 @@ exports[`Search Block renders block with button inside option 1`] = `
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -191,7 +205,14 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -359,7 +380,14 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -431,7 +459,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -539,7 +574,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -611,7 +653,14 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}

package/src/separator/block.json

@@ -17,6 +17,7 @@
 		"anchor": true,
 		"align": [ "center", "wide", "full" ],
 		"color": {
+			"enableContrastChecker": false,
 			"__experimentalSkipSerialization": true,
 			"gradients": true,
 			"background": true,

package/src/separator/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -42,9 +41,9 @@ const v1 = {
 		return <hr { ...useBlockProps.save( { className, style } ) } />;
 	},
 	migrate( attributes ) {
-		const { color, customColor } = attributes;
+		const { color, customColor, ...restAttributes } = attributes;
 		return {
-			...omit( attributes, [ 'color', 'customColor' ] ),
+			...restAttributes,
 			backgroundColor: color ? color : undefined,
 			opacity: 'css',
 			style: customColor

package/src/separator/edit.js

@@ -37,7 +37,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 			'has-css-opacity': opacity === 'css',
 			'has-alpha-channel-opacity': opacity === 'alpha-channel',
 		},
-		colorProps.classname
+		colorProps.className
 	);
 
 	const styles = {

package/src/separator/test/edit.js

@@ -66,7 +66,8 @@ describe( 'Separator block edit method', () => {
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			// For backwards compatibility the has-text-color class is also added even though it is only needed for
 			// is-style-dots as this class was always added to v1 blocks, so may be expected by themes and plugins.
-			className: 'has-text-color has-alpha-channel-opacity',
+			className:
+				'has-text-color has-alpha-channel-opacity has-background',
 			style: {
 				backgroundColor: '#ff0000',
 				color: '#ff0000',
@@ -85,7 +86,8 @@ describe( 'Separator block edit method', () => {
 		};
 		render( <SeparatorEdit { ...props } /> );
 		expect( useBlockProps ).toHaveBeenCalledWith( {
-			className: 'has-text-color has-alpha-channel-opacity',
+			className:
+				'has-text-color has-alpha-channel-opacity has-background',
 			style: {
 				backgroundColor: '#ff0000',
 				color: '#ff0000',
@@ -106,7 +108,7 @@ describe( 'Separator block edit method', () => {
 		// background color classes are added by useBlockProps which has to be mocked.
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			className:
-				'has-text-color has-banana-color has-alpha-channel-opacity',
+				'has-text-color has-banana-color has-alpha-channel-opacity has-banana-background-color has-background',
 			style: undefined,
 		} );
 	} );