@wordpress/block-editor 11.6.0 → 11.7.0

package/build-module/utils/object.js

@@ -0,0 +1,69 @@
+/**
+ * Converts a path to an array of its fragments.
+ * Supports strings, numbers and arrays:
+ *
+ * 'foo' => [ 'foo' ]
+ * 2 => [ '2' ]
+ * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]
+ *
+ * @param {string|number|Array} path Path
+ * @return {Array} Normalized path.
+ */
+function normalizePath(path) {
+  if (Array.isArray(path)) {
+    return path;
+  } else if (typeof path === 'number') {
+    return [path.toString()];
+  }
+
+  return [path];
+}
+/**
+ * Clones an object.
+ * Non-object values are returned unchanged.
+ *
+ * @param {*} object Object to clone.
+ * @return {*} Cloned object, or original literal non-object value.
+ */
+
+
+function cloneObject(object) {
+  if (typeof object === 'object') {
+    return { ...Object.fromEntries(Object.entries(object).map(_ref => {
+        let [key, value] = _ref;
+        return [key, cloneObject(value)];
+      }))
+    };
+  }
+
+  return object;
+}
+/**
+ * Perform an immutable set.
+ * Handles nullish initial values.
+ * Clones all nested objects in the specified object.
+ *
+ * @param {Object}              object Object to set a value in.
+ * @param {number|string|Array} path   Path in the object to modify.
+ * @param {*}                   value  New value to set.
+ * @return {Object} Cloned object with the new value set.
+ */
+
+
+export function immutableSet(object, path, value) {
+  const normalizedPath = normalizePath(path);
+  const newObject = object ? cloneObject(object) : {};
+  normalizedPath.reduce((acc, key, i) => {
+    if (acc[key] === undefined) {
+      acc[key] = {};
+    }
+
+    if (i === normalizedPath.length - 1) {
+      acc[key] = value;
+    }
+
+    return acc[key];
+  }, newObject);
+  return newObject;
+}
+//# sourceMappingURL=object.js.map

