@wordpress/block-library 8.26.0 → 8.27.0

package/src/button/save.js

@@ -12,6 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
@@ -40,6 +41,7 @@ export default function save( { attributes, className } ) {
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const buttonClasses = classnames(
 		'wp-block-button__link',
 		colorProps.className,
@@ -56,6 +58,7 @@ export default function save( { attributes, className } ) {
 		...borderProps.style,
 		...colorProps.style,
 		...spacingProps.style,
+		...shadowProps.style,
 	};
 
 	// The use of a `title` attribute here is soft-deprecated, but still applied

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/cover/edit.native.js

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

package/src/embed/edit.js

@@ -127,16 +127,17 @@ const EmbedEdit = ( props ) => {
 	};
 
 	useEffect( () => {
-		if ( ! preview?.html || ! cannotEmbed || fetching ) {
+		if ( preview?.html || ! cannotEmbed || fetching ) {
 			return;
 		}
+
 		// At this stage, we're not fetching the preview and know it can't be embedded,
 		// so try removing any trailing slash, and resubmit.
 		const newURL = attributesUrl.replace( /\/$/, '' );
 		setURL( newURL );
 		setIsEditingURL( false );
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, attributesUrl, cannotEmbed, fetching ] );
+	}, [ preview?.html, attributesUrl, cannotEmbed, fetching, setAttributes ] );
 
 	// Try a different provider in case the embed url is not supported.
 	useEffect( () => {

package/src/file/block.json

@@ -72,7 +72,6 @@
 		},
 		"interactivity": true
 	},
-	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",
 	"style": "wp-block-file"
 }

package/src/file/index.php

@@ -14,35 +14,8 @@
  *
  * @return string Returns the block content.
  */
