npm - @wordpress/block-editor - Versions diffs - 7.0.4 → 8.0.0 - Mend

@wordpress/block-editor 7.0.4 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (347) hide show

package/build/components/block-settings-menu/block-settings-dropdown.js CHANGED Viewed

@@ -76,7 +76,24 @@ function BlockSettingsDropdown({
   const blockClientIds = (0, _lodash.castArray)(clientIds);
   const count = blockClientIds.length;
   const firstBlockClientId = blockClientIds[0];
-  const onlyBlock = (0, _data.useSelect)(select => 1 === select(_store.store).getBlockCount(), []);
+  const {
+    onlyBlock,
+    title
+  } = (0, _data.useSelect)(select => {
+    var _getBlockType;
+    const {
+      getBlockCount,
+      getBlockName
+    } = select(_store.store);
+    const {
+      getBlockType
+    } = select(_blocks.store);
+    return {
+      onlyBlock: 1 === getBlockCount(),
+      title: (_getBlockType = getBlockType(getBlockName(firstBlockClientId))) === null || _getBlockType === void 0 ? void 0 : _getBlockType.title
+    };
+  }, [firstBlockClientId]);
   const shortcuts = (0, _data.useSelect)(select => {
     const {
       getShortcutRepresentation
@@ -95,7 +112,10 @@ function BlockSettingsDropdown({
       __experimentalSelectBlock(ids[0]);
     }
   } : _lodash.noop, [__experimentalSelectBlock]);
-  const removeBlockLabel = count === 1 ? (0, _i18n.__)('Remove block') : (0, _i18n.__)('Remove blocks');
+  const label = (0, _i18n.sprintf)(
+  /* translators: %s: block name */
+  (0, _i18n.__)('Remove %s'), title);
+  const removeBlockLabel = count === 1 ? label : (0, _i18n.__)('Remove blocks');
   return (0, _element.createElement)(_blockActions.default, {
     clientIds: clientIds,
     __experimentalUpdateSelection: !__experimentalSelectBlock

package/build/components/block-settings-menu/block-settings-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/block-settings-menu/block-settings-dropdown.js"],"names":["POPOVER_PROPS","className","position","isAlternate","CopyMenuItem","blocks","onCopy","ref","BlockSettingsDropdown","clientIds","__experimentalSelectBlock","children","props","blockClientIds","count","length","firstBlockClientId","onlyBlock","select","blockEditorStore","getBlockCount","shortcuts","getShortcutRepresentation","keyboardShortcutsStore","duplicate","remove","insertAfter","insertBefore","updateSelection","clientIdsPromise","ids","noop","removeBlockLabel","canDuplicate","canInsertDefaultBlock","canMove","canRemove","onDuplicate","onInsertAfter","onInsertBefore","onRemove","onMoveTo","moreVertical","onClose","Children","map","child"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { castArray, flow, noop } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { moreVertical } from '@wordpress/icons';\n\nimport { Children, cloneElement, useCallback } from '@wordpress/element';\nimport { serialize } from '@wordpress/blocks';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { useCopyToClipboard } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport BlockActions from '../block-actions';\nimport BlockModeToggle from './block-mode-toggle';\nimport BlockHTMLConvertButton from './block-html-convert-button';\nimport __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';\nimport BlockSettingsMenuControls from '../block-settings-menu-controls';\nimport { store as blockEditorStore } from '../../store';\n\nconst POPOVER_PROPS = {\n\tclassName: 'block-editor-block-settings-menu__popover',\n\tposition: 'bottom right',\n\tisAlternate: true,\n};\n\nfunction CopyMenuItem( { blocks, onCopy } ) {\n\tconst ref = useCopyToClipboard( () => serialize( blocks ), onCopy );\n\treturn <MenuItem ref={ ref }>{ __( 'Copy' ) }</MenuItem>;\n}\n\nexport function BlockSettingsDropdown( {\n\tclientIds,\n\t__experimentalSelectBlock,\n\tchildren,\n\t...props\n} ) {\n\tconst blockClientIds = castArray( clientIds );\n\tconst count = blockClientIds.length;\n\tconst firstBlockClientId = blockClientIds[ 0 ];\n\tconst onlyBlock = useSelect(\n\t\t( select ) => 1 === select( blockEditorStore ).getBlockCount(),\n\t\t[]\n\t);\n\n\tconst shortcuts = useSelect( ( select ) => {\n\t\tconst { getShortcutRepresentation } = select( keyboardShortcutsStore );\n\t\treturn {\n\t\t\tduplicate: getShortcutRepresentation(\n\t\t\t\t'core/block-editor/duplicate'\n\t\t\t),\n\t\t\tremove: getShortcutRepresentation( 'core/block-editor/remove' ),\n\t\t\tinsertAfter: getShortcutRepresentation(\n\t\t\t\t'core/block-editor/insert-after'\n\t\t\t),\n\t\t\tinsertBefore: getShortcutRepresentation(\n\t\t\t\t'core/block-editor/insert-before'\n\t\t\t),\n\t\t};\n\t}, [] );\n\n\tconst updateSelection = useCallback(\n\t\t__experimentalSelectBlock\n\t\t\t? async ( clientIdsPromise ) => {\n\t\t\t\t\tconst ids = await clientIdsPromise;\n\t\t\t\t\tif ( ids && ids[ 0 ] ) {\n\t\t\t\t\t\t__experimentalSelectBlock( ids[ 0 ] );\n\t\t\t\t\t}\n\t\t\t }\n\t\t\t: noop,\n\t\t[ __experimentalSelectBlock ]\n\t);\n\n\tconst removeBlockLabel =\n\t\tcount === 1 ? __( 'Remove block' ) : __( 'Remove blocks' );\n\n\treturn (\n\t\t<BlockActions\n\t\t\tclientIds={ clientIds }\n\t\t\t__experimentalUpdateSelection={ ! __experimentalSelectBlock }\n\t\t>\n\t\t\t{ ( {\n\t\t\t\tcanDuplicate,\n\t\t\t\tcanInsertDefaultBlock,\n\t\t\t\tcanMove,\n\t\t\t\tcanRemove,\n\t\t\t\tonDuplicate,\n\t\t\t\tonInsertAfter,\n\t\t\t\tonInsertBefore,\n\t\t\t\tonRemove,\n\t\t\t\tonCopy,\n\t\t\t\tonMoveTo,\n\t\t\t\tblocks,\n\t\t\t} ) => (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\tlabel={ __( 'Options' ) }\n\t\t\t\t\tclassName=\"block-editor-block-settings-menu\"\n\t\t\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t\t\t\tnoIcons\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<__unstableBlockSettingsMenuFirstItem.Slot\n\t\t\t\t\t\t\t\t\tfillProps={ { onClose } }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ count === 1 && (\n\t\t\t\t\t\t\t\t\t<BlockHTMLConvertButton\n\t\t\t\t\t\t\t\t\t\tclientId={ firstBlockClientId }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t<CopyMenuItem\n\t\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\t\tonCopy={ onCopy }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ canDuplicate && (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ flow(\n\t\t\t\t\t\t\t\t\t\t\tonClose,\n\t\t\t\t\t\t\t\t\t\t\tonDuplicate,\n\t\t\t\t\t\t\t\t\t\t\tupdateSelection\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tshortcut={ shortcuts.duplicate }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Duplicate' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ canInsertDefaultBlock && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tonClick={ flow(\n\t\t\t\t\t\t\t\t\t\t\t\tonClose,\n\t\t\t\t\t\t\t\t\t\t\t\tonInsertBefore\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\tshortcut={ shortcuts.insertBefore }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Insert before' ) }\n\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tonClick={ flow(\n\t\t\t\t\t\t\t\t\t\t\t\tonClose,\n\t\t\t\t\t\t\t\t\t\t\t\tonInsertAfter\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\tshortcut={ shortcuts.insertAfter }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Insert after' ) }\n\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ canMove && ! onlyBlock && (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ flow( onClose, onMoveTo ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Move to' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ count === 1 && (\n\t\t\t\t\t\t\t\t\t<BlockModeToggle\n\t\t\t\t\t\t\t\t\t\tclientId={ firstBlockClientId }\n\t\t\t\t\t\t\t\t\t\tonToggle={ onClose }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t\t<BlockSettingsMenuControls.Slot\n\t\t\t\t\t\t\t\tfillProps={ { onClose } }\n\t\t\t\t\t\t\t\tclientIds={ clientIds }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ typeof children === 'function'\n\t\t\t\t\t\t\t\t? children( { onClose } )\n\t\t\t\t\t\t\t\t: Children.map( ( child ) =>\n\t\t\t\t\t\t\t\t\t\tcloneElement( child, { onClose } )\n\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t{ canRemove && (\n\t\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ flow(\n\t\t\t\t\t\t\t\t\t\t\tonClose,\n\t\t\t\t\t\t\t\t\t\t\tonRemove,\n\t\t\t\t\t\t\t\t\t\t\tupdateSelection\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tshortcut={ shortcuts.remove }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ removeBlockLabel }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</BlockActions>\n\t);\n}\n\nexport default BlockSettingsDropdown;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/block-settings-menu/block-settings-dropdown.js"],"names":["POPOVER_PROPS","className","position","isAlternate","CopyMenuItem","blocks","onCopy","ref","BlockSettingsDropdown","clientIds","__experimentalSelectBlock","children","props","blockClientIds","count","length","firstBlockClientId","onlyBlock","title","select","getBlockCount","getBlockName","blockEditorStore","getBlockType","blocksStore","shortcuts","getShortcutRepresentation","keyboardShortcutsStore","duplicate","remove","insertAfter","insertBefore","updateSelection","clientIdsPromise","ids","noop","label","removeBlockLabel","canDuplicate","canInsertDefaultBlock","canMove","canRemove","onDuplicate","onInsertAfter","onInsertBefore","onRemove","onMoveTo","moreVertical","onClose","Children","map","child"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { castArray, flow, noop } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { moreVertical } from '@wordpress/icons';\n\nimport { Children, cloneElement, useCallback } from '@wordpress/element';\nimport { serialize, store as blocksStore } from '@wordpress/blocks';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { useCopyToClipboard } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport BlockActions from '../block-actions';\nimport BlockModeToggle from './block-mode-toggle';\nimport BlockHTMLConvertButton from './block-html-convert-button';\nimport __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';\nimport BlockSettingsMenuControls from '../block-settings-menu-controls';\nimport { store as blockEditorStore } from '../../store';\n\nconst POPOVER_PROPS = {\n\tclassName: 'block-editor-block-settings-menu__popover',\n\tposition: 'bottom right',\n\tisAlternate: true,\n};\n\nfunction CopyMenuItem( { blocks, onCopy } ) {\n\tconst ref = useCopyToClipboard( () => serialize( blocks ), onCopy );\n\treturn <MenuItem ref={ ref }>{ __( 'Copy' ) }</MenuItem>;\n}\n\nexport function BlockSettingsDropdown( {\n\tclientIds,\n\t__experimentalSelectBlock,\n\tchildren,\n\t...props\n} ) {\n\tconst blockClientIds = castArray( clientIds );\n\tconst count = blockClientIds.length;\n\tconst firstBlockClientId = blockClientIds[ 0 ];\n\tconst { onlyBlock, title } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockCount, getBlockName } = select( blockEditorStore );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\t\t\treturn {\n\t\t\t\tonlyBlock: 1 === getBlockCount(),\n\t\t\t\ttitle: getBlockType( getBlockName( firstBlockClientId ) )\n\t\t\t\t\t?.title,\n\t\t\t};\n\t\t},\n\t\t[ firstBlockClientId ]\n\t);\n\n\tconst shortcuts = useSelect( ( select ) => {\n\t\tconst { getShortcutRepresentation } = select( keyboardShortcutsStore );\n\t\treturn {\n\t\t\tduplicate: getShortcutRepresentation(\n\t\t\t\t'core/block-editor/duplicate'\n\t\t\t),\n\t\t\tremove: getShortcutRepresentation( 'core/block-editor/remove' ),\n\t\t\tinsertAfter: getShortcutRepresentation(\n\t\t\t\t'core/block-editor/insert-after'\n\t\t\t),\n\t\t\tinsertBefore: getShortcutRepresentation(\n\t\t\t\t'core/block-editor/insert-before'\n\t\t\t),\n\t\t};\n\t}, [] );\n\n\tconst updateSelection = useCallback(\n\t\t__experimentalSelectBlock\n\t\t\t? async ( clientIdsPromise ) => {\n\t\t\t\t\tconst ids = await clientIdsPromise;\n\t\t\t\t\tif ( ids && ids[ 0 ] ) {\n\t\t\t\t\t\t__experimentalSelectBlock( ids[ 0 ] );\n\t\t\t\t\t}\n\t\t\t }\n\t\t\t: noop,\n\t\t[ __experimentalSelectBlock ]\n\t);\n\n\tconst label = sprintf(\n\t\t/ translators: %s: block name */\n\t\t__( 'Remove %s' ),\n\t\ttitle\n\t);\n\tconst removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );\n\n\treturn (\n\t\t<BlockActions\n\t\t\tclientIds={ clientIds }\n\t\t\t__experimentalUpdateSelection={ ! __experimentalSelectBlock }\n\t\t>\n\t\t\t{ ( {\n\t\t\t\tcanDuplicate,\n\t\t\t\tcanInsertDefaultBlock,\n\t\t\t\tcanMove,\n\t\t\t\tcanRemove,\n\t\t\t\tonDuplicate,\n\t\t\t\tonInsertAfter,\n\t\t\t\tonInsertBefore,\n\t\t\t\tonRemove,\n\t\t\t\tonCopy,\n\t\t\t\tonMoveTo,\n\t\t\t\tblocks,\n\t\t\t} ) => (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\tlabel={ __( 'Options' ) }\n\t\t\t\t\tclassName=\"block-editor-block-settings-menu\"\n\t\t\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t\t\t\tnoIcons\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<__unstableBlockSettingsMenuFirstItem.Slot\n\t\t\t\t\t\t\t\t\tfillProps={ { onClose } }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ count === 1 && (\n\t\t\t\t\t\t\t\t\t<BlockHTMLConvertButton\n\t\t\t\t\t\t\t\t\t\tclientId={ firstBlockClientId }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t<CopyMenuItem\n\t\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\t\tonCopy={ onCopy }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ canDuplicate && (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ flow(\n\t\t\t\t\t\t\t\t\t\t\tonClose,\n\t\t\t\t\t\t\t\t\t\t\tonDuplicate,\n\t\t\t\t\t\t\t\t\t\t\tupdateSelection\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tshortcut={ shortcuts.duplicate }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Duplicate' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ canInsertDefaultBlock && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tonClick={ flow(\n\t\t\t\t\t\t\t\t\t\t\t\tonClose,\n\t\t\t\t\t\t\t\t\t\t\t\tonInsertBefore\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\tshortcut={ shortcuts.insertBefore }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Insert before' ) }\n\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tonClick={ flow(\n\t\t\t\t\t\t\t\t\t\t\t\tonClose,\n\t\t\t\t\t\t\t\t\t\t\t\tonInsertAfter\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\tshortcut={ shortcuts.insertAfter }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Insert after' ) }\n\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ canMove && ! onlyBlock && (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ flow( onClose, onMoveTo ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Move to' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ count === 1 && (\n\t\t\t\t\t\t\t\t\t<BlockModeToggle\n\t\t\t\t\t\t\t\t\t\tclientId={ firstBlockClientId }\n\t\t\t\t\t\t\t\t\t\tonToggle={ onClose }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t\t<BlockSettingsMenuControls.Slot\n\t\t\t\t\t\t\t\tfillProps={ { onClose } }\n\t\t\t\t\t\t\t\tclientIds={ clientIds }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ typeof children === 'function'\n\t\t\t\t\t\t\t\t? children( { onClose } )\n\t\t\t\t\t\t\t\t: Children.map( ( child ) =>\n\t\t\t\t\t\t\t\t\t\tcloneElement( child, { onClose } )\n\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t{ canRemove && (\n\t\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ flow(\n\t\t\t\t\t\t\t\t\t\t\tonClose,\n\t\t\t\t\t\t\t\t\t\t\tonRemove,\n\t\t\t\t\t\t\t\t\t\t\tupdateSelection\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tshortcut={ shortcuts.remove }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ removeBlockLabel }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</BlockActions>\n\t);\n}\n\nexport default BlockSettingsDropdown;\n"]}

package/build/components/block-styles/preview.native.js CHANGED Viewed

@@ -74,12 +74,12 @@ function StylePreview({
   const innerOutlineStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.innerOutline, _style.default.innerOutlineDark);
-  const getOutline = outlineStyles => outlineStyles.map(outlineStyle => {
+  const getOutline = outlineStyles => outlineStyles.map((outlineStyle, index) => {
     return (0, _element.createElement)(_reactNative.Animated.View, {
       style: [outlineStyle, {
         opacity
       }, _style.default[name]],
-      key: JSON.stringify(outlineStyle)
+      key: index
     });
   });

package/build/components/block-styles/preview.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/preview.native.js"],"names":["MAX_ITEM_WIDTH","HALF_COLUMN","StylePreview","onPress","isActive","style","url","itemWidth","setItemWidth","label","name","opacity","Animated","Value","current","onLayout","columnsNum","Math","floor","BottomSheet","getWidth","Dimensions","addEventListener","removeEventListener","labelStyle","styles","labelDark","animateOutline","setValue","timing","toValue","duration","useNativeDriver","easing","Easing","linear","start","innerOutlineStyle","innerOutline","innerOutlineDark","getOutline","outlineStyles","map","outlineStyle","~~JSON~~","~~stringify","~~container","width","imageWrapper","outline","image","uri","labelSelected"],"mappings":";;;;;;;;;AAgBA;;AAbA;;AAYA;;AAEA;;AAKA;;AAtBA;AACA;AACA;;AAUA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG,GAAvB;AACA,MAAMC,WAAW,GAAG,GAApB;;AAEA,SAASC,YAAT,CAAuB;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,QAAX;AAAqBC,EAAAA,KAArB;AAA4BC,EAAAA;AAA5B,CAAvB,EAA2D;AAC1D,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAUR,cAAV,CAApC;AACA,QAAM;AAAES,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAkBL,KAAxB;AACA,QAAMM,OAAO,GAAG,qBAAQ,IAAIC,sBAASC,KAAb,CAAoB,CAApB,CAAR,EAAkCC,OAAlD;;AAEA,WAASC,QAAT,GAAoB;AACnB,UAAMC,UAAU,GACf;AACAC,IAAAA,IAAI,CAACC,KAAL,CAAYC,wBAAYC,QAAZ,KAAyBpB,cAArC,IAAwDC,WAFzD;AAGAO,IAAAA,YAAY,CAAEW,wBAAYC,QAAZ,KAAyBJ,UAA3B,CAAZ;AACA;;AAED,0BAAW,MAAM;AAChBD,IAAAA,QAAQ;;AACRM,4BAAWC,gBAAX,CAA6B,QAA7B,EAAuCP,QAAvC;;AAEA,WAAO,MAAM;AACZM,8BAAWE,mBAAX,CAAgC,QAAhC,EAA0CR,QAA1C;AACA,KAFD;AAGA,GAPD,EAOG,EAPH;AASA,QAAMS,UAAU,GAAG,2CAClBC,eAAOhB,KADW,EAElBgB,eAAOC,SAFW,CAAnB;;AAKA,QAAMC,cAAc,GAAG,MAAM;AAC5BhB,IAAAA,OAAO,CAACiB,QAAR,CAAkB,CAAlB;;AACAhB,0BAASiB,MAAT,CAAiBlB,OAAjB,EAA0B;AACzBmB,MAAAA,OAAO,EAAE,CADgB;AAEzBC,MAAAA,QAAQ,EAAE,GAFe;AAGzBC,MAAAA,eAAe,EAAE,IAHQ;AAIzBC,MAAAA,MAAM,EAAEC,oBAAOC;AAJU,KAA1B,EAKIC,KALJ;AAMA,GARD;;AAUA,QAAMC,iBAAiB,GAAG,2CACzBZ,eAAOa,YADkB,EAEzBb,eAAOc,gBAFkB,CAA1B;;AAKA,QAAMC,UAAU,GAAKC,aAAF,IAClBA,aAAa,CAACC,GAAd,~~CAAqBC~~,YAAF,~~IAAoB~~;~~AACtC~~,WACC,4BAAC,qBAAD,CAAU,IAAV;AACC,MAAA,KAAK,EAAG,~~CAAEA~~,YAAF,EAAgB;AAAEhC,QAAAA;AAAF,OAAhB,EAA6Bc,eAAQf,IAAR,CAA7B,CADT;AAEC,MAAA,GAAG,EAAGkC~~,IAAI,CAACC,SAAL,CAAgBF,YAAhB~~;AAFP,MADD;AAMA,GAPD,CADD;;AAUA,SACC,4BAAC,qCAAD;AACC,IAAA,OAAO,EAAG,MAAM;~~AACfxC~~,MAAAA,OAAO;AACPwB,MAAAA,cAAc;AACd;AAJF,KAMC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEF,~~eAAOqB~~,SAAT,EAAoB;AAAEC,MAAAA,KAAK,~~EAAExC~~;AAAT,KAApB;AAAd,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGkB,~~eAAOuB~~;AAArB,~~KACG5C~~,QAAQ,IACToC,UAAU,CAAE,CAAEf,~~eAAOwB~~,OAAT,~~EAAkBZ~~,iBAAlB,CAAF,CAFZ,EAGC,4BAAC,kBAAD;AACC,IAAA,KAAK,EAAG,CAAEZ,~~eAAOyB~~,KAAT,~~EAAgBzB~~,eAAQf,IAAR,CAAhB,CADT;AAEC,IAAA,MAAM,EAAG;~~AAAEyC~~,MAAAA,GAAG,~~EAAE7C~~;AAAP;AAFV,IAHD,CADD,EASC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CAAEkB,UAAF,EAAcpB,QAAQ,IAAIqB,~~eAAO2B~~,aAAjC;AADT,~~KAGG3C~~,KAHH,CATD,CAND,CADD;AAwBA;;eAEcP,Y","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tView,\n\tTouchableWithoutFeedback,\n\tText,\n\tDimensions,\n\tAnimated,\n\tEasing,\n\tImage,\n} from 'react-native';\n/\n WordPress dependencies\n /\nimport { BottomSheet } from '@wordpress/components';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MAX_ITEM_WIDTH = 120;\nconst HALF_COLUMN = 0.5;\n\nfunction StylePreview( { onPress, isActive, style, url } ) {\n\tconst [ itemWidth, setItemWidth ] = useState( MAX_ITEM_WIDTH );\n\tconst { label, name } = style;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tfunction onLayout() {\n\t\tconst columnsNum =\n\t\t\t// To indicate scroll availabilty, there is a need to display additional half the column\n\t\t\tMath.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;\n\t\tsetItemWidth( BottomSheet.getWidth() / columnsNum );\n\t}\n\n\tuseEffect( () => {\n\t\tonLayout();\n\t\tDimensions.addEventListener( 'change', onLayout );\n\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onLayout );\n\t\t};\n\t}, [] );\n\n\tconst labelStyle = usePreferredColorSchemeStyle(\n\t\tstyles.label,\n\t\tstyles.labelDark\n\t);\n\n\tconst animateOutline = () => {\n\t\topacity.setValue( 0 );\n\t\tAnimated.timing( opacity, {\n\t\t\ttoValue: 1,\n\t\t\tduration: 100,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.linear,\n\t\t} ).start();\n\t};\n\n\tconst innerOutlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.innerOutline,\n\t\tstyles.innerOutlineDark\n\t);\n\n\tconst getOutline = ( outlineStyles ) =>\n\t\toutlineStyles.map( ( outlineStyle ) => {\n\t\t\treturn (\n\t\t\t\t<Animated.View\n\t\t\t\t\tstyle={ [ outlineStyle, { opacity }, styles[ name ] ] }\n\t\t\t\t\tkey={ ~~JSON.stringify(~~ ~~outlineStyle )~~ }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\tonPress={ () => {\n\t\t\t\tonPress();\n\t\t\t\tanimateOutline();\n\t\t\t} }\n\t\t>\n\t\t\t<View style={ [ styles.container, { width: itemWidth } ] }>\n\t\t\t\t<View style={ styles.imageWrapper }>\n\t\t\t\t\t{ isActive &&\n\t\t\t\t\t\tgetOutline( [ styles.outline, innerOutlineStyle ] ) }\n\t\t\t\t\t<Image\n\t\t\t\t\t\tstyle={ [ styles.image, styles[ name ] ] }\n\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ [ labelStyle, isActive && styles.labelSelected ] }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n}\n\nexport default StylePreview;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/preview.native.js"],"names":["MAX_ITEM_WIDTH","HALF_COLUMN","StylePreview","onPress","isActive","style","url","itemWidth","setItemWidth","label","name","opacity","Animated","Value","current","onLayout","columnsNum","Math","floor","BottomSheet","getWidth","Dimensions","addEventListener","removeEventListener","labelStyle","styles","labelDark","animateOutline","setValue","timing","toValue","duration","useNativeDriver","easing","Easing","linear","start","innerOutlineStyle","innerOutline","innerOutlineDark","getOutline","outlineStyles","map","outlineStyle","index","container","width","imageWrapper","outline","image","uri","labelSelected"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tView,\n\tTouchableWithoutFeedback,\n\tText,\n\tDimensions,\n\tAnimated,\n\tEasing,\n\tImage,\n} from 'react-native';\n/\n WordPress dependencies\n /\nimport { BottomSheet } from '@wordpress/components';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MAX_ITEM_WIDTH = 120;\nconst HALF_COLUMN = 0.5;\n\nfunction StylePreview( { onPress, isActive, style, url } ) {\n\tconst [ itemWidth, setItemWidth ] = useState( MAX_ITEM_WIDTH );\n\tconst { label, name } = style;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tfunction onLayout() {\n\t\tconst columnsNum =\n\t\t\t// To indicate scroll availabilty, there is a need to display additional half the column\n\t\t\tMath.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;\n\t\tsetItemWidth( BottomSheet.getWidth() / columnsNum );\n\t}\n\n\tuseEffect( () => {\n\t\tonLayout();\n\t\tDimensions.addEventListener( 'change', onLayout );\n\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onLayout );\n\t\t};\n\t}, [] );\n\n\tconst labelStyle = usePreferredColorSchemeStyle(\n\t\tstyles.label,\n\t\tstyles.labelDark\n\t);\n\n\tconst animateOutline = () => {\n\t\topacity.setValue( 0 );\n\t\tAnimated.timing( opacity, {\n\t\t\ttoValue: 1,\n\t\t\tduration: 100,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.linear,\n\t\t} ).start();\n\t};\n\n\tconst innerOutlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.innerOutline,\n\t\tstyles.innerOutlineDark\n\t);\n\n\tconst getOutline = ( outlineStyles ) =>\n\t\toutlineStyles.map( ( outlineStyle, index ) => {\n\t\t\treturn (\n\t\t\t\t<Animated.View\n\t\t\t\t\tstyle={ [ outlineStyle, { opacity }, styles[ name ] ] }\n\t\t\t\t\tkey={ index }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\tonPress={ () => {\n\t\t\t\tonPress();\n\t\t\t\tanimateOutline();\n\t\t\t} }\n\t\t>\n\t\t\t<View style={ [ styles.container, { width: itemWidth } ] }>\n\t\t\t\t<View style={ styles.imageWrapper }>\n\t\t\t\t\t{ isActive &&\n\t\t\t\t\t\tgetOutline( [ styles.outline, innerOutlineStyle ] ) }\n\t\t\t\t\t<Image\n\t\t\t\t\t\tstyle={ [ styles.image, styles[ name ] ] }\n\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ [ labelStyle, isActive && styles.labelSelected ] }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n}\n\nexport default StylePreview;\n"]}

package/build/components/colors-gradients/control.js CHANGED Viewed

@@ -19,10 +19,6 @@ var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
-var _colors = require("../colors");
-var _gradients = require("../gradients");
 var _useSetting = _interopRequireDefault(require("../use-setting"));
 /**
@@ -36,54 +32,22 @@ var _useSetting = _interopRequireDefault(require("../use-setting"));
 /**
  * Internal dependencies
  */
-// translators: first %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = (0, _i18n.__)('(Color: %s)'); // translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)
-const gradientIndicatorAriaLabel = (0, _i18n.__)('(Gradient: %s)');
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
-function VisualLabel({
-  colors,
-  gradients,
-  label,
-  currentTab,
-  colorValue,
-  gradientValue
-}) {
-  let value, ariaLabel;
-  if (currentTab === 'color') {
-    if (colorValue) {
-      value = colorValue;
-      const colorObject = (0, _colors.getColorObjectByColorValue)(colors, value);
-      const colorName = colorObject && colorObject.name;
-      ariaLabel = (0, _i18n.sprintf)(colorIndicatorAriaLabel, colorName || value);
-    }
-  } else if (currentTab === 'gradient' && gradientValue) {
-    value = gradientValue;
-    const gradientObject = (0, _gradients.__experimentalGetGradientObjectByGradientValue)(gradients, value);
-    const gradientName = gradientObject && gradientObject.name;
-    ariaLabel = (0, _i18n.sprintf)(gradientIndicatorAriaLabel, gradientName || value);
-  }
-  return (0, _element.createElement)(_element.Fragment, null, label, !!value && (0, _element.createElement)(_components.ColorIndicator, {
-    colorValue: value,
-    "aria-label": ariaLabel
-  }));
-}
 function ColorGradientControlInner({
   colors,
   gradients,
   disableCustomColors,
   disableCustomGradients,
+  __experimentalHasMultipleOrigins,
   className,
   label,
   onColorChange,
   onGradientChange,
   colorValue,
   gradientValue,
-  clearable
+  clearable,
+  showTitle = true
 }) {
   const canChooseAColor = onColorChange && (!(0, _lodash.isEmpty)(colors) || !disableCustomColors);
   const canChooseAGradient = onGradientChange && (!(0, _lodash.isEmpty)(gradients) || !disableCustomGradients);
@@ -96,15 +60,10 @@ function ColorGradientControlInner({
   return (0, _element.createElement)(_components.BaseControl, {
     className: (0, _classnames.default)('block-editor-color-gradient-control', className)
   }, (0, _element.createElement)("fieldset", null, (0, _element.createElement)(_components.__experimentalVStack, {
-    space: 3
-  }, (0, _element.createElement)("legend", null, (0, _element.createElement)("div", {
+    spacing: 1
+  }, showTitle && (0, _element.createElement)("legend", null, (0, _element.createElement)("div", {
     className: "block-editor-color-gradient-control__color-indicator"
-  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, null, (0, _element.createElement)(VisualLabel, {
-    currentTab: currentTab,
-    label: label,
-    colorValue: colorValue,
-    gradientValue: gradientValue
-  })))), canChooseAColor && canChooseAGradient && (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
     value: currentTab,
     onChange: setCurrentTab,
     label: (0, _i18n.__)('Select color type'),
@@ -124,6 +83,7 @@ function ColorGradientControlInner({
     } : onColorChange,
     colors,
     disableCustomColors,
+    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
     clearable: clearable
   }), (currentTab === 'gradient' || !canChooseAColor) && (0, _element.createElement)(_components.GradientPicker, {
     value: gradientValue,
@@ -133,6 +93,7 @@ function ColorGradientControlInner({
     } : onGradientChange,
     gradients,
     disableCustomGradients,
+    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
     clearable: clearable
   }))));
 }

package/build/components/colors-gradients/control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","VisualLabel","colors","gradients","label","currentTab","colorValue","gradientValue","value","ariaLabel","colorObject","colorName","name","gradientObject","gradientName","ColorGradientControlInner","disableCustomColors","disableCustomGradients","className","onColorChange","onGradientChange","clearable","canChooseAColor","canChooseAGradient","setCurrentTab","newColor","newGradient","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tColorIndicator,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\n\n// translators: first %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(Color: %s)' );\n\n// translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)\nconst gradientIndicatorAriaLabel = __( '(Gradient: %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nfunction VisualLabel( {\n\tcolors,\n\tgradients,\n\tlabel,\n\tcurrentTab,\n\tcolorValue,\n\tgradientValue,\n} ) {\n\tlet value, ariaLabel;\n\tif ( currentTab === 'color' ) {\n\t\tif ( colorValue ) {\n\t\t\tvalue = colorValue;\n\t\t\tconst colorObject = getColorObjectByColorValue( colors, value );\n\t\t\tconst colorName = colorObject && colorObject.name;\n\t\t\tariaLabel = sprintf( colorIndicatorAriaLabel, colorName \|\| value );\n\t\t}\n\t} else if ( currentTab === 'gradient' && gradientValue ) {\n\t\tvalue = gradientValue;\n\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\tgradients,\n\t\t\tvalue\n\t\t);\n\t\tconst gradientName = gradientObject && gradientObject.name;\n\t\tariaLabel = sprintf(\n\t\t\tgradientIndicatorAriaLabel,\n\t\t\tgradientName \|\| value\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ label }\n\t\t\t{ !! value && (\n\t\t\t\t<ColorIndicator colorValue={ value } aria-label={ ariaLabel } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) \|\| ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) \|\| ! disableCustomGradients );\n\tconst [ currentTab, setCurrentTab ] = useState(\n\t\tgradientValue ? 'gradient' : !! canChooseAColor && 'color'\n\t);\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset>\n\t\t\t\t<VStack space={ 3 }>\n\t\t\t\t\t<legend>\n\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t<VisualLabel\n\t\t\t\t\t\t\t\t\tcurrentTab={ currentTab }\n\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\tvalue={ currentTab }\n\t\t\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\t\t\tlabel={ __( 'Select color type' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"color\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Solid' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"gradient\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ( currentTab === 'color' \|\| ! canChooseAGradient ) && (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tvalue={ colorValue }\n\t\t\t\t\t\t\tonChange={\n\t\t\t\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t: onColorChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t\tclearable={ clearable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ( currentTab === 'gradient' \|\| ! canChooseAColor ) && (\n\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\tvalue={ gradientValue }\n\t\t\t\t\t\t\tonChange={\n\t\t\t\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t: onGradientChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t\t\t\tclearable={ clearable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["colorsAndGradientKeys","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalHasMultipleOrigins","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","canChooseAColor","canChooseAGradient","currentTab","setCurrentTab","newColor","newGradient","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalHasMultipleOrigins,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange && ( ! isEmpty( colors ) \|\| ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ! isEmpty( gradients ) \|\| ! disableCustomGradients );\n\tconst [ currentTab, setCurrentTab ] = useState(\n\t\tgradientValue ? 'gradient' : !! canChooseAColor && 'color'\n\t);\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset>\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\tvalue={ currentTab }\n\t\t\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\t\t\tlabel={ __( 'Select color type' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"color\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Solid' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"gradient\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ( currentTab === 'color' \|\| ! canChooseAGradient ) && (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tvalue={ colorValue }\n\t\t\t\t\t\t\tonChange={\n\t\t\t\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t: onColorChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclearable={ clearable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ( currentTab === 'gradient' \|\| ! canChooseAColor ) && (\n\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\tvalue={ gradientValue }\n\t\t\t\t\t\t\tonChange={\n\t\t\t\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t: onGradientChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclearable={ clearable }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}

package/build/components/colors-gradients/panel-color-gradient-settings.js CHANGED Viewed

@@ -88,6 +88,7 @@ const PanelColorGradientSettingsInner = ({
   settings,
   title,
   showTitle = true,
+  __experimentalHasMultipleOrigins,
   ...props
 }) => {
   if ((0, _lodash.isEmpty)(colors) && (0, _lodash.isEmpty)(gradients) && disableCustomColors && disableCustomGradients && (0, _lodash.every)(settings, setting => (0, _lodash.isEmpty)(setting.colors) && (0, _lodash.isEmpty)(setting.gradients) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
@@ -105,22 +106,92 @@ const PanelColorGradientSettingsInner = ({
     className: (0, _classnames.default)('block-editor-panel-color-gradient-settings', className),
     title: showTitle ? titleElement : undefined
   }, props), settings.map((setting, index) => (0, _element.createElement)(_control.default, (0, _extends2.default)({
+    showTitle: showTitle,
     key: index,
     colors,
     gradients,
     disableCustomColors,
-    disableCustomGradients
+    disableCustomGradients,
+    __experimentalHasMultipleOrigins
   }, setting))), children);
 };
 exports.PanelColorGradientSettingsInner = PanelColorGradientSettingsInner;
-const PanelColorGradientSettingsSelect = props => {
-  const colorGradientSettings = {};
+function useCommonSingleMultipleSelects() {
+  return {
+    disableCustomColors: !(0, _useSetting.default)('color.custom'),
+    disableCustomGradients: !(0, _useSetting.default)('color.customGradient')
+  };
+}
+const PanelColorGradientSettingsSingleSelect = props => {
+  const colorGradientSettings = useCommonSingleMultipleSelects();
   colorGradientSettings.colors = (0, _useSetting.default)('color.palette');
   colorGradientSettings.gradients = (0, _useSetting.default)('color.gradients');
-  colorGradientSettings.disableCustomColors = !(0, _useSetting.default)('color.custom');
-  colorGradientSettings.disableCustomGradients = !(0, _useSetting.default)('color.customGradient');
+  return (0, _element.createElement)(PanelColorGradientSettingsInner, (0, _extends2.default)({}, colorGradientSettings, props));
+};
+const PanelColorGradientSettingsMultipleSelect = props => {
+  const colorGradientSettings = useCommonSingleMultipleSelects();
+  const userColors = (0, _useSetting.default)('color.palette.user');
+  const themeColors = (0, _useSetting.default)('color.palette.theme');
+  const coreColors = (0, _useSetting.default)('color.palette.core');
+  colorGradientSettings.colors = (0, _element.useMemo)(() => {
+    const result = [];
+    if (coreColors && coreColors.length) {
+      result.push({
+        name: (0, _i18n.__)('Core'),
+        colors: coreColors
+      });
+    }
+    if (themeColors && themeColors.length) {
+      result.push({
+        name: (0, _i18n.__)('Theme'),
+        colors: themeColors
+      });
+    }
+    if (userColors && userColors.length) {
+      result.push({
+        name: (0, _i18n.__)('User'),
+        colors: userColors
+      });
+    }
+    return result;
+  }, [coreColors, themeColors, userColors]);
+  const userGradients = (0, _useSetting.default)('color.gradients.user');
+  const themeGradients = (0, _useSetting.default)('color.gradients.theme');
+  const coreGradients = (0, _useSetting.default)('color.gradients.core');
+  colorGradientSettings.gradients = (0, _element.useMemo)(() => {
+    const result = [];
+    if (coreGradients && coreGradients.length) {
+      result.push({
+        name: (0, _i18n.__)('Core'),
+        gradients: coreGradients
+      });
+    }
+    if (themeGradients && themeGradients.length) {
+      result.push({
+        name: (0, _i18n.__)('Theme'),
+        gradients: themeGradients
+      });
+    }
+    if (userGradients && userGradients.length) {
+      result.push({
+        name: (0, _i18n.__)('User'),
+        gradients: userGradients
+      });
+    }
+    return result;
+  }, [userGradients, themeGradients, coreGradients]);
   return (0, _element.createElement)(PanelColorGradientSettingsInner, (0, _extends2.default)({}, colorGradientSettings, props));
 };
@@ -129,7 +200,11 @@ const PanelColorGradientSettings = props => {
     return (0, _element.createElement)(PanelColorGradientSettingsInner, props);
   }
-  return (0, _element.createElement)(PanelColorGradientSettingsSelect, props);
+  if (props.__experimentalHasMultipleOrigins) {
+    return (0, _element.createElement)(PanelColorGradientSettingsMultipleSelect, props);
+  }
+  return (0, _element.createElement)(PanelColorGradientSettingsSingleSelect, props);
 };
 var _default = PanelColorGradientSettings;

package/build/components/colors-gradients/panel-color-gradient-settings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","colorValue","gradientValue","label","availableColors","availableGradients","index","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","props","setting","undefined","titleElement","PanelColorGradientSettingsSelect","colorGradientSettings","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors \|\| colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) \|\| colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients \|\| gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) \|\| gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue \|\| gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\n\t\t\t\t( setting.disableCustomColors === undefined \|\|\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined \|\|\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ showTitle ? titleElement : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tkey={ index }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</PanelBody>\n\t);\n};\n\nconst PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","colorValue","gradientValue","label","availableColors","availableGradients","index","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","__experimentalHasMultipleOrigins","props","setting","undefined","titleElement","useCommonSingleMultipleSelects","PanelColorGradientSettingsSingleSelect","colorGradientSettings","PanelColorGradientSettingsMultipleSelect","userColors","themeColors","coreColors","result","length","push","userGradients","themeGradients","coreGradients","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors \|\| colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) \|\| colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients \|\| gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) \|\| gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue \|\| gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t__experimentalHasMultipleOrigins,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\n\t\t\t\t( setting.disableCustomColors === undefined \|\|\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined \|\|\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ showTitle ? titleElement : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tshowTitle={ showTitle }\n\t\t\t\t\tkey={ index }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</PanelBody>\n\t);\n};\n\nfunction useCommonSingleMultipleSelects() {\n\treturn {\n\t\tdisableCustomColors: ! useSetting( 'color.custom' ),\n\t\tdisableCustomGradients: ! useSetting( 'color.customGradient' ),\n\t};\n}\n\nconst PanelColorGradientSettingsSingleSelect = ( props ) => {\n\tconst colorGradientSettings = useCommonSingleMultipleSelects();\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettingsMultipleSelect = ( props ) => {\n\tconst colorGradientSettings = useCommonSingleMultipleSelects();\n\tconst userColors = useSetting( 'color.palette.user' );\n\tconst themeColors = useSetting( 'color.palette.theme' );\n\tconst coreColors = useSetting( 'color.palette.core' );\n\tcolorGradientSettings.colors = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( coreColors && coreColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Core' ),\n\t\t\t\tcolors: coreColors,\n\t\t\t} );\n\t\t}\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Theme' ),\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif ( userColors && userColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'User' ),\n\t\t\t\tcolors: userColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ coreColors, themeColors, userColors ] );\n\n\tconst userGradients = useSetting( 'color.gradients.user' );\n\tconst themeGradients = useSetting( 'color.gradients.theme' );\n\tconst coreGradients = useSetting( 'color.gradients.core' );\n\tcolorGradientSettings.gradients = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( coreGradients && coreGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Core' ),\n\t\t\t\tgradients: coreGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Theme' ),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( userGradients && userGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'User' ),\n\t\t\t\tgradients: userGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ userGradients, themeGradients, coreGradients ] );\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\tif ( props.__experimentalHasMultipleOrigins ) {\n\t\treturn <PanelColorGradientSettingsMultipleSelect { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSingleSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}

package/build/components/duotone-control/index.js CHANGED Viewed

@@ -27,7 +27,8 @@ function DuotoneControl({
   return (0, _element.createElement)(_components.Dropdown, {
     popoverProps: {
       className: 'block-editor-duotone-control__popover',
-      headerTitle: (0, _i18n.__)('Duotone')
+      headerTitle: (0, _i18n.__)('Duotone'),
+      isAlternate: true
     },
     renderToggle: ({
       isOpen,
@@ -54,7 +55,9 @@ function DuotoneControl({
     },
     renderContent: () => (0, _element.createElement)(_components.MenuGroup, {
       label: (0, _i18n.__)('Duotone')
-    }, (0, _element.createElement)(_components.DuotonePicker, {
+    }, (0, _element.createElement)("div", {
+      className: "block-editor-duotone-control__description"
+    }, (0, _i18n.__)('Create a two-tone color effect without losing your original image.')), (0, _element.createElement)(_components.DuotonePicker, {
       colorPalette: colorPalette,
       duotonePalette: duotonePalette,
       disableCustomColors: disableCustomColors,

package/build/components/duotone-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/duotone-control/index.js"],"names":["DuotoneControl","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","className","headerTitle","isOpen","onToggle","openOnArrowDown","event","keyCode","DOWN","preventDefault"],"mappings":";;;;;;;;;AAGA;;AAOA;;AACA;;AAXA;AACA;AACA;AAWA,SAASA,cAAT,CAAyB;AACxBC,EAAAA,YADwB;AAExBC,EAAAA,cAFwB;AAGxBC,EAAAA,mBAHwB;AAIxBC,EAAAA,oBAJwB;AAKxBC,EAAAA,KALwB;AAMxBC,EAAAA;AANwB,CAAzB,EAOI;AACH,SACC,4BAAC,oBAAD;AACC,IAAA,YAAY,EAAG;AACdC,MAAAA,SAAS,EAAE,uCADG;AAEdC,MAAAA,WAAW,EAAE,cAAI,SAAJ;~~AAFC~~,KADhB;~~AAKC~~,IAAA,YAAY,EAAG,CAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KAA4B;AAC1C,YAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,YAAK,CAAEH,MAAF,IAAYG,KAAK,CAACC,OAAN,KAAkBC,cAAnC,EAA0C;AACzCF,UAAAA,KAAK,CAACG,cAAN;AACAL,UAAAA,QAAQ;AACR;AACD,OALD;;AAMA,aACC,4BAAC,yBAAD;AACC,QAAA,WAAW,MADZ;AAEC,QAAA,OAAO,EAAGA,QAFX;AAGC,yBAAc,MAHf;AAIC,yBAAgBD,MAJjB;AAKC,QAAA,SAAS,EAAGE,eALb;AAMC,QAAA,KAAK,EAAG,cAAI,sBAAJ,CANT;AAOC,QAAA,IAAI,EAAG,4BAAC,yBAAD;AAAe,UAAA,MAAM,~~EAAGN~~;AAAxB;AAPR,QADD;AAWA,~~KAvBF~~;~~AAwBC~~,IAAA,aAAa,EAAG,MACf,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG,cAAI,SAAJ;AAAnB,OACC,4BAAC,yBAAD;AACC,MAAA,YAAY,EAAGJ,YADhB;AAEC,MAAA,cAAc,EAAGC,cAFlB;AAGC,MAAA,mBAAmB,EAAGC,mBAHvB;AAIC,MAAA,oBAAoB,EAAGC,oBAJxB;AAKC,MAAA,KAAK,EAAGC,KALT;AAMC,MAAA,QAAQ,EAAGC;AANZ,~~MADD~~;~~AAzBF~~,IADD;~~AAuCA~~;;eAEcN,c","sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\tDropdown,\n\tDuotonePicker,\n\tDuotoneSwatch,\n\tMenuGroup,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\n\nfunction DuotoneControl( {\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ {\n\t\t\t\tclassName: 'block-editor-duotone-control__popover',\n\t\t\t\theaderTitle: __( 'Duotone' ),\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ __( 'Apply duotone filter' ) }\n\t\t\t\t\t\ticon={ <DuotoneSwatch values={ value } /> }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<MenuGroup label={ __( 'Duotone' ) }>\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default DuotoneControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/duotone-control/index.js"],"names":["DuotoneControl","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","className","headerTitle","isAlternate","isOpen","onToggle","openOnArrowDown","event","keyCode","DOWN","preventDefault"],"mappings":";;;;;;;;;AAGA;;AAOA;;AACA;;AAXA;AACA;AACA;AAWA,SAASA,cAAT,CAAyB;AACxBC,EAAAA,YADwB;AAExBC,EAAAA,cAFwB;AAGxBC,EAAAA,mBAHwB;AAIxBC,EAAAA,oBAJwB;AAKxBC,EAAAA,KALwB;AAMxBC,EAAAA;AANwB,CAAzB,EAOI;AACH,SACC,4BAAC,oBAAD;AACC,IAAA,YAAY,EAAG;AACdC,MAAAA,SAAS,EAAE,uCADG;AAEdC,MAAAA,WAAW,EAAE,cAAI,SAAJ,CAFC;AAGdC,MAAAA,WAAW,EAAE;AAHC,KADhB;AAMC,IAAA,YAAY,EAAG,CAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KAA4B;AAC1C,YAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,YAAK,CAAEH,MAAF,IAAYG,KAAK,CAACC,OAAN,KAAkBC,cAAnC,EAA0C;AACzCF,UAAAA,KAAK,CAACG,cAAN;AACAL,UAAAA,QAAQ;AACR;AACD,OALD;;AAMA,aACC,4BAAC,yBAAD;AACC,QAAA,WAAW,MADZ;AAEC,QAAA,OAAO,EAAGA,QAFX;AAGC,yBAAc,MAHf;AAIC,yBAAgBD,MAJjB;AAKC,QAAA,SAAS,EAAGE,eALb;AAMC,QAAA,KAAK,EAAG,cAAI,sBAAJ,CANT;AAOC,QAAA,IAAI,EAAG,4BAAC,yBAAD;AAAe,UAAA,MAAM,EAAGP;AAAxB;AAPR,QADD;AAWA,KAxBF;AAyBC,IAAA,aAAa,EAAG,MACf,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG,cAAI,SAAJ;AAAnB,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACG,cACD,oEADC,CADH,CADD,EAMC,4BAAC,yBAAD;AACC,MAAA,YAAY,EAAGJ,YADhB;AAEC,MAAA,cAAc,EAAGC,cAFlB;AAGC,MAAA,mBAAmB,EAAGC,mBAHvB;AAIC,MAAA,oBAAoB,EAAGC,oBAJxB;AAKC,MAAA,KAAK,EAAGC,KALT;AAMC,MAAA,QAAQ,EAAGC;AANZ,MAND;AA1BF,IADD;AA6CA;;eAEcN,c","sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\tDropdown,\n\tDuotonePicker,\n\tDuotoneSwatch,\n\tMenuGroup,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\n\nfunction DuotoneControl( {\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ {\n\t\t\t\tclassName: 'block-editor-duotone-control__popover',\n\t\t\t\theaderTitle: __( 'Duotone' ),\n\t\t\t\tisAlternate: true,\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ __( 'Apply duotone filter' ) }\n\t\t\t\t\t\ticon={ <DuotoneSwatch values={ value } /> }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<MenuGroup label={ __( 'Duotone' ) }>\n\t\t\t\t\t<div className=\"block-editor-duotone-control__description\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default DuotoneControl;\n"]}

package/build/components/font-appearance-control/index.js CHANGED Viewed

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FontAppearanceControl;
+exports.getFontAppearanceLabel = void 0;
 var _element = require("@wordpress/element");
@@ -49,6 +50,26 @@ const FONT_WEIGHTS = [{
   name: (0, _i18n.__)('Black'),
   value: '900'
 }];
+/**
+ * Adjusts font appearance field label in case either font styles or weights
+ * are disabled.
+ *
+ * @param {boolean} hasFontStyles  Whether font styles are enabled and present.
+ * @param {boolean} hasFontWeights Whether font weights are enabled and present.
+ * @return {string} A label representing what font appearance is being edited.
+ */
+const getFontAppearanceLabel = (hasFontStyles, hasFontWeights) => {
+  if (!hasFontStyles) {
+    return (0, _i18n.__)('Font weight');
+  }
+  if (!hasFontWeights) {
+    return (0, _i18n.__)('Font style');
+  }
+  return (0, _i18n.__)('Appearance');
+};
 /**
  * Control to display unified font style and weight options.
  *
@@ -57,6 +78,9 @@ const FONT_WEIGHTS = [{
  * @return {WPElement} Font appearance control.
  */
+exports.getFontAppearanceLabel = getFontAppearanceLabel;
 function FontAppearanceControl(props) {
   const {
     onChange,
@@ -68,6 +92,7 @@ function FontAppearanceControl(props) {
     }
   } = props;
   const hasStylesOrWeights = hasFontStyles || hasFontWeights;
+  const label = getFontAppearanceLabel(hasFontStyles, hasFontWeights);
   const defaultOption = {
     key: 'default',
     name: (0, _i18n.__)('Default'),
@@ -151,20 +176,7 @@ function FontAppearanceControl(props) {
   }, [props.options]); // Find current selection by comparing font style & weight against options,
   // and fall back to the Default option if there is no matching option.
-  const currentSelection = selectOptions.find(option => option.style.fontStyle === fontStyle && option.style.fontWeight === fontWeight) || selectOptions[0]; // Adjusts field label in case either styles or weights are disabled.
-  const getLabel = () => {
-    if (!hasFontStyles) {
-      return (0, _i18n.__)('Font weight');
-    }
-    if (!hasFontWeights) {
-      return (0, _i18n.__)('Font style');
-    }
-    return (0, _i18n.__)('Appearance');
-  }; // Adjusts screen reader description based on styles or weights.
+  const currentSelection = selectOptions.find(option => option.style.fontStyle === fontStyle && option.style.fontWeight === fontWeight) || selectOptions[0]; // Adjusts screen reader description based on styles or weights.
   const getDescribedBy = () => {
     if (!currentSelection) {
@@ -187,7 +199,7 @@ function FontAppearanceControl(props) {
   return hasStylesOrWeights && (0, _element.createElement)(_components.CustomSelectControl, {
     className: "components-font-appearance-control",
-    label: getLabel(),
+    label: label,
     describedBy: getDescribedBy(),
     options: selectOptions,
     value: currentSelection,