@wordpress/block-library 9.46.0 → 9.48.0

package/build-style/editor-rtl.css

@@ -710,17 +710,6 @@ html :where(.wp-block-column) {
 :root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
   flex-basis: 100%;
 }
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice.is-error {
-  display: block;
-}
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__content {
-  margin: 4px 0;
-}
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__dismiss {
-  position: absolute;
-  top: 0;
-  left: 5px;
-}
 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
   display: none;
 }

package/build-style/editor.css

@@ -712,17 +712,6 @@ html :where(.wp-block-column) {
 :root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
   flex-basis: 100%;
 }
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice.is-error {
-  display: block;
-}
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__content {
-  margin: 4px 0;
-}
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__dismiss {
-  position: absolute;
-  top: 0;
-  right: 5px;
-}
 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
   display: none;
 }

package/build-style/gallery/editor-rtl.css

@@ -96,17 +96,6 @@
 :root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
   flex-basis: 100%;
 }
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice.is-error {
-  display: block;
-}
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__content {
-  margin: 4px 0;
-}
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__dismiss {
-  position: absolute;
-  top: 0;
-  left: 5px;
-}
 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
   display: none;
 }

package/build-style/gallery/editor.css

@@ -96,17 +96,6 @@
 :root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
   flex-basis: 100%;
 }
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice.is-error {
-  display: block;
-}
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__content {
-  margin: 4px 0;
-}
-:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__dismiss {
-  position: absolute;
-  top: 0;
-  right: 5px;
-}
 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
   display: none;
 }

package/build-style/style-rtl.css

@@ -201,7 +201,7 @@
   align-items: center;
 }
 .wp-block-breadcrumbs li:not(:last-child)::after {
-  content: var(--separator, "/");
+  content: var(--separator, "/")/"";
   margin: 0 0.5em;
   opacity: 0.7;
 }

package/build-style/style.css

@@ -201,7 +201,7 @@
   align-items: center;
 }
 .wp-block-breadcrumbs li:not(:last-child)::after {
-  content: var(--separator, "/");
+  content: var(--separator, "/")/"";
   margin: 0 0.5em;
   opacity: 0.7;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.46.0",
+	"version": "9.48.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -95,44 +95,44 @@
 	],
 	"dependencies": {
 		"@arraypress/waveform-player": "1.2.1",
-		"@wordpress/a11y": "^4.46.0",
-		"@wordpress/api-fetch": "^7.46.0",
-		"@wordpress/autop": "^4.46.0",
-		"@wordpress/base-styles": "^8.0.0",
-		"@wordpress/blob": "^4.46.0",
-		"@wordpress/block-editor": "^15.19.0",
-		"@wordpress/blocks": "^15.19.0",
-		"@wordpress/components": "^33.1.0",
-		"@wordpress/compose": "^7.46.0",
-		"@wordpress/core-data": "^7.46.0",
-		"@wordpress/data": "^10.46.0",
-		"@wordpress/date": "^5.46.0",
-		"@wordpress/deprecated": "^4.46.0",
-		"@wordpress/dom": "^4.46.0",
-		"@wordpress/element": "^6.46.0",
-		"@wordpress/escape-html": "^3.46.0",
-		"@wordpress/hooks": "^4.46.0",
-		"@wordpress/html-entities": "^4.46.0",
-		"@wordpress/i18n": "^6.19.0",
-		"@wordpress/icons": "^13.1.0",
-		"@wordpress/interactivity": "^6.46.0",
-		"@wordpress/interactivity-router": "^2.46.0",
-		"@wordpress/keyboard-shortcuts": "^5.46.0",
-		"@wordpress/keycodes": "^4.46.0",
-		"@wordpress/latex-to-mathml": "^1.14.0",
-		"@wordpress/notices": "^5.46.0",
-		"@wordpress/patterns": "^2.46.0",
-		"@wordpress/primitives": "^4.46.0",
-		"@wordpress/private-apis": "^1.46.0",
-		"@wordpress/reusable-blocks": "^5.46.0",
-		"@wordpress/rich-text": "^7.46.0",
-		"@wordpress/server-side-render": "^6.22.0",
-		"@wordpress/shortcode": "^4.46.0",
-		"@wordpress/ui": "^0.13.0",
-		"@wordpress/upload-media": "^0.31.0",
-		"@wordpress/url": "^4.46.0",
-		"@wordpress/viewport": "^6.46.0",
-		"@wordpress/wordcount": "^4.46.0",
+		"@wordpress/a11y": "^4.48.0",
+		"@wordpress/api-fetch": "^7.48.0",
+		"@wordpress/autop": "^4.48.0",
+		"@wordpress/base-styles": "^9.1.0",
+		"@wordpress/blob": "^4.48.0",
+		"@wordpress/block-editor": "^15.21.0",
+		"@wordpress/blocks": "^15.21.0",
+		"@wordpress/components": "^35.0.0",
+		"@wordpress/compose": "^8.1.0",
+		"@wordpress/core-data": "^7.48.0",
+		"@wordpress/data": "^10.48.0",
+		"@wordpress/date": "^5.48.0",
+		"@wordpress/deprecated": "^4.48.0",
+		"@wordpress/dom": "^4.48.0",
+		"@wordpress/element": "^8.0.0",
+		"@wordpress/escape-html": "^3.48.0",
+		"@wordpress/hooks": "^4.48.0",
+		"@wordpress/html-entities": "^4.48.0",
+		"@wordpress/i18n": "^6.21.0",
+		"@wordpress/icons": "^13.3.0",
+		"@wordpress/interactivity": "^6.48.0",
+		"@wordpress/interactivity-router": "^2.48.0",
+		"@wordpress/keyboard-shortcuts": "^5.48.0",
+		"@wordpress/keycodes": "^4.48.0",
+		"@wordpress/latex-to-mathml": "^1.16.0",
+		"@wordpress/notices": "^5.48.0",
+		"@wordpress/patterns": "^2.48.0",
+		"@wordpress/primitives": "^4.48.0",
+		"@wordpress/private-apis": "^1.48.0",
+		"@wordpress/reusable-blocks": "^5.48.0",
+		"@wordpress/rich-text": "^7.48.0",
+		"@wordpress/server-side-render": "^6.24.0",
+		"@wordpress/shortcode": "^4.48.0",
+		"@wordpress/ui": "^0.15.0",
+		"@wordpress/upload-media": "^0.33.0",
+		"@wordpress/url": "^4.48.0",
+		"@wordpress/viewport": "^6.48.0",
+		"@wordpress/wordcount": "^4.48.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -153,5 +153,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "51264e33b95fadff9a06b68141e674ce9cde9675"
+	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
 }

