@wordpress/block-library 8.25.0 → 8.25.1-next.79a6196f.0

package/src/paragraph/test/edit.native.js

@@ -4,6 +4,7 @@
 import {
 	act,
 	addBlock,
+	dismissModal,
 	getBlock,
 	typeInRichText,
 	fireEvent,
@@ -15,6 +16,7 @@ import {
 	within,
 	withFakeTimers,
 	waitForElementToBeRemoved,
+	waitForModalVisible,
 } from 'test/helpers';
 import Clipboard from '@react-native-clipboard/clipboard';
 import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
@@ -687,6 +689,118 @@ describe( 'Paragraph block', () => {
 	` );
 	} );
 
+	it( 'should show the expected font sizes values', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Open Font size settings
+		fireEvent.press( screen.getByLabelText( 'Font Size, Custom' ) );
+		await waitFor( () => screen.getByLabelText( 'Selected: Default' ) );
+
+		// Assert
+		const modalContent = within( blockSettingsModal );
+		expect( modalContent.getByLabelText( 'Small' ) ).toBeVisible();
+		expect( modalContent.getByText( '14px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Medium' ) ).toBeVisible();
+		expect( modalContent.getByText( '17px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Large' ) ).toBeVisible();
+		expect( modalContent.getByText( '30px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Extra Large' ) ).toBeVisible();
+		expect( modalContent.getByText( '40px' ) ).toBeVisible();
+		expect(
+			modalContent.getByLabelText( 'Extra Extra Large' )
+		).toBeVisible();
+		expect( modalContent.getByText( '52px' ) ).toBeVisible();
+	} );
+
+	it( 'should set a font size value', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Open Font size settings
+		fireEvent.press( screen.getByLabelText( 'Font Size, Custom' ) );
+
+		// Tap one font size
+		fireEvent.press( screen.getByLabelText( 'Large' ) );
+
+		// Dismiss the Block Settings modal.
+		await dismissModal( blockSettingsModal );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should set a line height value', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		const lineHeightControl = screen.getByLabelText( /Line Height/ );
+		fireEvent.press(
+			within( lineHeightControl ).getByText( '1.5', { hidden: true } )
+		);
+		const lineHeightTextInput = within(
+			lineHeightControl
+		).getByDisplayValue( '1.5', { hidden: true } );
+		fireEvent.changeText( lineHeightTextInput, '1.8' );
+
+		// Dismiss the Block Settings modal.
+		await dismissModal( blockSettingsModal );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should focus on the previous Paragraph block when backspacing in an empty Paragraph block', async () => {
 		// Arrange
 		const screen = await initializeEditor();

package/src/pattern/edit.js

@@ -3,12 +3,19 @@
  */
 import { cloneBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import {
+	Warning,
 	store as blockEditorStore,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useParsePatternDependencies } from './recursion-detector';
 
 const PatternEdit = ( { attributes, clientId } ) => {
 	const selectedPattern = useSelect(
@@ -32,6 +39,9 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	const { getBlockRootClientId, getBlockEditingMode } =
 		useSelect( blockEditorStore );
 
+	const [ hasRecursionError, setHasRecursionError ] = useState( false );
+	const parsePatternDependencies = useParsePatternDependencies();
+
 	// Duplicated in packages/edit-site/src/components/start-template-options/index.js.
 	function injectThemeAttributeInBlockTemplateContent( block ) {
 		if (
@@ -64,7 +74,14 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	// This change won't be saved.
 	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
-		if ( selectedPattern?.blocks ) {
+		if ( ! hasRecursionError && selectedPattern?.blocks ) {
+			try {
+				parsePatternDependencies( selectedPattern );
+			} catch ( error ) {
+				setHasRecursionError( true );
+				return;
+			}
+
 			// We batch updates to block list settings to avoid triggering cascading renders
 			// for each container block included in a tree and optimize initial render.
 			// Since the above uses microtasks, we need to use a microtask here as well,
@@ -93,7 +110,8 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		}
 	}, [
 		clientId,
-		selectedPattern?.blocks,
+		hasRecursionError,
+		selectedPattern,
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceBlocks,
 		getBlockEditingMode,
@@ -103,6 +121,20 @@ const PatternEdit = ( { attributes, clientId } ) => {
 
 	const props = useBlockProps();
 
+	if ( hasRecursionError ) {
+		return (
+			<div { ...props }>
+				<Warning>
+					{ sprintf(
+						// translators: A warning in which %s is the name of a pattern.
+						__( 'Pattern "%s" cannot be rendered inside itself.' ),
+						selectedPattern?.name
+					) }
+				</Warning>
+			</div>
+		);
+	}
+
 	return <div { ...props } />;
 };
 

package/src/pattern/index.php

@@ -27,6 +27,8 @@ function register_block_core_pattern() {
  * @return string Returns the output of the pattern.
  */
 function render_block_core_pattern( $attributes ) {
+	static $seen_refs = array();
+
 	if ( empty( $attributes['slug'] ) ) {
 		return '';
 	}
@@ -38,6 +40,17 @@ function render_block_core_pattern( $attributes ) {
 		return '';
 	}
 
+	if ( isset( $seen_refs[ $attributes['slug'] ] ) ) {
+		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
+		// is set in `wp_debug_mode()`.
+		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
+
+		return $is_debug ?
+			// translators: Visible only in the front end, this warning takes the place of a faulty block. %s represents a pattern's slug.
+			sprintf( __( '[block rendering halted for pattern "%s"]' ), $slug ) :
+			'';
+	}
+
 	$pattern = $registry->get_registered( $slug );
 	$content = $pattern['content'];
 
@@ -48,11 +61,14 @@ function render_block_core_pattern( $attributes ) {
 		$content = gutenberg_serialize_blocks( $blocks );
 	}
 
+	$seen_refs[ $attributes['slug'] ] = true;
+
 	$content = do_blocks( $content );
 
 	global $wp_embed;
 	$content = $wp_embed->autoembed( $content );
 
+	unset( $seen_refs[ $attributes['slug'] ] );
 	return $content;
 }
 

package/src/pattern/recursion-detector.js

@@ -0,0 +1,145 @@
+/**
+ * THIS MODULE IS INTENTIONALLY KEPT WITHIN THE PATTERN BLOCK'S SOURCE.
+ *
+ * This is because this approach for preventing infinite loops due to
+ * recursively rendering blocks is specific to the way that the `core/pattern`
+ * block behaves in the editor. Any other block types that deal with recursion
+ * SHOULD USE THE STANDARD METHOD for avoiding loops:
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31455
+ * @see packages/block-editor/src/components/recursion-provider/README.md
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+
+/**
+ * Naming is hard.
+ *
+ * @see useParsePatternDependencies
+ *
+ * @type {WeakMap<Object, Function>}
+ */
+const cachedParsers = new WeakMap();
+
+/**
+ * Hook used by PatternEdit to parse block patterns. It returns a function that
+ * takes a pattern and returns nothing but throws an error if the pattern is
+ * recursive.
+ *
+ * @example
+ * ```js
+ * const parsePatternDependencies = useParsePatternDependencies();
+ * parsePatternDependencies( selectedPattern );
+ * ```
+ *
+ * @see parsePatternDependencies
+ *
+ * @return {Function} A function to parse block patterns.
+ */
+export function useParsePatternDependencies() {
+	const registry = useRegistry();
+
+	// Instead of caching maps, go straight to the point and cache bound
+	// functions. Each of those functions is bound to a different Map that will
+	// keep track of patterns in the context of the given registry.
+	if ( ! cachedParsers.has( registry ) ) {
+		const deps = new Map();
+		cachedParsers.set(
+			registry,
+			parsePatternDependencies.bind( null, deps )
+		);
+	}
+	return cachedParsers.get( registry );
+}
+
+/**
+ * Parse a given pattern and traverse its contents to detect any subsequent
+ * patterns on which it may depend. Such occurrences will be added to an
+ * internal dependency graph. If a circular dependency is detected, an
+ * error will be thrown.
+ *
+ * EXPORTED FOR TESTING PURPOSES ONLY.
+ *
+ * @param {Map<string, Set<string>>} deps           Map of pattern dependencies.
+ * @param {Object}                   pattern        Pattern.
+ * @param {string}                   pattern.name   Pattern name.
+ * @param {Array}                    pattern.blocks Pattern's block list.
+ *
+ * @throws {Error} If a circular dependency is detected.
+ */
+export function parsePatternDependencies( deps, { name, blocks } ) {
+	const queue = [ ...blocks ];
+	while ( queue.length ) {
+		const block = queue.shift();
+		for ( const innerBlock of block.innerBlocks ?? [] ) {
+			queue.unshift( innerBlock );
+		}
+		if ( block.name === 'core/pattern' ) {
+			registerDependency( deps, name, block.attributes.slug );
+		}
+	}
+}
+
+/**
+ * Declare that pattern `a` depends on pattern `b`. If a circular
+ * dependency is detected, an error will be thrown.
+ *
+ * EXPORTED FOR TESTING PURPOSES ONLY.
+ *
+ * @param {Map<string, Set<string>>} deps Map of pattern dependencies.
+ * @param {string}                   a    Slug for pattern A.
+ * @param {string}                   b    Slug for pattern B.
+ *
+ * @throws {Error} If a circular dependency is detected.
+ */
+export function registerDependency( deps, a, b ) {
+	if ( ! deps.has( a ) ) {
+		deps.set( a, new Set() );
+	}
+	deps.get( a ).add( b );
+	if ( hasCycle( deps, a ) ) {
+		throw new TypeError(
+			`Pattern ${ a } has a circular dependency and cannot be rendered.`
+		);
+	}
+}
+
+/**
+ * Determine if a given pattern has circular dependencies on other patterns.
+ * This will be determined by running a depth-first search on the current state
+ * of the graph represented by `patternDependencies`.
+ *
+ * @param {Map<string, Set<string>>} deps           Map of pattern dependencies.
+ * @param {string}                   slug           Pattern slug.
+ * @param {Set<string>}              [visitedNodes] Set to track visited nodes in the graph.
+ * @param {Set<string>}              [currentPath]  Set to track and backtrack graph paths.
+ * @return {boolean} Whether any cycle was found.
+ */
+function hasCycle(
+	deps,
+	slug,
+	visitedNodes = new Set(),
+	currentPath = new Set()
+) {
+	visitedNodes.add( slug );
+	currentPath.add( slug );
+
+	const dependencies = deps.get( slug ) ?? new Set();
+
+	for ( const dependency of dependencies ) {
+		if ( ! visitedNodes.has( dependency ) ) {
+			if ( hasCycle( deps, dependency, visitedNodes, currentPath ) ) {
+				return true;
+			}
+		} else if ( currentPath.has( dependency ) ) {
+			return true;
+		}
+	}
+
+	// Remove the current node from the current path when backtracking
+	currentPath.delete( slug );
+	return false;
+}

package/src/pattern/test/index.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import {
+	parsePatternDependencies,
+	registerDependency,
+} from '../recursion-detector';
+
+describe( 'core/pattern', () => {
+	const deps = new Map();
+
+	beforeEach( () => {
+		deps.clear();
+	} );
+
+	describe( 'parsePatternDependencies', () => {
+		it( "is silent for patterns that don't require other patterns", () => {
+			const pattern = {
+				name: 'test/benign-pattern',
+				blocks: [ { name: 'core/paragraph' } ],
+			};
+			expect( () => {
+				parsePatternDependencies( deps, pattern );
+			} ).not.toThrow();
+		} );
+		it( 'catches self-referencing patterns', () => {
+			const pattern = {
+				name: 'test/evil-pattern',
+				blocks: [ { name: 'core/pattern', slug: 'test/evil-pattern' } ],
+			};
+			expect( () => {
+				parsePatternDependencies( deps, pattern );
+			} ).toThrow();
+		} );
+	} );
+
+	describe( 'registerDependency', () => {
+		it( 'is silent for patterns with no circular dependencies', () => {
+			expect( () => {
+				registerDependency( deps, 'a', 'b' );
+			} ).not.toThrow();
+		} );
+		it( 'catches self-referencing patterns', () => {
+			expect( () => {
+				registerDependency( deps, 'a', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches mutually-referencing patterns', () => {
+			registerDependency( deps, 'a', 'b' );
+			expect( () => {
+				registerDependency( deps, 'b', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches longer cycles', () => {
+			registerDependency( deps, 'a', 'b' );
+			registerDependency( deps, 'b', 'c' );
+			registerDependency( deps, 'b', 'd' );
+			expect( () => {
+				registerDependency( deps, 'd', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches any pattern depending on a tainted one', () => {
+			registerDependency( deps, 'a', 'b' );
+			registerDependency( deps, 'b', 'c' );
+			registerDependency( deps, 'b', 'd' );
+			expect( () => {
+				registerDependency( deps, 'd', 'a' );
+			} ).toThrow();
+			expect( () => {
+				registerDependency( deps, 'e', 'd' );
+			} ).toThrow();
+		} );
+	} );
+} );

package/src/post-featured-image/block.json

@@ -51,6 +51,10 @@
 		},
 		"customGradient": {
 			"type": "string"
+		},
+		"useFirstImageFromPost": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

package/src/post-featured-image/edit.js

@@ -25,6 +25,7 @@ import {
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -64,14 +65,44 @@ export default function PostFeaturedImageEdit( {
 		sizeSlug,
 		rel,
 		linkTarget,
+		useFirstImageFromPost,
 	} = attributes;
-	const [ featuredImage, setFeaturedImage ] = useEntityProp(
+
+	const [ storedFeaturedImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
 		'featured_media',
 		postId
 	);
 
+	// Fallback to post content if no featured image is set.
+	// This is needed for the "Use first image from post" option.
+	const [ postContent ] = useEntityProp(
+		'postType',
+		postTypeSlug,
+		'content',
+		postId
+	);
+
+	const featuredImage = useMemo( () => {
+		if ( storedFeaturedImage ) {
+			return storedFeaturedImage;
+		}
+
+		if ( ! useFirstImageFromPost ) {
+			return;
+		}
+
+		const imageOpener =
+			/<!--\s+wp:(?:core\/)?image\s+(?<attrs>{(?:(?:[^}]+|}+(?=})|(?!}\s+\/?-->).)*)?}\s+)?-->/.exec(
+				postContent
+			);
+		const imageId =
+			imageOpener?.groups?.attrs &&
+			JSON.parse( imageOpener.groups.attrs )?.id;
+		return imageId;
+	}, [ storedFeaturedImage, useFirstImageFromPost, postContent ] );
+
 	const { media, postType, postPermalink } = useSelect(
 		( select ) => {
 			const { getMedia, getPostType, getEditedEntityRecord } =

package/src/post-featured-image/index.php

@@ -54,9 +54,40 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 
 	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
+
+	// Get the first image from the post.
+	if ( $attributes['useFirstImageFromPost'] && ! $featured_image ) {
+		$content_post = get_post( $post_ID );
+		$content      = $content_post->post_content;
+		$processor    = new WP_HTML_Tag_Processor( $content );
+
+		/*
+		 * Transfer the image tag from the post into a new text snippet.
+		 * Because the HTML API doesn't currently expose a way to extract
+		 * HTML substrings this is necessary as a workaround. Of note, this
+		 * is different than directly extracting the IMG tag:
+		 * - If there are duplicate attributes in the source there will only be one in the output.
+		 * - If there are single-quoted or unquoted attributes they will be double-quoted in the output.
+		 * - If there are named character references in the attribute values they may be replaced with their direct code points. E.g. `…` becomes `…`.
+		 * In the future there will likely be a mechanism to copy snippets of HTML from
+		 * one document into another, via the HTML Processor's `get_outer_html()` or
+		 * equivalent. When that happens it would be appropriate to replace this custom
+		 * code with that canonical code.
+		 */
+		if ( $processor->next_tag( 'img' ) ) {
+			$tag_html = new WP_HTML_Tag_Processor( '<img>' );
+			$tag_html->next_tag();
+			foreach ( $processor->get_attribute_names_with_prefix( '' ) as $name ) {
+				$tag_html->set_attribute( $name, $processor->get_attribute( $name ) );
+			}
+			$featured_image = $tag_html->get_updated_html();
+		}
+	}
+
 	if ( ! $featured_image ) {
 		return '';
 	}
+
 	if ( $is_link ) {
 		$link_target    = $attributes['linkTarget'];
 		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';

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

@@ -37,6 +37,7 @@ import {
 	isControlAllowed,
 	useTaxonomies,
 } from '../../utils';
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../../../utils/constants';
 
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
@@ -226,6 +227,7 @@ export default function QueryInspectorControls( props ) {
 							} );
 							setQuerySearch( '' );
 						} }
+						dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 					>
 						{ showTaxControl && (
 							<ToolsPanelItem

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

@@ -5,7 +5,7 @@
 	"title": "Page Numbers",
 	"category": "theme",
 	"parent": [ "core/query-pagination" ],
-	"description": "Displays a list of page numbers for pagination",
+	"description": "Displays a list of page numbers for pagination.",
 	"textdomain": "default",
 	"attributes": {
 		"midSize": {

package/src/search/block.json

@@ -43,10 +43,6 @@
 			"type": "object",
 			"default": {}
 		},
-		"buttonBehavior": {
-			"type": "string",
-			"default": "expand-searchfield"
-		},
 		"isSearchFieldHidden": {
 			"type": "boolean",
 			"default": false

package/src/search/edit.js

@@ -59,8 +59,6 @@ import {
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = '4px';
 
-const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield';
-
 export default function SearchEdit( {
 	className,
 	attributes,
@@ -79,7 +77,6 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
-		buttonBehavior,
 		isSearchFieldHidden,
 		style,
 	} = attributes;
@@ -187,9 +184,6 @@ export default function SearchEdit( {
 			buttonUseIcon && ! hasNoButton
 				? 'wp-block-search__icon-button'
 				: undefined,
-			hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior
-				? 'wp-block-search__button-behavior-expand'
-				: undefined,
 			hasOnlyButton && isSearchFieldHidden
 				? 'wp-block-search__searchfield-hidden'
 				: undefined
@@ -325,7 +319,7 @@ export default function SearchEdit( {
 				: borderProps.style ),
 		};
 		const handleButtonClick = () => {
-			if ( hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior ) {
+			if ( hasOnlyButton ) {
 				setAttributes( {
 					isSearchFieldHidden: ! isSearchFieldHidden,
 				} );
@@ -453,7 +447,7 @@ export default function SearchEdit( {
 								return (
 									<Button
 										key={ widthValue }
-										isSmall
+										size="small"
 										variant={
 											widthValue === width &&
 											widthUnit === '%'