@wordpress/block-library 8.24.1 → 8.25.0

package/src/audio/edit.js

@@ -13,7 +13,6 @@ import {
 	SelectControl,
 	Spinner,
 	ToggleControl,
-	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -21,23 +20,20 @@ import {
 	InspectorControls,
 	MediaPlaceholder,
 	MediaReplaceFlow,
-	RichText,
 	useBlockProps,
 	store as blockEditorStore,
-	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { audio as icon, caption as captionIcon } from '@wordpress/icons';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { audio as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
+import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
@@ -49,9 +45,7 @@ function AudioEdit( {
 	isSelected,
 	insertBlocksAfter,
 } ) {
-	const { id, autoplay, caption, loop, preload, src } = attributes;
-	const prevCaption = usePrevious( caption );
-	const [ showCaption, setShowCaption ] = useState( !! caption );
+	const { id, autoplay, loop, preload, src } = attributes;
 	const isTemporaryAudio = ! id && isBlobURL( src );
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -73,30 +67,6 @@ function AudioEdit( {
 		}
 	}, [] );
 
-	// We need to show the caption when changes come from
-	// history navigation(undo/redo).
-	useEffect( () => {
-		if ( caption && ! prevCaption ) {
-			setShowCaption( true );
-		}
-	}, [ caption, prevCaption ] );
-
-	// Focus the caption when we click to add one.
-	const captionRef = useCallback(
-		( node ) => {
-			if ( node && ! caption ) {
-				node.focus();
-			}
-		},
-		[ caption ]
-	);
-
-	useEffect( () => {
-		if ( ! isSelected && ! caption ) {
-			setShowCaption( false );
-		}
-	}, [ isSelected, caption ] );
-
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {
 			setAttributes( { [ attribute ]: newValue } );
@@ -176,23 +146,6 @@ function AudioEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<ToolbarButton
-					onClick={ () => {
-						setShowCaption( ! showCaption );
-						if ( showCaption && caption ) {
-							setAttributes( { caption: undefined } );
-						}
-					} }
-					icon={ captionIcon }
-					isPressed={ showCaption }
-					label={
-						showCaption
-							? __( 'Remove caption' )
-							: __( 'Add caption' )
-					}
-				/>
-			</BlockControls>
 			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }
@@ -251,29 +204,13 @@ function AudioEdit( {
 					<audio controls="controls" src={ src } />
 				</Disabled>
 				{ isTemporaryAudio && <Spinner /> }
-				{ showCaption &&
-					( ! RichText.isEmpty( caption ) || isSelected ) && (
-						<RichText
-							identifier="caption"
-							tagName="figcaption"
-							className={ __experimentalGetElementClassName(
-								'caption'
-							) }
-							ref={ captionRef }
-							aria-label={ __( 'Audio caption text' ) }
-							placeholder={ __( 'Add caption' ) }
-							value={ caption }
-							onChange={ ( value ) =>
-								setAttributes( { caption: value } )
-							}
-							inlineToolbar
-							__unstableOnSplitAtEnd={ () =>
-								insertBlocksAfter(
-									createBlock( getDefaultBlockName() )
-								)
-							}
-						/>
-					) }
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Audio caption text' ) }
+				/>
 			</figure>
 		</>
 	);

package/src/audio/edit.native.js

@@ -23,6 +23,7 @@ import {
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadProgress,
+	RichText,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -227,7 +228,7 @@ function AudioEdit( {
 				<BlockCaption
 					accessible={ true }
 					accessibilityLabelCreator={ ( caption ) =>
-						! caption
+						RichText.isEmpty( caption )
 							? /* translators: accessibility text. Empty Audio caption. */
 							  __( 'Audio caption. Empty' )
 							: sprintf(

package/src/block/edit.js

@@ -6,11 +6,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	useEntityBlockEditor,
-	useEntityProp,
-	useEntityRecord,
-} from '@wordpress/core-data';
+import { useRegistry, useSelect, useDispatch } from '@wordpress/data';
+import { useRef, useMemo, useEffect } from '@wordpress/element';
+import { useEntityProp, useEntityRecord } from '@wordpress/core-data';
 import {
 	Placeholder,
 	Spinner,
@@ -27,8 +25,9 @@ import {
 	useBlockProps,
 	Warning,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useRef, useMemo } from '@wordpress/element';
+import { getBlockSupport, parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -36,6 +35,24 @@ import { useRef, useMemo } from '@wordpress/element';
 import { unlock } from '../lock-unlock';
 
 const { useLayoutClasses } = unlock( blockEditorPrivateApis );
+
+function isPartiallySynced( block ) {
+	return (
+		!! getBlockSupport( block.name, '__experimentalConnections', false ) &&
+		!! block.attributes.connections?.attributes &&
+		Object.values( block.attributes.connections.attributes ).some(
+			( connection ) => connection.source === 'pattern_attributes'
+		)
+	);
+}
+function getPartiallySyncedAttributes( block ) {
+	return Object.entries( block.attributes.connections.attributes )
+		.filter(
+			( [ , connection ] ) => connection.source === 'pattern_attributes'
+		)
+		.map( ( [ attributeKey ] ) => attributeKey );
+}
+
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
 const useInferredLayout = ( blocks, parentLayout ) => {
@@ -67,11 +84,61 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 	}, [ blocks, parentLayout ] );
 };
 
+function applyInitialOverrides( blocks, overrides = {}, defaultValues ) {
+	return blocks.map( ( block ) => {
+		const innerBlocks = applyInitialOverrides(
+			block.innerBlocks,
+			overrides,
+			defaultValues
+		);
+		const blockId = block.attributes.metadata?.id;
+		if ( ! isPartiallySynced( block ) || ! blockId )
+			return { ...block, innerBlocks };
+		const attributes = getPartiallySyncedAttributes( block );
+		const newAttributes = { ...block.attributes };
+		for ( const attributeKey of attributes ) {
+			defaultValues[ blockId ] = block.attributes[ attributeKey ];
+			if ( overrides[ blockId ] ) {
+				newAttributes[ attributeKey ] = overrides[ blockId ];
+			}
+		}
+		return {
+			...block,
+			attributes: newAttributes,
+			innerBlocks,
+		};
+	} );
+}
+
+function getOverridesFromBlocks( blocks, defaultValues ) {
+	/** @type {Record<string, unknown>} */
+	const overrides = {};
+	for ( const block of blocks ) {
+		Object.assign(
+			overrides,
+			getOverridesFromBlocks( block.innerBlocks, defaultValues )
+		);
+		const blockId = block.attributes.metadata?.id;
+		if ( ! isPartiallySynced( block ) || ! blockId ) continue;
+		const attributes = getPartiallySyncedAttributes( block );
+		for ( const attributeKey of attributes ) {
+			if (
+				block.attributes[ attributeKey ] !== defaultValues[ blockId ]
+			) {
+				overrides[ blockId ] = block.attributes[ attributeKey ];
+			}
+		}
+	}
+	return Object.keys( overrides ).length > 0 ? overrides : undefined;
+}
+
 export default function ReusableBlockEdit( {
 	name,
-	attributes: { ref },
+	attributes: { ref, overrides },
 	__unstableParentLayout: parentLayout,
+	clientId: patternClientId,
 } ) {
+	const registry = useRegistry();
 	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
@@ -79,11 +146,46 @@ export default function ReusableBlockEdit( {
 		ref
 	);
 	const isMissing = hasResolved && ! record;
+	const initialOverrides = useRef( overrides );
+	const defaultValuesRef = useRef( {} );
+	const {
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+		setBlockEditingMode,
+	} = useDispatch( blockEditorStore );
+	const { getBlockEditingMode } = useSelect( blockEditorStore );
 
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		'wp_block',
-		{ id: ref }
+	useEffect( () => {
+		if ( ! record?.content?.raw ) return;
+		const initialBlocks = parse( record.content.raw );
+
+		const editingMode = getBlockEditingMode( patternClientId );
+		registry.batch( () => {
+			setBlockEditingMode( patternClientId, 'default' );
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks(
+				patternClientId,
+				applyInitialOverrides(
+					initialBlocks,
+					initialOverrides.current,
+					defaultValuesRef.current
+				)
+			);
+			setBlockEditingMode( patternClientId, editingMode );
+		} );
+	}, [
+		__unstableMarkNextChangeAsNotPersistent,
+		patternClientId,
+		record,
+		replaceInnerBlocks,
+		registry,
+		getBlockEditingMode,
+		setBlockEditingMode,
+	] );
+
+	const innerBlocks = useSelect(
+		( select ) => select( blockEditorStore ).getBlocks( patternClientId ),
+		[ patternClientId ]
 	);
 
 	const [ title, setTitle ] = useEntityProp(
@@ -93,7 +195,10 @@ export default function ReusableBlockEdit( {
 		ref
 	);
 
-	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
+	const { alignment, layout } = useInferredLayout(
+		innerBlocks,
+		parentLayout
+	);
 	const layoutClasses = useLayoutClasses( { layout }, name );
 
 	const blockProps = useBlockProps( {
@@ -105,16 +210,38 @@ export default function ReusableBlockEdit( {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		value: blocks,
 		layout,
-		onInput,
-		onChange,
-		renderAppender: blocks?.length
+		renderAppender: innerBlocks?.length
 			? undefined
 			: InnerBlocks.ButtonBlockAppender,
 	} );
 
+	// Sync the `overrides` attribute from the updated blocks.
+	// `syncDerivedBlockAttributes` is an action that just like `updateBlockAttributes`
+	// but won't create an undo level.
+	// This can be abstracted into a `useSyncDerivedAttributes` hook if needed.
+	useEffect( () => {
+		const { getBlocks } = registry.select( blockEditorStore );
+		const { syncDerivedBlockAttributes } = unlock(
+			registry.dispatch( blockEditorStore )
+		);
+		let prevBlocks = getBlocks( patternClientId );
+		return registry.subscribe( () => {
+			const blocks = getBlocks( patternClientId );
+			if ( blocks !== prevBlocks ) {
+				prevBlocks = blocks;
+				syncDerivedBlockAttributes( patternClientId, {
+					overrides: getOverridesFromBlocks(
+						blocks,
+						defaultValuesRef.current
+					),
+				} );
+			}
+		}, blockEditorStore );
+	}, [ patternClientId, registry ] );
+
 	let children = null;
+
 	if ( hasAlreadyRendered ) {
 		children = (
 			<Warning>

package/src/block/index.js

@@ -8,14 +8,15 @@ import { symbol as icon } from '@wordpress/icons';
  */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
-import edit from './edit';
+import editV1 from './v1/edit';
+import editV2 from './edit';
 
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
-	edit,
+	edit: window.__experimentalPatternPartialSyncing ? editV2 : editV1,
 	icon,
 };
 

package/src/block/index.php

@@ -46,8 +46,31 @@ function render_block_core_block( $attributes ) {
 	$content = $wp_embed->run_shortcode( $reusable_block->post_content );
 	$content = $wp_embed->autoembed( $content );
 
+	$gutenberg_experiments        = get_option( 'gutenberg-experiments' );
+	$has_partial_synced_overrides = $gutenberg_experiments
+		&& array_key_exists( 'gutenberg-pattern-partial-syncing', $gutenberg_experiments )
+		&& isset( $attributes['overrides'] );
+
+	/**
+	 * We set the `pattern/overrides` context through the `render_block_context`
+	 * filter so that it is available when a pattern's inner blocks are
+	 * rendering via do_blocks given it only receives the inner content.
+	 */
+	if ( $has_partial_synced_overrides ) {
+		$filter_block_context = static function ( $context ) use ( $attributes ) {
+			$context['pattern/overrides'] = $attributes['overrides'];
+			return $context;
+		};
+		add_filter( 'render_block_context', $filter_block_context, 1 );
+	}
+
 	$content = do_blocks( $content );
 	unset( $seen_refs[ $attributes['ref'] ] );
+
+	if ( $has_partial_synced_overrides ) {
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
+	}
+
 	return $content;
 }
 
@@ -63,3 +86,28 @@ function register_block_core_block() {
 	);
 }
 add_action( 'init', 'register_block_core_block' );
+
+$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+if ( $gutenberg_experiments && array_key_exists( 'gutenberg-pattern-partial-syncing', $gutenberg_experiments ) ) {
+	/**
+	 * Registers the overrides attribute for core/block.
+	 *
+	 * @param array  $args       Array of arguments for registering a block type.
+	 * @param string $block_name Block name including namespace.
+	 * @return array $args
+	 */
+	function register_block_core_block_args( $args, $block_name ) {
+		if ( 'core/block' === $block_name ) {
+			$args['attributes'] = array_merge(
+				$args['attributes'],
+				array(
+					'overrides' => array(
+						'type' => 'object',
+					),
+				)
+			);
+		}
+		return $args;
+	}
+	add_filter( 'register_block_type_args', 'register_block_core_block_args', 10, 2 );
+}

package/src/block/v1/edit.js

@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useEntityBlockEditor,
+	useEntityProp,
+	useEntityRecord,
+} from '@wordpress/core-data';
+import {
+	Placeholder,
+	Spinner,
+	TextControl,
+	PanelBody,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	useInnerBlocksProps,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
+	InnerBlocks,
+	InspectorControls,
+	useBlockProps,
+	Warning,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useRef, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useLayoutClasses } = unlock( blockEditorPrivateApis );
+const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
+
+const useInferredLayout = ( blocks, parentLayout ) => {
+	const initialInferredAlignmentRef = useRef();
+
+	return useMemo( () => {
+		// Exit early if the pattern's blocks haven't loaded yet.
+		if ( ! blocks?.length ) {
+			return {};
+		}
+
+		let alignment = initialInferredAlignmentRef.current;
+
+		// Only track the initial alignment so that temporarily removed
+		// alignments can be reapplied.
+		if ( alignment === undefined ) {
+			const isConstrained = parentLayout?.type === 'constrained';
+			const hasFullAlignment = blocks.some( ( block ) =>
+				fullAlignments.includes( block.attributes.align )
+			);
+
+			alignment = isConstrained && hasFullAlignment ? 'full' : null;
+			initialInferredAlignmentRef.current = alignment;
+		}
+
+		const layout = alignment ? parentLayout : undefined;
+
+		return { alignment, layout };
+	}, [ blocks, parentLayout ] );
+};
+
+export default function ReusableBlockEdit( {
+	name,
+	attributes: { ref },
+	__unstableParentLayout: parentLayout,
+} ) {
+	const hasAlreadyRendered = useHasRecursion( ref );
+	const { record, hasResolved } = useEntityRecord(
+		'postType',
+		'wp_block',
+		ref
+	);
+	const isMissing = hasResolved && ! record;
+
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		'wp_block',
+		{ id: ref }
+	);
+
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		'wp_block',
+		'title',
+		ref
+	);
+
+	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
+	const layoutClasses = useLayoutClasses( { layout }, name );
+
+	const blockProps = useBlockProps( {
+		className: classnames(
+			'block-library-block__reusable-block-container',
+			layout && layoutClasses,
+			{ [ `align${ alignment }` ]: alignment }
+		),
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		layout,
+		onInput,
+		onChange,
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
+	let children = null;
+
+	if ( hasAlreadyRendered ) {
+		children = (
+			<Warning>
+				{ __( 'Block cannot be rendered inside itself.' ) }
+			</Warning>
+		);
+	}
+
+	if ( isMissing ) {
+		children = (
+			<Warning>
+				{ __( 'Block has been deleted or is unavailable.' ) }
+			</Warning>
+		);
+	}
+
+	if ( ! hasResolved ) {
+		children = (
+			<Placeholder>
+				<Spinner />
+			</Placeholder>
+		);
+	}
+
+	return (
+		<RecursionProvider uniqueId={ ref }>
+			<InspectorControls>
+				<PanelBody>
+					<TextControl
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					/>
+				</PanelBody>
+			</InspectorControls>
+			{ children === null ? (
+				<div { ...innerBlocksProps } />
+			) : (
+				<div { ...blockProps }>{ children }</div>
+			) }
+		</RecursionProvider>
+	);
+}

package/src/block/{edit.native.js → v1/edit.native.js}

@@ -42,8 +42,8 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import styles from './editor.scss';
-import EditTitle from './edit-title';
+import styles from '../editor.scss';
+import EditTitle from '../edit-title';
 
 export default function ReusableBlockEdit( {
 	attributes: { ref },

package/src/button/block.json

@@ -36,8 +36,8 @@
 			"__experimentalRole": "content"
 		},
 		"text": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "a,button",
 			"__experimentalRole": "content"
 		},

package/src/button/save.js

@@ -30,7 +30,7 @@ export default function save( { attributes, className } ) {
 		width,
 	} = attributes;
 
-	if ( ! text ) {
+	if ( RichText.isEmpty( text ) ) {
 		return null;
 	}
 

package/src/code/block.json

@@ -8,8 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "code",
 			"__unstablePreserveWhiteSpace": true
 		}