package/src/block/edit-title.native.js

@@ -6,7 +6,7 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { useGlobalStyles } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
@@ -41,7 +41,7 @@ function EditTitle( { getStylesFromColorScheme, title } ) {
 	return (
 		<View style={ styles.titleContainer }>
 			<View style={ styles.lockIconContainer }>
-				<Icon
+				<WCIcon
 					label={ __( 'Lock icon' ) }
 					icon={ lock }
 					size={ 16 }
@@ -52,7 +52,7 @@ function EditTitle( { getStylesFromColorScheme, title } ) {
 				{ title }
 			</Text>
 			<View style={ styles.helpIconContainer }>
-				<Icon
+				<WCIcon
 					label={ __( 'Help icon' ) }
 					icon={ help }
 					size={ 20 }

package/src/block/edit.native.js

@@ -20,7 +20,7 @@ import {
 } from '@wordpress/core-data';
 import {
 	BottomSheet,
-	Icon,
+	Icon as WCIcon,
 	Disabled,
 	TextControl,
 } from '@wordpress/components';
@@ -167,7 +167,7 @@ export default function ReusableBlockEdit( {
 				onClose={ closeSheet }
 			>
 				<View style={ styles.infoContainer }>
-					<Icon
+					<WCIcon
 						icon={ help }
 						color={ infoSheetIconStyle.color }
 						size={ styles.infoSheetIcon.size }

package/src/breadcrumbs/style.scss

@@ -18,7 +18,7 @@
 		align-items: center;
 
 		&:not(:last-child)::after {
-			content: var(--separator, "/");
+			content: var(--separator, "/") / "";
 			margin: 0 0.5em;
 			opacity: 0.7;
 		}

package/src/button/edit.js

@@ -39,7 +39,11 @@ import {
 	getDefaultBlockName,
 	getBlockBindingsSource,
 } from '@wordpress/blocks';
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useRefEffect,
+	privateApis as composePrivateApis,
+} from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
@@ -49,6 +53,7 @@ import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 import { getWidthClasses, isPercentageWidth } from './utils';
 
 const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
@@ -107,10 +112,14 @@ function useEnter( props ) {
 			selectionChange( middle.clientId );
 		}
 
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
+		// Capture phase so we run before writing-flow's ancestor-bubble
+		// keydown handlers that gate on `event.defaultPrevented`.
+		return subscribeDelegatedListener(
+			element,
+			'keydown',
+			onKeyDown,
+			true
+		);
 	}, [] );
 }
 

package/src/columns/edit.js

@@ -267,17 +267,12 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 }
 
 function Placeholder( { clientId, name, setAttributes } ) {
-	const { blockType, defaultVariation, variations } = useSelect(
+	const { blockType, variations } = useSelect(
 		( select ) => {
-			const {
-				getBlockVariations,
-				getBlockType,
-				getDefaultBlockVariation,
-			} = select( blocksStore );
+			const { getBlockVariations, getBlockType } = select( blocksStore );
 
 			return {
 				blockType: getBlockType( name ),
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
 				variations: getBlockVariations( name, 'block' ),
 			};
 		},
@@ -293,7 +288,7 @@ function Placeholder( { clientId, name, setAttributes } ) {
 				label={ blockType?.title }
 				variations={ variations }
 				instructions={ __( 'Divide into columns. Select a layout:' ) }
-				onSelect={ ( nextVariation = defaultVariation ) => {
+				onSelect={ ( nextVariation ) => {
 					if ( nextVariation.attributes ) {
 						setAttributes( nextVariation.attributes );
 					}
@@ -307,7 +302,6 @@ function Placeholder( { clientId, name, setAttributes } ) {
 						);
 					}
 				} }
-				allowSkip
 			/>
 		</div>
 	);

package/src/cover/controls.native.js

@@ -9,7 +9,7 @@ import Video from 'react-native-video';
  */
 import {
 	Image,
-	Icon,
+	Icon as WCIcon,
 	IMAGE_DEFAULT_FOCAL_POINT,
 	PanelBody,
 	RangeControl,
@@ -138,7 +138,7 @@ function Controls( {
 	];
 
 	const focalPointHint = ! hasParallax && ! displayPlaceholder && (
-		<Icon
+		<WCIcon
 			icon={ plus }
 			size={ styles.focalPointHint?.width }
 			style={ [

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

@@ -3,7 +3,6 @@
  */
 import { useMemo } from '@wordpress/element';
 import {
-	ExternalLink,
 	FocalPointPicker,
 	RangeControl,
 	TextareaControl,
@@ -27,6 +26,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { Link } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -124,9 +124,20 @@ export default function CoverInspectorControls( {
 	const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
 	const { gradientValue, setGradient } = __experimentalUseGradient();
-	const { getSettings } = useSelect( blockEditorStore );
+	const { imageSizes, hasSelectedStyleState } = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				hasSelectedStyleState: hasSelectedBlockStyleState,
+			} = unlock( select( blockEditorStore ) );
 
-	const imageSizes = getSettings()?.imageSizes;
+			return {
+				imageSizes: getSettings()?.imageSizes,
+				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+			};
+		},
+		[ clientId ]
+	);
 
 	const image = useSelect(
 		( select ) =>
@@ -189,12 +200,15 @@ export default function CoverInspectorControls( {
 
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
+	const showOverlayControls =
+		colorGradientSettings.hasColorsOrGradients && ! hasSelectedStyleState;
+
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
 		<>
-			<InspectorControls>
-				{ ( !! url || useFeaturedImage ) && (
+			{ ( !! url || useFeaturedImage ) && (
+				<InspectorControls>
 					<ToolsPanel
 						label={ __( 'Settings' ) }
 						resetAll={ () => {
@@ -299,7 +313,8 @@ export default function CoverInspectorControls( {
 									}
 									help={
 										<>
-											<ExternalLink
+											<Link
+												openInNewTab
 												href={
 													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
 													__(
@@ -310,7 +325,7 @@ export default function CoverInspectorControls( {
 												{ __(
 													'Describe the purpose of the image.'
 												) }
-											</ExternalLink>
+											</Link>
 											<br />
 											{ __(
 												'Leave empty if decorative.'
@@ -329,9 +344,9 @@ export default function CoverInspectorControls( {
 							/>
 						) }
 					</ToolsPanel>
-				) }
-			</InspectorControls>
-			{ colorGradientSettings.hasColorsOrGradients && (
+				</InspectorControls>
+			) }
+			{ showOverlayControls && (
 				<InspectorControls group="color">
 					<ColorGradientSettingsDropdown
 						__experimentalIsRenderedInSidebar
@@ -386,51 +401,53 @@ export default function CoverInspectorControls( {
 					</ToolsPanelItem>
 				</InspectorControls>
 			) }
-			<InspectorControls group="dimensions">
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => !! minHeight }
-					label={ __( 'Minimum height' ) }
-					onDeselect={ () =>
-						setAttributes( {
-							minHeight: undefined,
-							minHeightUnit: undefined,
-						} )
-					}
-					resetAllFilter={ () => ( {
-						minHeight: undefined,
-						minHeightUnit: undefined,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<CoverHeightInput
-						value={
-							attributes?.style?.dimensions?.aspectRatio
-								? ''
-								: minHeight
-						}
-						unit={ minHeightUnit }
-						onChange={ ( newMinHeight ) =>
-							setAttributes( {
-								minHeight: newMinHeight,
-								style: cleanEmptyObject( {
-									...attributes?.style,
-									dimensions: {
-										...attributes?.style?.dimensions,
-										aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
-									},
-								} ),
-							} )
-						}
-						onUnitChange={ ( nextUnit ) =>
+			{ ! hasSelectedStyleState && (
+				<InspectorControls group="dimensions">
+					<ToolsPanelItem
+						className="single-column"
+						hasValue={ () => !! minHeight }
+						label={ __( 'Minimum height' ) }
+						onDeselect={ () =>
 							setAttributes( {
-								minHeightUnit: nextUnit,
+								minHeight: undefined,
+								minHeightUnit: undefined,
 							} )
 						}
-					/>
-				</ToolsPanelItem>
-			</InspectorControls>
+						resetAllFilter={ () => ( {
+							minHeight: undefined,
+							minHeightUnit: undefined,
+						} ) }
+						isShownByDefault
+						panelId={ clientId }
+					>
+						<CoverHeightInput
+							value={
+								attributes?.style?.dimensions?.aspectRatio
+									? ''
+									: minHeight
+							}
+							unit={ minHeightUnit }
+							onChange={ ( newMinHeight ) =>
+								setAttributes( {
+									minHeight: newMinHeight,
+									style: cleanEmptyObject( {
+										...attributes?.style,
+										dimensions: {
+											...attributes?.style?.dimensions,
+											aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
+										},
+									} ),
+								} )
+							}
+							onUnitChange={ ( nextUnit ) =>
+								setAttributes( {
+									minHeightUnit: nextUnit,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</InspectorControls>
+			) }
 			<InspectorControls group="advanced">
 				<HTMLElementControl
 					tagName={ tagName }

package/src/cover/edit.native.js

@@ -23,7 +23,7 @@ import {
 } from '@wordpress/react-native-bridge';
 import { __ } from '@wordpress/i18n';
 import {
-	Icon,
+	Icon as WCIcon,
 	Image,
 	ImageEditingButton,
 	IMAGE_DEFAULT_FOCAL_POINT,
@@ -354,7 +354,9 @@ const Cover = ( {
 		styles.iconDark
 	);
 
-	const placeholderIcon = <Icon icon={ icon } { ...placeholderIconStyle } />;
+	const placeholderIcon = (
+		<WCIcon icon={ icon } { ...placeholderIconStyle } />
+	);
 
 	const toolbarControls = ( open ) => (
 		<BlockControls group="other">
@@ -380,7 +382,7 @@ const Cover = ( {
 		>
 			<View style={ styles.selectImageContainer }>
 				<View style={ styles.selectImage }>
-					<Icon
+					<WCIcon
 						size={ 16 }
 						icon={ image }
 						{ ...styles.selectImageIcon }
@@ -665,7 +667,7 @@ const Cover = ( {
 					style={ styles.uploadFailedContainer }
 				>
 					<View style={ styles.uploadFailed }>
-						<Icon
+						<WCIcon
 							icon={ cautionFilled }
 							{ ...styles.uploadFailedIcon }
 						/>

package/src/cover/focal-point-settings-button.native.js

@@ -8,7 +8,7 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon, BottomSheet } from '@wordpress/components';
+import { Icon as WCIcon, BottomSheet } from '@wordpress/components';
 import { blockSettingsScreens } from '@wordpress/block-editor';
 import { chevronRight } from '@wordpress/icons';
 
@@ -44,7 +44,7 @@ function FocalPointSettingsButton( {
 			 * issue: https://github.com/react-native-svg/react-native-svg/issues/1345
 			 */ }
 			<View style={ disabled && styles.dimmedActionButton }>
-				<Icon icon={ chevronRight } />
+				<WCIcon icon={ chevronRight } />
 			</View>
 		</BottomSheet.Cell>
 	);