@wordpress/block-editor 9.4.0 → 9.7.0

package/build-module/components/block-tools/block-selection-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/block-selection-button.js"],"names":["classnames","dragHandle","Button","Flex","FlexItem","useSelect","useDispatch","useEffect","useRef","BACKSPACE","DELETE","UP","DOWN","LEFT","RIGHT","TAB","ESCAPE","ENTER","SPACE","getBlockType","__experimentalGetAccessibleBlockLabel","getAccessibleBlockLabel","speak","focus","__","BlockTitle","BlockIcon","store","blockEditorStore","BlockDraggable","useBlockDisplayInformation","__unstableUseBlockElement","useBlockElement","BlockSelectionButton","clientId","rootClientId","blockInformation","selected","select","getBlock","getBlockIndex","hasBlockMovingClientId","getBlockListSettings","index","name","attributes","blockMovingMode","orientation","setNavigationMode","removeBlock","ref","blockType","label","current","blockElement","getBlockRootClientId","getClientIdsOfDescendants","getSelectedBlockClientId","getMultiSelectedBlocksEndClientId","getPreviousBlockClientId","getNextBlockClientId","isNavigationMode","selectBlock","clearSelectedBlock","setBlockMovingClientId","moveBlockToPosition","onKeyDown","event","keyCode","isUp","isDown","isLeft","isRight","isTab","isEscape","isEnter","isSpace","isShift","shiftKey","preventDefault","selectedBlockClientId","selectionEndClientId","selectionBeforeEndClientId","selectionAfterEndClientId","navigateUp","navigateDown","navigateOut","navigateIn","focusedBlockUid","startingBlockClientId","defaultPrevented","sourceRoot","destRoot","sourceBlockIndex","destinationBlockIndex","nextTabbable","tabbable","findNext","contains","ownerDocument","defaultView","frameElement","findPrevious","classNames","dragHandleLabel","icon","draggableProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { dragHandle } from '@wordpress/icons';\nimport { Button, Flex, FlexItem } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tBACKSPACE,\n\tDELETE,\n\tUP,\n\tDOWN,\n\tLEFT,\n\tRIGHT,\n\tTAB,\n\tESCAPE,\n\tENTER,\n\tSPACE,\n} from '@wordpress/keycodes';\nimport {\n\tgetBlockType,\n\t__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,\n} from '@wordpress/blocks';\nimport { speak } from '@wordpress/a11y';\nimport { focus } from '@wordpress/dom';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockTitle from '../block-title';\nimport BlockIcon from '../block-icon';\nimport { store as blockEditorStore } from '../../store';\nimport BlockDraggable from '../block-draggable';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\n\n/**\n * Block selection button component, displaying the label of the block. If the block\n * descends from a root block, a button is displayed enabling the user to select\n * the root block.\n *\n * @param {string} props          Component props.\n * @param {string} props.clientId Client ID of block.\n *\n * @return {WPComponent} The component to be rendered.\n */\nfunction BlockSelectionButton( { clientId, rootClientId } ) {\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst selected = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlock,\n\t\t\t\tgetBlockIndex,\n\t\t\t\thasBlockMovingClientId,\n\t\t\t\tgetBlockListSettings,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst index = getBlockIndex( clientId );\n\t\t\tconst { name, attributes } = getBlock( clientId );\n\t\t\tconst blockMovingMode = hasBlockMovingClientId();\n\t\t\treturn {\n\t\t\t\tindex,\n\t\t\t\tname,\n\t\t\t\tattributes,\n\t\t\t\tblockMovingMode,\n\t\t\t\torientation: getBlockListSettings( rootClientId )?.orientation,\n\t\t\t};\n\t\t},\n\t\t[ clientId, rootClientId ]\n\t);\n\tconst { index, name, attributes, blockMovingMode, orientation } = selected;\n\tconst { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );\n\tconst ref = useRef();\n\n\tconst blockType = getBlockType( name );\n\tconst label = getAccessibleBlockLabel(\n\t\tblockType,\n\t\tattributes,\n\t\tindex + 1,\n\t\torientation\n\t);\n\n\t// Focus the breadcrumb in navigation mode.\n\tuseEffect( () => {\n\t\tref.current.focus();\n\n\t\tspeak( label );\n\t}, [ label ] );\n\tconst blockElement = useBlockElement( clientId );\n\n\tconst {\n\t\thasBlockMovingClientId,\n\t\tgetBlockIndex,\n\t\tgetBlockRootClientId,\n\t\tgetClientIdsOfDescendants,\n\t\tgetSelectedBlockClientId,\n\t\tgetMultiSelectedBlocksEndClientId,\n\t\tgetPreviousBlockClientId,\n\t\tgetNextBlockClientId,\n\t\tisNavigationMode,\n\t} = useSelect( blockEditorStore );\n\tconst {\n\t\tselectBlock,\n\t\tclearSelectedBlock,\n\t\tsetBlockMovingClientId,\n\t\tmoveBlockToPosition,\n\t} = useDispatch( blockEditorStore );\n\n\tfunction onKeyDown( event ) {\n\t\tconst { keyCode } = event;\n\t\tconst isUp = keyCode === UP;\n\t\tconst isDown = keyCode === DOWN;\n\t\tconst isLeft = keyCode === LEFT;\n\t\tconst isRight = keyCode === RIGHT;\n\t\tconst isTab = keyCode === TAB;\n\t\tconst isEscape = keyCode === ESCAPE;\n\t\tconst isEnter = keyCode === ENTER;\n\t\tconst isSpace = keyCode === SPACE;\n\t\tconst isShift = event.shiftKey;\n\n\t\tif ( keyCode === BACKSPACE || keyCode === DELETE ) {\n\t\t\tremoveBlock( clientId );\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedBlockClientId = getSelectedBlockClientId();\n\t\tconst selectionEndClientId = getMultiSelectedBlocksEndClientId();\n\t\tconst selectionBeforeEndClientId = getPreviousBlockClientId(\n\t\t\tselectionEndClientId || selectedBlockClientId\n\t\t);\n\t\tconst selectionAfterEndClientId = getNextBlockClientId(\n\t\t\tselectionEndClientId || selectedBlockClientId\n\t\t);\n\n\t\tconst navigateUp = ( isTab && isShift ) || isUp;\n\t\tconst navigateDown = ( isTab && ! isShift ) || isDown;\n\t\t// Move out of current nesting level (no effect if at root level).\n\t\tconst navigateOut = isLeft;\n\t\t// Move into next nesting level (no effect if the current block has no innerBlocks).\n\t\tconst navigateIn = isRight;\n\n\t\tlet focusedBlockUid;\n\t\tif ( navigateUp ) {\n\t\t\tfocusedBlockUid = selectionBeforeEndClientId;\n\t\t} else if ( navigateDown ) {\n\t\t\tfocusedBlockUid = selectionAfterEndClientId;\n\t\t} else if ( navigateOut ) {\n\t\t\tfocusedBlockUid =\n\t\t\t\tgetBlockRootClientId( selectedBlockClientId ) ??\n\t\t\t\tselectedBlockClientId;\n\t\t} else if ( navigateIn ) {\n\t\t\tfocusedBlockUid =\n\t\t\t\tgetClientIdsOfDescendants( [ selectedBlockClientId ] )[ 0 ] ??\n\t\t\t\tselectedBlockClientId;\n\t\t}\n\t\tconst startingBlockClientId = hasBlockMovingClientId();\n\t\tif ( isEscape && isNavigationMode() ) {\n\t\t\tclearSelectedBlock();\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tif ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {\n\t\t\tsetBlockMovingClientId( null );\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tif ( ( isEnter || isSpace ) && startingBlockClientId ) {\n\t\t\tconst sourceRoot = getBlockRootClientId( startingBlockClientId );\n\t\t\tconst destRoot = getBlockRootClientId( selectedBlockClientId );\n\t\t\tconst sourceBlockIndex = getBlockIndex( startingBlockClientId );\n\t\t\tlet destinationBlockIndex = getBlockIndex( selectedBlockClientId );\n\t\t\tif (\n\t\t\t\tsourceBlockIndex < destinationBlockIndex &&\n\t\t\t\tsourceRoot === destRoot\n\t\t\t) {\n\t\t\t\tdestinationBlockIndex -= 1;\n\t\t\t}\n\t\t\tmoveBlockToPosition(\n\t\t\t\tstartingBlockClientId,\n\t\t\t\tsourceRoot,\n\t\t\t\tdestRoot,\n\t\t\t\tdestinationBlockIndex\n\t\t\t);\n\t\t\tselectBlock( startingBlockClientId );\n\t\t\tsetBlockMovingClientId( null );\n\t\t}\n\t\tif ( navigateDown || navigateUp || navigateOut || navigateIn ) {\n\t\t\tif ( focusedBlockUid ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectBlock( focusedBlockUid );\n\t\t\t} else if ( isTab && selectedBlockClientId ) {\n\t\t\t\tlet nextTabbable;\n\n\t\t\t\tif ( navigateDown ) {\n\t\t\t\t\tnextTabbable = blockElement;\n\t\t\t\t\tdo {\n\t\t\t\t\t\tnextTabbable = focus.tabbable.findNext( nextTabbable );\n\t\t\t\t\t} while (\n\t\t\t\t\t\tnextTabbable &&\n\t\t\t\t\t\tblockElement.contains( nextTabbable )\n\t\t\t\t\t);\n\n\t\t\t\t\tif ( ! nextTabbable ) {\n\t\t\t\t\t\tnextTabbable =\n\t\t\t\t\t\t\tblockElement.ownerDocument.defaultView.frameElement;\n\t\t\t\t\t\tnextTabbable = focus.tabbable.findNext( nextTabbable );\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tnextTabbable = focus.tabbable.findPrevious( blockElement );\n\t\t\t\t}\n\n\t\t\t\tif ( nextTabbable ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tnextTabbable.focus();\n\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tconst classNames = classnames(\n\t\t'block-editor-block-list__block-selection-button',\n\t\t{\n\t\t\t'is-block-moving-mode': !! blockMovingMode,\n\t\t}\n\t);\n\n\tconst dragHandleLabel = __( 'Drag' );\n\n\treturn (\n\t\t<div className={ classNames }>\n\t\t\t<Flex\n\t\t\t\tjustify=\"center\"\n\t\t\t\tclassName=\"block-editor-block-list__block-selection-button__content\"\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } showColors />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockDraggable clientIds={ [ clientId ] }>\n\t\t\t\t\t\t{ ( draggableProps ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ticon={ dragHandle }\n\t\t\t\t\t\t\t\tclassName=\"block-selection-button_drag-handle\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tlabel={ dragHandleLabel }\n\t\t\t\t\t\t\t\t// Should not be able to tab to drag handle as this\n\t\t\t\t\t\t\t\t// button can only be used with a pointer device.\n\t\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t\t\t{ ...draggableProps }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</BlockDraggable>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tonClick={ () => setNavigationMode( false ) }\n\t\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\t\tclassName=\"block-selection-button_select-button\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockTitle\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t\tmaximumLength={ 35 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default BlockSelectionButton;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/block-selection-button.js"],"names":["classnames","dragHandle","Button","Flex","FlexItem","useSelect","useDispatch","useEffect","useRef","BACKSPACE","DELETE","UP","DOWN","LEFT","RIGHT","TAB","ESCAPE","ENTER","SPACE","getBlockType","__experimentalGetAccessibleBlockLabel","getAccessibleBlockLabel","speak","focus","__","BlockTitle","BlockIcon","store","blockEditorStore","BlockDraggable","useBlockDisplayInformation","__unstableUseBlockElement","useBlockElement","BlockSelectionButton","clientId","rootClientId","blockInformation","selected","select","getBlock","getBlockIndex","hasBlockMovingClientId","getBlockListSettings","index","name","attributes","blockMovingMode","orientation","setNavigationMode","removeBlock","ref","blockType","label","current","blockElement","getBlockRootClientId","getClientIdsOfDescendants","getSelectedBlockClientId","getMultiSelectedBlocksEndClientId","getPreviousBlockClientId","getNextBlockClientId","selectBlock","clearSelectedBlock","setBlockMovingClientId","moveBlockToPosition","onKeyDown","event","keyCode","isUp","isDown","isLeft","isRight","isTab","isEscape","isEnter","isSpace","isShift","shiftKey","preventDefault","selectedBlockClientId","selectionEndClientId","selectionBeforeEndClientId","selectionAfterEndClientId","navigateUp","navigateDown","navigateOut","navigateIn","focusedBlockUid","startingBlockClientId","defaultPrevented","sourceRoot","destRoot","sourceBlockIndex","destinationBlockIndex","nextTabbable","tabbable","findNext","contains","ownerDocument","defaultView","frameElement","findPrevious","classNames","dragHandleLabel","icon","draggableProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { dragHandle } from '@wordpress/icons';\nimport { Button, Flex, FlexItem } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tBACKSPACE,\n\tDELETE,\n\tUP,\n\tDOWN,\n\tLEFT,\n\tRIGHT,\n\tTAB,\n\tESCAPE,\n\tENTER,\n\tSPACE,\n} from '@wordpress/keycodes';\nimport {\n\tgetBlockType,\n\t__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,\n} from '@wordpress/blocks';\nimport { speak } from '@wordpress/a11y';\nimport { focus } from '@wordpress/dom';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockTitle from '../block-title';\nimport BlockIcon from '../block-icon';\nimport { store as blockEditorStore } from '../../store';\nimport BlockDraggable from '../block-draggable';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\n\n/**\n * Block selection button component, displaying the label of the block. If the block\n * descends from a root block, a button is displayed enabling the user to select\n * the root block.\n *\n * @param {string} props          Component props.\n * @param {string} props.clientId Client ID of block.\n *\n * @return {WPComponent} The component to be rendered.\n */\nfunction BlockSelectionButton( { clientId, rootClientId } ) {\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst selected = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlock,\n\t\t\t\tgetBlockIndex,\n\t\t\t\thasBlockMovingClientId,\n\t\t\t\tgetBlockListSettings,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst index = getBlockIndex( clientId );\n\t\t\tconst { name, attributes } = getBlock( clientId );\n\t\t\tconst blockMovingMode = hasBlockMovingClientId();\n\t\t\treturn {\n\t\t\t\tindex,\n\t\t\t\tname,\n\t\t\t\tattributes,\n\t\t\t\tblockMovingMode,\n\t\t\t\torientation: getBlockListSettings( rootClientId )?.orientation,\n\t\t\t};\n\t\t},\n\t\t[ clientId, rootClientId ]\n\t);\n\tconst { index, name, attributes, blockMovingMode, orientation } = selected;\n\tconst { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );\n\tconst ref = useRef();\n\n\tconst blockType = getBlockType( name );\n\tconst label = getAccessibleBlockLabel(\n\t\tblockType,\n\t\tattributes,\n\t\tindex + 1,\n\t\torientation\n\t);\n\n\t// Focus the breadcrumb in navigation mode.\n\tuseEffect( () => {\n\t\tref.current.focus();\n\n\t\tspeak( label );\n\t}, [ label ] );\n\tconst blockElement = useBlockElement( clientId );\n\n\tconst {\n\t\thasBlockMovingClientId,\n\t\tgetBlockIndex,\n\t\tgetBlockRootClientId,\n\t\tgetClientIdsOfDescendants,\n\t\tgetSelectedBlockClientId,\n\t\tgetMultiSelectedBlocksEndClientId,\n\t\tgetPreviousBlockClientId,\n\t\tgetNextBlockClientId,\n\t} = useSelect( blockEditorStore );\n\tconst {\n\t\tselectBlock,\n\t\tclearSelectedBlock,\n\t\tsetBlockMovingClientId,\n\t\tmoveBlockToPosition,\n\t} = useDispatch( blockEditorStore );\n\n\tfunction onKeyDown( event ) {\n\t\tconst { keyCode } = event;\n\t\tconst isUp = keyCode === UP;\n\t\tconst isDown = keyCode === DOWN;\n\t\tconst isLeft = keyCode === LEFT;\n\t\tconst isRight = keyCode === RIGHT;\n\t\tconst isTab = keyCode === TAB;\n\t\tconst isEscape = keyCode === ESCAPE;\n\t\tconst isEnter = keyCode === ENTER;\n\t\tconst isSpace = keyCode === SPACE;\n\t\tconst isShift = event.shiftKey;\n\n\t\tif ( keyCode === BACKSPACE || keyCode === DELETE ) {\n\t\t\tremoveBlock( clientId );\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedBlockClientId = getSelectedBlockClientId();\n\t\tconst selectionEndClientId = getMultiSelectedBlocksEndClientId();\n\t\tconst selectionBeforeEndClientId = getPreviousBlockClientId(\n\t\t\tselectionEndClientId || selectedBlockClientId\n\t\t);\n\t\tconst selectionAfterEndClientId = getNextBlockClientId(\n\t\t\tselectionEndClientId || selectedBlockClientId\n\t\t);\n\n\t\tconst navigateUp = ( isTab && isShift ) || isUp;\n\t\tconst navigateDown = ( isTab && ! isShift ) || isDown;\n\t\t// Move out of current nesting level (no effect if at root level).\n\t\tconst navigateOut = isLeft;\n\t\t// Move into next nesting level (no effect if the current block has no innerBlocks).\n\t\tconst navigateIn = isRight;\n\n\t\tlet focusedBlockUid;\n\t\tif ( navigateUp ) {\n\t\t\tfocusedBlockUid = selectionBeforeEndClientId;\n\t\t} else if ( navigateDown ) {\n\t\t\tfocusedBlockUid = selectionAfterEndClientId;\n\t\t} else if ( navigateOut ) {\n\t\t\tfocusedBlockUid =\n\t\t\t\tgetBlockRootClientId( selectedBlockClientId ) ??\n\t\t\t\tselectedBlockClientId;\n\t\t} else if ( navigateIn ) {\n\t\t\tfocusedBlockUid =\n\t\t\t\tgetClientIdsOfDescendants( [ selectedBlockClientId ] )[ 0 ] ??\n\t\t\t\tselectedBlockClientId;\n\t\t}\n\t\tconst startingBlockClientId = hasBlockMovingClientId();\n\t\tif ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {\n\t\t\tsetBlockMovingClientId( null );\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tif ( ( isEnter || isSpace ) && startingBlockClientId ) {\n\t\t\tconst sourceRoot = getBlockRootClientId( startingBlockClientId );\n\t\t\tconst destRoot = getBlockRootClientId( selectedBlockClientId );\n\t\t\tconst sourceBlockIndex = getBlockIndex( startingBlockClientId );\n\t\t\tlet destinationBlockIndex = getBlockIndex( selectedBlockClientId );\n\t\t\tif (\n\t\t\t\tsourceBlockIndex < destinationBlockIndex &&\n\t\t\t\tsourceRoot === destRoot\n\t\t\t) {\n\t\t\t\tdestinationBlockIndex -= 1;\n\t\t\t}\n\t\t\tmoveBlockToPosition(\n\t\t\t\tstartingBlockClientId,\n\t\t\t\tsourceRoot,\n\t\t\t\tdestRoot,\n\t\t\t\tdestinationBlockIndex\n\t\t\t);\n\t\t\tselectBlock( startingBlockClientId );\n\t\t\tsetBlockMovingClientId( null );\n\t\t}\n\t\tif ( navigateDown || navigateUp || navigateOut || navigateIn ) {\n\t\t\tif ( focusedBlockUid ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectBlock( focusedBlockUid );\n\t\t\t} else if ( isTab && selectedBlockClientId ) {\n\t\t\t\tlet nextTabbable;\n\n\t\t\t\tif ( navigateDown ) {\n\t\t\t\t\tnextTabbable = blockElement;\n\t\t\t\t\tdo {\n\t\t\t\t\t\tnextTabbable = focus.tabbable.findNext( nextTabbable );\n\t\t\t\t\t} while (\n\t\t\t\t\t\tnextTabbable &&\n\t\t\t\t\t\tblockElement.contains( nextTabbable )\n\t\t\t\t\t);\n\n\t\t\t\t\tif ( ! nextTabbable ) {\n\t\t\t\t\t\tnextTabbable =\n\t\t\t\t\t\t\tblockElement.ownerDocument.defaultView.frameElement;\n\t\t\t\t\t\tnextTabbable = focus.tabbable.findNext( nextTabbable );\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tnextTabbable = focus.tabbable.findPrevious( blockElement );\n\t\t\t\t}\n\n\t\t\t\tif ( nextTabbable ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tnextTabbable.focus();\n\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tconst classNames = classnames(\n\t\t'block-editor-block-list__block-selection-button',\n\t\t{\n\t\t\t'is-block-moving-mode': !! blockMovingMode,\n\t\t}\n\t);\n\n\tconst dragHandleLabel = __( 'Drag' );\n\n\treturn (\n\t\t<div className={ classNames }>\n\t\t\t<Flex\n\t\t\t\tjustify=\"center\"\n\t\t\t\tclassName=\"block-editor-block-list__block-selection-button__content\"\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } showColors />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockDraggable clientIds={ [ clientId ] }>\n\t\t\t\t\t\t{ ( draggableProps ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ticon={ dragHandle }\n\t\t\t\t\t\t\t\tclassName=\"block-selection-button_drag-handle\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tlabel={ dragHandleLabel }\n\t\t\t\t\t\t\t\t// Should not be able to tab to drag handle as this\n\t\t\t\t\t\t\t\t// button can only be used with a pointer device.\n\t\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t\t\t{ ...draggableProps }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</BlockDraggable>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tonClick={ () => setNavigationMode( false ) }\n\t\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\t\tclassName=\"block-selection-button_select-button\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockTitle\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t\tmaximumLength={ 35 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default BlockSelectionButton;\n"]}

