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

package/src/pullquote/edit.js

@@ -52,7 +52,7 @@ function PullQuoteEdit( {
 				<BlockQuote>
 					<RichText
 						identifier="value"
-						multiline
+						tagName="p"
 						value={ value }
 						onChange={ ( nextValue ) =>
 							setAttributes( {

package/src/pullquote/edit.native.js

@@ -83,7 +83,6 @@ function PullQuoteEdit( props ) {
 				<BlockQuote textColor={ getTextColor( props ) }>
 					<RichText
 						identifier="value"
-						multiline
 						value={ value }
 						onChange={ ( nextValue ) =>
 							setAttributes( {

package/src/pullquote/editor.scss

@@ -1,19 +1,3 @@
-.wp-block-pullquote.has-text-align-left,
-.wp-block-pullquote.has-text-align-right,
-.wp-block[data-align="left"] > .wp-block-pullquote,
-.wp-block[data-align="right"] > .wp-block-pullquote {
-	& p {
-		font-size: 20px;
-	}
-}
-
-.wp-block-pullquote {
-	& blockquote p {
-		font-size: 28px;
-		line-height: 1.6;
-	}
-}
-
 // .is-style-solid-color is deprecated.
 .wp-block-pullquote.is-style-solid-color {
 	& blockquote p {

package/src/pullquote/index.js

@@ -22,12 +22,10 @@ export const settings = {
 	example: {
 		attributes: {
 			value:
-				'<p>' +
 				// translators: Quote serving as example for the Pullquote block. Attributed to Matt Mullenweg.
 				__(
 					'One of the hardest things to do in technology is disrupt yourself.'
-				) +
-				'</p>',
+				),
 			citation: __( 'Matt Mullenweg' ),
 		},
 	},

package/src/pullquote/save.js

@@ -21,7 +21,7 @@ export default function save( { attributes } ) {
 			} ) }
 		>
 			<blockquote>
-				<RichText.Content value={ value } multiline />
+				<RichText.Content tagName="p" value={ value } />
 				{ shouldShowCitation && (
 					<RichText.Content tagName="cite" value={ citation } />
 				) }

package/src/pullquote/style.scss

@@ -11,20 +11,9 @@
 		color: inherit;
 	}
 
-	&.has-text-align-left,
-	&.has-text-align-right,
 	&.alignleft,
 	&.alignright {
 		max-width: $content-width * 0.5;
-
-		p {
-			font-size: 1.25em;
-		}
-	}
-
-	p {
-		font-size: 1.75em;
-		line-height: 1.6;
 	}
 
 	cite,

package/src/pullquote/transforms.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
-import { create, join, split, toHTMLString } from '@wordpress/rich-text';
+import { create, join, toHTMLString } from '@wordpress/rich-text';
 
 const transforms = {
 	from: [
@@ -17,9 +17,8 @@ const transforms = {
 							attributes.map( ( { content } ) =>
 								create( { html: content } )
 							),
-							'\u2028'
+							'\n'
 						),
-						multilineTag: 'p',
 					} ),
 					anchor: attributes.anchor,
 				} );
@@ -30,7 +29,7 @@ const transforms = {
 			blocks: [ 'core/heading' ],
 			transform: ( { content, anchor } ) => {
 				return createBlock( 'core/pullquote', {
-					value: `<p>${ content }</p>`,
+					value: content,
 					anchor,
 				} );
 			},
@@ -42,19 +41,14 @@ const transforms = {
 			blocks: [ 'core/paragraph' ],
 			transform: ( { value, citation } ) => {
 				const paragraphs = [];
-				if ( value && value !== '<p></p>' ) {
+				if ( value ) {
 					paragraphs.push(
-						...split(
-							create( { html: value, multilineTag: 'p' } ),
-							'\u2028'
-						).map( ( piece ) =>
-							createBlock( 'core/paragraph', {
-								content: toHTMLString( { value: piece } ),
-							} )
-						)
+						createBlock( 'core/paragraph', {
+							content: value,
+						} )
 					);
 				}
-				if ( citation && citation !== '<p></p>' ) {
+				if ( citation ) {
 					paragraphs.push(
 						createBlock( 'core/paragraph', {
 							content: citation,
@@ -72,37 +66,27 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/heading' ],
-			transform: ( { value, citation, ...attrs } ) => {
+			transform: ( { value, citation } ) => {
 				// If there is no pullquote content, use the citation as the
 				// content of the resulting heading. A nonexistent citation
 				// will result in an empty heading.
-				if ( value === '<p></p>' ) {
+				if ( ! value ) {
 					return createBlock( 'core/heading', {
 						content: citation,
 					} );
 				}
-				const pieces = split(
-					create( { html: value, multilineTag: 'p' } ),
-					'\u2028'
-				);
 				const headingBlock = createBlock( 'core/heading', {
-					content: toHTMLString( { value: pieces[ 0 ] } ),
+					content: value,
 				} );
-				if ( ! citation && pieces.length === 1 ) {
+				if ( ! citation ) {
 					return headingBlock;
 				}
-				const quotePieces = pieces.slice( 1 );
-				const pullquoteBlock = createBlock( 'core/pullquote', {
-					...attrs,
-					citation,
-					value: toHTMLString( {
-						value: quotePieces.length
-							? join( pieces.slice( 1 ), '\u2028' )
-							: create(),
-						multilineTag: 'p',
+				return [
+					headingBlock,
+					createBlock( 'core/heading', {
+						content: citation,
 					} ),
-				} );
-				return [ headingBlock, pullquoteBlock ];
+				];
 			},
 		},
 	],

package/src/query/deprecated.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,9 +9,8 @@ import {
 
 const migrateToTaxQuery = ( attributes ) => {
 	const { query } = attributes;
-	const newQuery = {
-		...omit( query, [ 'categoryIds', 'tagIds' ] ),
-	};
+	const { categoryIds, tagIds, ...newQuery } = query;
+
 	if ( query.categoryIds?.length || query.tagIds?.length ) {
 		newQuery.taxQuery = {
 			category: !! query.categoryIds?.length
@@ -121,8 +115,9 @@ const deprecated = [
 		},
 		migrate( attributes ) {
 			const withTaxQuery = migrateToTaxQuery( attributes );
+			const { layout, ...restWithTaxQuery } = withTaxQuery;
 			return {
-				...omit( withTaxQuery, [ 'layout' ] ),
+				...restWithTaxQuery,
 				displayLayout: withTaxQuery.layout,
 			};
 		},

package/src/query/edit/index.js

@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blocksStore, cloneBlock } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useMemo } from '@wordpress/element';
 import {
 	BlockControls,
+	BlockContextProvider,
 	InspectorControls,
 	useBlockProps,
 	useSetting,
@@ -30,7 +31,7 @@ import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
 import QueryPlaceholder from './query-placeholder';
 import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
-import { getFirstQueryClientIdFromBlocks } from '../utils';
+import { getTransformedBlocksFromPattern } from '../utils';
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
 export function QueryContent( {
@@ -177,6 +178,7 @@ function QueryPatternSetup( {
 			<QueryPlaceholder
 				clientId={ clientId }
 				name={ name }
+				attributes={ attributes }
 				setAttributes={ setAttributes }
 				icon={ icon }
 				label={ label }
@@ -215,7 +217,7 @@ function QueryPatternSetup( {
 }
 
 const QueryEdit = ( props ) => {
-	const { clientId, name } = props;
+	const { clientId, name, attributes } = props;
 	const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
 		useState( false );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
@@ -226,14 +228,23 @@ const QueryEdit = ( props ) => {
 	);
 	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
 	const onBlockPatternSelect = ( blocks ) => {
-		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		const firstQueryClientId =
-			getFirstQueryClientIdFromBlocks( clonedBlocks );
-		replaceBlock( clientId, clonedBlocks );
-		if ( firstQueryClientId ) {
-			selectBlock( firstQueryClientId );
+		const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
+			blocks,
+			attributes
+		);
+		replaceBlock( clientId, newBlocks );
+		if ( queryClientIds[ 0 ] ) {
+			selectBlock( queryClientIds[ 0 ] );
 		}
 	};
+	// When we preview Query Loop blocks we should prefer the current
+	// block's postType, which is passed through block context.
+	const blockPreviewContext = useMemo(
+		() => ( {
+			previewPostType: attributes.query.postType,
+		} ),
+		[ attributes.query.postType ]
+	);
 	return (
 		<>
 			<Component
@@ -251,11 +262,13 @@ const QueryEdit = ( props ) => {
 						setIsPatternSelectionModalOpen( false )
 					}
 				>
-					<BlockPatternSetup
-						blockName={ name }
-						clientId={ clientId }
-						onBlockPatternSelect={ onBlockPatternSelect }
-					/>
+					<BlockContextProvider value={ blockPreviewContext }>
+						<BlockPatternSetup
+							blockName={ name }
+							clientId={ clientId }
+							onBlockPatternSelect={ onBlockPatternSelect }
+						/>
+					</BlockContextProvider>
 				</Modal>
 			) }
 		</>

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -38,7 +38,7 @@ export const useTaxonomiesInfo = ( postType ) => {
 	const taxonomiesInfo = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
-			const termsQuery = { per_page: MAX_FETCHED_TERMS };
+			const termsQuery = { context: 'view', per_page: MAX_FETCHED_TERMS };
 			const _taxonomiesInfo = taxonomies?.map( ( { slug, name } ) => {
 				const _terms = getEntityRecords( 'taxonomy', slug, termsQuery );
 				return {

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

@@ -12,7 +12,14 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 
-function QueryPlaceholder( { clientId, name, setAttributes, icon, label } ) {
+function QueryPlaceholder( {
+	clientId,
+	name,
+	attributes,
+	setAttributes,
+	icon,
+	label,
+} ) {
 	const { defaultVariation, scopeVariations } = useSelect(
 		( select ) => {
 			const {
@@ -39,7 +46,15 @@ function QueryPlaceholder( { clientId, name, setAttributes, icon, label } ) {
 				variations={ scopeVariations }
 				onSelect={ ( nextVariation = defaultVariation ) => {
 					if ( nextVariation.attributes ) {
-						setAttributes( nextVariation.attributes );
+						setAttributes( {
+							...nextVariation.attributes,
+							query: {
+								...nextVariation.attributes.query,
+								postType:
+									attributes.query.postType ||
+									nextVariation.attributes.query.postType,
+							},
+						} );
 					}
 					if ( nextVariation.innerBlocks ) {
 						replaceInnerBlocks(

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-title/block.json

@@ -17,6 +17,10 @@
 			"type": "number",
 			"default": 1
 		},
+		"showPrefix": {
+			"type": "boolean",
+			"default": true
+		},
 		"showSearchTerm": {
 			"type": "boolean",
 			"default": true
@@ -33,7 +37,8 @@
 			}
 		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
@@ -50,5 +55,5 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-query-title-editor"
+	"style": "wp-block-query-title"
 }

package/src/query-title/edit.js

@@ -24,7 +24,7 @@ import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign, showSearchTerm },
+	attributes: { type, level, textAlign, showPrefix, showSearchTerm },
 	setAttributes,
 } ) {
 	const TagName = `h${ level }`;
@@ -45,7 +45,24 @@ 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>
+			</>
 		);
 	}
 

package/src/query-title/index.php

@@ -26,7 +26,17 @@ function render_block_core_query_title( $attributes ) {
 	}
 	$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' );

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/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,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -17,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 } )
 				);
 			},
 		},
@@ -106,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/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