@wordpress/block-editor 12.10.12 → 12.10.14

package/build-style/content-rtl.css

@@ -140,15 +140,16 @@
     opacity: 0.4;
   }
 }
+/* stylelint-disable */
+_::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
+_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
+  background-color: transparent;
+}
+
+/* stylelint-enable */
 .block-editor-block-list__layout {
   position: relative;
 }
-.block-editor-block-list__layout::selection {
-  background: transparent;
-}
-.has-multi-selection .block-editor-block-list__layout::selection {
-  background: transparent;
-}
 .block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
   border-radius: 2px;
 }

package/build-style/content.css

@@ -140,15 +140,16 @@
     opacity: 0.4;
   }
 }
+/* stylelint-disable */
+_::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
+_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
+  background-color: transparent;
+}
+
+/* stylelint-enable */
 .block-editor-block-list__layout {
   position: relative;
 }
-.block-editor-block-list__layout::selection {
-  background: transparent;
-}
-.has-multi-selection .block-editor-block-list__layout::selection {
-  background: transparent;
-}
 .block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
   border-radius: 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.10.12",
+	"version": "12.10.14",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.42.12",
-		"@wordpress/api-fetch": "^6.39.12",
-		"@wordpress/blob": "^3.42.12",
-		"@wordpress/blocks": "^12.19.12",
-		"@wordpress/commands": "^0.13.12",
-		"@wordpress/components": "^25.8.12",
-		"@wordpress/compose": "^6.19.12",
-		"@wordpress/data": "^9.12.12",
-		"@wordpress/date": "^4.42.12",
-		"@wordpress/deprecated": "^3.42.12",
-		"@wordpress/dom": "^3.42.12",
-		"@wordpress/element": "^5.19.12",
-		"@wordpress/escape-html": "^2.42.12",
-		"@wordpress/hooks": "^3.42.12",
-		"@wordpress/html-entities": "^3.42.12",
-		"@wordpress/i18n": "^4.42.12",
-		"@wordpress/icons": "^9.33.12",
-		"@wordpress/is-shallow-equal": "^4.42.12",
-		"@wordpress/keyboard-shortcuts": "^4.19.12",
-		"@wordpress/keycodes": "^3.42.12",
-		"@wordpress/notices": "^4.10.12",
-		"@wordpress/preferences": "^3.19.12",
-		"@wordpress/private-apis": "^0.24.12",
-		"@wordpress/rich-text": "^6.19.12",
-		"@wordpress/shortcode": "^3.42.12",
-		"@wordpress/style-engine": "^1.25.12",
-		"@wordpress/token-list": "^2.42.12",
-		"@wordpress/url": "^3.43.12",
-		"@wordpress/warning": "^2.42.12",
-		"@wordpress/wordcount": "^3.42.12",
+		"@wordpress/a11y": "^3.42.13",
+		"@wordpress/api-fetch": "^6.39.13",
+		"@wordpress/blob": "^3.42.13",
+		"@wordpress/blocks": "^12.19.13",
+		"@wordpress/commands": "^0.13.14",
+		"@wordpress/components": "^25.8.14",
+		"@wordpress/compose": "^6.19.13",
+		"@wordpress/data": "^9.12.13",
+		"@wordpress/date": "^4.42.13",
+		"@wordpress/deprecated": "^3.42.13",
+		"@wordpress/dom": "^3.42.13",
+		"@wordpress/element": "^5.19.13",
+		"@wordpress/escape-html": "^2.42.13",
+		"@wordpress/hooks": "^3.42.13",
+		"@wordpress/html-entities": "^3.42.13",
+		"@wordpress/i18n": "^4.42.13",
+		"@wordpress/icons": "^9.33.13",
+		"@wordpress/is-shallow-equal": "^4.42.13",
+		"@wordpress/keyboard-shortcuts": "^4.19.13",
+		"@wordpress/keycodes": "^3.42.13",
+		"@wordpress/notices": "^4.10.13",
+		"@wordpress/preferences": "^3.19.14",
+		"@wordpress/private-apis": "^0.24.13",
+		"@wordpress/rich-text": "^6.19.13",
+		"@wordpress/shortcode": "^3.42.13",
+		"@wordpress/style-engine": "^1.25.13",
+		"@wordpress/token-list": "^2.42.13",
+		"@wordpress/url": "^3.43.13",
+		"@wordpress/warning": "^2.42.13",
+		"@wordpress/wordcount": "^3.42.13",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8447c60232efe04eb248a1c893bf3a1fc4e47ecc"
+	"gitHead": "fb3a11411cc4cc3af8a3c2a629842d1c63d8edbc"
 }

