@wordpress/block-library 8.23.0 → 8.24.1

package/src/cover/style.scss

@@ -123,7 +123,7 @@
 	h4,
 	h5,
 	h6 {
-		&:not(.has-text-color) {
+		&:where(:not(.has-text-color)) {
 			color: inherit;
 		}
 	}

package/src/cover/test/edit.js

@@ -53,7 +53,7 @@ async function createAndSelectBlock() {
 	);
 	await userEvent.click(
 		screen.getByRole( 'button', {
-			name: 'Select Cover',
+			name: 'Select parent block: Cover',
 		} )
 	);
 }

package/src/editor.scss

@@ -65,7 +65,7 @@
 
 // This CSS Custom Properties aren't used anymore as defaults,
 // but we still need to keep them for backward compatibility.
-.editor-styles-wrapper {
+:where(.editor-styles-wrapper) {
 	--wp--preset--font-size--normal: 16px;
 	--wp--preset--font-size--huge: 42px;
 }
@@ -74,19 +74,19 @@
 //
 // The reason we add the editor class wrapper here is
 // to avoid enqueing the classes twice: here and in ./editor.scss
-.editor-styles-wrapper .has-regular-font-size {
+:where(.editor-styles-wrapper) .has-regular-font-size {
 	font-size: 16px;
 }
 
-.editor-styles-wrapper .has-larger-font-size {
+:where(.editor-styles-wrapper) .has-larger-font-size {
 	font-size: 42px;
 }
 
-.editor-styles-wrapper .has-normal-font-size {
+:where(.editor-styles-wrapper) .has-normal-font-size {
 	font-size: var(--wp--preset--font-size--normal);
 }
 
-.editor-styles-wrapper .has-huge-font-size {
+:where(.editor-styles-wrapper) .has-huge-font-size {
 	font-size: var(--wp--preset--font-size--huge);
 }
 
@@ -98,6 +98,6 @@
  */
 
 // Remove the browser default border for iframe in Custom HTML block, Embed block, etc.
-.editor-styles-wrapper iframe:not([frameborder]) {
+:where(.editor-styles-wrapper) iframe:not([frameborder]) {
 	border: 0;
 }

package/src/file/edit.js

@@ -35,6 +35,7 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import FileBlockInspector from './inspector';
 import { browserSupportsPdfs } from './utils';
+import removeAnchorTag from '../utils/remove-anchor-tag';
 
 export const MIN_PREVIEW_HEIGHT = 200;
 export const MAX_PREVIEW_HEIGHT = 2000;
@@ -102,7 +103,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		}
 
 		if ( downloadButtonText === undefined ) {
-			changeDownloadButtonText( _x( 'Download', 'button label' ) );
+			setAttributes( {
+				downloadButtonText: _x( 'Download', 'button label' ),
+			} );
 		}
 	}, [] );
 
@@ -148,13 +151,6 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( { showDownloadButton: newValue } );
 	}
 
-	function changeDownloadButtonText( newValue ) {
-		// Remove anchor tags from button text content.
-		setAttributes( {
-			downloadButtonText: newValue.replace( /<\/?a[^>]*>/g, '' ),
-		} );
-	}
-
 	function changeDisplayPreview( newValue ) {
 		setAttributes( { displayPreview: newValue } );
 	}
@@ -277,7 +273,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						placeholder={ __( 'Write file name…' ) }
 						withoutInteractiveFormatting
 						onChange={ ( text ) =>
-							setAttributes( { fileName: text } )
+							setAttributes( {
+								fileName: removeAnchorTag( text ),
+							} )
 						}
 						href={ textLinkHref }
 					/>
@@ -301,7 +299,10 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 								withoutInteractiveFormatting
 								placeholder={ __( 'Add text…' ) }
 								onChange={ ( text ) =>
-									changeDownloadButtonText( text )
+									setAttributes( {
+										downloadButtonText:
+											removeAnchorTag( text ),
+									} )
 								}
 							/>
 						</div>

package/src/file/index.php

@@ -15,19 +15,29 @@
  * @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';
-	// If the script already exists, there is no point in removing it from viewScript.
-	if ( ! wp_script_is( $view_js_file ) ) {
-		$script_handles = $block->block_type->view_script_handles;
+	$script_handles          = $block->block_type->view_script_handles;
 
-		// 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 ( $is_gutenberg_plugin ) {
+		if ( $should_load_view_script ) {
+			gutenberg_enqueue_module( '@wordpress/block-library/file-block' );
 		}
-		// 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 ) );
+		// 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 ) );
+			}
 		}
 	}
 
