@wordpress/block-library 8.27.2 → 8.28.0

package/src/form/edit.js

@@ -20,16 +20,6 @@ import {
 	formSubmissionNotificationError,
 } from './utils.js';
 
-const ALLOWED_BLOCKS = [
-	'core/paragraph',
-	'core/heading',
-	'core/form-input',
-	'core/form-submit-button',
-	'core/form-submission-notification',
-	'core/group',
-	'core/columns',
-];
-
 const TEMPLATE = [
 	formSubmissionNotificationSuccess,
 	formSubmissionNotificationError,
@@ -76,7 +66,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 	);
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
 		template: TEMPLATE,
 		renderAppender: hasInnerBlocks
 			? undefined

package/src/form/index.php

@@ -96,7 +96,7 @@ function block_core_form_send_email() {
 		'<a href="' . esc_url( get_site_url( null, $params['_wp_http_referer'] ) ) . '">' . get_bloginfo( 'name' ) . '</a>'
 	);
 
-	$skip_fields = array( 'formAction', '_ajax_nonce', 'action' );
+	$skip_fields = array( 'formAction', '_ajax_nonce', 'action', '_wp_http_referer' );
 	foreach ( $params as $key => $value ) {
 		if ( in_array( $key, $skip_fields, true ) ) {
 			continue;
@@ -109,7 +109,7 @@ function block_core_form_send_email() {
 
 	// Send the email.
 	$result = wp_mail(
-		str_replace( 'mailto:', '', $params['wp-email-address'] ),
+		str_replace( 'mailto:', '', $params['formAction'] ),
 		__( 'Form submission', 'gutenberg' ),
 		$content
 	);

package/src/form/view.js

@@ -20,6 +20,8 @@ document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
 		formData.formAction = form.action;
 		formData._ajax_nonce = wpBlockFormSettings.nonce;
 		formData.action = wpBlockFormSettings.action;
+		formData._wp_http_referer = window.location.href;
+		formData.formAction = form.action;
 
 		try {
 			const response = await fetch( wpBlockFormSettings.ajaxUrl, {

package/src/form-submit-button/block.json

@@ -7,6 +7,7 @@
 	"category": "common",
 	"icon": "button",
 	"ancestor": [ "core/form" ],
+	"allowedBlocks": [ "core/buttons", "core/button" ],
 	"description": "A submission button for forms.",
 	"keywords": [ "submit", "button", "form" ],
 	"textdomain": "default",

package/src/form-submit-button/edit.js

@@ -23,7 +23,6 @@ const TEMPLATE = [
 const Edit = () => {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: TEMPLATE,
 		template: TEMPLATE,
 		templateLock: 'all',
 	} );

package/src/gallery/block.json

@@ -4,6 +4,7 @@
 	"name": "core/gallery",
 	"title": "Gallery",
 	"category": "media",
+	"allowedBlocks": [ "core/image" ],
 	"description": "Display multiple images in a rich gallery.",
 	"keywords": [ "images", "photos" ],
 	"textdomain": "default",
@@ -136,6 +137,9 @@
 			"default": {
 				"type": "flex"
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-gallery-editor",

package/src/gallery/edit.js

@@ -64,7 +64,6 @@ const linkOptions = [
 	},
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const allowedBlocks = [ 'core/image' ];
 
 const PLACEHOLDER_TEXT = Platform.isNative
 	? __( 'Add media' )
@@ -383,12 +382,6 @@ function GalleryEdit( props ) {
 		setAttributes( { imageCrop: ! imageCrop } );
 	}
 
-	function getImageCropHelp( checked ) {
-		return checked
-			? __( 'Thumbnails are cropped to align.' )
-			: __( 'Thumbnails are not cropped.' );
-	}
-
 	function toggleRandomOrder() {
 		setAttributes( { randomOrder: ! randomOrder } );
 	}
@@ -512,7 +505,6 @@ function GalleryEdit( props ) {
 	};
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks,
 		orientation: 'horizontal',
 		renderAppender: false,
 		...nativeInnerBlockProps,
@@ -550,50 +542,49 @@ function GalleryEdit( props ) {
 							__next40pxDefaultSize
 						/>
 					) }
+					{ imageSizeOptions?.length > 0 && (
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __( 'Resolution' ) }
+							help={ __(
+								'Select the size of the source images.'
+							) }
+							value={ sizeSlug }
+							options={ imageSizeOptions }
+							onChange={ updateImagesSize }
+							hideCancelButton={ true }
+							size="__unstable-large"
+						/>
+					) }
+					<SelectControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link to' ) }
+						value={ linkTo }
+						onChange={ setLinkTo }
+						options={ linkOptions }
+						hideCancelButton={ true }
+						size="__unstable-large"
+					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Crop images' ) }
+						label={ __( 'Crop images to fit' ) }
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }
-						help={ getImageCropHelp }
 					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Random order' ) }
+						label={ __( 'Randomize order' ) }
 						checked={ !! randomOrder }
 						onChange={ toggleRandomOrder }
 					/>
-					<SelectControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link to' ) }
-						value={ linkTo }
-						onChange={ setLinkTo }
-						options={ linkOptions }
-						hideCancelButton={ true }
-						size="__unstable-large"
-					/>
 					{ hasLinkTo && (
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
+							label={ __( 'Open images in new tab' ) }
 							checked={ linkTarget === '_blank' }
 							onChange={ toggleOpenInNewTab }
 						/>
 					) }
-					{ imageSizeOptions?.length > 0 && (
-						<SelectControl
-							__nextHasNoMarginBottom
-							label={ __( 'Resolution' ) }
-							help={ __(
-								'Select the size of the source images.'
-							) }
-							value={ sizeSlug }
-							options={ imageSizeOptions }
-							onChange={ updateImagesSize }
-							hideCancelButton={ true }
-							size="__unstable-large"
-						/>
-					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>

package/src/gallery/gallery.native.js

@@ -64,7 +64,6 @@ export const Gallery = ( props ) => {
 		{},
 		{
 			contentResizeMode: 'stretch',
-			allowedBlocks: [ 'core/image' ],
 			orientation: 'horizontal',
 			renderAppender: false,
 			numColumns: displayedColumns,

package/src/gallery/index.php

@@ -33,32 +33,18 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
 /**
- * Filter to randomize the order of image blocks.
- *
- * @param array $parsed_block The block being rendered.
- * @return array The block object with randomized order of image blocks.
- */
-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;
-}
-
-add_filter( 'render_block_data', 'block_core_gallery_random_order' );
-
-/**
- * Adds a style tag for the --wp--style--unstable-gallery-gap var.
- *
- * The Gallery block needs to recalculate Image block width based on
- * the current gap setting in order to maintain the number of flex columns
- * so a css var is added to allow this.
+ * Renders the `core/gallery` block on the server.
  *
  * @param array  $attributes Attributes of the block being rendered.
  * @param string $content Content of the block being rendered.
  * @return string The content of the block being rendered.
  */
 function block_core_gallery_render( $attributes, $content ) {
+	// Adds a style tag for the --wp--style--unstable-gallery-gap var.
+	// The Gallery block needs to recalculate Image block width based on
+	// the current gap setting in order to maintain the number of flex columns
+	// so a css var is added to allow this.
+
 	$gap = $attributes['style']['spacing']['blockGap'] ?? null;
 	// Skip if gap value contains unsupported characters.
 	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
@@ -130,7 +116,51 @@ function block_core_gallery_render( $attributes, $content ) {
 			'context' => 'block-supports',
 		)
 	);
-	return (string) $processed_content;
+
+	// The WP_HTML_Tag_Processor class calls get_updated_html() internally
+	// when the instance is treated as a string, but here we explicitly
+	// convert it to a string.
+	$updated_content = $processed_content->get_updated_html();
+
+	/*
+	 * Randomize the order of image blocks. Ideally we should shuffle
+	 * the `$parsed_block['innerBlocks']` via the `render_block_data` hook.
+	 * However, this hook doesn't apply inner block updates when blocks are
+	 * nested.
+	 * @todo: In the future, if this hook supports updating innerBlocks in
+	 * nested blocks, it should be refactored.
+	 *
+	 * @see: https://github.com/WordPress/gutenberg/pull/58733
+	 */
+	if ( empty( $attributes['randomOrder'] ) ) {
+		return $updated_content;
+	}
+
+	// This pattern matches figure elements with the `wp-block-image` class to
+	// avoid the gallery's wrapping `figure` element and extract images only.
+	$pattern = '/<figure[^>]*\bwp-block-image\b[^>]*>.*?<\/figure>/';
+
+	// Find all Image blocks.
+	preg_match_all( $pattern, $updated_content, $matches );
+	if ( ! $matches ) {
+		return $updated_content;
+	}
+	$image_blocks = $matches[0];
+
+	// Randomize the order of Image blocks.
+	shuffle( $image_blocks );
+	$i       = 0;
+	$content = preg_replace_callback(
+		$pattern,
+		static function () use ( $image_blocks, &$i ) {
+			$new_image_block = $image_blocks[ $i ];
+			++$i;
+			return $new_image_block;
+		},
+		$updated_content
+	);
+
+	return $content;
 }
 /**
  * Registers the `core/gallery` block on server.

package/src/gallery/test/index.native.js

@@ -694,7 +694,7 @@ describe( 'Gallery block', () => {
 		await openBlockSettings( screen );
 
 		// Disable crop images setting
-		fireEvent.press( getByText( 'Crop images' ) );
+		fireEvent.press( getByText( 'Crop images to fit' ) );
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );

package/src/group/block.json

@@ -87,6 +87,9 @@
 		},
 		"layout": {
 			"allowSizingOnChildren": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-group-editor",

package/src/heading/block.json

@@ -61,7 +61,10 @@
 			}
 		},
 		"__unstablePasteTextInline": true,
-		"__experimentalSlashInserter": true
+		"__experimentalSlashInserter": true,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-heading-editor",
 	"style": "wp-block-heading"

package/src/heading/test/__snapshots__/index.native.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Heading block changes heading level 1`] = `
+"<!-- wp:heading {"level":6} -->
+<h6 class="wp-block-heading"></h6>
+<!-- /wp:heading -->"
+`;
+
 exports[`Heading block inserts block 1`] = `
 "<!-- wp:heading -->
 <h2 class="wp-block-heading"></h2>

package/src/heading/test/index.native.js

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import {
+	addBlock,
 	fireEvent,
+	getBlock,
 	getEditorHtml,
 	initializeEditor,
-	addBlock,
-	getBlock,
+	screen,
 	typeInRichText,
 	waitFor,
 	within,
@@ -33,13 +34,13 @@ afterAll( () => {
 
 describe( 'Heading block', () => {
 	it( 'inserts block', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add block
 		await addBlock( screen, 'Heading' );
 
 		// Get block
-		const headingBlock = await getBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading' );
 		fireEvent.press( headingBlock );
 		expect( headingBlock ).toBeVisible();
 
@@ -48,7 +49,7 @@ describe( 'Heading block', () => {
 
 	it( 'should set a text color', async () => {
 		// Arrange
-		const screen = await initializeEditor();
+		await initializeEditor();
 		await addBlock( screen, 'Heading' );
 
 		// Act
@@ -86,7 +87,7 @@ describe( 'Heading block', () => {
 
 	it( 'should set a background color', async () => {
 		// Arrange
-		const screen = await initializeEditor();
+		await initializeEditor();
 		await addBlock( screen, 'Heading' );
 
 		// Act
@@ -120,9 +121,9 @@ describe( 'Heading block', () => {
 
 	it( 'change level dropdown displays active selection', async () => {
 		// Arrange
-		const screen = await initializeEditor();
+		await initializeEditor();
 		await addBlock( screen, 'Heading' );
-		const headingBlock = await getBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading' );
 
 		// Act
 		fireEvent.press( headingBlock );
@@ -136,9 +137,23 @@ describe( 'Heading block', () => {
 		).toBeVisible();
 	} );
 
+	it( 'changes heading level', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Heading' );
+
+		// Act
+		fireEvent.press( getBlock( screen, 'Heading' ) );
+		fireEvent.press( screen.getByLabelText( 'Change level' ) );
+		fireEvent.press( screen.getByLabelText( 'Heading 6' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should merge with an empty Paragraph block and keep being the Heading block', async () => {
 		// Arrange
-		const screen = await initializeEditor();
+		await initializeEditor();
 		await addBlock( screen, 'Paragraph' );
 
 		// Act

package/src/home-link/block.json

@@ -36,6 +36,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-home-link-editor",

package/src/home-link/index.php

@@ -129,7 +129,10 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
  */
 function render_block_core_home_link( $attributes, $content, $block ) {
 	if ( empty( $attributes['label'] ) ) {
-		return '';
+		// Using a fallback for the label attribute allows rendering the block even if no attributes have been set,
+		// e.g. when using the block as a hooked block.
+		// Note that the fallback value needs to be kept in sync with the one set in `edit.js` (upon first loading the block in the editor).
+		$attributes['label'] = __( 'Home' );
 	}
 	$aria_current = '';
 

package/src/html/block.json

@@ -16,7 +16,10 @@
 	"supports": {
 		"customClassName": false,
 		"className": false,
-		"html": false
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-html-editor"
 }

package/src/image/block.json

@@ -117,10 +117,14 @@
 				"radius": true,
 				"width": true
 			}
+		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
 		}
 	},
 	"selectors": {
 		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
+		"shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
 		"filter": {
 			"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
 		}

package/src/image/edit.js

@@ -15,6 +15,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
@@ -94,7 +95,7 @@ function hasSize( image, size ) {
 export function ImageEdit( {
 	attributes,
 	setAttributes,
-	isSelected,
+	isSelected: isSingleSelected,
 	className,
 	insertBlocksAfter,
 	onReplace,
@@ -142,14 +143,7 @@ export function ImageEdit( {
 	}, [ align ] );
 
 	const ref = useRef();
-	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return {
-			imageDefaultSize: settings.imageDefaultSize,
-			mediaUpload: settings.mediaUpload,
-		};
-	}, [] );
+	const { getSettings } = useSelect( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -183,6 +177,8 @@ export function ImageEdit( {
 
 		setTemporaryURL();
 
+		const { imageDefaultSize } = getSettings();
+
 		// Try to use the previous selected image size if its available
 		// otherwise try the default image size or fallback to "full"
 		let newSize = 'full';
@@ -265,7 +261,7 @@ export function ImageEdit( {
 			setAttributes( {
 				url: newURL,
 				id: undefined,
-				sizeSlug: imageDefaultSize,
+				sizeSlug: getSettings().imageDefaultSize,
 			} );
 		}
 	}
@@ -281,6 +277,10 @@ export function ImageEdit( {
 		const file = getBlobByURL( url );
 
 		if ( file ) {
+			const { mediaUpload } = getSettings();
+			if ( ! mediaUpload ) {
+				return;
+			}
 			mediaUpload( {
 				filesList: [ file ],
 				onFileChange: ( [ img ] ) => {
@@ -317,6 +317,7 @@ export function ImageEdit( {
 	);
 
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 
 	const classes = classnames( className, {
 		'is-transient': temporaryURL,
@@ -336,7 +337,7 @@ export function ImageEdit( {
 	// Much of this description is duplicated from MediaPlaceholder.
 	const { lockUrlControls = false } = useSelect(
 		( select ) => {
-			if ( ! isSelected ) {
+			if ( ! isSingleSelected ) {
 				return {};
 			}
 
@@ -351,14 +352,14 @@ export function ImageEdit( {
 						?.lockAttributesEditing === true,
 			};
 		},
-		[ isSelected ]
+		[ isSingleSelected ]
 	);
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
 				className={ classnames( 'block-editor-media-placeholder', {
 					[ borderProps.className ]:
-						!! borderProps.className && ! isSelected,
+						!! borderProps.className && ! isSingleSelected,
 				} ) }
 				withIllustration={ true }
 				icon={ lockUrlControls ? pluginsIcon : icon }
@@ -378,6 +379,7 @@ export function ImageEdit( {
 					height: width && aspectRatio ? '100%' : height,
 					objectFit: scale,
 					...borderProps.style,
+					...shadowProps.style,
 				} }
 			>
 				{ lockUrlControls ? (
@@ -399,7 +401,7 @@ export function ImageEdit( {
 				temporaryURL={ temporaryURL }
 				attributes={ attributes }
 				setAttributes={ setAttributes }
-				isSelected={ isSelected }
+				isSingleSelected={ isSingleSelected }
 				insertBlocksAfter={ insertBlocksAfter }
 				onReplace={ onReplace }
 				onSelectImage={ onSelectImage }