package/build-module/utils/object.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/utils/object.js"],"names":["normalizePath","path","Array","isArray","toString","cloneObject","object","Object","fromEntries","entries","map","key","value","immutableSet","normalizedPath","newObject","reduce","acc","i","undefined","length"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,aAAT,CAAwBC,IAAxB,EAA+B;AAC9B,MAAKC,KAAK,CAACC,OAAN,CAAeF,IAAf,CAAL,EAA6B;AAC5B,WAAOA,IAAP;AACA,GAFD,MAEO,IAAK,OAAOA,IAAP,KAAgB,QAArB,EAAgC;AACtC,WAAO,CAAEA,IAAI,CAACG,QAAL,EAAF,CAAP;AACA;;AAED,SAAO,CAAEH,IAAF,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASI,WAAT,CAAsBC,MAAtB,EAA+B;AAC9B,MAAK,OAAOA,MAAP,KAAkB,QAAvB,EAAkC;AACjC,WAAO,EACN,GAAGC,MAAM,CAACC,WAAP,CACFD,MAAM,CAACE,OAAP,CAAgBH,MAAhB,EAAyBI,GAAzB,CAA8B;AAAA,YAAE,CAAEC,GAAF,EAAOC,KAAP,CAAF;AAAA,eAAsB,CACnDD,GADmD,EAEnDN,WAAW,CAAEO,KAAF,CAFwC,CAAtB;AAAA,OAA9B,CADE;AADG,KAAP;AAQA;;AAED,SAAON,MAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASO,YAAT,CAAuBP,MAAvB,EAA+BL,IAA/B,EAAqCW,KAArC,EAA6C;AACnD,QAAME,cAAc,GAAGd,aAAa,CAAEC,IAAF,CAApC;AACA,QAAMc,SAAS,GAAGT,MAAM,GAAGD,WAAW,CAAEC,MAAF,CAAd,GAA2B,EAAnD;AAEAQ,EAAAA,cAAc,CAACE,MAAf,CAAuB,CAAEC,GAAF,EAAON,GAAP,EAAYO,CAAZ,KAAmB;AACzC,QAAKD,GAAG,CAAEN,GAAF,CAAH,KAAeQ,SAApB,EAAgC;AAC/BF,MAAAA,GAAG,CAAEN,GAAF,CAAH,GAAa,EAAb;AACA;;AACD,QAAKO,CAAC,KAAKJ,cAAc,CAACM,MAAf,GAAwB,CAAnC,EAAuC;AACtCH,MAAAA,GAAG,CAAEN,GAAF,CAAH,GAAaC,KAAb;AACA;;AACD,WAAOK,GAAG,CAAEN,GAAF,CAAV;AACA,GARD,EAQGI,SARH;AAUA,SAAOA,SAAP;AACA","sourcesContent":["/**\n * Converts a path to an array of its fragments.\n * Supports strings, numbers and arrays:\n *\n * 'foo' => [ 'foo' ]\n * 2 => [ '2' ]\n * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]\n *\n * @param {string|number|Array} path Path\n * @return {Array} Normalized path.\n */\nfunction normalizePath( path ) {\n\tif ( Array.isArray( path ) ) {\n\t\treturn path;\n\t} else if ( typeof path === 'number' ) {\n\t\treturn [ path.toString() ];\n\t}\n\n\treturn [ path ];\n}\n\n/**\n * Clones an object.\n * Non-object values are returned unchanged.\n *\n * @param {*} object Object to clone.\n * @return {*} Cloned object, or original literal non-object value.\n */\nfunction cloneObject( object ) {\n\tif ( typeof object === 'object' ) {\n\t\treturn {\n\t\t\t...Object.fromEntries(\n\t\t\t\tObject.entries( object ).map( ( [ key, value ] ) => [\n\t\t\t\t\tkey,\n\t\t\t\t\tcloneObject( value ),\n\t\t\t\t] )\n\t\t\t),\n\t\t};\n\t}\n\n\treturn object;\n}\n\n/**\n * Perform an immutable set.\n * Handles nullish initial values.\n * Clones all nested objects in the specified object.\n *\n * @param {Object}              object Object to set a value in.\n * @param {number|string|Array} path   Path in the object to modify.\n * @param {*}                   value  New value to set.\n * @return {Object} Cloned object with the new value set.\n */\nexport function immutableSet( object, path, value ) {\n\tconst normalizedPath = normalizePath( path );\n\tconst newObject = object ? cloneObject( object ) : {};\n\n\tnormalizedPath.reduce( ( acc, key, i ) => {\n\t\tif ( acc[ key ] === undefined ) {\n\t\t\tacc[ key ] = {};\n\t\t}\n\t\tif ( i === normalizedPath.length - 1 ) {\n\t\t\tacc[ key ] = value;\n\t\t}\n\t\treturn acc[ key ];\n\t}, newObject );\n\n\treturn newObject;\n}\n"]}

package/build-style/style-rtl.css

@@ -1342,15 +1342,15 @@
 .block-editor-tools-panel-color-gradient-settings__item {
   padding: 0;
   max-width: 100%;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
 }
 .block-editor-tools-panel-color-gradient-settings__item.first {
   margin-top: 24px;
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid #ddd;
 }
 .block-editor-tools-panel-color-gradient-settings__item.last {
   border-bottom-right-radius: 2px;
@@ -2463,6 +2463,24 @@
   height: 36px;
 }
 
+.list-view-appender .block-editor-inserter__toggle {
+  background-color: #1e1e1e;
+  color: #fff;
+  margin: 8px 24px 0 0;
+  border-radius: 2px;
+  height: 24px;
+  min-width: 24px;
+  padding: 0;
+}
+.list-view-appender .block-editor-inserter__toggle:hover, .list-view-appender .block-editor-inserter__toggle:focus {
+  background: var(--wp-admin-theme-color);
+  color: #fff;
+}
+
+.list-view-appender__description {
+  display: none;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -2472,12 +2490,14 @@
 }
 
 .block-editor-media-flow__url-input {
-  border-top: 1px solid #1e1e1e;
-  margin-top: 8px;
   margin-left: -8px;
   margin-right: -8px;
   padding: 16px;
 }
+.block-editor-media-flow__url-input.has-siblings {
+  border-top: 1px solid #1e1e1e;
+  margin-top: 8px;
+}
 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
   display: block;
   top: 16px;

package/build-style/style.css

@@ -1342,15 +1342,15 @@
 .block-editor-tools-panel-color-gradient-settings__item {
   padding: 0;
   max-width: 100%;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
 }
 .block-editor-tools-panel-color-gradient-settings__item.first {
   margin-top: 24px;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid #ddd;
 }
 .block-editor-tools-panel-color-gradient-settings__item.last {
   border-bottom-left-radius: 2px;
@@ -2463,6 +2463,24 @@
   height: 36px;
 }
 
+.list-view-appender .block-editor-inserter__toggle {
+  background-color: #1e1e1e;
+  color: #fff;
+  margin: 8px 0 0 24px;
+  border-radius: 2px;
+  height: 24px;
+  min-width: 24px;
+  padding: 0;
+}
+.list-view-appender .block-editor-inserter__toggle:hover, .list-view-appender .block-editor-inserter__toggle:focus {
+  background: var(--wp-admin-theme-color);
+  color: #fff;
+}
+
+.list-view-appender__description {
+  display: none;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -2472,12 +2490,14 @@
 }
 
 .block-editor-media-flow__url-input {
-  border-top: 1px solid #1e1e1e;
-  margin-top: 8px;
   margin-right: -8px;
   margin-left: -8px;
   padding: 16px;
 }
+.block-editor-media-flow__url-input.has-siblings {
+  border-top: 1px solid #1e1e1e;
+  margin-top: 8px;
+}
 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
   display: block;
   top: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.6.0",
+	"version": "11.7.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.29.0",
-		"@wordpress/api-fetch": "^6.26.0",
-		"@wordpress/blob": "^3.29.0",
-		"@wordpress/blocks": "^12.6.0",
-		"@wordpress/components": "^23.6.0",
-		"@wordpress/compose": "^6.6.0",
-		"@wordpress/data": "^8.6.0",
-		"@wordpress/date": "^4.29.0",
-		"@wordpress/deprecated": "^3.29.0",
-		"@wordpress/dom": "^3.29.0",
-		"@wordpress/element": "^5.6.0",
-		"@wordpress/escape-html": "^2.29.0",
-		"@wordpress/hooks": "^3.29.0",
-		"@wordpress/html-entities": "^3.29.0",
-		"@wordpress/i18n": "^4.29.0",
-		"@wordpress/icons": "^9.20.0",
-		"@wordpress/is-shallow-equal": "^4.29.0",
-		"@wordpress/keyboard-shortcuts": "^4.6.0",
-		"@wordpress/keycodes": "^3.29.0",
-		"@wordpress/notices": "^3.29.0",
-		"@wordpress/preferences": "^3.6.0",
-		"@wordpress/private-apis": "^0.11.0",
-		"@wordpress/rich-text": "^6.6.0",
-		"@wordpress/shortcode": "^3.29.0",
-		"@wordpress/style-engine": "^1.12.0",
-		"@wordpress/token-list": "^2.29.0",
-		"@wordpress/url": "^3.30.0",
-		"@wordpress/warning": "^2.29.0",
-		"@wordpress/wordcount": "^3.29.0",
+		"@wordpress/a11y": "^3.30.0",
+		"@wordpress/api-fetch": "^6.27.0",
+		"@wordpress/blob": "^3.30.0",
+		"@wordpress/blocks": "^12.7.0",
+		"@wordpress/components": "^23.7.0",
+		"@wordpress/compose": "^6.7.0",
+		"@wordpress/data": "^9.0.0",
+		"@wordpress/date": "^4.30.0",
+		"@wordpress/deprecated": "^3.30.0",
+		"@wordpress/dom": "^3.30.0",
+		"@wordpress/element": "^5.7.0",
+		"@wordpress/escape-html": "^2.30.0",
+		"@wordpress/hooks": "^3.30.0",
+		"@wordpress/html-entities": "^3.30.0",
+		"@wordpress/i18n": "^4.30.0",
+		"@wordpress/icons": "^9.21.0",
+		"@wordpress/is-shallow-equal": "^4.30.0",
+		"@wordpress/keyboard-shortcuts": "^4.7.0",
+		"@wordpress/keycodes": "^3.30.0",
+		"@wordpress/notices": "^3.30.0",
+		"@wordpress/preferences": "^3.7.0",
+		"@wordpress/private-apis": "^0.12.0",
+		"@wordpress/rich-text": "^6.7.0",
+		"@wordpress/shortcode": "^3.30.0",
+		"@wordpress/style-engine": "^1.13.0",
+		"@wordpress/token-list": "^2.30.0",
+		"@wordpress/url": "^3.31.0",
+		"@wordpress/warning": "^2.30.0",
+		"@wordpress/wordcount": "^3.30.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9534a7b3bbf07c1d40b94fdb7a3d091f297bfb06"
+	"gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
 }

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

@@ -1,5 +1,5 @@
 // This creates a "slot" where the block you're dragging appeared.
-// We use !important as one of the rules are meant to be overriden.
+// We use !important as one of the rules are meant to be overridden.
 .block-editor-block-list__layout .is-dragging {
 	background-color: currentColor !important;
 	opacity: 0.05 !important;

package/src/components/block-list/block-html.js

@@ -59,7 +59,7 @@ function BlockHTML( { clientId } ) {
 
 		// Ensure the state is updated if we reset so it displays the default content.
 		if ( ! html ) {
-			setHtml( { content } );
+			setHtml( content );
 		}
 	};
 

package/src/components/block-preview/auto.js

@@ -12,7 +12,6 @@ import { Disabled } from '@wordpress/components';
 import BlockList from '../block-list';
 import Iframe from '../iframe';
 import EditorStyles from '../editor-styles';
-import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
@@ -32,11 +31,10 @@ function ScaledBlockPreview( {
 
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, duotone } = useSelect( ( select ) => {
+	const { styles } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
-			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
 
@@ -56,10 +54,6 @@ function ScaledBlockPreview( {
 		return styles;
 	}, [ styles, additionalStyles ] );
 
-	const svgFilters = useMemo( () => {
-		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
-	}, [ duotone ] );
-
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
@@ -76,7 +70,6 @@ function ScaledBlockPreview( {
 			} }
 		>
 			<Iframe
-				head={ <EditorStyles styles={ editorStyles } /> }
 				contentRef={ useRefEffect( ( bodyElement ) => {
 					const {
 						ownerDocument: { documentElement },
@@ -108,16 +101,8 @@ function ScaledBlockPreview( {
 							: minHeight,
 				} }
 			>
+				<EditorStyles styles={ editorStyles } />
 				{ contentResizeListener }
-				{
-					/* Filters need to be rendered before children to avoid Safari rendering issues. */
-					svgFilters.map( ( preset ) => (
-						<PresetDuotoneFilter
-							preset={ preset }
-							key={ preset.slug }
-						/>
-					) )
-				}
 				<MemoizedBlockList renderAppender={ false } />
 			</Iframe>
 		</Disabled>

package/src/components/colors-gradients/style.scss

@@ -73,20 +73,20 @@ $swatch-gap: 12px;
 	max-width: 100%;
 
 	// Border styles.
-	border-left: 1px solid rgba(0, 0, 0, 0.1);
-	border-right: 1px solid rgba(0, 0, 0, 0.1);
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	border-left: 1px solid $gray-300;
+	border-right: 1px solid $gray-300;
+	border-bottom: 1px solid $gray-300;
 
 	&.first {
 		margin-top: $grid-unit-30;
-		border-top-left-radius: 2px;
-		border-top-right-radius: 2px;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-top-left-radius: $radius-block-ui;
+		border-top-right-radius: $radius-block-ui;
+		border-top: 1px solid $gray-300;
 	}
 
 	&.last {
-		border-bottom-left-radius: 2px;
-		border-bottom-right-radius: 2px;
+		border-bottom-left-radius: $radius-block-ui;
+		border-bottom-right-radius: $radius-block-ui;
 	}
 
 	> div,

package/src/components/editor-styles/index.js

@@ -8,6 +8,7 @@ import a11yPlugin from 'colord/plugins/a11y';
 /**
  * WordPress dependencies
  */
+import { SVG } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -68,7 +69,20 @@ function useDarkThemeBodyClassName( styles ) {
 
 export default function EditorStyles( { styles } ) {
 	const transformedStyles = useMemo(
-		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
+		() =>
+			transformStyles(
+				styles.filter( ( style ) => style?.css ),
+				EDITOR_STYLES_SELECTOR
+			),
+		[ styles ]
+	);
+
+	const transformedSvgs = useMemo(
+		() =>
+			styles
+				.filter( ( style ) => style.__unstableType === 'svgs' )
+				.map( ( style ) => style.assets )
+				.join( '' ),
 		[ styles ]
 	);
 
@@ -80,6 +94,20 @@ export default function EditorStyles( { styles } ) {
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 0 0"
+				width="0"
+				height="0"
+				role="none"
+				style={ {
+					visibility: 'hidden',
+					position: 'absolute',
+					left: '-9999px',
+					overflow: 'hidden',
+				} }
+				dangerouslySetInnerHTML={ { __html: transformedSvgs } }
+			/>
 		</>
 	);
 }