@@ -57,9 +67,9 @@ function render_block_core_file( $attributes, $content, $block ) {
 	if ( $should_load_view_script ) {
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
-		$processor->set_attribute( 'data-wp-interactive', '' );
+		$processor->set_attribute( 'data-wp-interactive', '{"namespace":"core/file"}' );
 		$processor->next_tag( 'object' );
-		$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
 		$processor->set_attribute( 'hidden', true );
 		return $processor->get_updated_html();
 	}
@@ -96,5 +106,14 @@ function register_block_core_file() {
 			'render_callback' => 'render_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' )
+		);
+	}
 }
 add_action( 'init', 'register_block_core_file' );

package/src/file/view.js

@@ -5,14 +5,12 @@ import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { browserSupportsPdfs as hasPdfPreview } from './utils';
+import { browserSupportsPdfs } from './utils';
 
-store( {
-	selectors: {
-		core: {
-			file: {
-				hasPdfPreview,
-			},
+store( 'core/file', {
+	state: {
+		get hasPdfPreview() {
+			return browserSupportsPdfs();
 		},
 	},
 } );

package/src/gallery/style.scss

@@ -57,6 +57,7 @@ figure.wp-block-gallery.has-nested-images {
 			text-align: center;
 			width: 100%;
 			box-sizing: border-box;
+			@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));
 
 			img {
 				display: inline;

package/src/group/edit.js

@@ -71,13 +71,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 	);
 }
 
-function GroupEdit( {
-	attributes,
-	name,
-	setAttributes,
-	clientId,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
+function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
 			const { getBlock, getSettings } = select( blockEditorStore );
@@ -103,9 +97,8 @@ function GroupEdit( {
 		themeSupportsLayout || type === 'flex' || type === 'grid';
 
 	// Hooks.
-	const blockProps = useBlockProps( {
-		className: ! layoutSupportEnabled ? layoutClassNames : null,
-	} );
+	const blockProps = useBlockProps();
+
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
 		usedLayoutType: type,
@@ -134,7 +127,6 @@ function GroupEdit( {
 			templateLock,
 			allowedBlocks,
 			renderAppender,
-			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);
 

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

@@ -6,6 +6,12 @@ exports[`Heading block inserts block 1`] = `
 <!-- /wp:heading -->"
 `;
 
+exports[`Heading block should merge with an empty Paragraph block and keep being the Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`Heading block should set a background color 1`] = `
 "<!-- wp:heading {"backgroundColor":"luminous-vivid-orange"} -->
 <h2 class="wp-block-heading has-luminous-vivid-orange-background-color has-background">A quick brown fox jumps over the lazy dog.</h2>

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

@@ -17,6 +17,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 beforeAll( () => {
 	// Register all core blocks
@@ -134,4 +135,43 @@ describe( 'Heading block', () => {
 			)
 		).toBeVisible();
 	} );
+
+	it( 'should merge with an empty Paragraph block and keep being the Heading block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading', { rowIndex: 2 } );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );

package/src/image/block.json

@@ -9,9 +9,6 @@
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
 	"attributes": {
-		"align": {
-			"type": "string"
-		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
@@ -95,6 +92,8 @@
 		}
 	},
 	"supports": {
+		"interactivity": true,
+		"align": [ "left", "center", "right", "wide", "full" ],
 		"anchor": true,
 		"color": {
 			"text": false,

package/src/image/edit.js

@@ -10,8 +10,6 @@ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	BlockAlignmentControl,
-	BlockControls,
 	BlockIcon,
 	MediaPlaceholder,
 	useBlockProps,
@@ -106,13 +104,13 @@ export function ImageEdit( {
 		url = '',
 		alt,
 		caption,
-		align,
 		id,
 		width,
 		height,
 		sizeSlug,
 		aspectRatio,
 		scale,
+		align,
 	} = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
@@ -126,6 +124,21 @@ export function ImageEdit( {
 		captionRef.current = caption;
 	}, [ caption ] );
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( [ 'wide', 'full' ].includes( align ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				width: undefined,
+				height: undefined,
+				aspectRatio: undefined,
+				scale: undefined,
+			} );
+		}
+	}, [ align ] );
+
 	const ref = useRef();
 	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -255,16 +268,6 @@ export function ImageEdit( {
 		}
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	let isTemp = isTemporaryImage( id, url );
 
 	// Upload a temporary image on mount.
@@ -375,14 +378,6 @@ export function ImageEdit( {
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }
 			/>
-			{ ! url && blockEditingMode === 'default' && (
-				<BlockControls group="block">
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				</BlockControls>
-			) }
 			<MediaPlaceholder
 				icon={ <BlockIcon icon={ icon } /> }
 				onSelect={ onSelectImage }

package/src/image/edit.native.js

@@ -44,7 +44,6 @@ import {
 	MEDIA_TYPE_IMAGE,
 	BlockControls,
 	InspectorControls,
-	BlockAlignmentToolbar,
 	BlockStyles,
 	store as blockEditorStore,
 	blockSettingsScreens,
@@ -212,7 +211,6 @@ export class ImageEdit extends Component {
 		this.onSetFeatured = this.onSetFeatured.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.onSelectURL = this.onSelectURL.bind( this );
-		this.updateAlignment = this.updateAlignment.bind( this );
 		this.accessibilityLabelCreator =
 			this.accessibilityLabelCreator.bind( this );
 		this.setMappedAttributes = this.setMappedAttributes.bind( this );
@@ -305,6 +303,20 @@ export class ImageEdit extends Component {
 			this.replacedFeaturedImage = false;
 			setFeaturedImage( id );
 		}
+
+		const { align } = attributes;
+		const { __unstableMarkNextChangeAsNotPersistent } = this.props;
+
+		// Update the attributes if the align is wide or full
+		if ( [ 'wide', 'full' ].includes( align ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				width: undefined,
+				height: undefined,
+				aspectRatio: undefined,
+				scale: undefined,
+			} );
+		}
 	}
 
 	static getDerivedStateFromProps( props, state ) {
@@ -391,18 +403,6 @@ export class ImageEdit extends Component {
 		} );
 	}
 
-	updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = Object.values(
-			WIDE_ALIGNMENTS.alignments
-		).includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		this.props.setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	onSetNewTab( value ) {
 		const updatedLinkTarget = getUpdatedLinkTargetSettings(
 			value,
@@ -711,10 +711,6 @@ export class ImageEdit extends Component {
 						onClick={ open }
 					/>
 				</ToolbarGroup>
-				<BlockAlignmentToolbar
-					value={ align }
-					onChange={ this.updateAlignment }
-				/>
 			</BlockControls>
 		);
 
@@ -941,8 +937,11 @@ export default compose( [
 	} ),
 	withDispatch( ( dispatch ) => {
 		const { createErrorNotice } = dispatch( noticesStore );
+		const { __unstableMarkNextChangeAsNotPersistent } =
+			dispatch( blockEditorStore );
 
 		return {
+			__unstableMarkNextChangeAsNotPersistent,
 			createErrorNotice,
 			closeSettingsBottomSheet() {
 				dispatch( editPostStore ).closeGeneralSidebar();

package/src/image/editor.scss

@@ -62,13 +62,6 @@ figure.wp-block-image:not(.wp-block) {
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
-
-	// When the Image block is linked,
-	// it's wrapped with a disabled <a /> tag.
-	// Restore cursor style so it doesn't appear 'clickable'.
-	> a {
-		cursor: default;
-	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.

package/src/image/image.js

@@ -25,7 +25,6 @@ import {
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	useSettings,
-	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
@@ -83,9 +82,29 @@ const scaleOptions = [
 	},
 ];
 
-const disabledClickProps = {
-	onClick: ( event ) => event.preventDefault(),
-	'aria-disabled': true,
+// If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles.
+const ImageWrapper = ( { href, children } ) => {
+	if ( ! href ) {
+		return children;
+	}
+	return (
+		<a
+			href={ href }
+			onClick={ ( event ) => event.preventDefault() }
+			aria-disabled={ true }
+			style={ {
+				// When the Image block is linked,
+				// it's wrapped with a disabled <a /> tag.
+				// Restore cursor style so it doesn't appear 'clickable'
+				// and remove pointer events. Safari needs the display property.
+				pointerEvents: 'none',
+				cursor: 'default',
+				display: 'inline',
+			} }
+		>
+			{ children }
+		</a>
+	);
 };
 
 export default function Image( {
@@ -333,21 +352,6 @@ export default function Image( {
 		} );
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? {
-					width: undefined,
-					height: undefined,
-					aspectRatio: undefined,
-					scale: undefined,
-			  }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
@@ -435,12 +439,6 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ hasNonContentControls && (
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				) }
 				{ hasNonContentControls && (
 					<ToolbarButton
 						onClick={ () => {
@@ -653,25 +651,31 @@ export default function Image( {
 
 	if ( canEditImage && isEditingImage ) {
 		img = (
-			<ImageEditor
-				id={ id }
-				url={ url }
-				width={ numericWidth }
-				height={ numericHeight }
-				clientWidth={ fallbackClientWidth }
-				naturalHeight={ naturalHeight }
-				naturalWidth={ naturalWidth }
-				onSaveImage={ ( imageAttributes ) =>
-					setAttributes( imageAttributes )
-				}
-				onFinishEditing={ () => {
-					setIsEditingImage( false );
-				} }
-				borderProps={ isRounded ? undefined : borderProps }
-			/>
+			<ImageWrapper href={ href }>
+				<ImageEditor
+					id={ id }
+					url={ url }
+					width={ numericWidth }
+					height={ numericHeight }
+					clientWidth={ fallbackClientWidth }
+					naturalHeight={ naturalHeight }
+					naturalWidth={ naturalWidth }
+					onSaveImage={ ( imageAttributes ) =>
+						setAttributes( imageAttributes )
+					}
+					onFinishEditing={ () => {
+						setIsEditingImage( false );
+					} }
+					borderProps={ isRounded ? undefined : borderProps }
+				/>
+			</ImageWrapper>
 		);
 	} else if ( ! isResizable ) {
-		img = <div style={ { width, height, aspectRatio } }>{ img }</div>;
+		img = (
+			<div style={ { width, height, aspectRatio } }>
+				<ImageWrapper href={ href }>{ img }</ImageWrapper>
+			</div>
+		);
 	} else {
 		const numericRatio = aspectRatio && evalAspectRatio( aspectRatio );
 		const customRatio = numericWidth / numericHeight;
@@ -774,7 +778,7 @@ export default function Image( {
 				} }
 				resizeRatio={ align === 'center' ? 2 : 1 }
 			>
-				{ img }
+				<ImageWrapper href={ href }>{ img }</ImageWrapper>
 			</ResizableBox>
 		);
 	}
@@ -788,14 +792,7 @@ export default function Image( {
 			{ /* Hide controls during upload to avoid component remount,
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
-			{ /* If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles */ }
-			{ !! href ? (
-				<a href={ href } { ...disabledClickProps }>
-					{ img }
-				</a>
-			) : (
-				img
-			) }
+			{ img }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText