@wordpress/block-library 8.24.1 → 8.25.1-next.79a6196f.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' ];
 
@@ -46,24 +42,19 @@ function AudioEdit( {
 	className,
 	setAttributes,
 	onReplace,
-	isSelected,
+	isSelected: isSingleSelected,
 	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 );
-		return getSettings().mediaUpload;
-	}, [] );
+	const { getSettings } = useSelect( blockEditorStore );
 
 	useEffect( () => {
 		if ( ! id && isBlobURL( src ) ) {
 			const file = getBlobByURL( src );
 
 			if ( file ) {
-				mediaUpload( {
+				getSettings().mediaUpload( {
 					filesList: [ file ],
 					onFileChange: ( [ media ] ) => onSelectAudio( media ),
 					onError: ( e ) => onUploadError( e ),
@@ -73,30 +64,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,34 +143,19 @@ 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 }
-					mediaURL={ src }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="audio/*"
-					onSelect={ onSelectAudio }
-					onSelectURL={ onSelectURL }
-					onError={ onUploadError }
-				/>
-			</BlockControls>
+			{ isSingleSelected && (
+				<BlockControls group="other">
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ src }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						accept="audio/*"
+						onSelect={ onSelectAudio }
+						onSelectURL={ onSelectURL }
+						onError={ onUploadError }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
@@ -247,33 +199,18 @@ function AudioEdit( {
 					so the user clicking on it won't play the
 					file or change the position slider when the controls are enabled.
 				*/ }
-				<Disabled isDisabled={ ! isSelected }>
+				<Disabled isDisabled={ ! isSingleSelected }>
 					<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={ isSingleSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Audio caption text' ) }
+					showToolbarButton={ isSingleSelected }
+				/>
 			</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/audio/test/__snapshots__/edit.native.js.snap

@@ -532,3 +532,15 @@ exports[`Audio block renders placeholder without crashing 1`] = `
   </View>
 </View>
 `;
+
+exports[`Audio block should enable autoplay setting 1`] = `
+"<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3" autoplay></audio></figure>
+<!-- /wp:audio -->"
+`;
+
+exports[`Audio block should enable loop setting 1`] = `
+"<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3" loop></audio></figure>
+<!-- /wp:audio -->"
+`;

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

@@ -5,7 +5,10 @@ import {
 	addBlock,
 	dismissModal,
 	fireEvent,
+	getBlock,
+	getEditorHtml,
 	initializeEditor,
+	openBlockSettings,
 	render,
 	screen,
 	setupCoreBlocks,
@@ -31,6 +34,10 @@ jest.unmock( '@wordpress/react-native-aztec' );
 
 const MEDIA_UPLOAD_STATE_FAILED = 3;
 
+const AUDIO_BLOCK = `<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio -->`;
+
 let uploadCallBack;
 subscribeMediaUpload.mockImplementation( ( callback ) => {
 	uploadCallBack = callback;
@@ -100,4 +107,26 @@ describe( 'Audio block', () => {
 			screen.getByText( 'Invalid URL. Audio file not found.' )
 		).toBeVisible();
 	} );
+
+	it( 'should enable autoplay setting', async () => {
+		await initializeEditor( { initialHtml: AUDIO_BLOCK } );
+
+		const audioBlock = getBlock( screen, 'Audio' );
+		fireEvent.press( audioBlock );
+		await openBlockSettings( screen );
+
+		fireEvent.press( screen.getByText( 'Autoplay' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should enable loop setting', async () => {
+		await initializeEditor( { initialHtml: AUDIO_BLOCK } );
+
+		const audioBlock = getBlock( screen, 'Audio' );
+		fireEvent.press( audioBlock );
+		await openBlockSettings( screen );
+
+		fireEvent.press( screen.getByText( 'Loop' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );

package/src/block/edit.js

@@ -6,16 +6,14 @@ 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 { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import {
 	Placeholder,
 	Spinner,
-	TextControl,
-	PanelBody,
+	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -23,12 +21,13 @@ import {
 	__experimentalRecursionProvider as RecursionProvider,
 	__experimentalUseHasRecursion as useHasRecursion,
 	InnerBlocks,
-	InspectorControls,
 	useBlockProps,
 	Warning,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	BlockControls,
 } from '@wordpress/block-editor';
-import { useRef, useMemo } from '@wordpress/element';
+import { parse, cloneBlock } 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 (
+		'core/paragraph' === block.name &&
+		!! block.attributes.metadata?.bindings &&
+		Object.values( block.attributes.metadata.bindings ).some(
+			( binding ) => binding.source.name === 'pattern_attributes'
+		)
+	);
+}
+function getPartiallySyncedAttributes( block ) {
+	return Object.entries( block.attributes.metadata.bindings )
+		.filter(
+			( [ , binding ] ) => binding.source.name === 'pattern_attributes'
+		)
+		.map( ( [ attributeKey ] ) => attributeKey );
+}
+
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
 const useInferredLayout = ( blocks, parentLayout ) => {
@@ -67,33 +84,171 @@ 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 ] ??= {};
+			defaultValues[ blockId ][ attributeKey ] =
+				block.attributes[ attributeKey ];
+			if ( overrides[ blockId ] ) {
+				newAttributes[ attributeKey ] =
+					overrides[ blockId ][ attributeKey ];
+			}
+		}
+		return {
+			...block,
+			attributes: newAttributes,
+			innerBlocks,
+		};
+	} );
+}
+
+function getOverridesFromBlocks( blocks, defaultValues ) {
+	/** @type {Record<string, 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 ][ attributeKey ]
+			) {
+				overrides[ blockId ] ??= {};
+				overrides[ blockId ][ attributeKey ] =
+					block.attributes[ attributeKey ];
+			}
+		}
+	}
+	return Object.keys( overrides ).length > 0 ? overrides : undefined;
+}
+
+function setBlockEditMode( setEditMode, blocks, mode ) {
+	blocks.forEach( ( block ) => {
+		const editMode =
+			mode || ( isPartiallySynced( block ) ? 'contentOnly' : 'disabled' );
+		setEditMode( block.clientId, editMode );
+		setBlockEditMode( setEditMode, block.innerBlocks, mode );
+	} );
+}
+
 export default function ReusableBlockEdit( {
 	name,
-	attributes: { ref },
+	attributes: { ref, overrides },
 	__unstableParentLayout: parentLayout,
+	clientId: patternClientId,
+	setAttributes,
 } ) {
+	const registry = useRegistry();
 	const hasAlreadyRendered = useHasRecursion( ref );
-	const { record, hasResolved } = useEntityRecord(
+	const { record, editedRecord, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
 		ref
 	);
 	const isMissing = hasResolved && ! record;
+	const initialOverrides = useRef( overrides );
+	const defaultValuesRef = useRef( {} );
 
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		'wp_block',
-		{ id: ref }
-	);
+	const {
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+		setBlockEditingMode,
+	} = useDispatch( blockEditorStore );
+	const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) );
 
-	const [ title, setTitle ] = useEntityProp(
-		'postType',
-		'wp_block',
-		'title',
-		ref
+	const { innerBlocks, userCanEdit, getBlockEditingMode, getPostLinkProps } =
+		useSelect(
+			( select ) => {
+				const { canUser } = select( coreStore );
+				const {
+					getBlocks,
+					getBlockEditingMode: editingMode,
+					getSettings,
+				} = select( blockEditorStore );
+				const blocks = getBlocks( patternClientId );
+				const canEdit = canUser( 'update', 'blocks', ref );
+
+				// For editing link to the site editor if the theme and user permissions support it.
+				return {
+					innerBlocks: blocks,
+					userCanEdit: canEdit,
+					getBlockEditingMode: editingMode,
+					getPostLinkProps: getSettings().getPostLinkProps,
+				};
+			},
+			[ patternClientId, ref ]
+		);
+
+	const editOriginalProps = getPostLinkProps
+		? getPostLinkProps( {
+				postId: ref,
+				postType: 'wp_block',
+				canvas: 'edit',
+		  } )
+		: {};
+
+	useEffect(
+		() => setBlockEditMode( setBlockEditingMode, innerBlocks ),
+		[ innerBlocks, setBlockEditingMode ]
 	);
 
-	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
+	// Apply the initial overrides from the pattern block to the inner blocks.
+	useEffect( () => {
+		const initialBlocks =
+			// Clone the blocks to generate new client IDs.
+			editedRecord.blocks?.map( ( block ) => cloneBlock( block ) ) ??
+			( editedRecord.content && typeof editedRecord.content !== 'function'
+				? parse( editedRecord.content )
+				: [] );
+
+		defaultValuesRef.current = {};
+		const editingMode = getBlockEditingMode( patternClientId );
+		// Replace the contents of the blocks with the overrides.
+		registry.batch( () => {
+			setBlockEditingMode( patternClientId, 'default' );
+			syncDerivedUpdates( () => {
+				replaceInnerBlocks(
+					patternClientId,
+					applyInitialOverrides(
+						initialBlocks,
+						initialOverrides.current,
+						defaultValuesRef.current
+					)
+				);
+			} );
+			setBlockEditingMode( patternClientId, editingMode );
+		} );
+	}, [
+		__unstableMarkNextChangeAsNotPersistent,
+		patternClientId,
+		editedRecord,
+		replaceInnerBlocks,
+		registry,
+		getBlockEditingMode,
+		setBlockEditingMode,
+		syncDerivedUpdates,
+	] );
+
+	const { alignment, layout } = useInferredLayout(
+		innerBlocks,
+		parentLayout
+	);
 	const layoutClasses = useLayoutClasses( { layout }, name );
 
 	const blockProps = useBlockProps( {
@@ -105,16 +260,41 @@ export default function ReusableBlockEdit( {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		value: blocks,
+		templateLock: 'all',
 		layout,
-		onInput,
-		onChange,
-		renderAppender: blocks?.length
+		renderAppender: innerBlocks?.length
 			? undefined
 			: InnerBlocks.ButtonBlockAppender,
 	} );
 
+	// Sync the `overrides` attribute from the updated blocks to the pattern block.
+	// `syncDerivedUpdates` is used here to avoid creating an additional undo level.
+	useEffect( () => {
+		const { getBlocks } = registry.select( blockEditorStore );
+		let prevBlocks = getBlocks( patternClientId );
+		return registry.subscribe( () => {
+			const blocks = getBlocks( patternClientId );
+			if ( blocks !== prevBlocks ) {
+				prevBlocks = blocks;
+				syncDerivedUpdates( () => {
+					setAttributes( {
+						overrides: getOverridesFromBlocks(
+							blocks,
+							defaultValuesRef.current
+						),
+					} );
+				} );
+			}
+		}, blockEditorStore );
+	}, [ syncDerivedUpdates, patternClientId, registry, setAttributes ] );
+
+	const handleEditOriginal = ( event ) => {
+		setBlockEditMode( setBlockEditingMode, innerBlocks, 'default' );
+		editOriginalProps.onClick( event );
+	};
+
 	let children = null;
+
 	if ( hasAlreadyRendered ) {
 		children = (
 			<Warning>
@@ -141,17 +321,18 @@ export default function ReusableBlockEdit( {
 
 	return (
 		<RecursionProvider uniqueId={ ref }>
-			<InspectorControls>
-				<PanelBody>
-					<TextControl
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-					/>
-				</PanelBody>
-			</InspectorControls>
+			{ userCanEdit && editOriginalProps && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							href={ editOriginalProps.href }
+							onClick={ handleEditOriginal }
+						>
+							{ __( 'Edit original' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
 			{ children === null ? (
 				<div { ...innerBlocksProps } />
 			) : (

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 );
+}