package/build-module/components/block-tools/index.js

@@ -56,6 +56,8 @@ export default function BlockTools(_ref) {
   } = useDispatch(blockEditorStore);
 
   function onKeyDown(event) {
+    if (event.defaultPrevented) return;
+
     if (isMatch('core/block-editor/move-up', event)) {
       const clientIds = getSelectedBlockClientIds();
 
@@ -103,10 +105,11 @@ export default function BlockTools(_ref) {
     } else if (isMatch('core/block-editor/unselect', event)) {
       const clientIds = getSelectedBlockClientIds();
 
-      if (clientIds.length > 1) {
+      if (clientIds.length) {
         event.preventDefault();
         clearSelectedBlock();
         event.target.ownerDocument.defaultView.getSelection().removeAllRanges();
+        __unstableContentRef === null || __unstableContentRef === void 0 ? void 0 : __unstableContentRef.current.focus();
       }
     }
   }

package/build-module/components/block-tools/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/index.js"],"names":["first","last","useSelect","useDispatch","useViewportMatch","Popover","__unstableUseShortcutEventMatch","useShortcutEventMatch","InsertionPoint","SelectedBlockPopover","store","blockEditorStore","BlockContextualToolbar","usePopoverScroll","BlockTools","children","__unstableContentRef","props","isLargeViewport","hasFixedToolbar","select","getSettings","isMatch","getSelectedBlockClientIds","getBlockRootClientId","duplicateBlocks","removeBlocks","insertAfterBlock","insertBeforeBlock","clearSelectedBlock","moveBlocksUp","moveBlocksDown","onKeyDown","event","clientIds","length","preventDefault","rootClientId","target","ownerDocument","defaultView","getSelection","removeAllRanges"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { first, last } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Popover } from '@wordpress/components';\nimport { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport InsertionPoint from './insertion-point';\nimport SelectedBlockPopover from './selected-block-popover';\nimport { store as blockEditorStore } from '../../store';\nimport BlockContextualToolbar from './block-contextual-toolbar';\nimport usePopoverScroll from '../block-popover/use-popover-scroll';\n\n/**\n * Renders block tools (the block toolbar, select/navigation mode toolbar, the\n * insertion point and a slot for the inline rich text toolbar). Must be wrapped\n * around the block content and editor styles wrapper or iframe.\n *\n * @param {Object} $0                      Props.\n * @param {Object} $0.children             The block content and style container.\n * @param {Object} $0.__unstableContentRef Ref holding the content scroll container.\n */\nexport default function BlockTools( {\n\tchildren,\n\t__unstableContentRef,\n\t...props\n} ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst hasFixedToolbar = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().hasFixedToolbar,\n\t\t[]\n\t);\n\tconst isMatch = useShortcutEventMatch();\n\tconst { getSelectedBlockClientIds, getBlockRootClientId } =\n\t\tuseSelect( blockEditorStore );\n\tconst {\n\t\tduplicateBlocks,\n\t\tremoveBlocks,\n\t\tinsertAfterBlock,\n\t\tinsertBeforeBlock,\n\t\tclearSelectedBlock,\n\t\tmoveBlocksUp,\n\t\tmoveBlocksDown,\n\t} = useDispatch( blockEditorStore );\n\n\tfunction onKeyDown( event ) {\n\t\tif ( isMatch( 'core/block-editor/move-up', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst rootClientId = getBlockRootClientId( first( clientIds ) );\n\t\t\t\tmoveBlocksUp( clientIds, rootClientId );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/move-down', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst rootClientId = getBlockRootClientId( first( clientIds ) );\n\t\t\t\tmoveBlocksDown( clientIds, rootClientId );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tduplicateBlocks( clientIds );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/remove', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tremoveBlocks( clientIds );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinsertAfterBlock( last( clientIds ) );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinsertBeforeBlock( first( clientIds ) );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/unselect', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length > 1 ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tclearSelectedBlock();\n\t\t\t\tevent.target.ownerDocument.defaultView\n\t\t\t\t\t.getSelection()\n\t\t\t\t\t.removeAllRanges();\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div { ...props } onKeyDown={ onKeyDown }>\n\t\t\t<InsertionPoint __unstableContentRef={ __unstableContentRef }>\n\t\t\t\t{ ( hasFixedToolbar || ! isLargeViewport ) && (\n\t\t\t\t\t<BlockContextualToolbar isFixed />\n\t\t\t\t) }\n\t\t\t\t{ /* Even if the toolbar is fixed, the block popover is still\n\t\t\t\t\tneeded for navigation and exploded mode. */ }\n\t\t\t\t<SelectedBlockPopover\n\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t/>\n\t\t\t\t{ /* Used for the inline rich text toolbar. */ }\n\t\t\t\t<Popover.Slot\n\t\t\t\t\tname=\"block-toolbar\"\n\t\t\t\t\tref={ usePopoverScroll( __unstableContentRef ) }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t\t{ /* Used for inline rich text popovers. */ }\n\t\t\t\t<Popover.Slot\n\t\t\t\t\tname=\"__unstable-block-tools-after\"\n\t\t\t\t\tref={ usePopoverScroll( __unstableContentRef ) }\n\t\t\t\t/>\n\t\t\t</InsertionPoint>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/index.js"],"names":["first","last","useSelect","useDispatch","useViewportMatch","Popover","__unstableUseShortcutEventMatch","useShortcutEventMatch","InsertionPoint","SelectedBlockPopover","store","blockEditorStore","BlockContextualToolbar","usePopoverScroll","BlockTools","children","__unstableContentRef","props","isLargeViewport","hasFixedToolbar","select","getSettings","isMatch","getSelectedBlockClientIds","getBlockRootClientId","duplicateBlocks","removeBlocks","insertAfterBlock","insertBeforeBlock","clearSelectedBlock","moveBlocksUp","moveBlocksDown","onKeyDown","event","defaultPrevented","clientIds","length","preventDefault","rootClientId","target","ownerDocument","defaultView","getSelection","removeAllRanges","current","focus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { first, last } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Popover } from '@wordpress/components';\nimport { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport InsertionPoint from './insertion-point';\nimport SelectedBlockPopover from './selected-block-popover';\nimport { store as blockEditorStore } from '../../store';\nimport BlockContextualToolbar from './block-contextual-toolbar';\nimport usePopoverScroll from '../block-popover/use-popover-scroll';\n\n/**\n * Renders block tools (the block toolbar, select/navigation mode toolbar, the\n * insertion point and a slot for the inline rich text toolbar). Must be wrapped\n * around the block content and editor styles wrapper or iframe.\n *\n * @param {Object} $0                      Props.\n * @param {Object} $0.children             The block content and style container.\n * @param {Object} $0.__unstableContentRef Ref holding the content scroll container.\n */\nexport default function BlockTools( {\n\tchildren,\n\t__unstableContentRef,\n\t...props\n} ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst hasFixedToolbar = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().hasFixedToolbar,\n\t\t[]\n\t);\n\tconst isMatch = useShortcutEventMatch();\n\tconst { getSelectedBlockClientIds, getBlockRootClientId } =\n\t\tuseSelect( blockEditorStore );\n\tconst {\n\t\tduplicateBlocks,\n\t\tremoveBlocks,\n\t\tinsertAfterBlock,\n\t\tinsertBeforeBlock,\n\t\tclearSelectedBlock,\n\t\tmoveBlocksUp,\n\t\tmoveBlocksDown,\n\t} = useDispatch( blockEditorStore );\n\n\tfunction onKeyDown( event ) {\n\t\tif ( event.defaultPrevented ) return;\n\n\t\tif ( isMatch( 'core/block-editor/move-up', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst rootClientId = getBlockRootClientId( first( clientIds ) );\n\t\t\t\tmoveBlocksUp( clientIds, rootClientId );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/move-down', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst rootClientId = getBlockRootClientId( first( clientIds ) );\n\t\t\t\tmoveBlocksDown( clientIds, rootClientId );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tduplicateBlocks( clientIds );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/remove', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tremoveBlocks( clientIds );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinsertAfterBlock( last( clientIds ) );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinsertBeforeBlock( first( clientIds ) );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/unselect', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tclearSelectedBlock();\n\t\t\t\tevent.target.ownerDocument.defaultView\n\t\t\t\t\t.getSelection()\n\t\t\t\t\t.removeAllRanges();\n\t\t\t\t__unstableContentRef?.current.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div { ...props } onKeyDown={ onKeyDown }>\n\t\t\t<InsertionPoint __unstableContentRef={ __unstableContentRef }>\n\t\t\t\t{ ( hasFixedToolbar || ! isLargeViewport ) && (\n\t\t\t\t\t<BlockContextualToolbar isFixed />\n\t\t\t\t) }\n\t\t\t\t{ /* Even if the toolbar is fixed, the block popover is still\n\t\t\t\t\tneeded for navigation and exploded mode. */ }\n\t\t\t\t<SelectedBlockPopover\n\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t/>\n\t\t\t\t{ /* Used for the inline rich text toolbar. */ }\n\t\t\t\t<Popover.Slot\n\t\t\t\t\tname=\"block-toolbar\"\n\t\t\t\t\tref={ usePopoverScroll( __unstableContentRef ) }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t\t{ /* Used for inline rich text popovers. */ }\n\t\t\t\t<Popover.Slot\n\t\t\t\t\tname=\"__unstable-block-tools-after\"\n\t\t\t\t\tref={ usePopoverScroll( __unstableContentRef ) }\n\t\t\t\t/>\n\t\t\t</InsertionPoint>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/block-types-list/index.js

@@ -41,7 +41,7 @@ function BlockTypesList(_ref) {
     className: getBlockMenuDefaultClassName(item.id),
     onSelect: onSelect,
     onHover: onHover,
-    isDraggable: isDraggable,
+    isDraggable: isDraggable && !item.isDisabled,
     isFirst: i === 0 && j === 0
   })))), children);
 }

package/build-module/components/block-types-list/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.js"],"names":["getBlockMenuDefaultClassName","InserterListItem","InserterListboxGroup","InserterListboxRow","chunk","array","size","chunks","i","j","length","push","slice","BlockTypesList","items","onSelect","onHover","children","label","isDraggable","map","row","item","id"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,4BAAT,QAA6C,mBAA7C;AAEA;AACA;AACA;;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,QAAyD,qBAAzD;;AAEA,SAASC,KAAT,CAAgBC,KAAhB,EAAuBC,IAAvB,EAA8B;AAC7B,QAAMC,MAAM,GAAG,EAAf;;AACA,OAAM,IAAIC,CAAC,GAAG,CAAR,EAAWC,CAAC,GAAGJ,KAAK,CAACK,MAA3B,EAAmCF,CAAC,GAAGC,CAAvC,EAA0CD,CAAC,IAAIF,IAA/C,EAAsD;AACrDC,IAAAA,MAAM,CAACI,IAAP,CAAaN,KAAK,CAACO,KAAN,CAAaJ,CAAb,EAAgBA,CAAC,GAAGF,IAApB,CAAb;AACA;;AACD,SAAOC,MAAP;AACA;;AAED,SAASM,cAAT,OAOI;AAAA,MAPqB;AACxBC,IAAAA,KAAK,GAAG,EADgB;AAExBC,IAAAA,QAFwB;AAGxBC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAHM;AAIxBC,IAAAA,QAJwB;AAKxBC,IAAAA,KALwB;AAMxBC,IAAAA,WAAW,GAAG;AANU,GAOrB;AACH,SACC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,+BADX;AAEC,kBAAaD;AAFd,KAIGd,KAAK,CAAEU,KAAF,EAAS,CAAT,CAAL,CAAkBM,GAAlB,CAAuB,CAAEC,GAAF,EAAOb,CAAP,KACxB,cAAC,kBAAD;AAAoB,IAAA,GAAG,EAAGA;AAA1B,KACGa,GAAG,CAACD,GAAJ,CAAS,CAAEE,IAAF,EAAQb,CAAR,KACV,cAAC,gBAAD;AACC,IAAA,GAAG,EAAGa,IAAI,CAACC,EADZ;AAEC,IAAA,IAAI,EAAGD,IAFR;AAGC,IAAA,SAAS,EAAGtB,4BAA4B,CACvCsB,IAAI,CAACC,EADkC,CAHzC;AAMC,IAAA,QAAQ,EAAGR,QANZ;AAOC,IAAA,OAAO,EAAGC,OAPX;AAQC,IAAA,WAAW,EAAGG,WARf;AASC,IAAA,OAAO,EAAGX,CAAC,KAAK,CAAN,IAAWC,CAAC,KAAK;AAT5B,IADC,CADH,CADC,CAJH,EAqBGQ,QArBH,CADD;AAyBA;;AAED,eAAeJ,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockMenuDefaultClassName } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport InserterListItem from '../inserter-list-item';\nimport { InserterListboxGroup, InserterListboxRow } from '../inserter-listbox';\n\nfunction chunk( array, size ) {\n\tconst chunks = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\nfunction BlockTypesList( {\n\titems = [],\n\tonSelect,\n\tonHover = () => {},\n\tchildren,\n\tlabel,\n\tisDraggable = true,\n} ) {\n\treturn (\n\t\t<InserterListboxGroup\n\t\t\tclassName=\"block-editor-block-types-list\"\n\t\t\taria-label={ label }\n\t\t>\n\t\t\t{ chunk( items, 3 ).map( ( row, i ) => (\n\t\t\t\t<InserterListboxRow key={ i }>\n\t\t\t\t\t{ row.map( ( item, j ) => (\n\t\t\t\t\t\t<InserterListItem\n\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tclassName={ getBlockMenuDefaultClassName(\n\t\t\t\t\t\t\t\titem.id\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\tisDraggable={ isDraggable }\n\t\t\t\t\t\t\tisFirst={ i === 0 && j === 0 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</InserterListboxRow>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</InserterListboxGroup>\n\t);\n}\n\nexport default BlockTypesList;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.js"],"names":["getBlockMenuDefaultClassName","InserterListItem","InserterListboxGroup","InserterListboxRow","chunk","array","size","chunks","i","j","length","push","slice","BlockTypesList","items","onSelect","onHover","children","label","isDraggable","map","row","item","id","isDisabled"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,4BAAT,QAA6C,mBAA7C;AAEA;AACA;AACA;;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,QAAyD,qBAAzD;;AAEA,SAASC,KAAT,CAAgBC,KAAhB,EAAuBC,IAAvB,EAA8B;AAC7B,QAAMC,MAAM,GAAG,EAAf;;AACA,OAAM,IAAIC,CAAC,GAAG,CAAR,EAAWC,CAAC,GAAGJ,KAAK,CAACK,MAA3B,EAAmCF,CAAC,GAAGC,CAAvC,EAA0CD,CAAC,IAAIF,IAA/C,EAAsD;AACrDC,IAAAA,MAAM,CAACI,IAAP,CAAaN,KAAK,CAACO,KAAN,CAAaJ,CAAb,EAAgBA,CAAC,GAAGF,IAApB,CAAb;AACA;;AACD,SAAOC,MAAP;AACA;;AAED,SAASM,cAAT,OAOI;AAAA,MAPqB;AACxBC,IAAAA,KAAK,GAAG,EADgB;AAExBC,IAAAA,QAFwB;AAGxBC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAHM;AAIxBC,IAAAA,QAJwB;AAKxBC,IAAAA,KALwB;AAMxBC,IAAAA,WAAW,GAAG;AANU,GAOrB;AACH,SACC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,+BADX;AAEC,kBAAaD;AAFd,KAIGd,KAAK,CAAEU,KAAF,EAAS,CAAT,CAAL,CAAkBM,GAAlB,CAAuB,CAAEC,GAAF,EAAOb,CAAP,KACxB,cAAC,kBAAD;AAAoB,IAAA,GAAG,EAAGA;AAA1B,KACGa,GAAG,CAACD,GAAJ,CAAS,CAAEE,IAAF,EAAQb,CAAR,KACV,cAAC,gBAAD;AACC,IAAA,GAAG,EAAGa,IAAI,CAACC,EADZ;AAEC,IAAA,IAAI,EAAGD,IAFR;AAGC,IAAA,SAAS,EAAGtB,4BAA4B,CACvCsB,IAAI,CAACC,EADkC,CAHzC;AAMC,IAAA,QAAQ,EAAGR,QANZ;AAOC,IAAA,OAAO,EAAGC,OAPX;AAQC,IAAA,WAAW,EAAGG,WAAW,IAAI,CAAEG,IAAI,CAACE,UARrC;AASC,IAAA,OAAO,EAAGhB,CAAC,KAAK,CAAN,IAAWC,CAAC,KAAK;AAT5B,IADC,CADH,CADC,CAJH,EAqBGQ,QArBH,CADD;AAyBA;;AAED,eAAeJ,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockMenuDefaultClassName } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport InserterListItem from '../inserter-list-item';\nimport { InserterListboxGroup, InserterListboxRow } from '../inserter-listbox';\n\nfunction chunk( array, size ) {\n\tconst chunks = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\nfunction BlockTypesList( {\n\titems = [],\n\tonSelect,\n\tonHover = () => {},\n\tchildren,\n\tlabel,\n\tisDraggable = true,\n} ) {\n\treturn (\n\t\t<InserterListboxGroup\n\t\t\tclassName=\"block-editor-block-types-list\"\n\t\t\taria-label={ label }\n\t\t>\n\t\t\t{ chunk( items, 3 ).map( ( row, i ) => (\n\t\t\t\t<InserterListboxRow key={ i }>\n\t\t\t\t\t{ row.map( ( item, j ) => (\n\t\t\t\t\t\t<InserterListItem\n\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tclassName={ getBlockMenuDefaultClassName(\n\t\t\t\t\t\t\t\titem.id\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\t\tisDraggable={ isDraggable && ! item.isDisabled }\n\t\t\t\t\t\t\tisFirst={ i === 0 && j === 0 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</InserterListboxRow>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</InserterListboxGroup>\n\t);\n}\n\nexport default BlockTypesList;\n"]}

package/build-module/components/block-types-list/index.native.js

@@ -4,13 +4,14 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { Dimensions, FlatList, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import { Dimensions, FlatList, SectionList, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
 /**
  * WordPress dependencies
  */
 
 import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, InserterButton } from '@wordpress/components';
+import { BottomSheet, Gradient, InserterButton } from '@wordpress/components';
+import { usePreferredColorScheme, usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -20,7 +21,7 @@ const MIN_COL_NUM = 3;
 export default function BlockTypesList(_ref) {
   let {
     name,
-    items,
+    sections,
     onSelect,
     listProps,
     initialNumToRender = 3
@@ -65,32 +66,73 @@ export default function BlockTypesList(_ref) {
   }
 
   const contentContainerStyle = StyleSheet.flatten(listProps.contentContainerStyle);
-  return createElement(FlatList, _extends({
+
+  const renderSection = _ref2 => {
+    let {
+      item
+    } = _ref2;
+    return createElement(TouchableWithoutFeedback, {
+      accessible: false
+    }, createElement(FlatList, {
+      data: item.list,
+      key: `InserterUI-${name}-${numberOfColumns}` // Re-render when numberOfColumns changes.
+      ,
+      numColumns: numberOfColumns,
+      ItemSeparatorComponent: () => createElement(TouchableWithoutFeedback, {
+        accessible: false
+      }, createElement(View, {
+        style: styles['block-types-list__row-separator']
+      })),
+      scrollEnabled: false,
+      renderItem: renderListItem
+    }));
+  };
+
+  const renderListItem = _ref3 => {
+    let {
+      item
+    } = _ref3;
+    return createElement(InserterButton, {
+      item: item,
+      itemWidth: itemWidth,
+      maxWidth: maxWidth,
+      onSelect: onSelect
+    });
+  };
+
+  const colorScheme = usePreferredColorScheme();
+  const sectionHeaderGradientValue = colorScheme === 'light' ? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))' : 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';
+  const sectionHeaderTitleStyles = usePreferredColorSchemeStyle(styles['block-types-list__section-header-title'], styles['block-types-list__section-header-title--dark']);
+
+  const renderSectionHeader = _ref4 => {
+    let {
+      section: {
+        metadata
+      }
+    } = _ref4;
+
+    if (!(metadata !== null && metadata !== void 0 && metadata.icon) || !(metadata !== null && metadata !== void 0 && metadata.title)) {
+      return null;
+    }
+
+    return createElement(TouchableWithoutFeedback, {
+      accessible: false
+    }, createElement(Gradient, {
+      gradientValue: sectionHeaderGradientValue,
+      style: styles['block-types-list__section-header']
+    }, metadata === null || metadata === void 0 ? void 0 : metadata.icon, createElement(Text, {
+      style: sectionHeaderTitleStyles
+    }, metadata === null || metadata === void 0 ? void 0 : metadata.title)));
+  };
+
+  return createElement(SectionList, _extends({
     onLayout: onLayout,
-    key: `InserterUI-${name}-${numberOfColumns}` // Re-render when numberOfColumns changes.
-    ,
     testID: `InserterUI-${name}`,
     keyboardShouldPersistTaps: "always",
-    numColumns: numberOfColumns,
-    data: items,
+    sections: sections,
     initialNumToRender: initialNumToRender,
-    ItemSeparatorComponent: () => createElement(TouchableWithoutFeedback, {
-      accessible: false
-    }, createElement(View, {
-      style: styles['block-types-list__row-separator']
-    })),
-    keyExtractor: item => item.id,
-    renderItem: _ref2 => {
-      let {
-        item
-      } = _ref2;
-      return createElement(InserterButton, {
-        item,
-        itemWidth,
-        maxWidth,
-        onSelect
-      });
-    }
+    renderItem: renderSection,
+    renderSectionHeader: renderSectionHeader
   }, listProps, {
     contentContainerStyle: { ...contentContainerStyle,
       paddingBottom: Math.max(listProps.safeAreaBottomInset, contentContainerStyle.paddingBottom)

package/build-module/components/block-types-list/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"names":["Dimensions","FlatList","StyleSheet","TouchableWithoutFeedback","View","useState","useEffect","BottomSheet","InserterButton","styles","MIN_COL_NUM","BlockTypesList","name","items","onSelect","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","itemWidth","setItemWidth","maxWidth","setMaxWidth","dimensionsChangeSubscription","addEventListener","onLayout","remove","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","Styles","modalItem","width","modalIconWrapper","columnStyle","sumLeftRightPadding","bottomSheetWidth","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","flatten","item","id","paddingBottom","safeAreaBottomInset"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tDimensions,\n\tFlatList,\n\tStyleSheet,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { BottomSheet, InserterButton } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MIN_COL_NUM = 3;\n\nexport default function BlockTypesList( {\n\tname,\n\titems,\n\tonSelect,\n\tlistProps,\n\tinitialNumToRender = 3,\n} ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =\n\t\t\tInserterButton.Styles.modalItem;\n\t\tconst { width } = InserterButton.Styles.modalIconWrapper;\n\t\treturn width + itemPaddingLeft + itemPaddingRight;\n\t}\n\n\tfunction onLayout() {\n\t\tconst columnStyle = styles[ 'block-types-list__column' ];\n\t\tconst sumLeftRightPadding =\n\t\t\tcolumnStyle.paddingLeft + columnStyle.paddingRight;\n\n\t\tconst bottomSheetWidth = BottomSheet.getWidth();\n\t\tconst containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;\n\t\tconst itemTotalWidth = calculateItemWidth();\n\n\t\tconst columnsFitToWidth = Math.floor(\n\t\t\tcontainerTotalWidth / itemTotalWidth\n\t\t);\n\n\t\tconst numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );\n\n\t\tsetNumberOfColumns( numColumns );\n\t\tsetMaxWidth( containerTotalWidth / numColumns );\n\n\t\tif ( columnsFitToWidth < MIN_COL_NUM ) {\n\t\t\tconst updatedItemWidth =\n\t\t\t\t( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;\n\t\t\tsetItemWidth( updatedItemWidth );\n\t\t}\n\t}\n\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\treturn (\n\t\t<FlatList\n\t\t\tonLayout={ onLayout }\n\t\t\tkey={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.\n\t\t\ttestID={ `InserterUI-${ name }` }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tnumColumns={ numberOfColumns }\n\t\t\tdata={ items }\n\t\t\tinitialNumToRender={ initialNumToRender }\n\t\t\tItemSeparatorComponent={ () => (\n\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ styles[ 'block-types-list__row-separator' ] }\n\t\t\t\t\t/>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t) }\n\t\t\tkeyExtractor={ ( item ) => item.id }\n\t\t\trenderItem={ ( { item } ) => (\n\t\t\t\t<InserterButton\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\titem,\n\t\t\t\t\t\titemWidth,\n\t\t\t\t\t\tmaxWidth,\n\t\t\t\t\t\tonSelect,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ...listProps }\n\t\t\tcontentContainerStyle={ {\n\t\t\t\t...contentContainerStyle,\n\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"names":["Dimensions","FlatList","SectionList","StyleSheet","Text","TouchableWithoutFeedback","View","useState","useEffect","BottomSheet","Gradient","InserterButton","usePreferredColorScheme","usePreferredColorSchemeStyle","styles","MIN_COL_NUM","BlockTypesList","name","sections","onSelect","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","itemWidth","setItemWidth","maxWidth","setMaxWidth","dimensionsChangeSubscription","addEventListener","onLayout","remove","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","Styles","modalItem","width","modalIconWrapper","columnStyle","sumLeftRightPadding","bottomSheetWidth","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","flatten","renderSection","item","list","renderListItem","colorScheme","sectionHeaderGradientValue","sectionHeaderTitleStyles","renderSectionHeader","section","metadata","icon","title","paddingBottom","safeAreaBottomInset"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tDimensions,\n\tFlatList,\n\tSectionList,\n\tStyleSheet,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { BottomSheet, Gradient, InserterButton } from '@wordpress/components';\nimport {\n\tusePreferredColorScheme,\n\tusePreferredColorSchemeStyle,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst MIN_COL_NUM = 3;\n\nexport default function BlockTypesList( {\n\tname,\n\tsections,\n\tonSelect,\n\tlistProps,\n\tinitialNumToRender = 3,\n} ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonLayout\n\t\t);\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =\n\t\t\tInserterButton.Styles.modalItem;\n\t\tconst { width } = InserterButton.Styles.modalIconWrapper;\n\t\treturn width + itemPaddingLeft + itemPaddingRight;\n\t}\n\n\tfunction onLayout() {\n\t\tconst columnStyle = styles[ 'block-types-list__column' ];\n\t\tconst sumLeftRightPadding =\n\t\t\tcolumnStyle.paddingLeft + columnStyle.paddingRight;\n\n\t\tconst bottomSheetWidth = BottomSheet.getWidth();\n\t\tconst containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;\n\t\tconst itemTotalWidth = calculateItemWidth();\n\n\t\tconst columnsFitToWidth = Math.floor(\n\t\t\tcontainerTotalWidth / itemTotalWidth\n\t\t);\n\n\t\tconst numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );\n\n\t\tsetNumberOfColumns( numColumns );\n\t\tsetMaxWidth( containerTotalWidth / numColumns );\n\n\t\tif ( columnsFitToWidth < MIN_COL_NUM ) {\n\t\t\tconst updatedItemWidth =\n\t\t\t\t( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;\n\t\t\tsetItemWidth( updatedItemWidth );\n\t\t}\n\t}\n\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\tconst renderSection = ( { item } ) => {\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<FlatList\n\t\t\t\t\tdata={ item.list }\n\t\t\t\t\tkey={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.\n\t\t\t\t\tnumColumns={ numberOfColumns }\n\t\t\t\t\tItemSeparatorComponent={ () => (\n\t\t\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'block-types-list__row-separator' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t) }\n\t\t\t\t\tscrollEnabled={ false }\n\t\t\t\t\trenderItem={ renderListItem }\n\t\t\t\t/>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\tconst renderListItem = ( { item } ) => {\n\t\treturn (\n\t\t\t<InserterButton\n\t\t\t\titem={ item }\n\t\t\t\titemWidth={ itemWidth }\n\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst colorScheme = usePreferredColorScheme();\n\tconst sectionHeaderGradientValue =\n\t\tcolorScheme === 'light'\n\t\t\t? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))'\n\t\t\t: 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';\n\tconst sectionHeaderTitleStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'block-types-list__section-header-title' ],\n\t\tstyles[ 'block-types-list__section-header-title--dark' ]\n\t);\n\n\tconst renderSectionHeader = ( { section: { metadata } } ) => {\n\t\tif ( ! metadata?.icon || ! metadata?.title ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t<Gradient\n\t\t\t\t\tgradientValue={ sectionHeaderGradientValue }\n\t\t\t\t\tstyle={ styles[ 'block-types-list__section-header' ] }\n\t\t\t\t>\n\t\t\t\t\t{ metadata?.icon }\n\t\t\t\t\t<Text style={ sectionHeaderTitleStyles }>\n\t\t\t\t\t\t{ metadata?.title }\n\t\t\t\t\t</Text>\n\t\t\t\t</Gradient>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t};\n\n\treturn (\n\t\t<SectionList\n\t\t\tonLayout={ onLayout }\n\t\t\ttestID={ `InserterUI-${ name }` }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tsections={ sections }\n\t\t\tinitialNumToRender={ initialNumToRender }\n\t\t\trenderItem={ renderSection }\n\t\t\trenderSectionHeader={ renderSectionHeader }\n\t\t\t{ ...listProps }\n\t\t\tcontentContainerStyle={ {\n\t\t\t\t...contentContainerStyle,\n\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}

package/build-module/components/border-radius-control/index.js

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { RangeControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
+import { BaseControl, RangeControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
@@ -59,7 +59,9 @@ export default function BorderRadiusControl(_ref) {
 
   return createElement("fieldset", {
     className: "components-border-radius-control"
-  }, createElement("legend", null, __('Radius')), createElement("div", {
+  }, createElement(BaseControl.VisualLabel, {
+    as: "legend"
+  }, __('Radius')), createElement("div", {
     className: "components-border-radius-control__wrapper"
   }, isLinked ? createElement(Fragment, null, createElement(AllInputControl, {
     className: "components-border-radius-control__unit-control",
@@ -68,6 +70,8 @@ export default function BorderRadiusControl(_ref) {
     onChange: onChange,
     units: units
   }), createElement(RangeControl, {
+    label: __('Border radius'),
+    hideLabelFromVision: true,
     className: "components-border-radius-control__range-control",
     value: allValue !== null && allValue !== void 0 ? allValue : '',
     min: MIN_BORDER_RADIUS_VALUE,

package/build-module/components/border-radius-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/index.js"],"names":["RangeControl","__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","__experimentalUseCustomUnits","useCustomUnits","useState","__","AllInputControl","InputControls","LinkedButton","useSetting","getAllValue","getAllUnit","hasDefinedValues","hasMixedValues","DEFAULT_VALUES","topLeft","topRight","bottomLeft","bottomRight","MIN_BORDER_RADIUS_VALUE","MAX_BORDER_RADIUS_VALUES","px","em","rem","BorderRadiusControl","onChange","values","isLinked","setIsLinked","units","availableUnits","unit","unitConfig","find","item","value","step","allValue","toggleLinked","handleSliderChange","next","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tRangeControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport LinkedButton from './linked-button';\nimport useSetting from '../use-setting';\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasDefinedValues,\n\thasMixedValues,\n} from './utils';\n\nconst DEFAULT_VALUES = {\n\ttopLeft: null,\n\ttopRight: null,\n\tbottomLeft: null,\n\tbottomRight: null,\n};\nconst MIN_BORDER_RADIUS_VALUE = 0;\nconst MAX_BORDER_RADIUS_VALUES = {\n\tpx: 100,\n\tem: 20,\n\trem: 20,\n};\n\n/**\n * Control to display border radius options.\n *\n * @param {Object}   props          Component props.\n * @param {Function} props.onChange Callback to handle onChange.\n * @param {Object}   props.values   Border radius values.\n *\n * @return {WPElement}              Custom border radius control.\n */\nexport default function BorderRadiusControl( { onChange, values } ) {\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasDefinedValues( values ) || ! hasMixedValues( values )\n\t);\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst unit = getAllUnit( values );\n\tconst unitConfig = units && units.find( ( item ) => item.value === unit );\n\tconst step = unitConfig?.step || 1;\n\n\tconst [ allValue ] = parseQuantityAndUnitFromRawValue(\n\t\tgetAllValue( values )\n\t);\n\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( next !== undefined ? `${ next }${ unit }` : undefined );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"components-border-radius-control\">\n\t\t\t<legend>{ __( 'Radius' ) }</legend>\n\t\t\t<div className=\"components-border-radius-control__wrapper\">\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\tvalues={ values }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\t\tvalue={ allValue ?? '' }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ unit ] }\n\t\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<InputControls\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalues={ values || DEFAULT_VALUES }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/index.js"],"names":["BaseControl","RangeControl","__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","__experimentalUseCustomUnits","useCustomUnits","useState","__","AllInputControl","InputControls","LinkedButton","useSetting","getAllValue","getAllUnit","hasDefinedValues","hasMixedValues","DEFAULT_VALUES","topLeft","topRight","bottomLeft","bottomRight","MIN_BORDER_RADIUS_VALUE","MAX_BORDER_RADIUS_VALUES","px","em","rem","BorderRadiusControl","onChange","values","isLinked","setIsLinked","units","availableUnits","unit","unitConfig","find","item","value","step","allValue","toggleLinked","handleSliderChange","next","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tRangeControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport LinkedButton from './linked-button';\nimport useSetting from '../use-setting';\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasDefinedValues,\n\thasMixedValues,\n} from './utils';\n\nconst DEFAULT_VALUES = {\n\ttopLeft: null,\n\ttopRight: null,\n\tbottomLeft: null,\n\tbottomRight: null,\n};\nconst MIN_BORDER_RADIUS_VALUE = 0;\nconst MAX_BORDER_RADIUS_VALUES = {\n\tpx: 100,\n\tem: 20,\n\trem: 20,\n};\n\n/**\n * Control to display border radius options.\n *\n * @param {Object}   props          Component props.\n * @param {Function} props.onChange Callback to handle onChange.\n * @param {Object}   props.values   Border radius values.\n *\n * @return {WPElement}              Custom border radius control.\n */\nexport default function BorderRadiusControl( { onChange, values } ) {\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasDefinedValues( values ) || ! hasMixedValues( values )\n\t);\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst unit = getAllUnit( values );\n\tconst unitConfig = units && units.find( ( item ) => item.value === unit );\n\tconst step = unitConfig?.step || 1;\n\n\tconst [ allValue ] = parseQuantityAndUnitFromRawValue(\n\t\tgetAllValue( values )\n\t);\n\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( next !== undefined ? `${ next }${ unit }` : undefined );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"components-border-radius-control\">\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ __( 'Radius' ) }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<div className=\"components-border-radius-control__wrapper\">\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\tvalues={ values }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\t\tvalue={ allValue ?? '' }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ unit ] }\n\t\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<InputControls\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalues={ values || DEFAULT_VALUES }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n"]}

package/build-module/components/colors/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, maxBy } from 'lodash';
+import { find, kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -77,11 +77,15 @@ export function getColorClassName(colorContextName, colorSlug) {
 
 export function getMostReadableColor(colors, colorValue) {
   const colordColor = colord(colorValue);
-  return maxBy(colors, _ref => {
+
+  const getColorContrast = _ref => {
     let {
       color
     } = _ref;
     return colordColor.contrast(color);
-  }).color;
+  };
+
+  const maxContrast = Math.max(...colors.map(getColorContrast));
+  return colors.find(color => getColorContrast(color) === maxContrast).color;
 }
 //# sourceMappingURL=utils.js.map

package/build-module/components/colors/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"names":["find","kebabCase","maxBy","colord","extend","namesPlugin","a11yPlugin","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","slug","color","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","contrast"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,SAAf,EAA0BC,KAA1B,QAAuC,QAAvC;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEAF,MAAM,CAAE,CAAEC,WAAF,EAAeC,UAAf,CAAF,CAAN;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,+BAA+B,GAAG,CAC9CC,MAD8C,EAE9CC,YAF8C,EAG9CC,WAH8C,KAI1C;AACJ,MAAKD,YAAL,EAAoB;AACnB,UAAME,QAAQ,GAAGX,IAAI,CAAEQ,MAAF,EAAU;AAAEI,MAAAA,IAAI,EAAEH;AAAR,KAAV,CAArB;;AAEA,QAAKE,QAAL,EAAgB;AACf,aAAOA,QAAP;AACA;AACD;;AACD,SAAO;AACNE,IAAAA,KAAK,EAAEH;AADD,GAAP;AAGA,CAfM;AAiBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMI,0BAA0B,GAAG,CAAEN,MAAF,EAAUO,UAAV,KAA0B;AACnE,SAAOf,IAAI,CAAEQ,MAAF,EAAU;AAAEK,IAAAA,KAAK,EAAEE;AAAT,GAAV,CAAX;AACA,CAFM;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,CAA4BC,gBAA5B,EAA8CC,SAA9C,EAA0D;AAChE,MAAK,CAAED,gBAAF,IAAsB,CAAEC,SAA7B,EAAyC;AACxC,WAAOC,SAAP;AACA;;AAED,SAAQ,OAAOlB,SAAS,CAAEiB,SAAF,CAAe,IAAID,gBAAkB,EAA7D;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,oBAAT,CAA+BZ,MAA/B,EAAuCO,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAGlB,MAAM,CAAEY,UAAF,CAA1B;AACA,SAAOb,KAAK,CAAEM,MAAF,EAAU;AAAA,QAAE;AAAEK,MAAAA;AAAF,KAAF;AAAA,WAAiBQ,WAAW,CAACC,QAAZ,CAAsBT,KAAtB,CAAjB;AAAA,GAAV,CAAL,CACLA,KADF;AAEA","sourcesContent":["/**\n * External dependencies\n */\nimport { find, kebabCase, maxBy } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = find( colors, { slug: definedColor } );\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn find( colors, { color: colorValue } );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\treturn maxBy( colors, ( { color } ) => colordColor.contrast( color ) )\n\t\t.color;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"names":["find","kebabCase","colord","extend","namesPlugin","a11yPlugin","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","slug","color","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","getColorContrast","contrast","maxContrast","Math","max","map"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,SAAf,QAAgC,QAAhC;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEAF,MAAM,CAAE,CAAEC,WAAF,EAAeC,UAAf,CAAF,CAAN;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,+BAA+B,GAAG,CAC9CC,MAD8C,EAE9CC,YAF8C,EAG9CC,WAH8C,KAI1C;AACJ,MAAKD,YAAL,EAAoB;AACnB,UAAME,QAAQ,GAAGV,IAAI,CAAEO,MAAF,EAAU;AAAEI,MAAAA,IAAI,EAAEH;AAAR,KAAV,CAArB;;AAEA,QAAKE,QAAL,EAAgB;AACf,aAAOA,QAAP;AACA;AACD;;AACD,SAAO;AACNE,IAAAA,KAAK,EAAEH;AADD,GAAP;AAGA,CAfM;AAiBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMI,0BAA0B,GAAG,CAAEN,MAAF,EAAUO,UAAV,KAA0B;AACnE,SAAOd,IAAI,CAAEO,MAAF,EAAU;AAAEK,IAAAA,KAAK,EAAEE;AAAT,GAAV,CAAX;AACA,CAFM;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,CAA4BC,gBAA5B,EAA8CC,SAA9C,EAA0D;AAChE,MAAK,CAAED,gBAAF,IAAsB,CAAEC,SAA7B,EAAyC;AACxC,WAAOC,SAAP;AACA;;AAED,SAAQ,OAAOjB,SAAS,CAAEgB,SAAF,CAAe,IAAID,gBAAkB,EAA7D;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,oBAAT,CAA+BZ,MAA/B,EAAuCO,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAGlB,MAAM,CAAEY,UAAF,CAA1B;;AACA,QAAMO,gBAAgB,GAAG;AAAA,QAAE;AAAET,MAAAA;AAAF,KAAF;AAAA,WAAiBQ,WAAW,CAACE,QAAZ,CAAsBV,KAAtB,CAAjB;AAAA,GAAzB;;AAEA,QAAMW,WAAW,GAAGC,IAAI,CAACC,GAAL,CAAU,GAAGlB,MAAM,CAACmB,GAAP,CAAYL,gBAAZ,CAAb,CAApB;AACA,SAAOd,MAAM,CAACP,IAAP,CAAeY,KAAF,IAAaS,gBAAgB,CAAET,KAAF,CAAhB,KAA8BW,WAAxD,EACLX,KADF;AAEA","sourcesContent":["/**\n * External dependencies\n */\nimport { find, kebabCase } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = find( colors, { slug: definedColor } );\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn find( colors, { color: colorValue } );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"]}

package/build-module/components/colors/with-colors.js

@@ -4,7 +4,7 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { isString, kebabCase, reduce, upperFirst } from 'lodash';
+import { kebabCase, reduce, upperFirst } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -63,7 +63,7 @@ const withEditorColorPalette = () => createHigherOrderComponent(WrappedComponent
 function createColorHOC(colorTypes, withColorPalette) {
   const colorMap = reduce(colorTypes, (colorObject, colorType) => {
     return { ...colorObject,
-      ...(isString(colorType) ? {
+      ...(typeof colorType === 'string' ? {
         [colorType]: kebabCase(colorType)
       } : colorType)
     };

package/build-module/components/colors/with-colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"names":["isString","kebabCase","reduce","upperFirst","useMemo","Component","compose","createHigherOrderComponent","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSetting","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","constructor","setters","createSetters","colorUtils","bind","state","colorValue","colors","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,SAAnB,EAA8BC,MAA9B,EAAsCC,UAAtC,QAAwD,QAAxD;AAEA;AACA;AACA;;AACA,SAASC,OAAT,EAAkBC,SAAlB,QAAmC,oBAAnC;AACA,SAASC,OAAT,EAAkBC,0BAAlB,QAAoD,oBAApD;AAEA;AACA;AACA;;AACA,SACCC,iBADD,EAECC,0BAFD,EAGCC,+BAHD,EAICC,oBAJD,QAKO,SALP;AAMA,OAAOC,UAAP,MAAuB,gBAAvB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,sBAAsB,GAAKC,WAAF,IAC9BP,0BAA0B,CACvBQ,gBAAF,IAA0BC,KAAF,IACvB,cAAC,gBAAD,eAAuBA,KAAvB;AAA+B,EAAA,MAAM,EAAGF;AAAxC,GAFwB,EAGzB,wBAHyB,CAD3B;AAOA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,sBAAsB,GAAG,MAC9BV,0BAA0B,CACvBQ,gBAAF,IAA0BC,KAAF,IAAa;AACpC;AACA;AACA;AACA,QAAME,WAAW,GAAGN,UAAU,CAAE,sBAAF,CAA9B;AACA,QAAMO,YAAY,GAAGP,UAAU,CAAE,qBAAF,CAA/B;AACA,QAAMQ,cAAc,GAAGR,UAAU,CAAE,uBAAF,CAAjC;AACA,QAAMS,SAAS,GAAGjB,OAAO,CACxB,MAAM,CACL,IAAKc,WAAW,IAAI,EAApB,CADK,EAEL,IAAKC,YAAY,IAAI,EAArB,CAFK,EAGL,IAAKC,cAAc,IAAI,EAAvB,CAHK,CADkB,EAMxB,CAAEF,WAAF,EAAeC,YAAf,EAA6BC,cAA7B,CANwB,CAAzB;AAQA,SAAO,cAAC,gBAAD,eAAuBJ,KAAvB;AAA+B,IAAA,MAAM,EAAGK;AAAxC,KAAP;AACA,CAjBwB,EAkBzB,wBAlByB,CAD3B;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,cAAT,CAAyBC,UAAzB,EAAqCC,gBAArC,EAAwD;AACvD,QAAMC,QAAQ,GAAGvB,MAAM,CACtBqB,UADsB,EAEtB,CAAEG,WAAF,EAAeC,SAAf,KAA8B;AAC7B,WAAO,EACN,GAAGD,WADG;AAEN,UAAK1B,QAAQ,CAAE2B,SAAF,CAAR,GACF;AAAE,SAAEA,SAAF,GAAe1B,SAAS,CAAE0B,SAAF;AAA1B,OADE,GAEFA,SAFH;AAFM,KAAP;AAMA,GATqB,EAUtB,EAVsB,CAAvB;AAaA,SAAOrB,OAAO,CAAE,CACfkB,gBADe,EAEbT,gBAAF,IAAwB;AACvB,WAAO,cAAcV,SAAd,CAAwB;AAC9BuB,MAAAA,WAAW,CAAEZ,KAAF,EAAU;AACpB,cAAOA,KAAP;AAEA,aAAKa,OAAL,GAAe,KAAKC,aAAL,EAAf;AACA,aAAKC,UAAL,GAAkB;AACjBpB,UAAAA,oBAAoB,EACnB,KAAKA,oBAAL,CAA0BqB,IAA1B,CAAgC,IAAhC;AAFgB,SAAlB;AAKA,aAAKC,KAAL,GAAa,EAAb;AACA;;AAEDtB,MAAAA,oBAAoB,CAAEuB,UAAF,EAAe;AAClC,cAAM;AAAEC,UAAAA;AAAF,YAAa,KAAKnB,KAAxB;AACA,eAAOL,oBAAoB,CAAEwB,MAAF,EAAUD,UAAV,CAA3B;AACA;;AAEDJ,MAAAA,aAAa,GAAG;AACf,eAAO5B,MAAM,CACZuB,QADY,EAEZ,CACCW,kBADD,EAECC,YAFD,EAGCC,kBAHD,KAIK;AACJ,gBAAMC,4BAA4B,GACjCpC,UAAU,CAAEmC,kBAAF,CADX;AAEA,gBAAME,wBAAwB,GAAI,SAASD,4BAA8B,EAAzE;AACAH,UAAAA,kBAAkB,CAChB,MAAMG,4BAA8B,EADpB,CAAlB,GAEI,KAAKE,cAAL,CACHH,kBADG,EAEHE,wBAFG,CAFJ;AAMA,iBAAOJ,kBAAP;AACA,SAjBW,EAkBZ,EAlBY,CAAb;AAoBA;;AAEDK,MAAAA,cAAc,CAAEH,kBAAF,EAAsBE,wBAAtB,EAAiD;AAC9D,eAASN,UAAF,IAAkB;AACxB,gBAAMR,WAAW,GAAGjB,0BAA0B,CAC7C,KAAKO,KAAL,CAAWmB,MADkC,EAE7CD,UAF6C,CAA9C;AAIA,eAAKlB,KAAL,CAAW0B,aAAX,CAA0B;AACzB,aAAEJ,kBAAF,GACCZ,WAAW,IAAIA,WAAW,CAACiB,IAA3B,GACGjB,WAAW,CAACiB,IADf,GAEGC,SAJqB;AAKzB,aAAEJ,wBAAF,GACCd,WAAW,IAAIA,WAAW,CAACiB,IAA3B,GACGC,SADH,GAEGV;AARqB,WAA1B;AAUA,SAfD;AAgBA;;AAE8B,aAAxBW,wBAAwB,OAE9BC,aAF8B,EAG7B;AAAA,YAFD;AAAEC,UAAAA,UAAF;AAAcZ,UAAAA;AAAd,SAEC;AACD,eAAOjC,MAAM,CACZuB,QADY,EAEZ,CAAEuB,QAAF,EAAYX,YAAZ,EAA0BC,kBAA1B,KAAkD;AACjD,gBAAMZ,WAAW,GAAGhB,+BAA+B,CAClDyB,MADkD,EAElDY,UAAU,CAAET,kBAAF,CAFwC,EAGlDS,UAAU,CACR,SAAS5C,UAAU,CACnBmC,kBADmB,CAEjB,EAHM,CAHwC,CAAnD;AAUA,gBAAMW,mBAAmB,GACxBH,aAAa,CAAER,kBAAF,CADd;AAEA,gBAAMY,aAAa,GAAGD,mBAAH,aAAGA,mBAAH,uBAAGA,mBAAmB,CAAEE,KAA3C;AACA;AACP;AACA;AACA;AACA;;AACO,cACCD,aAAa,KAAKxB,WAAW,CAACyB,KAA9B,IACAF,mBAFD,EAGE;AACDD,YAAAA,QAAQ,CAAEV,kBAAF,CAAR,GACCW,mBADD;AAEA,WAND,MAMO;AACND,YAAAA,QAAQ,CAAEV,kBAAF,CAAR,GAAiC,EAChC,GAAGZ,WAD6B;AAEhC0B,cAAAA,KAAK,EAAE5C,iBAAiB,CACvB6B,YADuB,EAEvBX,WAAW,CAACiB,IAFW;AAFQ,aAAjC;AAOA;;AACD,iBAAOK,QAAP;AACA,SArCW,EAsCZ,EAtCY,CAAb;AAwCA;;AAEDK,MAAAA,MAAM,GAAG;AACR,eACC,cAAC,gBAAD,eAEK,KAAKrC,KAFV;AAGEmB,UAAAA,MAAM,EAAES;AAHV,WAIK,KAAKX,KAJV,EAKK,KAAKJ,OALV;AAMEE,UAAAA,UAAU,EAAE,KAAKA;AANnB,WADD;AAWA;;AAtH6B,KAA/B;AAwHA,GA3Hc,CAAF,CAAd;AA6HA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASuB,qBAAT,CAAgCxC,WAAhC,EAA8C;AACpD,SAAO,YAAqB;AAC3B,UAAMU,gBAAgB,GAAGX,sBAAsB,CAAEC,WAAF,CAA/C;;AAD2B,sCAAhBS,UAAgB;AAAhBA,MAAAA,UAAgB;AAAA;;AAE3B,WAAOhB,0BAA0B,CAChCe,cAAc,CAAEC,UAAF,EAAcC,gBAAd,CADkB,EAEhC,kBAFgC,CAAjC;AAIA,GAND;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAAS+B,UAAT,GAAqC;AACnD,QAAM/B,gBAAgB,GAAGP,sBAAsB,EAA/C;;AADmD,qCAAbM,UAAa;AAAbA,IAAAA,UAAa;AAAA;;AAEnD,SAAOhB,0BAA0B,CAChCe,cAAc,CAAEC,UAAF,EAAcC,gBAAd,CADkB,EAEhC,YAFgC,CAAjC;AAIA","sourcesContent":["/**\n * External dependencies\n */\nimport { isString, kebabCase, reduce, upperFirst } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport useSetting from '../use-setting';\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) =>\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />,\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\t// Some color settings have a special handling for deprecated flags in `useSetting`,\n\t\t\t// so we can't unwrap them by doing const { ... } = useSetting('color')\n\t\t\t// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.\n\t\t\tconst userPalette = useSetting( 'color.palette.custom' );\n\t\t\tconst themePalette = useSetting( 'color.palette.theme' );\n\t\t\tconst defaultPalette = useSetting( 'color.palette.default' );\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {WPComponent} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = reduce(\n\t\tcolorTypes,\n\t\t( colorObject, colorType ) => {\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\t...( isString( colorType )\n\t\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t\t: colorType ),\n\t\t\t};\n\t\t},\n\t\t{}\n\t);\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t( newState, colorContext, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\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);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\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}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\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}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"names":["kebabCase","reduce","upperFirst","useMemo","Component","compose","createHigherOrderComponent","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSetting","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","constructor","setters","createSetters","colorUtils","bind","state","colorValue","colors","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase, reduce, upperFirst } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport useSetting from '../use-setting';\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) =>\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />,\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\t// Some color settings have a special handling for deprecated flags in `useSetting`,\n\t\t\t// so we can't unwrap them by doing const { ... } = useSetting('color')\n\t\t\t// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.\n\t\t\tconst userPalette = useSetting( 'color.palette.custom' );\n\t\t\tconst themePalette = useSetting( 'color.palette.theme' );\n\t\t\tconst defaultPalette = useSetting( 'color.palette.default' );\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {WPComponent} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = reduce(\n\t\tcolorTypes,\n\t\t( colorObject, colorType ) => {\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\t...( typeof colorType === 'string'\n\t\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t\t: colorType ),\n\t\t\t};\n\t\t},\n\t\t{}\n\t);\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t( newState, colorContext, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\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);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\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}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\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}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"]}