-function render_block_core_file( $attributes, $content, $block ) {
-	$is_gutenberg_plugin     = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
-	$should_load_view_script = ! empty( $attributes['displayPreview'] );
-	$view_js_file            = 'wp-block-file-view';
-	$script_handles          = $block->block_type->view_script_handles;
-
-	if ( $is_gutenberg_plugin ) {
-		if ( $should_load_view_script ) {
-			gutenberg_enqueue_module( '@wordpress/block-library/file-block' );
-		}
-		// Remove the view script because we are using the module.
-		$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
-	} else {
-		// If the script already exists, there is no point in removing it from viewScript.
-		if ( ! wp_script_is( $view_js_file ) ) {
-
-			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-			if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
-			}
-			// If the script is needed, but it was previously removed, add it again.
-			if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
-			}
-		}
-	}
-
+function render_block_core_file( $attributes, $content ) {
 	// Update object's aria-label attribute if present in block HTML.
-
 	// Match an aria-label attribute from an object tag.
 	$pattern = '@<object.+(?<attribute>aria-label="(?<filename>[^"]+)?")@i';
 	$content = preg_replace_callback(
@@ -63,8 +36,10 @@ function render_block_core_file( $attributes, $content, $block ) {
 		$content
 	);
 
-	// If it uses the Interactivity API, add the directives.
-	if ( $should_load_view_script ) {
+	// If it's interactive, enqueue the script module and add the directives.
+	if ( ! empty( $attributes['displayPreview'] ) ) {
+		wp_enqueue_script_module( '@wordpress/block-library/file-block' );
+
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '{"namespace":"core/file"}' );
@@ -77,25 +52,6 @@ function render_block_core_file( $attributes, $content, $block ) {
 	return $content;
 }
 
-/**
- * Ensure that the view script has the `wp-interactivity` dependency.
- *
- * @since 6.4.0
- *
- * @global WP_Scripts $wp_scripts
- */
-function block_core_file_ensure_interactivity_dependency() {
-	global $wp_scripts;
-	if (
-		isset( $wp_scripts->registered['wp-block-file-view'] ) &&
-		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-file-view']->deps, true )
-	) {
-		$wp_scripts->registered['wp-block-file-view']->deps[] = 'wp-interactivity';
-	}
-}
-
-add_action( 'wp_print_scripts', 'block_core_file_ensure_interactivity_dependency' );
-
 /**
  * Registers the `core/file` block on server.
  */
@@ -107,13 +63,11 @@ function register_block_core_file() {
 		)
 	);
 
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		gutenberg_register_module(
-			'@wordpress/block-library/file-block',
-			gutenberg_url( '/build/interactivity/file.min.js' ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-	}
+	wp_register_script_module(
+		'@wordpress/block-library/file-block',
+		gutenberg_url( '/build/interactivity/file.min.js' ),
+		array( '@wordpress/interactivity' ),
+		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+	);
 }
 add_action( 'init', 'register_block_core_file' );

package/src/footnotes/edit.js

@@ -14,10 +14,11 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 		'meta',
 		postId
 	);
+	const footnotesSupported = 'string' === typeof meta?.footnotes;
 	const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
 	const blockProps = useBlockProps();
 
-	if ( postType !== 'post' && postType !== 'page' ) {
+	if ( ! footnotesSupported ) {
 		return (
 			<div { ...blockProps }>
 				<Placeholder

package/src/footnotes/format.js

@@ -15,6 +15,7 @@ import {
 	privateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 
 /**
@@ -38,12 +39,12 @@ export const format = {
 	},
 	interactive: true,
 	contentEditable: false,
-	[ usesContextKey ]: [ 'postType' ],
+	[ usesContextKey ]: [ 'postType', 'postId' ],
 	edit: function Edit( {
 		value,
 		onChange,
 		isObjectActive,
-		context: { postType },
+		context: { postType, postId },
 	} ) {
 		const registry = useRegistry();
 		const {
@@ -53,40 +54,42 @@ export const format = {
 			getBlockName,
 			getBlockParentsByBlockName,
 		} = registry.select( blockEditorStore );
-		const hasFootnotesBlockType = useSelect(
-			( select ) =>
-				!! select( blocksStore ).getBlockType( 'core/footnotes' ),
-			[]
+		const isFootnotesSupported = useSelect(
+			( select ) => {
+				if (
+					! select( blocksStore ).getBlockType( 'core/footnotes' )
+				) {
+					return false;
+				}
+
+				const entityRecord = select( coreDataStore ).getEntityRecord(
+					'postType',
+					postType,
+					postId
+				);
+
+				if ( 'string' !== typeof entityRecord?.meta?.footnotes ) {
+					return false;
+				}
+
+				// Checks if the selected block lives within a pattern.
+				const {
+					getBlockParentsByBlockName: _getBlockParentsByBlockName,
+					getSelectedBlockClientId: _getSelectedBlockClientId,
+				} = select( blockEditorStore );
+				const parentCoreBlocks = _getBlockParentsByBlockName(
+					_getSelectedBlockClientId(),
+					SYNCED_PATTERN_BLOCK_NAME
+				);
+				return ! parentCoreBlocks || parentCoreBlocks.length === 0;
+			},
+			[ postType, postId ]
 		);
-		/*
-		 * This useSelect exists because we need to use its return value
-		 * outside the event callback.
-		 */
-		const isBlockWithinPattern = useSelect( ( select ) => {
-			const {
-				getBlockParentsByBlockName: _getBlockParentsByBlockName,
-				getSelectedBlockClientId: _getSelectedBlockClientId,
-			} = select( blockEditorStore );
-			const parentCoreBlocks = _getBlockParentsByBlockName(
-				_getSelectedBlockClientId(),
-				SYNCED_PATTERN_BLOCK_NAME
-			);
-			return parentCoreBlocks && parentCoreBlocks.length > 0;
-		}, [] );
 
 		const { selectionChange, insertBlock } =
 			useDispatch( blockEditorStore );
 
-		if ( ! hasFootnotesBlockType ) {
-			return null;
-		}
-
-		if ( postType !== 'post' && postType !== 'page' ) {
-			return null;
-		}
-
-		// Checks if the selected block lives within a pattern.
-		if ( isBlockWithinPattern ) {
+		if ( ! isFootnotesSupported ) {
 			return null;
 		}
 

package/src/footnotes/index.php

@@ -68,17 +68,26 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
  * @since 6.3.0
  */
 function register_block_core_footnotes() {
-	foreach ( array( 'post', 'page' ) as $post_type ) {
-		register_post_meta(
-			$post_type,
-			'footnotes',
-			array(
-				'show_in_rest'      => true,
-				'single'            => true,
-				'type'              => 'string',
-				'revisions_enabled' => true,
-			)
-		);
+	$post_types = get_post_types(
+		array(
+			'show_in_rest' => true,
+			'public'       => true,
+		)
+	);
+	foreach ( $post_types as $post_type ) {
+		// Only register the meta field if the post type supports the editor, custom fields, and revisions.
+		if ( post_type_supports( $post_type, 'editor' ) && post_type_supports( $post_type, 'custom-fields' ) && post_type_supports( $post_type, 'revisions' ) ) {
+			register_post_meta(
+				$post_type,
+				'footnotes',
+				array(
+					'show_in_rest'      => true,
+					'single'            => true,
+					'type'              => 'string',
+					'revisions_enabled' => true,
+				)
+			);
+		}
 	}
 	register_block_type_from_metadata(
 		__DIR__ . '/footnotes',

package/src/gallery/index.php

@@ -42,9 +42,6 @@ function block_core_gallery_random_order( $parsed_block ) {
 	if ( 'core/gallery' === $parsed_block['blockName'] && ! empty( $parsed_block['attrs']['randomOrder'] ) ) {
 		shuffle( $parsed_block['innerBlocks'] );
 	}
-
-	return $parsed_block;
-
 	return $parsed_block;
 }
 

package/src/heading/block.json

@@ -7,6 +7,7 @@
 	"description": "Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.",
 	"keywords": [ "title", "subtitle" ],
 	"textdomain": "default",
+	"usesContext": [ "pattern/overrides" ],
 	"attributes": {
 		"textAlign": {
 			"type": "string"

package/src/heading/edit.js

@@ -17,6 +17,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	HeadingLevelDropdown,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 
 /**
@@ -40,6 +41,7 @@ function HeadingEdit( {
 		} ),
 		style,
 	} );
+	const blockEditingMode = useBlockEditingMode();
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
 		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
@@ -90,20 +92,22 @@ function HeadingEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					value={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ blockEditingMode === 'default' && (
+				<BlockControls group="block">
+					<HeadingLevelDropdown
+						value={ level }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<RichText
 				identifier="content"
 				tagName={ tagName }

package/src/heading/edit.native.js

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, Platform } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+	store as blockEditorStore,
+	HeadingLevelDropdown,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { generateAnchor, setAnchor } from './autogenerate-anchors';
+
+function HeadingEdit( {
+	attributes,
+	setAttributes,
+	mergeBlocks,
+	onReplace,
+	style,
+	clientId,
+} ) {
+	const { textAlign, content, level, placeholder, anchor } = attributes;
+	const tagName = 'h' + level;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+		style,
+	} );
+
+	const { canGenerateAnchors } = useSelect( ( select ) => {
+		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+
+		return {
+			canGenerateAnchors:
+				!! settings.generateAnchors ||
+				getGlobalBlockCount( 'core/table-of-contents' ) > 0,
+		};
+	}, [] );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// Initially set anchor for headings that have content but no anchor set.
+	// This is used when transforming a block to heading, or for legacy anchors.
+	useEffect( () => {
+		if ( ! canGenerateAnchors ) {
+			return;
+		}
+
+		if ( ! anchor && content ) {
+			// This side-effect should not create an undo level.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				anchor: generateAnchor( clientId, content ),
+			} );
+		}
+		setAnchor( clientId, anchor );
+
+		// Remove anchor map when block unmounts.
+		return () => setAnchor( clientId, null );
+	}, [ anchor, content, clientId, canGenerateAnchors ] );
+
+	const onContentChange = ( value ) => {
+		const newAttrs = { content: value };
+		if (
+			canGenerateAnchors &&
+			( ! anchor ||
+				! value ||
+				generateAnchor( clientId, content ) === anchor )
+		) {
+			newAttrs.anchor = generateAnchor( clientId, value );
+		}
+		setAttributes( newAttrs );
+	};
+
+	return (
+		<>
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					value={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<RichText
+				identifier="content"
+				tagName={ tagName }
+				value={ content }
+				onChange={ onContentChange }
+				onMerge={ mergeBlocks }
+				onSplit={ ( value, isOriginal ) => {
+					let block;
+
+					if ( isOriginal || value ) {
+						block = createBlock( 'core/heading', {
+							...attributes,
+							content: value,
+						} );
+					} else {
+						block = createBlock(
+							getDefaultBlockName() ?? 'core/heading'
+						);
+					}
+
+					if ( isOriginal ) {
+						block.clientId = clientId;
+					}
+
+					return block;
+				} }
+				onReplace={ onReplace }
+				onRemove={ () => onReplace( [] ) }
+				placeholder={ placeholder || __( 'Heading' ) }
+				textAlign={ textAlign }
+				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
+				{ ...blockProps }
+			/>
+		</>
+	);
+}
+
+export default HeadingEdit;

package/src/image/block.json

@@ -4,7 +4,12 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight" ],
+	"usesContext": [
+		"allowResize",
+		"imageCrop",
+		"fixedHeight",
+		"pattern/overrides"
+	],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
@@ -129,6 +134,5 @@
 		{ "name": "rounded", "label": "Rounded" }
 	],
 	"editorStyle": "wp-block-image-editor",
-	"style": "wp-block-image",
-	"viewScript": "file:./view.min.js"
+	"style": "wp-block-image"
 }

package/src/image/edit.js

@@ -19,7 +19,7 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { image as icon } from '@wordpress/icons';
+import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -111,6 +111,7 @@ export function ImageEdit( {
 		aspectRatio,
 		scale,
 		align,
+		metadata,
 	} = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
@@ -332,6 +333,7 @@ export function ImageEdit( {
 	} );
 
 	// Much of this description is duplicated from MediaPlaceholder.
+	const isUrlAttributeConnected = !! metadata?.bindings?.url;
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
@@ -340,11 +342,14 @@ export function ImageEdit( {
 						!! borderProps.className && ! isSelected,
 				} ) }
 				withIllustration={ true }
-				icon={ icon }
+				icon={ isUrlAttributeConnected ? pluginsIcon : icon }
 				label={ __( 'Image' ) }
-				instructions={ __(
-					'Upload an image file, pick one from your media library, or add one with a URL.'
-				) }
+				instructions={
+					! isUrlAttributeConnected &&
+					__(
+						'Upload an image file, pick one from your media library, or add one with a URL.'
+					)
+				}
 				style={ {
 					aspectRatio:
 						! ( width && height ) && aspectRatio
@@ -356,7 +361,15 @@ export function ImageEdit( {
 					...borderProps.style,
 				} }
 			>
-				{ content }
+				{ isUrlAttributeConnected ? (
+					<span
+						className={ 'block-bindings-media-placeholder-message' }
+					>
+						{ __( 'Connected to a custom field' ) }
+					</span>
+				) : (
+					content
+				) }
 			</Placeholder>
 		);
 	};