@wordpress/block-editor 16.0.0 → 16.1.0

package/src/store/reducer.js

@@ -1442,19 +1442,19 @@ export function selection( state = {}, action ) {
 				selectionEnd,
 			};
 		case 'MULTI_SELECT':
-			const { start, end } = action;
+			const nextSelection = {
+				selectionStart: { clientId: action.start },
+				selectionEnd: { clientId: action.end },
+			};
 
-			if (
-				start === state.selectionStart?.clientId &&
-				end === state.selectionEnd?.clientId
-			) {
+			// A text selection between the same blocks is not the same
+			// selection: it carries attribute keys and offsets, making it
+			// partial rather than a block multi-selection.
+			if ( fastDeepEqual( state, nextSelection ) ) {
 				return state;
 			}
 
-			return {
-				selectionStart: { clientId: start },
-				selectionEnd: { clientId: end },
-			};
+			return nextSelection;
 		case 'RESET_BLOCKS':
 			const startClientId = state?.selectionStart?.clientId;
 			const endClientId = state?.selectionEnd?.clientId;

package/src/store/selectors.js

@@ -149,14 +149,26 @@ export function getBlockAttributes( state, clientId ) {
  * blocks module registration store.
  *
  * getBlock recurses through its inner blocks until all its children blocks have
- * been retrieved. Note that getBlock will not return the child inner blocks of
- * an inner block controller. This is because an inner block controller syncs
- * itself with its own entity, and should therefore not be included with the
- * blocks of a different entity. For example, say you call `getBlocks( TP )` to
- * get the blocks of a template part. If another template part is a child of TP,
- * then the nested template part's child blocks will not be returned. This way,
- * the template block itself is considered part of the parent, but the children
- * are not.
+ * been retrieved, with one exception: the children of an "inner block
+ * controller" are not part of its tree, so `innerBlocks` usually comes back
+ * empty even though the block clearly has children in the editor. Never rely on
+ * a controller's `innerBlocks`; ask for its children directly:
+ *
+ * ```js
+ * getBlock( syncedPatternClientId ).innerBlocks; // Usually [].
+ * getBlocks( syncedPatternClientId ); // The pattern's blocks.
+ * ```
+ *
+ * A block is an inner block controller when its children belong to, and are
+ * synced with, an entity other than the one being edited. Synced patterns
+ * (`core/block`) and template parts (`core/template-part`) are the usual
+ * examples: each owns its own blocks, and editing them saves to that pattern or
+ * template part, not to the post or template it sits in. Leaving their children
+ * out of the tree is what keeps the two entities separate, so walking a
+ * template's blocks stops at a template part placed inside it.
+ *
+ * `areInnerBlocksControlled( clientId )` tells whether a block is such a
+ * controller.
  *
  * @param {Object} state    Editor state.
  * @param {string} clientId Block client ID.
@@ -789,6 +801,30 @@ export function getSelectedBlocksInitialCaretPosition( state ) {
 	return state.initialPosition;
 }
 
+/**
+ * Returns the ancestor client ID when one selection endpoint is nested
+ * inside the other, or undefined for any other selection shape. Such a
+ * selection has no sibling range; the ancestor contains all of it.
+ *
+ * @param {Object} state Editor state.
+ * @return {?string} The ancestor client ID, if any.
+ */
+function getSelectionNestingAncestor( state ) {
+	const { selectionStart, selectionEnd } = state.selection;
+	const startClientId = selectionStart.clientId;
+	const endClientId = selectionEnd.clientId;
+	if ( ! startClientId || ! endClientId || startClientId === endClientId ) {
+		return undefined;
+	}
+	if ( getBlockParents( state, endClientId ).includes( startClientId ) ) {
+		return startClientId;
+	}
+	if ( getBlockParents( state, startClientId ).includes( endClientId ) ) {
+		return endClientId;
+	}
+	return undefined;
+}
+
 /**
  * Returns the current selection set of block client IDs (multiselection or single selection).
  *
@@ -808,6 +844,11 @@ export const getSelectedBlockClientIds = createSelector(
 			return [ selectionStart.clientId ];
 		}
 
+		const nestingAncestorClientId = getSelectionNestingAncestor( state );
+		if ( nestingAncestorClientId ) {
+			return [ nestingAncestorClientId ];
+		}
+
 		// Retrieve root client ID to aid in retrieving relevant nested block
 		// order, being careful to allow the falsey empty string top-level root
 		// by explicitly testing against null.
@@ -832,6 +873,7 @@ export const getSelectedBlockClientIds = createSelector(
 	},
 	( state ) => [
 		state.blocks.order,
+		state.blocks.parents,
 		state.selection.selectionStart.clientId,
 		state.selection.selectionEnd.clientId,
 	]
@@ -1014,6 +1056,12 @@ export function getMultiSelectedBlocksEndClientId( state ) {
  * @return {boolean} Whether the selection is mergeable.
  */
 export function __unstableIsFullySelected( state ) {
+	// A text selection with one endpoint nested inside the other has no
+	// sibling range; it resolves to the ancestor, which is presented and
+	// treated as fully selected.
+	if ( getSelectionNestingAncestor( state ) ) {
+		return true;
+	}
 	const selectionAnchor = getSelectionStart( state );
 	const selectionFocus = getSelectionEnd( state );
 	return (

package/src/store/test/private-selectors.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import {
+	registerBlockType,
+	unregisterBlockType,
+	privateApis as blocksPrivateApis,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -29,9 +33,15 @@ import {
 	hasSelectedStyleState,
 	isSelectedBlockStyleStateShownOnCanvas,
 	shouldRenderBlockListView,
+	getStyleOverrides,
+	canHostEditableRoot,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 import { deviceTypeKey } from '../private-keys';
+import reducer from '../reducer';
+import { unlock } from '../../lock-unlock';
+
+const { editableRootKey } = unlock( blocksPrivateApis );
 
 describe( 'private selectors', () => {
 	describe( 'isBlockInterfaceHidden', () => {
@@ -1349,6 +1359,27 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
+	describe( 'getStyleOverrides', () => {
+		it( 'sorts overrides by the order of the blocks they belong to', () => {
+			const state = {
+				blocks: {
+					order: new Map( [ [ '', [ 'block-1', 'block-2' ] ] ] ),
+				},
+				styleOverrides: new Map( [
+					[ 'override-2', { clientId: 'block-2', css: '.b{}' } ],
+					[ 'override-1', { clientId: 'block-1', css: '.a{}' } ],
+					[ 'override-global', { css: '.global{}' } ],
+				] ),
+			};
+
+			expect( getStyleOverrides( state ) ).toEqual( [
+				[ 'override-global', { css: '.global{}' } ],
+				[ 'override-1', { clientId: 'block-1', css: '.a{}' } ],
+				[ 'override-2', { clientId: 'block-2', css: '.b{}' } ],
+			] );
+		} );
+	} );
+
 	describe( 'getBlockStyles', () => {
 		it( 'should return an empty object when no client IDs are provided', () => {
 			const state = {
@@ -2528,4 +2559,132 @@ describe( 'private selectors', () => {
 			);
 		} );
 	} );
+
+	describe( 'canHostEditableRoot', () => {
+		beforeEach( () => {
+			registerBlockType( 'core/test-editable-root', {
+				apiVersion: 3,
+				save: () => null,
+				category: 'text',
+				title: 'Editable root',
+				[ editableRootKey ]: true,
+			} );
+			registerBlockType( 'core/test-plain', {
+				apiVersion: 3,
+				save: () => null,
+				category: 'text',
+				title: 'Plain',
+			} );
+		} );
+
+		afterEach( () => {
+			unregisterBlockType( 'core/test-editable-root' );
+			unregisterBlockType( 'core/test-plain' );
+		} );
+
+		const createState = () => ( {
+			blocks: {
+				byClientId: new Map( [
+					[ 'a', { name: 'core/test-editable-root' } ],
+					[ 'b', { name: 'core/test-editable-root' } ],
+				] ),
+				attributes: new Map( [
+					[ 'a', { content: 'a' } ],
+					[ 'b', { content: 'b' } ],
+				] ),
+				order: new Map( [
+					[ '', [ 'a', 'b' ] ],
+					[ 'a', [] ],
+					[ 'b', [] ],
+				] ),
+				parents: new Map( [
+					[ 'a', '' ],
+					[ 'b', '' ],
+				] ),
+				blockEditingModes: new Map(),
+			},
+			derivedBlockEditingModes: new Map(),
+			blocksMode: {},
+		} );
+
+		it( 'should return true for a block supporting editableRoot with editable siblings', () => {
+			expect( canHostEditableRoot( createState(), 'a' ) ).toBe( true );
+		} );
+
+		it( 'should return false for a lone block', () => {
+			const state = createState();
+			state.blocks.order = new Map( [
+				[ '', [ 'a' ] ],
+				[ 'a', [] ],
+			] );
+
+			expect( canHostEditableRoot( state, 'a' ) ).toBe( false );
+		} );
+
+		it( 'should return false when a sibling is not editable', () => {
+			const state = createState();
+			state.derivedBlockEditingModes = new Map( [ [ 'b', 'disabled' ] ] );
+
+			expect( canHostEditableRoot( state, 'a' ) ).toBe( false );
+		} );
+
+		// The sibling scan is O(siblings) and runs in every rich text instance.
+		it( 'should not recompute when only block attributes change', () => {
+			const state = createState();
+			expect( canHostEditableRoot( state, 'a' ) ).toBe( true );
+
+			// Change the uncached result without touching a dependant.
+			state.blocks.byClientId.set( 'a', { name: 'core/test-plain' } );
+
+			const nextState = {
+				...state,
+				blocks: {
+					...state.blocks,
+					attributes: new Map( [
+						[ 'a', { content: 'typed' } ],
+						[ 'b', { content: 'b' } ],
+					] ),
+				},
+			};
+
+			expect( canHostEditableRoot( nextState, 'a' ) ).toBe( true );
+
+			nextState.blocks.byClientId = new Map( state.blocks.byClientId );
+			expect( canHostEditableRoot( nextState, 'a' ) ).toBe( false );
+		} );
+
+		// The memoization above is only reachable if the reducer preserves
+		// these references through a keystroke.
+		it( 'should keep its dependants referentially stable while typing', () => {
+			const block = ( clientId ) => ( {
+				clientId,
+				name: 'core/test-editable-root',
+				attributes: { content: clientId },
+				innerBlocks: [],
+			} );
+			const state = reducer( reducer( undefined, { type: '@@init' } ), {
+				type: 'RESET_BLOCKS',
+				blocks: [ block( 'a' ), block( 'b' ) ],
+			} );
+
+			const next = reducer( state, {
+				type: 'UPDATE_BLOCK_ATTRIBUTES',
+				clientIds: [ 'a' ],
+				attributes: { content: 'typed' },
+			} );
+
+			// Guards against the assertions below passing vacuously.
+			expect( next.blocks.attributes ).not.toBe(
+				state.blocks.attributes
+			);
+
+			const before = canHostEditableRoot.getDependants( state );
+			const after = canHostEditableRoot.getDependants( next );
+
+			expect( after ).toHaveLength( before.length );
+			after.forEach( ( dependant, index ) => {
+				expect( dependant ).toBe( before[ index ] );
+			} );
+		} );
+	} );
 } );

package/src/style.scss

@@ -35,9 +35,11 @@
 @use "./components/fit-text-size-warning/style.scss" as *;
 @use "./components/font-appearance-control/style.scss" as *;
 @use "./components/global-styles/style.scss" as *;
+@use "./components/global-styles/inheritance/style.scss" as *;
 @use "./components/grid/style.scss" as *;
 @use "./components/height-control/style.scss" as *;
 @use "./components/iframe/style.scss" as *;
+@use "./components/image-editor/style.scss" as *;
 @use "./components/inserter-list-item/style.scss" as *;
 @use "./components/inspector-controls/styles.scss" as *;
 @use "./components/inspector-controls-tabs/style.scss" as *;

package/src/utils/native-undo.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Elements whose content the browser's own undo acts on (a dialog input, an
+ * HTML editing field, a search field), registered through `useNativeUndo`.
+ * The editor history must not act on events originating within them.
+ */
+const nativeUndoNodes = new WeakSet();
+
+/**
+ * Returns a ref that marks an element (and its descendants) as relying on
+ * the browser's own undo, so the editor history leaves the undo and redo
+ * shortcuts alone within it.
+ *
+ * @return {Function} Ref callback.
+ */
+export function useNativeUndo() {
+	return useRefEffect( ( node ) => {
+		nativeUndoNodes.add( node );
+		return () => {
+			nativeUndoNodes.delete( node );
+		};
+	}, [] );
+}
+
+/**
+ * Returns true when the event originates from an element registered through
+ * `useNativeUndo`.
+ *
+ * Events coming from the editor canvas are re-dispatched on the iframe
+ * element, so the real target is resolved through the frame's focused
+ * element.
+ *
+ * @param {KeyboardEvent} event Keyboard event.
+ *
+ * @return {boolean} Whether the element relies on the browser's own undo.
+ */
+export function usesNativeUndo( event ) {
+	let { target } = event;
+
+	if ( target?.nodeName === 'IFRAME' ) {
+		target = target.contentDocument?.activeElement;
+	}
+
+	while ( target ) {
+		if ( nativeUndoNodes.has( target ) ) {
+			return true;
+		}
+		target = target.parentElement;
+	}
+
+	return false;
+}

package/build/components/duotone/utils.cjs

@@ -1,87 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/block-editor/src/components/duotone/utils.js
-var utils_exports = {};
-__export(utils_exports, {
-  getDuotoneFilter: () => getDuotoneFilter,
-  getDuotoneStylesheet: () => getDuotoneStylesheet,
-  getDuotoneUnsetStylesheet: () => getDuotoneUnsetStylesheet,
-  getValuesFromColors: () => getValuesFromColors
-});
-module.exports = __toCommonJS(utils_exports);
-var import_colord = require("colord");
-function getValuesFromColors(colors = []) {
-  const values = { r: [], g: [], b: [], a: [] };
-  colors.forEach((color) => {
-    const rgbColor = (0, import_colord.colord)(color).toRgb();
-    values.r.push(rgbColor.r / 255);
-    values.g.push(rgbColor.g / 255);
-    values.b.push(rgbColor.b / 255);
-    values.a.push(rgbColor.a);
-  });
-  return values;
-}
-function getDuotoneUnsetStylesheet(selector) {
-  return `${selector}{filter:none}`;
-}
-function getDuotoneStylesheet(selector, id) {
-  return `${selector}{filter:url(#${id})}`;
-}
-function getDuotoneFilter(id, colors) {
-  const values = getValuesFromColors(colors);
-  return `
-<svg
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	viewBox="0 0 0 0"
-	width="0"
-	height="0"
-	focusable="false"
-	role="none"
-	aria-hidden="true"
-	style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
->
-	<defs>
-		<filter id="${id}">
-			<!--
-				Use sRGB instead of linearRGB so transparency looks correct.
-				Use perceptual brightness to convert to grayscale.
-			-->
-			<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix>
-			<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->
-			<feComponentTransfer color-interpolation-filters="sRGB">
-				<feFuncR type="table" tableValues="${values.r.join(" ")}"></feFuncR>
-				<feFuncG type="table" tableValues="${values.g.join(" ")}"></feFuncG>
-				<feFuncB type="table" tableValues="${values.b.join(" ")}"></feFuncB>
-				<feFuncA type="table" tableValues="${values.a.join(" ")}"></feFuncA>
-			</feComponentTransfer>
-			<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->
-			<feComposite in2="SourceGraphic" operator="in"></feComposite>
-		</filter>
-	</defs>
-</svg>`;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getDuotoneFilter,
-  getDuotoneStylesheet,
-  getDuotoneUnsetStylesheet,
-  getValuesFromColors
-});
-//# sourceMappingURL=utils.cjs.map

package/build/components/duotone/utils.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/duotone/utils.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Convert a list of colors to an object of R, G, and B values.\n *\n * @param {string[]} colors Array of RBG color strings.\n *\n * @return {Object} R, G, and B values.\n */\nexport function getValuesFromColors( colors = [] ) {\n\tconst values = { r: [], g: [], b: [], a: [] };\n\n\tcolors.forEach( ( color ) => {\n\t\tconst rgbColor = colord( color ).toRgb();\n\t\tvalues.r.push( rgbColor.r / 255 );\n\t\tvalues.g.push( rgbColor.g / 255 );\n\t\tvalues.b.push( rgbColor.b / 255 );\n\t\tvalues.a.push( rgbColor.a );\n\t} );\n\n\treturn values;\n}\n\n/**\n * Stylesheet for disabling a global styles duotone filter.\n *\n * @param {string} selector Selector to disable the filter for.\n *\n * @return {string} Filter none style.\n */\nexport function getDuotoneUnsetStylesheet( selector ) {\n\treturn `${ selector }{filter:none}`;\n}\n\n/**\n * SVG and stylesheet needed for rendering the duotone filter.\n *\n * @param {string} selector Selector to apply the filter to.\n * @param {string} id       Unique id for this duotone filter.\n *\n * @return {string} Duotone filter style.\n */\nexport function getDuotoneStylesheet( selector, id ) {\n\treturn `${ selector }{filter:url(#${ id })}`;\n}\n\n/**\n * The SVG part of the duotone filter.\n *\n * @param {string}   id     Unique id for this duotone filter.\n * @param {string[]} colors Color strings from dark to light.\n *\n * @return {string} Duotone SVG.\n */\nexport function getDuotoneFilter( id, colors ) {\n\tconst values = getValuesFromColors( colors );\n\treturn `\n<svg\n\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\tviewBox=\"0 0 0 0\"\n\twidth=\"0\"\n\theight=\"0\"\n\tfocusable=\"false\"\n\trole=\"none\"\n\taria-hidden=\"true\"\n\tstyle=\"visibility: hidden; position: absolute; left: -9999px; overflow: hidden;\"\n>\n\t<defs>\n\t\t<filter id=\"${ id }\">\n\t\t\t<!--\n\t\t\t\tUse sRGB instead of linearRGB so transparency looks correct.\n\t\t\t\tUse perceptual brightness to convert to grayscale.\n\t\t\t-->\n\t\t\t<feColorMatrix color-interpolation-filters=\"sRGB\" type=\"matrix\" values=\" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 \"></feColorMatrix>\n\t\t\t<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->\n\t\t\t<feComponentTransfer color-interpolation-filters=\"sRGB\">\n\t\t\t\t<feFuncR type=\"table\" tableValues=\"${ values.r.join( ' ' ) }\"></feFuncR>\n\t\t\t\t<feFuncG type=\"table\" tableValues=\"${ values.g.join( ' ' ) }\"></feFuncG>\n\t\t\t\t<feFuncB type=\"table\" tableValues=\"${ values.b.join( ' ' ) }\"></feFuncB>\n\t\t\t\t<feFuncA type=\"table\" tableValues=\"${ values.a.join( ' ' ) }\"></feFuncA>\n\t\t\t</feComponentTransfer>\n\t\t\t<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->\n\t\t\t<feComposite in2=\"SourceGraphic\" operator=\"in\"></feComposite>\n\t\t</filter>\n\t</defs>\n</svg>`;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuB;AAShB,SAAS,oBAAqB,SAAS,CAAC,GAAI;AAClD,QAAM,SAAS,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE;AAE5C,SAAO,QAAS,CAAE,UAAW;AAC5B,UAAM,eAAW,sBAAQ,KAAM,EAAE,MAAM;AACvC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,CAAE;AAAA,EAC3B,CAAE;AAEF,SAAO;AACR;AASO,SAAS,0BAA2B,UAAW;AACrD,SAAO,GAAI,QAAS;AACrB;AAUO,SAAS,qBAAsB,UAAU,IAAK;AACpD,SAAO,GAAI,QAAS,gBAAiB,EAAG;AACzC;AAUO,SAAS,iBAAkB,IAAI,QAAS;AAC9C,QAAM,SAAS,oBAAqB,MAAO;AAC3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYS,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAQsB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/D;",
-  "names": []
-}

package/build-module/components/duotone/utils.mjs

@@ -1,59 +0,0 @@
-// packages/block-editor/src/components/duotone/utils.js
-import { colord } from "colord";
-function getValuesFromColors(colors = []) {
-  const values = { r: [], g: [], b: [], a: [] };
-  colors.forEach((color) => {
-    const rgbColor = colord(color).toRgb();
-    values.r.push(rgbColor.r / 255);
-    values.g.push(rgbColor.g / 255);
-    values.b.push(rgbColor.b / 255);
-    values.a.push(rgbColor.a);
-  });
-  return values;
-}
-function getDuotoneUnsetStylesheet(selector) {
-  return `${selector}{filter:none}`;
-}
-function getDuotoneStylesheet(selector, id) {
-  return `${selector}{filter:url(#${id})}`;
-}
-function getDuotoneFilter(id, colors) {
-  const values = getValuesFromColors(colors);
-  return `
-<svg
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	viewBox="0 0 0 0"
-	width="0"
-	height="0"
-	focusable="false"
-	role="none"
-	aria-hidden="true"
-	style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
->
-	<defs>
-		<filter id="${id}">
-			<!--
-				Use sRGB instead of linearRGB so transparency looks correct.
-				Use perceptual brightness to convert to grayscale.
-			-->
-			<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix>
-			<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->
-			<feComponentTransfer color-interpolation-filters="sRGB">
-				<feFuncR type="table" tableValues="${values.r.join(" ")}"></feFuncR>
-				<feFuncG type="table" tableValues="${values.g.join(" ")}"></feFuncG>
-				<feFuncB type="table" tableValues="${values.b.join(" ")}"></feFuncB>
-				<feFuncA type="table" tableValues="${values.a.join(" ")}"></feFuncA>
-			</feComponentTransfer>
-			<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->
-			<feComposite in2="SourceGraphic" operator="in"></feComposite>
-		</filter>
-	</defs>
-</svg>`;
-}
-export {
-  getDuotoneFilter,
-  getDuotoneStylesheet,
-  getDuotoneUnsetStylesheet,
-  getValuesFromColors
-};
-//# sourceMappingURL=utils.mjs.map

package/build-module/components/duotone/utils.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/duotone/utils.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Convert a list of colors to an object of R, G, and B values.\n *\n * @param {string[]} colors Array of RBG color strings.\n *\n * @return {Object} R, G, and B values.\n */\nexport function getValuesFromColors( colors = [] ) {\n\tconst values = { r: [], g: [], b: [], a: [] };\n\n\tcolors.forEach( ( color ) => {\n\t\tconst rgbColor = colord( color ).toRgb();\n\t\tvalues.r.push( rgbColor.r / 255 );\n\t\tvalues.g.push( rgbColor.g / 255 );\n\t\tvalues.b.push( rgbColor.b / 255 );\n\t\tvalues.a.push( rgbColor.a );\n\t} );\n\n\treturn values;\n}\n\n/**\n * Stylesheet for disabling a global styles duotone filter.\n *\n * @param {string} selector Selector to disable the filter for.\n *\n * @return {string} Filter none style.\n */\nexport function getDuotoneUnsetStylesheet( selector ) {\n\treturn `${ selector }{filter:none}`;\n}\n\n/**\n * SVG and stylesheet needed for rendering the duotone filter.\n *\n * @param {string} selector Selector to apply the filter to.\n * @param {string} id       Unique id for this duotone filter.\n *\n * @return {string} Duotone filter style.\n */\nexport function getDuotoneStylesheet( selector, id ) {\n\treturn `${ selector }{filter:url(#${ id })}`;\n}\n\n/**\n * The SVG part of the duotone filter.\n *\n * @param {string}   id     Unique id for this duotone filter.\n * @param {string[]} colors Color strings from dark to light.\n *\n * @return {string} Duotone SVG.\n */\nexport function getDuotoneFilter( id, colors ) {\n\tconst values = getValuesFromColors( colors );\n\treturn `\n<svg\n\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\tviewBox=\"0 0 0 0\"\n\twidth=\"0\"\n\theight=\"0\"\n\tfocusable=\"false\"\n\trole=\"none\"\n\taria-hidden=\"true\"\n\tstyle=\"visibility: hidden; position: absolute; left: -9999px; overflow: hidden;\"\n>\n\t<defs>\n\t\t<filter id=\"${ id }\">\n\t\t\t<!--\n\t\t\t\tUse sRGB instead of linearRGB so transparency looks correct.\n\t\t\t\tUse perceptual brightness to convert to grayscale.\n\t\t\t-->\n\t\t\t<feColorMatrix color-interpolation-filters=\"sRGB\" type=\"matrix\" values=\" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 \"></feColorMatrix>\n\t\t\t<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->\n\t\t\t<feComponentTransfer color-interpolation-filters=\"sRGB\">\n\t\t\t\t<feFuncR type=\"table\" tableValues=\"${ values.r.join( ' ' ) }\"></feFuncR>\n\t\t\t\t<feFuncG type=\"table\" tableValues=\"${ values.g.join( ' ' ) }\"></feFuncG>\n\t\t\t\t<feFuncB type=\"table\" tableValues=\"${ values.b.join( ' ' ) }\"></feFuncB>\n\t\t\t\t<feFuncA type=\"table\" tableValues=\"${ values.a.join( ' ' ) }\"></feFuncA>\n\t\t\t</feComponentTransfer>\n\t\t\t<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->\n\t\t\t<feComposite in2=\"SourceGraphic\" operator=\"in\"></feComposite>\n\t\t</filter>\n\t</defs>\n</svg>`;\n}\n"],
-  "mappings": ";AAGA,SAAS,cAAc;AAShB,SAAS,oBAAqB,SAAS,CAAC,GAAI;AAClD,QAAM,SAAS,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE;AAE5C,SAAO,QAAS,CAAE,UAAW;AAC5B,UAAM,WAAW,OAAQ,KAAM,EAAE,MAAM;AACvC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,CAAE;AAAA,EAC3B,CAAE;AAEF,SAAO;AACR;AASO,SAAS,0BAA2B,UAAW;AACrD,SAAO,GAAI,QAAS;AACrB;AAUO,SAAS,qBAAsB,UAAU,IAAK;AACpD,SAAO,GAAI,QAAS,gBAAiB,EAAG;AACzC;AAUO,SAAS,iBAAkB,IAAI,QAAS;AAC9C,QAAM,SAAS,oBAAqB,MAAO;AAC3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYS,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAQsB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/D;",
-  "names": []
-}

package/src/components/duotone/utils.js

@@ -1,90 +0,0 @@
-/**
- * External dependencies
- */
-import { colord } from 'colord';
-
-/**
- * Convert a list of colors to an object of R, G, and B values.
- *
- * @param {string[]} colors Array of RBG color strings.
- *
- * @return {Object} R, G, and B values.
- */
-export function getValuesFromColors( colors = [] ) {
-	const values = { r: [], g: [], b: [], a: [] };
-
-	colors.forEach( ( color ) => {
-		const rgbColor = colord( color ).toRgb();
-		values.r.push( rgbColor.r / 255 );
-		values.g.push( rgbColor.g / 255 );
-		values.b.push( rgbColor.b / 255 );
-		values.a.push( rgbColor.a );
-	} );
-
-	return values;
-}
-
-/**
- * Stylesheet for disabling a global styles duotone filter.
- *
- * @param {string} selector Selector to disable the filter for.
- *
- * @return {string} Filter none style.
- */
-export function getDuotoneUnsetStylesheet( selector ) {
-	return `${ selector }{filter:none}`;
-}
-
-/**
- * SVG and stylesheet needed for rendering the duotone filter.
- *
- * @param {string} selector Selector to apply the filter to.
- * @param {string} id       Unique id for this duotone filter.
- *
- * @return {string} Duotone filter style.
- */
-export function getDuotoneStylesheet( selector, id ) {
-	return `${ selector }{filter:url(#${ id })}`;
-}
-
-/**
- * The SVG part of the duotone filter.
- *
- * @param {string}   id     Unique id for this duotone filter.
- * @param {string[]} colors Color strings from dark to light.
- *
- * @return {string} Duotone SVG.
- */
-export function getDuotoneFilter( id, colors ) {
-	const values = getValuesFromColors( colors );
-	return `
-<svg
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	viewBox="0 0 0 0"
-	width="0"
-	height="0"
-	focusable="false"
-	role="none"
-	aria-hidden="true"
-	style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
->
-	<defs>
-		<filter id="${ id }">
-			<!--
-				Use sRGB instead of linearRGB so transparency looks correct.
-				Use perceptual brightness to convert to grayscale.
-			-->
-			<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix>
-			<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->
-			<feComponentTransfer color-interpolation-filters="sRGB">
-				<feFuncR type="table" tableValues="${ values.r.join( ' ' ) }"></feFuncR>
-				<feFuncG type="table" tableValues="${ values.g.join( ' ' ) }"></feFuncG>
-				<feFuncB type="table" tableValues="${ values.b.join( ' ' ) }"></feFuncB>
-				<feFuncA type="table" tableValues="${ values.a.join( ' ' ) }"></feFuncA>
-			</feComponentTransfer>
-			<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->
-			<feComposite in2="SourceGraphic" operator="in"></feComposite>
-		</filter>
-	</defs>
-</svg>`;
-}