package/src/components/block-list/content.scss

@@ -17,6 +17,20 @@
 	}
 }
 
+
+// Hide selections on this element, otherwise Safari will include it stacked
+// under your actual selection.
+// This uses a CSS hack to show the rules to Safari only. Failing here is okay,
+// it just makes the selection indication slightly less precise. That makes this
+// hack a progressive enhancement. Stylelint is disabled to allow the hack to work.
+/* stylelint-disable */
+_::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
+_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
+	background-color: transparent; 
+}
+/* stylelint-enable */
+
+
 // Note to developers refactoring this, please test navigation mode, and
 // multi selection and hovering the block switcher to highlight the block.
 // Also be sure to test partial selections in Safari, as it draws the
@@ -24,16 +38,6 @@
 .block-editor-block-list__layout {
 	position: relative;
 
-	// Hide selections on this element, otherwise Safari will include it stacked
-	// under your actual selection.
-	&::selection {
-		background: transparent;
-	}
-
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
-
 	// Block multi selection
 	// Apply a rounded radius to the entire block when multi selected, but with low specificity
 	// so explicit radii set by tools are preserved.

package/src/components/block-patterns-list/index.js

@@ -71,7 +71,7 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={ showTooltip && ! pattern.id }
+						showTooltip={ showTooltip && ! pattern.type === 'user' }
 						title={ pattern.title }
 					>
 						<CompositeItem
@@ -82,7 +82,8 @@ function BlockPattern( {
 								'block-editor-block-patterns-list__item',
 								{
 									'block-editor-block-patterns-list__list-item-synced':
-										pattern.id && ! pattern.syncStatus,
+										pattern.type === 'user' &&
+										! pattern.syncStatus,
 								}
 							) }
 							onClick={ () => {
@@ -107,15 +108,17 @@ function BlockPattern( {
 							/>
 
 							<HStack className="block-editor-patterns__pattern-details">
-								{ pattern.id && ! pattern.syncStatus && (
-									<div className="block-editor-patterns__pattern-icon-wrapper">
-										<Icon
-											className="block-editor-patterns__pattern-icon"
-											icon={ symbol }
-										/>
-									</div>
-								) }
-								{ ( ! showTooltip || pattern.id ) && (
+								{ pattern.type === 'user' &&
+									! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
+										</div>
+									) }
+								{ ( ! showTooltip ||
+									pattern.type === 'user' ) && (
 									<div className="block-editor-block-patterns-list__item-title">
 										{ pattern.title }
 									</div>

package/src/components/global-styles/filters-panel.js

@@ -54,13 +54,15 @@ function useMultiOriginColorPresets(
 }
 
 export function useHasFiltersPanel( settings ) {
-	const hasDuotone = useHasDuotoneControl( settings );
-
-	return hasDuotone;
+	return useHasDuotoneControl( settings );
 }
 
 function useHasDuotoneControl( settings ) {
-	return settings.color.customDuotone || settings.color.defaultDuotone;
+	return (
+		settings.color.customDuotone ||
+		settings.color.defaultDuotone ||
+		settings.color.duotone.length > 0
+	);
 }
 
 function FiltersToolsPanel( {
@@ -148,11 +150,6 @@ export default function FiltersPanel( {
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
 
-	const disableCustomColors = ! settings?.color?.custom;
-	const disableCustomDuotone =
-		! settings?.color?.customDuotone ||
-		( colorPalette?.length === 0 && disableCustomColors );
-
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -210,12 +207,9 @@ export default function FiltersPanel( {
 									<DuotonePicker
 										colorPalette={ colorPalette }
 										duotonePalette={ duotonePalette }
-										disableCustomColors={
-											disableCustomColors
-										}
-										disableCustomDuotone={
-											disableCustomDuotone
-										}
+										// TODO: Re-enable both when custom colors are supported for block-level styles.
+										disableCustomColors
+										disableCustomDuotone
 										value={ duotone }
 										onChange={ setDuotone }
 									/>

package/src/components/inserter/block-patterns-filter.js

@@ -9,7 +9,7 @@ import {
 	MenuItemsChoice,
 	ExternalLink,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useMemo, createInterpolateElement } from '@wordpress/element';
 
@@ -70,15 +70,24 @@ export function BlockPatternsSyncFilter( {
 
 	const patternSyncMenuOptions = useMemo(
 		() => [
-			{ value: SYNC_TYPES.all, label: __( 'All' ) },
+			{
+				value: SYNC_TYPES.all,
+				label: _x( 'All', 'Option that shows all patterns' ),
+			},
 			{
 				value: SYNC_TYPES.full,
-				label: __( 'Synced' ),
+				label: _x(
+					'Synced',
+					'Option that shows all synchronized patterns'
+				),
 				disabled: shouldDisableSyncFilter,
 			},
 			{
 				value: SYNC_TYPES.unsynced,
-				label: __( 'Not synced' ),
+				label: _x(
+					'Not synced',
+					'Option that shows all patterns that are not synchronized'
+				),
 				disabled: shouldDisableSyncFilter,
 			},
 		],

package/src/components/provider/index.js

@@ -45,7 +45,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		useBlockSync( props );
 
 		return (
-			<SlotFillProvider>
+			<SlotFillProvider passthrough>
 				<KeyboardShortcuts.Register />
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
 			</SlotFillProvider>

package/src/hooks/background.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { isBlobURL } from '@wordpress/blob';
 import { getBlockSupport } from '@wordpress/blocks';
+import { focus } from '@wordpress/dom';
 import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	DropZone,
@@ -19,7 +20,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Platform, useCallback } from '@wordpress/element';
+import { Platform, useCallback, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
@@ -150,6 +151,8 @@ function BackgroundImagePanelItem( props ) {
 	const { id, title, url } =
 		attributes.style?.background?.backgroundImage || {};
 
+	const replaceContainerRef = useRef();
+
 	const { mediaUpload } = useSelect( ( select ) => {
 		return {
 			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
@@ -241,17 +244,22 @@ function BackgroundImagePanelItem( props ) {
 		};
 	}, [] );
 
+	const hasValue = hasBackgroundImageValue( props );
+
 	return (
 		<ToolsPanelItem
 			className="single-column"
-			hasValue={ () => hasBackgroundImageValue( props ) }
+			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
 			onDeselect={ () => resetBackgroundImage( props ) }
 			isShownByDefault={ true }
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
 		>
-			<div className="block-editor-hooks__background__inspector-media-replace-container">
+			<div
+				className="block-editor-hooks__background__inspector-media-replace-container"
+				ref={ replaceContainerRef }
+			>
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }
@@ -267,9 +275,23 @@ function BackgroundImagePanelItem( props ) {
 					}
 					variant="secondary"
 				>
-					<MenuItem onClick={ () => resetBackgroundImage( props ) }>
-						{ __( 'Reset ' ) }
-					</MenuItem>
+					{ hasValue && (
+						<MenuItem
+							onClick={ () => {
+								const [ toggleButton ] = focus.tabbable.find(
+									replaceContainerRef.current
+								);
+								// Focus the toggle button and close the dropdown menu.
+								// This ensures similar behaviour as to selecting an image, where the dropdown is
+								// closed and focus is redirected to the dropdown toggle button.
+								toggleButton?.focus();
+								toggleButton?.click();
+								resetBackgroundImage( props );
+							} }
+						>
+							{ __( 'Reset ' ) }
+						</MenuItem>
+					) }
 				</MediaReplaceFlow>
 				<DropZone
 					onFilesDrop={ onFilesDrop }

package/src/hooks/block-rename.js

@@ -16,7 +16,11 @@ export const withBlockRenameControl = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name, attributes, setAttributes, isSelected } = props;
 
-		const supportsBlockNaming = hasBlockSupport( name, 'renaming', true );
+		const supportsBlockNaming = hasBlockSupport(
+			name,
+			'__experimentalMetadata',
+			false
+		);
 
 		return (
 			<>

package/src/store/selectors.js

@@ -2304,6 +2304,7 @@ function getUserPatterns( state ) {
 		return {
 			name: `core/block/${ userPattern.id }`,
 			id: userPattern.id,
+			type: 'user',
 			title: userPattern.title.raw,
 			categories: userPattern.wp_pattern_category.map( ( catId ) =>
 				categories && categories.get( catId )