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

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

@@ -8,12 +8,12 @@ import classnames from 'classnames';
  */
 import { useRegistry, useSelect, useDispatch } from '@wordpress/data';
 import { useRef, useMemo, useEffect } from '@wordpress/element';
-import { useEntityProp, useEntityRecord } from '@wordpress/core-data';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import {
 	Placeholder,
 	Spinner,
-	TextControl,
-	PanelBody,
+	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -21,13 +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 { getBlockSupport, parse } from '@wordpress/blocks';
+import { parse, cloneBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -38,17 +38,17 @@ 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'
+		'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.connections.attributes )
+	return Object.entries( block.attributes.metadata.bindings )
 		.filter(
-			( [ , connection ] ) => connection.source === 'pattern_attributes'
+			( [ , binding ] ) => binding.source.name === 'pattern_attributes'
 		)
 		.map( ( [ attributeKey ] ) => attributeKey );
 }
@@ -97,9 +97,12 @@ function applyInitialOverrides( blocks, overrides = {}, defaultValues ) {
 		const attributes = getPartiallySyncedAttributes( block );
 		const newAttributes = { ...block.attributes };
 		for ( const attributeKey of attributes ) {
-			defaultValues[ blockId ] = block.attributes[ attributeKey ];
+			defaultValues[ blockId ] ??= {};
+			defaultValues[ blockId ][ attributeKey ] =
+				block.attributes[ attributeKey ];
 			if ( overrides[ blockId ] ) {
-				newAttributes[ attributeKey ] = overrides[ blockId ];
+				newAttributes[ attributeKey ] =
+					overrides[ blockId ][ attributeKey ];
 			}
 		}
 		return {
@@ -111,7 +114,7 @@ function applyInitialOverrides( blocks, overrides = {}, defaultValues ) {
 }
 
 function getOverridesFromBlocks( blocks, defaultValues ) {
-	/** @type {Record<string, unknown>} */
+	/** @type {Record<string, Record<string, unknown>>} */
 	const overrides = {};
 	for ( const block of blocks ) {
 		Object.assign(
@@ -123,24 +126,37 @@ function getOverridesFromBlocks( blocks, defaultValues ) {
 		const attributes = getPartiallySyncedAttributes( block );
 		for ( const attributeKey of attributes ) {
 			if (
-				block.attributes[ attributeKey ] !== defaultValues[ blockId ]
+				block.attributes[ attributeKey ] !==
+				defaultValues[ blockId ][ attributeKey ]
 			) {
-				overrides[ blockId ] = block.attributes[ 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, 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
@@ -148,53 +164,87 @@ export default function ReusableBlockEdit( {
 	const isMissing = hasResolved && ! record;
 	const initialOverrides = useRef( overrides );
 	const defaultValuesRef = useRef( {} );
+
 	const {
 		replaceInnerBlocks,
 		__unstableMarkNextChangeAsNotPersistent,
 		setBlockEditingMode,
 	} = useDispatch( blockEditorStore );
-	const { getBlockEditingMode } = useSelect( blockEditorStore );
+	const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) );
+
+	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 ]
+	);
 
+	// Apply the initial overrides from the pattern block to the inner blocks.
 	useEffect( () => {
-		if ( ! record?.content?.raw ) return;
-		const initialBlocks = parse( record.content.raw );
+		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' );
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceInnerBlocks(
-				patternClientId,
-				applyInitialOverrides(
-					initialBlocks,
-					initialOverrides.current,
-					defaultValuesRef.current
-				)
-			);
+			syncDerivedUpdates( () => {
+				replaceInnerBlocks(
+					patternClientId,
+					applyInitialOverrides(
+						initialBlocks,
+						initialOverrides.current,
+						defaultValuesRef.current
+					)
+				);
+			} );
 			setBlockEditingMode( patternClientId, editingMode );
 		} );
 	}, [
 		__unstableMarkNextChangeAsNotPersistent,
 		patternClientId,
-		record,
+		editedRecord,
 		replaceInnerBlocks,
 		registry,
 		getBlockEditingMode,
 		setBlockEditingMode,
+		syncDerivedUpdates,
 	] );
 
-	const innerBlocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( patternClientId ),
-		[ patternClientId ]
-	);
-
-	const [ title, setTitle ] = useEntityProp(
-		'postType',
-		'wp_block',
-		'title',
-		ref
-	);
-
 	const { alignment, layout } = useInferredLayout(
 		innerBlocks,
 		parentLayout
@@ -210,35 +260,38 @@ export default function ReusableBlockEdit( {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		templateLock: 'all',
 		layout,
 		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.
+	// 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 );
-		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
-					),
+				syncDerivedUpdates( () => {
+					setAttributes( {
+						overrides: getOverridesFromBlocks(
+							blocks,
+							defaultValuesRef.current
+						),
+					} );
 				} );
 			}
 		}, blockEditorStore );
-	}, [ patternClientId, registry ] );
+	}, [ syncDerivedUpdates, patternClientId, registry, setAttributes ] );
+
+	const handleEditOriginal = ( event ) => {
+		setBlockEditMode( setBlockEditingMode, innerBlocks, 'default' );
+		editOriginalProps.onClick( event );
+	};
 
 	let children = null;
 
