@wordpress/block-library 8.35.0 → 9.0.0

package/src/cover/overlay-color-settings.native.js

@@ -12,9 +12,9 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
-import { useMobileGlobalStylesColors } from '@wordpress/components';
 
 function OverlayColorSettings( {
 	overlayColor,

package/src/cover/style.scss

@@ -1,11 +1,7 @@
-// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
-:where(.wp-block-cover-image, .wp-block-cover) {
-	min-height: 430px;
-	padding: 1em;
-}
-
 .wp-block-cover-image,
 .wp-block-cover {
+	min-height: 430px;
+	padding: 1em;
 	position: relative;
 	background-position: center center;
 	display: flex;
@@ -91,20 +87,6 @@
 		width: 100%;
 	}
 
-	// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
-	// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
-	&::after {
-		display: block;
-		content: "";
-		font-size: 0;
-		min-height: inherit;
-
-		// IE doesn't support flex so omit that.
-		@supports (position: sticky) {
-			content: none;
-		}
-	}
-
 	// Aligned cover blocks should not use our global alignment rules
 	&.aligncenter,
 	&.alignleft,
@@ -120,18 +102,6 @@
 		/*rtl:raw: direction: rtl; */
 	}
 
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		&:where(:not(.has-text-color)) {
-			color: inherit;
-		}
-	}
-
 	// Position: Top
 	&.is-position-top-left {
 		align-items: flex-start;
@@ -314,3 +284,15 @@ section.wp-block-cover-image > h2,
 :where(.wp-block-cover-image.is-light:not(.has-text-color)) {
 	color: $black;
 }
+
+:root {
+	:where(.wp-block-cover p:not(.has-text-color)),
+	:where(.wp-block-cover h1:not(.has-text-color)),
+	:where(.wp-block-cover h2:not(.has-text-color)),
+	:where(.wp-block-cover h3:not(.has-text-color)),
+	:where(.wp-block-cover h4:not(.has-text-color)),
+	:where(.wp-block-cover h5:not(.has-text-color)),
+	:where(.wp-block-cover h6:not(.has-text-color)) {
+		color: inherit;
+	}
+}

package/src/editor.scss

@@ -1,7 +1,6 @@
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./avatar/editor.scss";
-@import "./block/editor.scss";
 @import "./button/editor.scss";
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";

package/src/embed/embed-no-preview.native.js

@@ -124,7 +124,7 @@ const EmbedNoPreview = ( {
 	const embedNoProviderPreview = (
 		<>
 			<TouchableWithoutFeedback
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ previewButtonA11yHint }
 				disabled={ ! isSelected }
 				onPress={ onPressContainer }
@@ -145,7 +145,7 @@ const EmbedNoPreview = ( {
 					<TouchableOpacity
 						accessibilityHint={ __( 'Tap here to show help' ) }
 						accessibilityLabel={ __( 'Help button' ) }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						disabled={ ! isSelected }
 						onPress={ onPressHelp }
 						style={ helpIconStyle }

package/src/embed/embed-placeholder.native.js

@@ -125,7 +125,7 @@ const EmbedPlaceholder = ( {
 						</Text>
 						<TouchableOpacity
 							activeOpacity={ 0.5 }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityHint={ __(
 								'Double tap to view embed options.'
 							) }
@@ -155,7 +155,7 @@ const EmbedPlaceholder = ( {
 						</View>
 						<TouchableOpacity
 							activeOpacity={ 0.5 }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityHint={ __(
 								'Double tap to add a link.'
 							) }

package/src/embed/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:where(.wp-block-embed) {
+.wp-block-embed {
 	margin: 0 0 1em 0;
 }

package/src/embed/util.js

@@ -23,6 +23,7 @@ import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
 import { unlock } from '../lock-unlock';
 
 const { name: DEFAULT_EMBED_BLOCK } = metadata;
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
@@ -288,7 +289,6 @@ 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

@@ -258,7 +258,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						) }
 					</ResizableBox>
 				) }
-				<div className={ 'wp-block-file__content-wrapper' }>
+				<div className="wp-block-file__content-wrapper">
 					<RichText
 						identifier="fileName"
 						tagName="a"
@@ -273,11 +273,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						href={ textLinkHref }
 					/>
 					{ showDownloadButton && (
-						<div
-							className={
-								'wp-block-file__button-richtext-wrapper'
-							}
-						>
+						<div className="wp-block-file__button-richtext-wrapper">
 							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
 							<RichText
 								identifier="downloadButtonText"

package/src/form/save.js

@@ -3,7 +3,7 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-const Save = ( { attributes } ) => {
+export default function save( { attributes } ) {
 	const blockProps = useBlockProps.save();
 	const { submissionMethod } = attributes;
 
@@ -16,5 +16,4 @@ const Save = ( { attributes } ) => {
 			<InnerBlocks.Content />
 		</form>
 	);
-};
-export default Save;
+}

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

@@ -3,12 +3,11 @@
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
-const Save = () => {
+export default function save() {
 	const blockProps = useBlockProps.save();
 	return (
 		<div className="wp-block-form-submit-wrapper" { ...blockProps }>
 			<InnerBlocks.Content />
 		</div>
 	);
-};
-export default Save;
+}

package/src/freeform/edit.js

@@ -83,12 +83,15 @@ function ClassicEdit( {
 		}
 
 		const editor = window.tinymce.get( `editor-${ clientId }` );
-		const currentContent = editor?.getContent();
+		if ( ! editor ) {
+			return;
+		}
 
+		const currentContent = editor.getContent();
 		if ( currentContent !== content ) {
 			editor.setContent( content || '' );
 		}
-	}, [ content ] );
+	}, [ clientId, content ] );
 
 	useEffect( () => {
 		const { baseURL, suffix } = window.wpEditorL10n.tinymce;
@@ -227,6 +230,7 @@ function ClassicEdit( {
 				onReadyStateChange
 			);
 			wp.oldEditor.remove( `editor-${ clientId }` );
+			didMount.current = false;
 		};
 	}, [] );
 

package/src/gallery/edit.js

@@ -580,11 +580,11 @@ function GalleryEdit( props ) {
 						/>
 					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
-						<BaseControl className={ 'gallery-image-sizes' }>
+						<BaseControl className="gallery-image-sizes">
 							<BaseControl.VisualLabel>
 								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
-							<View className={ 'gallery-image-sizes__loading' }>
+							<View className="gallery-image-sizes__loading">
 								<Spinner />
 								{ __( 'Loading options…' ) }
 							</View>

package/src/gallery/editor.scss

@@ -1,4 +1,7 @@
-:where(figure.wp-block-gallery) {
+// Adding `figure` to the selector increases the specificity above the global
+// styles specificity, which is levelled at 0-1-0. We should figure out why
+// `figure` is needed.
+:root :where(figure.wp-block-gallery) {
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358

package/src/gallery/v1/gallery-button.native.js

@@ -35,7 +35,7 @@ export function Button( props ) {
 			style={ buttonStyle }
 			activeOpacity={ 0.7 }
 			accessibilityLabel={ accessibilityLabel }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			onPress={ onClick }
 			disabled={ isDisabled }
 		>

package/src/gallery/v1/gallery-image.native.js

@@ -310,7 +310,7 @@ class GalleryImage extends Component {
 				onPress={ this.onMediaPressed }
 				accessible={ ! isSelected } // We need only child views to be accessible after the selection.
 				accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense
-				accessibilityRole={ 'imagebutton' } // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
+				accessibilityRole="imagebutton" // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
 			>
 				<View style={ containerStyle }>
 					<MediaUploadProgress

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

@@ -12,6 +12,12 @@ exports[`Heading block inserts block 1`] = `
 <!-- /wp:heading -->"
 `;
 
+exports[`Heading block should keep the heading when there is an empty paragraph block before and backspace is pressed at the start 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /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>
@@ -29,3 +35,9 @@ exports[`Heading block should set a text color 1`] = `
 <h2 class="wp-block-heading has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</h2>
 <!-- /wp:heading -->"
 `;
+
+exports[`Heading block should transform to a paragraph block when pressing backspace at the beginning of the first heading block 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -189,4 +189,69 @@ describe( 'Heading block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'should transform to a paragraph block when pressing backspace at the beginning of the first heading block', async () => {
+		// Arrange
+		await initializeEditor();
+
+		// Act
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading' );
+		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();
+	} );
+
+	it( 'should keep the heading when there is an empty paragraph block before and backspace is pressed at the start', async () => {
+		// Arrange
+		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/html/editor.scss

@@ -13,5 +13,8 @@
 		box-sizing: border-box;
 		max-height: 250px;
 		@include editor-input-reset();
+		// HTML input is always LTR regardless of language.
+		/*rtl:ignore*/
+		direction: ltr;
 	}
 }

package/src/image/edit.js

@@ -145,7 +145,7 @@ export function ImageEdit( {
 				scale: undefined,
 			} );
 		}
-	}, [ align ] );
+	}, [ __unstableMarkNextChangeAsNotPersistent, align, setAttributes ] );
 
 	const { getSettings } = useSelect( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
@@ -283,7 +283,7 @@ export function ImageEdit( {
 		<img
 			alt={ __( 'Edit image' ) }
 			title={ __( 'Edit image' ) }
-			className={ 'edit-image-preview' }
+			className="edit-image-preview"
 			src={ url }
 		/>
 	);
@@ -317,8 +317,11 @@ export function ImageEdit( {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					( ! blockBindingsSource ||
-						blockBindingsSource?.lockAttributesEditing ),
+					! blockBindingsSource?.canUserEditValue( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
 				lockUrlControlsMessage: blockBindingsSource?.label
 					? sprintf(
 							/* translators: %s: Label of the bindings source. */
@@ -328,7 +331,7 @@ export function ImageEdit( {
 					: __( 'Connected to dynamic data' ),
 			};
 		},
-		[ isSingleSelected ]
+		[ isSingleSelected, metadata?.bindings?.url ]
 	);
 	const placeholder = ( content ) => {
 		return (
@@ -359,9 +362,7 @@ export function ImageEdit( {
 				} }
 			>
 				{ lockUrlControls ? (
-					<span
-						className={ 'block-bindings-media-placeholder-message' }
-					>
+					<span className="block-bindings-media-placeholder-message">
 						{ lockUrlControlsMessage }
 					</span>
 				) : (

package/src/image/edit.native.js

@@ -581,7 +581,10 @@ export class ImageEdit extends Component {
 						) }{ ' ' }
 						<FooterMessageLink
 							href={
-								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+								// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+								__(
+									'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+								)
 							}
 							value={ __( 'What is alt text?' ) }
 						/>
@@ -617,7 +620,7 @@ export class ImageEdit extends Component {
 					styles.removeFeaturedButton,
 				] }
 				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
-				separatorType={ 'none' }
+				separatorType="none"
 				onPress={ () =>
 					this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET )
 				}
@@ -629,7 +632,7 @@ export class ImageEdit extends Component {
 				label={ __( 'Set as Featured Image' ) }
 				labelStyle={ setFeaturedButtonStyle }
 				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
-				separatorType={ 'none' }
+				separatorType="none"
 				onPress={ () => this.onSetFeatured( attributes.id ) }
 			/>
 		);

package/src/image/image.js

@@ -462,8 +462,11 @@ export default function Image( {
 			return {
 				lockUrlControls:
 					!! urlBinding &&
-					( ! urlBindingSource ||
-						urlBindingSource?.lockAttributesEditing ),
+					! urlBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: urlBinding?.args,
+					} ),
 				lockHrefControls:
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
@@ -474,8 +477,11 @@ export default function Image( {
 					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
-					( ! altBindingSource ||
-						altBindingSource?.lockAttributesEditing ),
+					! altBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: altBinding?.args,
+					} ),
 				lockAltControlsMessage: altBindingSource?.label
 					? sprintf(
 							/* translators: %s: Label of the bindings source. */
@@ -485,8 +491,11 @@ export default function Image( {
 					: __( 'Connected to dynamic data' ),
 				lockTitleControls:
 					!! titleBinding &&
-					( ! titleBindingSource ||
-						titleBindingSource?.lockAttributesEditing ),
+					! titleBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: titleBinding?.args,
+					} ),
 				lockTitleControlsMessage: titleBindingSource?.label
 					? sprintf(
 							/* translators: %s: Label of the bindings source. */
@@ -499,13 +508,21 @@ export default function Image( {
 		[ clientId, isSingleSelected, metadata?.bindings ]
 	);
 
+	const showUrlInput =
+		isSingleSelected &&
+		! isEditingImage &&
+		! lockHrefControls &&
+		! lockUrlControls;
+
+	const showCoverControls = isSingleSelected && canInsertCover;
+
+	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
+
 	const controls = (
 		<>
-			<BlockControls group="block">
-				{ isSingleSelected &&
-					! isEditingImage &&
-					! lockHrefControls &&
-					! lockUrlControls && (
+			{ showBlockControls && (
+				<BlockControls group="block">
+					{ showUrlInput && (
 						<ImageURLInputUI
 							url={ href || '' }
 							onChangeUrl={ onSetHref }
@@ -521,21 +538,22 @@ export default function Image( {
 							resetLightbox={ resetLightbox }
 						/>
 					) }
-				{ allowCrop && (
-					<ToolbarButton
-						onClick={ () => setIsEditingImage( true ) }
-						icon={ crop }
-						label={ __( 'Crop' ) }
-					/>
-				) }
-				{ isSingleSelected && canInsertCover && (
-					<ToolbarButton
-						icon={ overlayText }
-						label={ __( 'Add text over image' ) }
-						onClick={ switchToCover }
-					/>
-				) }
-			</BlockControls>
+					{ allowCrop && (
+						<ToolbarButton
+							onClick={ () => setIsEditingImage( true ) }
+							icon={ crop }
+							label={ __( 'Crop' ) }
+						/>
+					) }
+					{ showCoverControls && (
+						<ToolbarButton
+							icon={ overlayText }
+							label={ __( 'Add text over image' ) }
+							onClick={ switchToCover }
+						/>
+					) }
+				</BlockControls>
+			) }
 			{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
 				<BlockControls group="other">
 					<MediaReplaceFlow
@@ -597,7 +615,14 @@ export default function Image( {
 										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
 												{ __(
 													'Describe the purpose of the image.'
 												) }
@@ -684,7 +709,14 @@ export default function Image( {
 										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
 												{ __(
 													'Describe the purpose of the image.'
 												) }

package/src/image/index.php

@@ -188,12 +188,12 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// Image.
 	$p->next_tag( 'img' );
 	$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
-	$p->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
-	$p->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
+	$p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
+	$p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
-	$p->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
+	$p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
 
 	$body_content = $p->get_updated_html();
 
@@ -209,7 +209,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
 			data-wp-init="callbacks.initTriggerButton"
-			data-wp-on--click="actions.showLightbox"
+			data-wp-on-async--click="actions.showLightbox"
 			data-wp-style--right="context.imageButtonRight"
 			data-wp-style--top="context.imageButtonTop"
 		>
@@ -258,12 +258,12 @@ function block_core_image_print_lightbox_overlay() {
 			data-wp-class--show-closing-animation="state.showClosingAnimation"
 			data-wp-watch="callbacks.setOverlayFocus"
 			data-wp-on--keydown="actions.handleKeydown"
-			data-wp-on--touchstart="actions.handleTouchStart"
+			data-wp-on-async--touchstart="actions.handleTouchStart"
 			data-wp-on--touchmove="actions.handleTouchMove"
-			data-wp-on--touchend="actions.handleTouchEnd"
-			data-wp-on--click="actions.hideLightbox"
-			data-wp-on-window--resize="callbacks.setOverlayStyles"
-			data-wp-on-window--scroll="actions.handleScroll"
+			data-wp-on-async--touchend="actions.handleTouchEnd"
+			data-wp-on-async--click="actions.hideLightbox"
+			data-wp-on-async-window--resize="callbacks.setOverlayStyles"
+			data-wp-on-async-window--scroll="actions.handleScroll"
 			tabindex="-1"
 			>
 				<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">