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

package/src/paragraph/edit.js

@@ -49,6 +49,48 @@ function hasDropCapDisabled( align ) {
 	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
 }
 
+function DropCapControl( { clientId, attributes, setAttributes } ) {
+	// Please do no add a useSelect call to the paragraph block unconditionaly.
+	// Every useSelect added to a (frequestly used) block will degrade the load
+	// and type bit. By moving it within InspectorControls, the subscription is
+	// now only added for the selected block(s).
+	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
+
+	if ( ! isDropCapFeatureEnabled ) {
+		return null;
+	}
+
+	const { align, dropCap } = attributes;
+
+	let helpText;
+	if ( hasDropCapDisabled( align ) ) {
+		helpText = __( 'Not available for aligned text.' );
+	} else if ( dropCap ) {
+		helpText = __( 'Showing large initial letter.' );
+	} else {
+		helpText = __( 'Toggle to show a large initial letter.' );
+	}
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => !! dropCap }
+			label={ __( 'Drop cap' ) }
+			onDeselect={ () => setAttributes( { dropCap: undefined } ) }
+			resetAllFilter={ () => ( { dropCap: undefined } ) }
+			panelId={ clientId }
+		>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Drop cap' ) }
+				checked={ !! dropCap }
+				onChange={ () => setAttributes( { dropCap: ! dropCap } ) }
+				help={ helpText }
+				disabled={ hasDropCapDisabled( align ) ? true : false }
+			/>
+		</ToolsPanelItem>
+	);
+}
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -58,7 +100,6 @@ function ParagraphBlock( {
 	clientId,
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
-	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
@@ -68,15 +109,6 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 
-	let helpText;
-	if ( hasDropCapDisabled( align ) ) {
-		helpText = __( 'Not available for aligned text.' );
-	} else if ( dropCap ) {
-		helpText = __( 'Showing large initial letter.' );
-	} else {
-		helpText = __( 'Toggle to show a large initial letter.' );
-	}
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -98,32 +130,13 @@ function ParagraphBlock( {
 					}
 				/>
 			</BlockControls>
-			{ isDropCapFeatureEnabled && (
-				<InspectorControls group="typography">
-					<ToolsPanelItem
-						hasValue={ () => !! dropCap }
-						label={ __( 'Drop cap' ) }
-						onDeselect={ () =>
-							setAttributes( { dropCap: undefined } )
-						}
-						resetAllFilter={ () => ( { dropCap: undefined } ) }
-						panelId={ clientId }
-					>
-						<ToggleControl
-							__nextHasNoMarginBottom
-							label={ __( 'Drop cap' ) }
-							checked={ !! dropCap }
-							onChange={ () =>
-								setAttributes( { dropCap: ! dropCap } )
-							}
-							help={ helpText }
-							disabled={
-								hasDropCapDisabled( align ) ? true : false
-							}
-						/>
-					</ToolsPanelItem>
-				</InspectorControls>
-			) }
+			<InspectorControls group="typography">
+				<DropCapControl
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
+			</InspectorControls>
 			<RichText
 				identifier="content"
 				tagName="p"
@@ -154,13 +167,13 @@ function ParagraphBlock( {
 				onReplace={ onReplace }
 				onRemove={ onRemove }
 				aria-label={
-					content
-						? __( 'Block: Paragraph' )
-						: __(
+					RichText.isEmpty( content )
+						? __(
 								'Empty block; start writing or type forward slash to choose a block'
 						  )
+						: __( 'Block: Paragraph' )
 				}
-				data-empty={ content ? false : true }
+				data-empty={ RichText.isEmpty( content ) }
 				placeholder={ placeholder || __( 'Type / to choose a block' ) }
 				data-custom-placeholder={ placeholder ? true : undefined }
 				__unstableEmbedURLOnPaste

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

@@ -38,3 +38,15 @@ exports[`Paragraph block should render without crashing and match snapshot 1`] =
   />
 </View>
 `;
+
+exports[`Paragraph block should set a font size value 1`] = `
+"<!-- wp:paragraph {"style":{"typography":{"fontSize":"30px"}}} -->
+<p style="font-size:30px">A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Paragraph block should set a line height value 1`] = `
+"<!-- wp:paragraph {"style":{"typography":{"lineHeight":1.8}}} -->
+<p style="line-height:1.8">A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;

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