@@ -268,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/button/editor.scss

@@ -28,49 +28,6 @@
 	}
 }
 
-.wp-block-button__inline-link {
-	color: $gray-700;
-	height: 0;
-	overflow: hidden;
-	max-width: 290px;
-
-	&-input__suggestions {
-		max-width: 290px;
-	}
-
-	@include break-medium() {
-		max-width: 260px;
-
-		&-input__suggestions {
-			max-width: 260px;
-		}
-
-	}
-	@include break-large() {
-		max-width: 290px;
-
-		&-input__suggestions {
-			max-width: 290px;
-		}
-
-	}
-
-	.is-selected & {
-		height: auto;
-		overflow: visible;
-	}
-}
-
-.wp-button-label__width {
-	.components-button-group {
-		display: block;
-	}
-
-	.components-base-control__field {
-		margin-bottom: 12px;
-	}
-}
-
 // Display "table" is used because the button container should only wrap the content and not takes the full width.
 div[data-type="core/button"] {
 	display: table;

package/src/button/style.scss

@@ -98,19 +98,19 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0 !important;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link,
-.wp-block-button .wp-block-button__link.is-style-outline {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link,
+.wp-block-button .wp-block-button__link:where(.is-style-outline) {
 	border: 2px solid currentColor;
 	padding: 0.667em 1.333em;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color) {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color),
+.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) {
 	color: currentColor;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background),
+.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) {
 	background-color: transparent;
 	// background-image is required to overwrite a gradient background
 	background-image: none;

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

@@ -6,6 +6,12 @@ exports[`Buttons block color customization sets a background color 1`] = `
 <!-- /wp:buttons -->"
 `;
 
+exports[`Buttons block color customization sets a custom gradient background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} /--></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons block color customization sets a gradient background color 1`] = `
 "<!-- wp:buttons -->
 <div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} /--></div>

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

@@ -10,6 +10,7 @@ import {
 	initializeEditor,
 	triggerBlockListLayout,
 	typeInRichText,
+	openBlockSettings,
 	waitFor,
 } from 'test/helpers';
 
@@ -391,5 +392,53 @@ describe( 'Buttons block', () => {
 			// Assert
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
+
+		it( 'sets a custom gradient background color', async () => {
+			// Arrange
+			const screen = await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			await openBlockSettings( screen );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+			// Tap on the gradient segment
+			fireEvent.press( screen.getByLabelText( 'Gradient' ) );
+
+			// Tap one gradient color
+			fireEvent.press(
+				screen.getByLabelText( 'Light green cyan to vivid green cyan' )
+			);
+
+			// Tap on Customize Gradient
+			fireEvent.press( screen.getByLabelText( /Customize Gradient/ ) );
+
+			// Change the current angle
+			fireEvent.press( screen.getByText( '135', { hidden: true } ) );
+			const angleTextInput = screen.getByDisplayValue( '135', {
+				hidden: true,
+			} );
+			fireEvent.changeText( angleTextInput, '200' );
+
+			// Go back to the settings list.
+			fireEvent.press( await screen.findByLabelText( 'Go back' ) );
+
+			// Assert
+			const customButton = await screen.findByText( 'CUSTOM' );
+			expect( customButton ).toBeVisible();
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
 	} );
 } );

package/src/comments-title/block.json

@@ -5,7 +5,7 @@
 	"title": "Comments Title",
 	"category": "theme",
 	"ancestor": [ "core/comments" ],
-	"description": "Displays a title with the number of comments",
+	"description": "Displays a title with the number of comments.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],
 	"attributes": {

package/src/cover/edit/inspector-controls.js

@@ -220,7 +220,7 @@ export default function CoverInspectorControls( {
 						<PanelRow>
 							<Button
 								variant="secondary"
-								isSmall
+								size="small"
 								className="block-library-cover__reset-button"
 								onClick={ onClearMedia }
 							>

package/src/cover/edit.native.js

@@ -538,6 +538,7 @@ const Cover = ( {
 						<BottomSheetConsumer>
 							{ ( { shouldEnableBottomSheetScroll } ) => (
 								<ColorPalette
+									enableCustomColor={ true }
 									customColorIndicatorStyles={
 										styles.paletteColorIndicator
 									}

package/src/embed/util.js

@@ -7,7 +7,7 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { renderToString } from '@wordpress/element';
 import {
 	createBlock,
@@ -23,7 +23,6 @@ import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
 import { unlock } from '../lock-unlock';
 
 const { name: DEFAULT_EMBED_BLOCK } = metadata;
-const { kebabCase } = unlock( blockEditorPrivateApis );
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
@@ -283,6 +282,7 @@ export const getAttributesFromPreview = memoize(
 		// If we got a provider name from the API, use it for the slug, otherwise we use the title,
 		// because not all embed code gives us a provider name.
 		const { html, provider_name: providerName } = preview;
+		const { kebabCase } = unlock( componentsPrivateApis );
 		const providerNameSlug = kebabCase(
 			( providerName || title ).toLowerCase()
 		);

package/src/file/edit.js

@@ -63,7 +63,6 @@ function ClipboardToolbarButton( { text, disabled } ) {
 function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const {
 		id,
-		fileId,
 		fileName,
 		href,
 		textLinkHref,
@@ -73,27 +72,26 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
-	const { media, mediaUpload } = useSelect(
+	const { getSettings } = useSelect( blockEditorStore );
+	const { media } = useSelect(
 		( select ) => ( {
 			media:
 				id === undefined
 					? undefined
 					: select( coreStore ).getMedia( id ),
-			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
 		} ),
 		[ id ]
 	);
 
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const { toggleSelection } = useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.
 		if ( isBlobURL( href ) ) {
 			const file = getBlobByURL( href );
 
-			mediaUpload( {
+			getSettings().mediaUpload( {
 				filesList: [ file ],
 				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
 				onError: onUploadError,
@@ -109,26 +107,21 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		}
 	}, [] );
 
-	useEffect( () => {
-		if ( ! fileId && href ) {
-			// Add a unique fileId to each file block.
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { fileId: `wp-block-file--media-${ clientId }` } );
-		}
-	}, [ href, fileId, clientId ] );
-
 	function onSelectFile( newMedia ) {
-		if ( newMedia && newMedia.url ) {
-			const isPdf = newMedia.url.endsWith( '.pdf' );
-			setAttributes( {
-				href: newMedia.url,
-				fileName: newMedia.title,
-				textLinkHref: newMedia.url,
-				id: newMedia.id,
-				displayPreview: isPdf ? true : undefined,
-				previewHeight: isPdf ? 600 : undefined,
-			} );
+		if ( ! newMedia || ! newMedia.url ) {
+			return;
 		}
+
+		const isPdf = newMedia.url.endsWith( '.pdf' );
+		setAttributes( {
+			href: newMedia.url,
+			fileName: newMedia.title,
+			textLinkHref: newMedia.url,
+			id: newMedia.id,
+			displayPreview: isPdf ? true : undefined,
+			previewHeight: isPdf ? 600 : undefined,
+			fileId: `wp-block-file--media-${ clientId }`,
+		} );
 	}
 
 	function onUploadError( message ) {

package/src/gallery/block.json

@@ -80,6 +80,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"randomOrder": {
+			"type": "boolean",
+			"default": false
+		},
 		"fixedHeight": {
 			"type": "boolean",
 			"default": true