npm - @wordpress/block-editor - Versions diffs - 7.0.1-next.5df0cd52b7.0 → 7.0.4 - Mend

@wordpress/block-editor 7.0.1-next.5df0cd52b7.0 → 7.0.4

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

Files changed (905) hide show

package/build/components/block-tools/insertion-point.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/insertion-point.js"],"names":["InsertionPointOpenRef","InsertionPointPopover","__unstablePopoverSlot","__unstableContentRef","selectBlock","blockEditorStore","openRef","ref","orientation","previousClientId","nextClientId","rootClientId","isInserterShown","select","getBlockOrder","getBlockListSettings","getBlockInsertionPoint","isBlockBeingDragged","getPreviousBlockClientId","getNextBlockClientId","insertionPoint","order","length","_previousClientId","index","_nextClientId","__unstableWithInserter","previousElement","nextElement","style","previousRect","getBoundingClientRect","nextRect","width","offsetWidth","height","top","bottom","left","right","offsetHeight","getAnchorRect","ownerDocument","popoverScrollRef","className","onClick","event","target","current","onFocus","showInsertionPointInserter","isOpen","InsertionPoint","children","isVisible","isBlockInsertionPointVisible"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseCallback,\n\tuseRef,\n\tuseMemo,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport { Popover } from '@wordpress/components';\nimport { isRTL } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport { usePopoverScroll } from './use-popover-scroll';\n\nexport const InsertionPointOpenRef = createContext();\n\nfunction InsertionPointPopover( {\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n} ) {\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst openRef = useContext( InsertionPointOpenRef );\n\tconst ref = useRef();\n\tconst {\n\t\torientation,\n\t\tpreviousClientId,\n\t\tnextClientId,\n\t\trootClientId,\n\t\tisInserterShown,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetBlockOrder,\n\t\t\tgetBlockListSettings,\n\t\t\tgetBlockInsertionPoint,\n\t\t\tisBlockBeingDragged,\n\t\t\tgetPreviousBlockClientId,\n\t\t\tgetNextBlockClientId,\n\t\t} = select( blockEditorStore );\n\t\tconst insertionPoint = getBlockInsertionPoint();\n\t\tconst order = getBlockOrder( insertionPoint.rootClientId );\n\n\t\tif ( ! order.length ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tlet _previousClientId = order[ insertionPoint.index - 1 ];\n\t\tlet _nextClientId = order[ insertionPoint.index ];\n\n\t\twhile ( isBlockBeingDragged( _previousClientId ) ) {\n\t\t\t_previousClientId = getPreviousBlockClientId( _previousClientId );\n\t\t}\n\n\t\twhile ( isBlockBeingDragged( _nextClientId ) ) {\n\t\t\t_nextClientId = getNextBlockClientId( _nextClientId );\n\t\t}\n\n\t\treturn {\n\t\t\tpreviousClientId: _previousClientId,\n\t\t\tnextClientId: _nextClientId,\n\t\t\torientation:\n\t\t\t\tgetBlockListSettings( insertionPoint.rootClientId )\n\t\t\t\t\t?.orientation \|\| 'vertical',\n\t\t\trootClientId: insertionPoint.rootClientId,\n\t\t\tisInserterShown: insertionPoint?.__unstableWithInserter,\n\t\t};\n\t}, [] );\n\tconst previousElement = useBlockElement( previousClientId );\n\tconst nextElement = useBlockElement( nextClientId );\n\n\tconst style = useMemo( () => {\n\t\tif ( ! previousElement && ! nextElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst previousRect = previousElement\n\t\t\t? previousElement.getBoundingClientRect()\n\t\t\t: null;\n\t\tconst nextRect = nextElement\n\t\t\t? nextElement.getBoundingClientRect()\n\t\t\t: null;\n\n\t\tif ( orientation === 'vertical' ) {\n\t\t\treturn {\n\t\t\t\twidth: previousElement\n\t\t\t\t\t? previousElement.offsetWidth\n\t\t\t\t\t: nextElement.offsetWidth,\n\t\t\t\theight:\n\t\t\t\t\tnextRect && previousRect\n\t\t\t\t\t\t? nextRect.top - previousRect.bottom\n\t\t\t\t\t\t: 0,\n\t\t\t};\n\t\t}\n\n\t\tlet width = 0;\n\t\tif ( previousRect && nextRect ) {\n\t\t\twidth = isRTL()\n\t\t\t\t? previousRect.left - nextRect.right\n\t\t\t\t: nextRect.left - previousRect.right;\n\t\t}\n\n\t\treturn {\n\t\t\twidth,\n\t\t\theight: previousElement\n\t\t\t\t? previousElement.offsetHeight\n\t\t\t\t: nextElement.offsetHeight,\n\t\t};\n\t}, [ previousElement, nextElement ] );\n\n\tconst getAnchorRect = useCallback( () => {\n\t\tif ( ! previousElement && ! nextElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst { ownerDocument } = previousElement \|\| nextElement;\n\n\t\tconst previousRect = previousElement\n\t\t\t? previousElement.getBoundingClientRect()\n\t\t\t: null;\n\t\tconst nextRect = nextElement\n\t\t\t? nextElement.getBoundingClientRect()\n\t\t\t: null;\n\n\t\tif ( orientation === 'vertical' ) {\n\t\t\tif ( isRTL() ) {\n\t\t\t\treturn {\n\t\t\t\t\ttop: previousRect ? previousRect.bottom : nextRect.top,\n\t\t\t\t\tleft: previousRect ? previousRect.right : nextRect.right,\n\t\t\t\t\tright: previousRect ? previousRect.left : nextRect.left,\n\t\t\t\t\tbottom: nextRect ? nextRect.top : previousRect.bottom,\n\t\t\t\t\townerDocument,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttop: previousRect ? previousRect.bottom : nextRect.top,\n\t\t\t\tleft: previousRect ? previousRect.left : nextRect.left,\n\t\t\t\tright: previousRect ? previousRect.right : nextRect.right,\n\t\t\t\tbottom: nextRect ? nextRect.top : previousRect.bottom,\n\t\t\t\townerDocument,\n\t\t\t};\n\t\t}\n\n\t\tif ( isRTL() ) {\n\t\t\treturn {\n\t\t\t\ttop: previousRect ? previousRect.top : nextRect.top,\n\t\t\t\tleft: previousRect ? previousRect.left : nextRect.right,\n\t\t\t\tright: nextRect ? nextRect.right : previousRect.left,\n\t\t\t\tbottom: previousRect ? previousRect.bottom : nextRect.bottom,\n\t\t\t\townerDocument,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\ttop: previousRect ? previousRect.top : nextRect.top,\n\t\t\tleft: previousRect ? previousRect.right : nextRect.left,\n\t\t\tright: nextRect ? nextRect.left : previousRect.right,\n\t\t\tbottom: previousRect ? previousRect.bottom : nextRect.bottom,\n\t\t\townerDocument,\n\t\t};\n\t}, [ previousElement, nextElement ] );\n\n\tconst popoverScrollRef = usePopoverScroll( __unstableContentRef );\n\n\tconst className = classnames(\n\t\t'block-editor-block-list__insertion-point',\n\t\t'is-' + orientation\n\t);\n\n\tfunction onClick( event ) {\n\t\tif ( event.target === ref.current && nextClientId ) {\n\t\t\tselectBlock( nextClientId, -1 );\n\t\t}\n\t}\n\n\tfunction onFocus( event ) {\n\t\t// Only handle click on the wrapper specifically, and not an event\n\t\t// bubbled from the inserter itself.\n\t\tif ( event.target !== ref.current ) {\n\t\t\topenRef.current = true;\n\t\t}\n\t}\n\n\t// Only show the in-between inserter between blocks, so when there's a\n\t// previous and a next element.\n\tconst showInsertionPointInserter =\n\t\tpreviousElement && nextElement && isInserterShown;\n\n\t/ eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events /\n\t// While ideally it would be enough to capture the\n\t// bubbling focus event from the Inserter, due to the\n\t// characteristics of click focusing of `button`s in\n\t// Firefox and Safari, it is not reliable.\n\t//\n\t// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\treturn (\n\t\t<Popover\n\t\t\tref={ popoverScrollRef }\n\t\t\tnoArrow\n\t\t\tanimate={ false }\n\t\t\tgetAnchorRect={ getAnchorRect }\n\t\t\tfocusOnMount={ false }\n\t\t\tclassName=\"block-editor-block-list__insertion-point-popover\"\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot \|\| null }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ ref }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tonFocus={ onFocus }\n\t\t\t\tclassName={ classnames( className, {\n\t\t\t\t\t'is-with-inserter': showInsertionPointInserter,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<div className=\"block-editor-block-list__insertion-point-indicator\" />\n\t\t\t\t{ showInsertionPointInserter && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'block-editor-block-list__insertion-point-inserter'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Inserter\n\t\t\t\t\t\t\tposition=\"bottom center\"\n\t\t\t\t\t\t\tclientId={ nextClientId }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\t__experimentalIsQuick\n\t\t\t\t\t\t\tonToggle={ ( isOpen ) => {\n\t\t\t\t\t\t\t\topenRef.current = isOpen;\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectOrClose={ () => {\n\t\t\t\t\t\t\t\topenRef.current = false;\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</Popover>\n\t);\n\t/ eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n}\n\nexport default function InsertionPoint( {\n\tchildren,\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n} ) {\n\tconst isVisible = useSelect( ( select ) => {\n\t\treturn select( blockEditorStore ).isBlockInsertionPointVisible();\n\t}, [] );\n\n\treturn (\n\t\t<InsertionPointOpenRef.Provider value={ useRef( false ) }>\n\t\t\t{ isVisible && (\n\t\t\t\t<InsertionPointPopover\n\t\t\t\t\t__unstablePopoverSlot={ __unstablePopoverSlot }\n\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ children }\n\t\t</InsertionPointOpenRef.Provider>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/insertion-point.js"],"names":["InsertionPointOpenRef","InsertionPointPopover","__unstablePopoverSlot","__unstableContentRef","selectBlock","blockEditorStore","openRef","ref","orientation","previousClientId","nextClientId","rootClientId","isInserterShown","select","getBlockOrder","getBlockListSettings","getBlockInsertionPoint","isBlockBeingDragged","getPreviousBlockClientId","getNextBlockClientId","insertionPoint","order","length","_previousClientId","index","_nextClientId","__unstableWithInserter","previousElement","nextElement","isVertical","style","previousRect","getBoundingClientRect","nextRect","width","offsetWidth","height","top","bottom","left","right","offsetHeight","getAnchorRect","ownerDocument","popoverScrollRef","disableMotion","className","onClick","event","target","current","onFocus","showInsertionPointInserter","horizontalLine","start","x","rest","hover","verticalLine","y","lineVariants","opacity","borderRadius","transition","delay","inserterVariants","scale","isOpen","InsertionPoint","children","isVisible","isBlockInsertionPointVisible"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseCallback,\n\tuseRef,\n\tuseMemo,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport { Popover, __unstableMotion as motion } from '@wordpress/components';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport { usePopoverScroll } from './use-popover-scroll';\n\nexport const InsertionPointOpenRef = createContext();\n\nfunction InsertionPointPopover( {\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n} ) {\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst openRef = useContext( InsertionPointOpenRef );\n\tconst ref = useRef();\n\tconst {\n\t\torientation,\n\t\tpreviousClientId,\n\t\tnextClientId,\n\t\trootClientId,\n\t\tisInserterShown,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetBlockOrder,\n\t\t\tgetBlockListSettings,\n\t\t\tgetBlockInsertionPoint,\n\t\t\tisBlockBeingDragged,\n\t\t\tgetPreviousBlockClientId,\n\t\t\tgetNextBlockClientId,\n\t\t} = select( blockEditorStore );\n\t\tconst insertionPoint = getBlockInsertionPoint();\n\t\tconst order = getBlockOrder( insertionPoint.rootClientId );\n\n\t\tif ( ! order.length ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tlet _previousClientId = order[ insertionPoint.index - 1 ];\n\t\tlet _nextClientId = order[ insertionPoint.index ];\n\n\t\twhile ( isBlockBeingDragged( _previousClientId ) ) {\n\t\t\t_previousClientId = getPreviousBlockClientId( _previousClientId );\n\t\t}\n\n\t\twhile ( isBlockBeingDragged( _nextClientId ) ) {\n\t\t\t_nextClientId = getNextBlockClientId( _nextClientId );\n\t\t}\n\n\t\treturn {\n\t\t\tpreviousClientId: _previousClientId,\n\t\t\tnextClientId: _nextClientId,\n\t\t\torientation:\n\t\t\t\tgetBlockListSettings( insertionPoint.rootClientId )\n\t\t\t\t\t?.orientation \|\| 'vertical',\n\t\t\trootClientId: insertionPoint.rootClientId,\n\t\t\tisInserterShown: insertionPoint?.__unstableWithInserter,\n\t\t};\n\t}, [] );\n\tconst previousElement = useBlockElement( previousClientId );\n\tconst nextElement = useBlockElement( nextClientId );\n\tconst isVertical = orientation === 'vertical';\n\tconst style = useMemo( () => {\n\t\tif ( ! previousElement && ! nextElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst previousRect = previousElement\n\t\t\t? previousElement.getBoundingClientRect()\n\t\t\t: null;\n\t\tconst nextRect = nextElement\n\t\t\t? nextElement.getBoundingClientRect()\n\t\t\t: null;\n\n\t\tif ( isVertical ) {\n\t\t\treturn {\n\t\t\t\twidth: previousElement\n\t\t\t\t\t? previousElement.offsetWidth\n\t\t\t\t\t: nextElement.offsetWidth,\n\t\t\t\theight:\n\t\t\t\t\tnextRect && previousRect\n\t\t\t\t\t\t? nextRect.top - previousRect.bottom\n\t\t\t\t\t\t: 0,\n\t\t\t};\n\t\t}\n\n\t\tlet width = 0;\n\t\tif ( previousRect && nextRect ) {\n\t\t\twidth = isRTL()\n\t\t\t\t? previousRect.left - nextRect.right\n\t\t\t\t: nextRect.left - previousRect.right;\n\t\t}\n\n\t\treturn {\n\t\t\twidth,\n\t\t\theight: previousElement\n\t\t\t\t? previousElement.offsetHeight\n\t\t\t\t: nextElement.offsetHeight,\n\t\t};\n\t}, [ previousElement, nextElement ] );\n\n\tconst getAnchorRect = useCallback( () => {\n\t\tif ( ! previousElement && ! nextElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst { ownerDocument } = previousElement \|\| nextElement;\n\n\t\tconst previousRect = previousElement\n\t\t\t? previousElement.getBoundingClientRect()\n\t\t\t: null;\n\t\tconst nextRect = nextElement\n\t\t\t? nextElement.getBoundingClientRect()\n\t\t\t: null;\n\n\t\tif ( isVertical ) {\n\t\t\tif ( isRTL() ) {\n\t\t\t\treturn {\n\t\t\t\t\ttop: previousRect ? previousRect.bottom : nextRect.top,\n\t\t\t\t\tleft: previousRect ? previousRect.right : nextRect.right,\n\t\t\t\t\tright: previousRect ? previousRect.left : nextRect.left,\n\t\t\t\t\tbottom: nextRect ? nextRect.top : previousRect.bottom,\n\t\t\t\t\townerDocument,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttop: previousRect ? previousRect.bottom : nextRect.top,\n\t\t\t\tleft: previousRect ? previousRect.left : nextRect.left,\n\t\t\t\tright: previousRect ? previousRect.right : nextRect.right,\n\t\t\t\tbottom: nextRect ? nextRect.top : previousRect.bottom,\n\t\t\t\townerDocument,\n\t\t\t};\n\t\t}\n\n\t\tif ( isRTL() ) {\n\t\t\treturn {\n\t\t\t\ttop: previousRect ? previousRect.top : nextRect.top,\n\t\t\t\tleft: previousRect ? previousRect.left : nextRect.right,\n\t\t\t\tright: nextRect ? nextRect.right : previousRect.left,\n\t\t\t\tbottom: previousRect ? previousRect.bottom : nextRect.bottom,\n\t\t\t\townerDocument,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\ttop: previousRect ? previousRect.top : nextRect.top,\n\t\t\tleft: previousRect ? previousRect.right : nextRect.left,\n\t\t\tright: nextRect ? nextRect.left : previousRect.right,\n\t\t\tbottom: previousRect ? previousRect.bottom : nextRect.bottom,\n\t\t\townerDocument,\n\t\t};\n\t}, [ previousElement, nextElement ] );\n\n\tconst popoverScrollRef = usePopoverScroll( __unstableContentRef );\n\tconst disableMotion = useReducedMotion();\n\n\tconst className = classnames(\n\t\t'block-editor-block-list__insertion-point',\n\t\t'is-' + orientation\n\t);\n\n\tfunction onClick( event ) {\n\t\tif ( event.target === ref.current && nextClientId ) {\n\t\t\tselectBlock( nextClientId, -1 );\n\t\t}\n\t}\n\n\tfunction onFocus( event ) {\n\t\t// Only handle click on the wrapper specifically, and not an event\n\t\t// bubbled from the inserter itself.\n\t\tif ( event.target !== ref.current ) {\n\t\t\topenRef.current = true;\n\t\t}\n\t}\n\n\t// Only show the in-between inserter between blocks, so when there's a\n\t// previous and a next element.\n\tconst showInsertionPointInserter =\n\t\tpreviousElement && nextElement && isInserterShown;\n\n\t// Define animation variants for the line element.\n\tconst horizontalLine = {\n\t\tstart: {\n\t\t\twidth: 0,\n\t\t\ttop: '50%',\n\t\t\tbottom: '50%',\n\t\t\tx: 0,\n\t\t},\n\t\trest: {\n\t\t\twidth: 4,\n\t\t\ttop: 0,\n\t\t\tbottom: 0,\n\t\t\tx: -2,\n\t\t},\n\t\thover: {\n\t\t\twidth: 4,\n\t\t\ttop: 0,\n\t\t\tbottom: 0,\n\t\t\tx: -2,\n\t\t},\n\t};\n\tconst verticalLine = {\n\t\tstart: {\n\t\t\theight: 0,\n\t\t\tleft: '50%',\n\t\t\tright: '50%',\n\t\t\ty: 0,\n\t\t},\n\t\trest: {\n\t\t\theight: 4,\n\t\t\tleft: 0,\n\t\t\tright: 0,\n\t\t\ty: -2,\n\t\t},\n\t\thover: {\n\t\t\theight: 4,\n\t\t\tleft: 0,\n\t\t\tright: 0,\n\t\t\ty: -2,\n\t\t},\n\t};\n\tconst lineVariants = {\n\t\t// Initial position starts from the center and invisible.\n\t\tstart: {\n\t\t\t...( ! isVertical ? horizontalLine.start : verticalLine.start ),\n\t\t\topacity: 0,\n\t\t},\n\t\t// The line expands to fill the container. If the inserter is visible it\n\t\t// is delayed so it appears orchestrated.\n\t\trest: {\n\t\t\t...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),\n\t\t\topacity: 1,\n\t\t\tborderRadius: '2px',\n\t\t\ttransition: { delay: showInsertionPointInserter ? 0.4 : 0 },\n\t\t},\n\t\thover: {\n\t\t\t...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),\n\t\t\topacity: 1,\n\t\t\tborderRadius: '2px',\n\t\t\ttransition: { delay: 0.4 },\n\t\t},\n\t};\n\n\tconst inserterVariants = {\n\t\tstart: {\n\t\t\tscale: disableMotion ? 1 : 0,\n\t\t},\n\t\trest: {\n\t\t\tscale: 1,\n\t\t\ttransition: { delay: 0.2 },\n\t\t},\n\t};\n\n\t/ eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events /\n\t// While ideally it would be enough to capture the\n\t// bubbling focus event from the Inserter, due to the\n\t// characteristics of click focusing of `button`s in\n\t// Firefox and Safari, it is not reliable.\n\t//\n\t// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\treturn (\n\t\t<Popover\n\t\t\tref={ popoverScrollRef }\n\t\t\tnoArrow\n\t\t\tanimate={ false }\n\t\t\tgetAnchorRect={ getAnchorRect }\n\t\t\tfocusOnMount={ false }\n\t\t\tclassName=\"block-editor-block-list__insertion-point-popover\"\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot \|\| null }\n\t\t\t// Forces a remount of the popover when its position changes\n\t\t\t// This makes sure the popover doesn't animate from its previous position.\n\t\t\tkey={ nextClientId + '--' + rootClientId }\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tlayout={ ! disableMotion }\n\t\t\t\tinitial={ disableMotion ? 'rest' : 'start' }\n\t\t\t\tanimate=\"rest\"\n\t\t\t\twhileHover=\"hover\"\n\t\t\t\twhileTap=\"pressed\"\n\t\t\t\texit=\"start\"\n\t\t\t\tref={ ref }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tonFocus={ onFocus }\n\t\t\t\tclassName={ classnames( className, {\n\t\t\t\t\t'is-with-inserter': showInsertionPointInserter,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ lineVariants }\n\t\t\t\t\tclassName=\"block-editor-block-list__insertion-point-indicator\"\n\t\t\t\t/>\n\t\t\t\t{ showInsertionPointInserter && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tvariants={ inserterVariants }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'block-editor-block-list__insertion-point-inserter'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Inserter\n\t\t\t\t\t\t\tposition=\"bottom center\"\n\t\t\t\t\t\t\tclientId={ nextClientId }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\t__experimentalIsQuick\n\t\t\t\t\t\t\tonToggle={ ( isOpen ) => {\n\t\t\t\t\t\t\t\topenRef.current = isOpen;\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectOrClose={ () => {\n\t\t\t\t\t\t\t\topenRef.current = false;\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</motion.div>\n\t\t</Popover>\n\t);\n\t/ eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n}\n\nexport default function InsertionPoint( {\n\tchildren,\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n} ) {\n\tconst isVisible = useSelect( ( select ) => {\n\t\treturn select( blockEditorStore ).isBlockInsertionPointVisible();\n\t}, [] );\n\n\treturn (\n\t\t<InsertionPointOpenRef.Provider value={ useRef( false ) }>\n\t\t\t{ isVisible && (\n\t\t\t\t<InsertionPointPopover\n\t\t\t\t\t__unstablePopoverSlot={ __unstablePopoverSlot }\n\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ children }\n\t\t</InsertionPointOpenRef.Provider>\n\t);\n}\n"]}

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

@@ -34,7 +34,8 @@ function BlockTypesList({
   name,
   items,
   onSelect,
-  listProps
+  listProps,
+  initialNumToRender = 3
 }) {
   const [numberOfColumns, setNumberOfColumns] = (0, _element.useState)(MIN_COL_NUM);
   const [itemWidth, setItemWidth] = (0, _element.useState)();
@@ -88,7 +89,7 @@ function BlockTypesList({
     keyboardShouldPersistTaps: "always",
     numColumns: numberOfColumns,
     data: items,
-    initialNumToRender: 3,
+    initialNumToRender: initialNumToRender,
     ItemSeparatorComponent: () => (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
       accessible: false
     }, (0, _element.createElement)(_reactNative.View, {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"names":["MIN_COL_NUM","BlockTypesList","name","items","onSelect","listProps","numberOfColumns","setNumberOfColumns","itemWidth","setItemWidth","maxWidth","setMaxWidth","Dimensions","addEventListener","onLayout","removeEventListener","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","InserterButton","Styles","modalItem","width","modalIconWrapper","columnStyle","styles","sumLeftRightPadding","bottomSheetWidth","BottomSheet","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","StyleSheet","flatten","item","id","paddingBottom","safeAreaBottomInset"],"mappings":";;;;;;;;;AAcA;;;;AAXA;;AAYA;;AAKA;;AApBA;AACA;AACA;;AASA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,WAAW,GAAG,CAApB;;AAEe,SAASC,cAAT,CAAyB;~~AAAEC~~,EAAAA,~~IAAF~~;~~AAAQC~~,EAAAA,~~KAAR~~;~~AAAeC~~,EAAAA,~~QAAf~~;~~AAAyBC~~,EAAAA;~~AAAzB~~,CAAzB,~~EAAgE~~;~~AAC9E~~,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0C,~~uBAAUP~~,WAAV,CAAhD;AACA,QAAM,~~CAAEQ~~,SAAF,EAAaC,YAAb,IAA8B,wBAApC;AACA,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,wBAAlC;AAEA,0BAAW,MAAM;AAChBC,4BAAWC,gBAAX,CAA6B,QAA7B,EAAuCC,QAAvC;;AACAA,IAAAA,QAAQ;AACR,WAAO,MAAM;AACZF,8BAAWG,mBAAX,CAAgC,QAAhC,EAA0CD,QAA1C;AACA,KAFD;AAGA,GAND,EAMG,EANH;;AAQA,WAASE,kBAAT,GAA8B;AAC7B,UAAM;AACLC,MAAAA,WAAW,EAAEC,eADR;AAELC,MAAAA,YAAY,EAAEC;AAFT,QAGFC,2BAAeC,MAAf,CAAsBC,SAH1B;AAIA,UAAM;AAAEC,MAAAA;AAAF,QAAYH,2BAAeC,MAAf,CAAsBG,gBAAxC;AACA,WAAOD,KAAK,GAAGN,eAAR,GAA0BE,gBAAjC;AACA;;AAED,WAASN,QAAT,GAAoB;AACnB,UAAMY,WAAW,GAAGC,eAAQ,0BAAR,CAApB;AACA,UAAMC,mBAAmB,GACxBF,WAAW,CAACT,WAAZ,GAA0BS,WAAW,CAACP,YADvC;;AAGA,UAAMU,gBAAgB,GAAGC,wBAAYC,QAAZ,EAAzB;;AACA,UAAMC,mBAAmB,GAAGH,gBAAgB,GAAGD,mBAA/C;AACA,UAAMK,cAAc,GAAGjB,kBAAkB,EAAzC;AAEA,UAAMkB,iBAAiB,GAAGC,IAAI,CAACC,KAAL,CACzBJ,mBAAmB,GAAGC,cADG,CAA1B;AAIA,UAAMI,UAAU,GAAGF,IAAI,CAACG,GAAL,~~CAAUtC~~,WAAV,~~EAAuBkC~~,iBAAvB,CAAnB;AAEA3B,IAAAA,kBAAkB,CAAE8B,UAAF,CAAlB;AACA1B,IAAAA,WAAW,CAAEqB,mBAAmB,GAAGK,UAAxB,CAAX;;AAEA,QAAKH,iBAAiB,~~GAAGlC~~,WAAzB,EAAuC;AACtC,~~YAAMuC~~,gBAAgB,GACrB,CAAEV,gBAAgB,GAAG,IAAID,mBAAzB,~~IAAiD5B~~,WADlD;~~AAEAS~~,MAAAA,YAAY,CAAE8B,gBAAF,CAAZ;AACA;AACD;;AAED,QAAMC,qBAAqB,GAAGC,wBAAWC,OAAX,~~CAC7BrC~~,SAAS,~~CAACmC~~,qBADmB,CAA9B;;AAIA,SACC,4BAAC,qBAAD;AACC,IAAA,QAAQ,EAAG1B,QADZ;AAEC,IAAA,GAAG,EAAI,~~cAAcZ~~,IAAM,~~IAAII~~,eAAiB,EAFjD,CAEqD;AAFrD;AAGC,IAAA,MAAM,EAAI,~~cAAcJ~~,IAAM,EAH/B;AAIC,IAAA,yBAAyB,EAAC,QAJ3B;AAKC,IAAA,UAAU,~~EAAGI~~,eALd;AAMC,IAAA,IAAI,~~EAAGH~~,KANR;AAOC,IAAA,kBAAkB,~~EAAG~~,~~CAPtB~~;AAQC,IAAA,sBAAsB,EAAG,MACxB,4BAAC,qCAAD;AAA0B,MAAA,UAAU,EAAG;AAAvC,OACC,4BAAC,iBAAD;AACC,MAAA,KAAK,~~EAAGwB~~,eAAQ,iCAAR;AADT,MADD,CATF;AAeC,IAAA,YAAY,EAAKgB,IAAF,IAAYA,IAAI,CAACC,EAfjC;AAgBC,IAAA,UAAU,EAAG,CAAE;AAAED,MAAAA;AAAF,KAAF,KACZ,4BAAC,0BAAD;AAEEA,MAAAA,IAFF;AAGEnC,MAAAA,SAHF;AAIEE,MAAAA,QAJF;~~AAKEN~~,MAAAA;AALF;AAjBF,KA0BMC,SA1BN;AA2BC,IAAA,qBAAqB,EAAG,EACvB,~~GAAGmC~~,qBADoB;AAEvBK,MAAAA,aAAa,EAAEV,IAAI,CAACG,GAAL,~~CACdjC~~,SAAS,~~CAACyC~~,mBADI,EAEdN,qBAAqB,CAACK,aAFR;AAFQ;AA3BzB,KADD;AAqCA","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( { ~~name,~~ ~~items, onSelect, listProps~~ } ) {\n\tconst [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );\n\tconst [ itemWidth, setItemWidth ] = useState();\n\tconst [ maxWidth, setMaxWidth ] = useState();\n\n\tuseEffect( () => {\n\t\tDimensions.addEventListener( 'change', onLayout );\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onLayout );\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst {\n\t\t\tpaddingLeft: itemPaddingLeft,\n\t\t\tpaddingRight: itemPaddingRight,\n\t\t} = InserterButton.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={ 3 }\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"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/block-types-list/index.native.js"],"names":["MIN_COL_NUM","BlockTypesList","name","items","onSelect","listProps","initialNumToRender","numberOfColumns","setNumberOfColumns","itemWidth","setItemWidth","maxWidth","setMaxWidth","Dimensions","addEventListener","onLayout","removeEventListener","calculateItemWidth","paddingLeft","itemPaddingLeft","paddingRight","itemPaddingRight","InserterButton","Styles","modalItem","width","modalIconWrapper","columnStyle","styles","sumLeftRightPadding","bottomSheetWidth","BottomSheet","getWidth","containerTotalWidth","itemTotalWidth","columnsFitToWidth","Math","floor","numColumns","max","updatedItemWidth","contentContainerStyle","StyleSheet","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\tDimensions.addEventListener( 'change', onLayout );\n\t\tonLayout();\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onLayout );\n\t\t};\n\t}, [] );\n\n\tfunction calculateItemWidth() {\n\t\tconst {\n\t\t\tpaddingLeft: itemPaddingLeft,\n\t\t\tpaddingRight: itemPaddingRight,\n\t\t} = InserterButton.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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/index.js"],"names":["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":";;;;;;;;;AAQA;;AALA;;AAMA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AASA;AACA;AACA;AAYA,MAAMA,cAAc,GAAG;AACtBC,EAAAA,OAAO,EAAE,IADa;AAEtBC,EAAAA,QAAQ,EAAE,IAFY;AAGtBC,EAAAA,UAAU,EAAE,IAHU;AAItBC,EAAAA,WAAW,EAAE;AAJS,CAAvB;AAMA,MAAMC,uBAAuB,GAAG,CAAhC;AACA,MAAMC,wBAAwB,GAAG;AAChCC,EAAAA,EAAE,EAAE,GAD4B;AAEhCC,EAAAA,EAAE,EAAE,EAF4B;AAGhCC,EAAAA,GAAG,EAAE;AAH2B,CAAjC;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,mBAAT,CAA8B;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAA9B,EAAqD;AACnE,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBACjC,CAAE,6BAAkBF,MAAlB,CAAF,IAAgC,CAAE,2BAAgBA,MAAhB,CADD,CAAlC;AAIA,QAAMG,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd;AADpB,GAAhB,CAAd;~~AAGA~~,QAAMC,IAAI,GAAG,uBAAYL,MAAZ,CAAb;AACA,QAAMM,UAAU,GAAGH,KAAK,IAAIA,KAAK,CAACI,IAAN,CAAcC,IAAF,IAAYA,IAAI,CAACC,KAAL,KAAeJ,IAAvC,CAA5B;AACA,QAAMK,IAAI,GAAG,CAAAJ,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEI,IAAZ,KAAoB,CAAjC;AAEA,QAAM,CAAEC,QAAF,IAAe,yCAAW,wBAAaX,MAAb,CAAX,CAArB;;AAEA,QAAMY,YAAY,GAAG,MAAMV,WAAW,CAAE,CAAED,QAAJ,CAAtC;;AAEA,QAAMY,kBAAkB,GAAKC,IAAF,IAAY;AACtCf,IAAAA,QAAQ,CAAEe,IAAI,KAAKC,SAAT,GAAsB,GAAGD,IAAM,GAAGT,IAAM,EAAxC,GAA4CU,SAA9C,CAAR;AACA,GAFD;;AAIA,SACC;AAAU,IAAA,SAAS,EAAC;AAApB,KACC,4CAAU,cAAI,QAAJ,CAAV,CADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGd,QAAQ,GACT,qDACC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,gDADX;AAEC,IAAA,MAAM,EAAGD,MAFV;AAGC,IAAA,GAAG,EAAGP,uBAHP;AAIC,IAAA,QAAQ,EAAGM,QAJZ;AAKC,IAAA,IAAI,EAAGM,IALR;AAMC,IAAA,KAAK,EAAGF;AANT,IADD,EASC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,iDADX;AAEC,IAAA,KAAK,EAAGQ,QAFT;AAGC,IAAA,GAAG,EAAGlB,uBAHP;AAIC,IAAA,GAAG,EAAGC,wBAAwB,CAAEW,IAAF,CAJ/B;AAKC,IAAA,eAAe,EAAG,CALnB;AAMC,IAAA,cAAc,EAAG,KANlB;AAOC,IAAA,QAAQ,EAAGQ,kBAPZ;AAQC,IAAA,IAAI,EAAGH;AARR,IATD,CADS,GAsBT,4BAAC,sBAAD;AACC,IAAA,GAAG,EAAGjB,uBADP;AAEC,IAAA,QAAQ,EAAGM,QAFZ;AAGC,IAAA,MAAM,EAAGC,MAAM,IAAIZ,cAHpB;AAIC,IAAA,KAAK,EAAGe;AAJT,IAvBF,EA8BC,4BAAC,qBAAD;AAAc,IAAA,OAAO,EAAGS,YAAxB;AAAuC,IAAA,QAAQ,EAAGX;AAAlD,IA9BD,CAFD,CADD;AAqCA","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tRangeControl,\n\t__experimentalParseUnit as parseUnit,\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\tconst unit = getAllUnit( values );\n\tconst unitConfig = units && units.find( ( item ) => item.value === unit );\n\tconst step = unitConfig?.step \|\| 1;\n\n\tconst [ allValue ] = parseUnit( getAllValue( values ) );\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\tunit={ unit }\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"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/index.js"],"names":["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":";;;;;;;;;AAQA;;AALA;;AAMA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AASA;AACA;AACA;AAYA,MAAMA,cAAc,GAAG;AACtBC,EAAAA,OAAO,EAAE,IADa;AAEtBC,EAAAA,QAAQ,EAAE,IAFY;AAGtBC,EAAAA,UAAU,EAAE,IAHU;AAItBC,EAAAA,WAAW,EAAE;AAJS,CAAvB;AAMA,MAAMC,uBAAuB,GAAG,CAAhC;AACA,MAAMC,wBAAwB,GAAG;AAChCC,EAAAA,EAAE,EAAE,GAD4B;AAEhCC,EAAAA,EAAE,EAAE,EAF4B;AAGhCC,EAAAA,GAAG,EAAE;AAH2B,CAAjC;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,mBAAT,CAA8B;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAA9B,EAAqD;AACnE,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBACjC,CAAE,6BAAkBF,MAAlB,CAAF,IAAgC,CAAE,2BAAgBA,MAAhB,CADD,CAAlC;AAIA,QAAMG,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd;AADpB,GAAhB,CAAd;AAIA,QAAMC,IAAI,GAAG,uBAAYL,MAAZ,CAAb;AACA,QAAMM,UAAU,GAAGH,KAAK,IAAIA,KAAK,CAACI,IAAN,CAAcC,IAAF,IAAYA,IAAI,CAACC,KAAL,KAAeJ,IAAvC,CAA5B;AACA,QAAMK,IAAI,GAAG,CAAAJ,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEI,IAAZ,KAAoB,CAAjC;AAEA,QAAM,CAAEC,QAAF,IAAe,yCAAW,wBAAaX,MAAb,CAAX,CAArB;;AAEA,QAAMY,YAAY,GAAG,MAAMV,WAAW,CAAE,CAAED,QAAJ,CAAtC;;AAEA,QAAMY,kBAAkB,GAAKC,IAAF,IAAY;AACtCf,IAAAA,QAAQ,CAAEe,IAAI,KAAKC,SAAT,GAAsB,GAAGD,IAAM,GAAGT,IAAM,EAAxC,GAA4CU,SAA9C,CAAR;AACA,GAFD;;AAIA,SACC;AAAU,IAAA,SAAS,EAAC;AAApB,KACC,4CAAU,cAAI,QAAJ,CAAV,CADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGd,QAAQ,GACT,qDACC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,gDADX;AAEC,IAAA,MAAM,EAAGD,MAFV;AAGC,IAAA,GAAG,EAAGP,uBAHP;AAIC,IAAA,QAAQ,EAAGM,QAJZ;AAKC,IAAA,IAAI,EAAGM,IALR;AAMC,IAAA,KAAK,EAAGF;AANT,IADD,EASC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,iDADX;AAEC,IAAA,KAAK,EAAGQ,QAFT;AAGC,IAAA,GAAG,EAAGlB,uBAHP;AAIC,IAAA,GAAG,EAAGC,wBAAwB,CAAEW,IAAF,CAJ/B;AAKC,IAAA,eAAe,EAAG,CALnB;AAMC,IAAA,cAAc,EAAG,KANlB;AAOC,IAAA,QAAQ,EAAGQ,kBAPZ;AAQC,IAAA,IAAI,EAAGH;AARR,IATD,CADS,GAsBT,4BAAC,sBAAD;AACC,IAAA,GAAG,EAAGjB,uBADP;AAEC,IAAA,QAAQ,EAAGM,QAFZ;AAGC,IAAA,MAAM,EAAGC,MAAM,IAAIZ,cAHpB;AAIC,IAAA,KAAK,EAAGe;AAJT,IAvBF,EA8BC,4BAAC,qBAAD;AAAc,IAAA,OAAO,EAAGS,YAAxB;AAAuC,IAAA,QAAQ,EAAGX;AAAlD,IA9BD,CAFD,CADD;AAqCA","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tRangeControl,\n\t__experimentalParseUnit as parseUnit,\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 ] = parseUnit( getAllValue( values ) );\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\tunit={ unit }\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"]}

package/build/components/border-radius-control/utils.js CHANGED Viewed

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.mode = mode;
 exports.getAllUnit = getAllUnit;
 exports.getAllValue = getAllValue;
 exports.hasMixedValues = hasMixedValues;
@@ -15,20 +16,28 @@ var _components = require("@wordpress/components");
  */
 /**
- * Gets the item with the highest occurrence within an array
- * https://stackoverflow.com/a/20762713
+ * Gets the (non-undefined) item with the highest occurrence within an array
+ * Based in part on: https://stackoverflow.com/a/20762713
  *
- * @param {Array<any>} arr Array of items to check.
- * @return {any}           The item with the most occurrences.
+ * Undefined values are always sorted to the end by `sort`, so this function
+ * returns the first element, to always prioritize real values over undefined
+ * values.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description
+ *
+ * @param {Array<any>} inputArray Array of items to check.
+ * @return {any}                  The item with the most occurrences.
  */
-function mode(arr) {
-  return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();
+function mode(inputArray) {
+  const arr = [...inputArray];
+  return arr.sort((a, b) => inputArray.filter(v => v === b).length - inputArray.filter(v => v === a).length).shift();
 }
 /**
  * Returns the most common CSS unit in the radius values.
+ * Falls back to `px` as a default unit.
  *
  * @param {Object|string} values Radius values.
- * @return {string}              Most common CSS unit in values.
+ * @return {string}              Most common CSS unit in values. Default: `px`.
  */
@@ -42,7 +51,7 @@ function getAllUnit(values = {}) {
     const [, unit] = (0, _components.__experimentalParseUnit)(value);
     return unit;
   });
-  return mode(allUnits);
+  return mode(allUnits) || 'px';
 }
 /**
  * Gets the 'all' input value and unit from values data.

package/build/components/border-radius-control/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/utils.js"],"names":["mode","arr","sort","a","b","filter","v","length","~~pop~~","getAllUnit","values","unit","allUnits","Object","map","value","getAllValue","parsedValues","allValues","every","allValue","hasMixedValues","isMixed","isNaN","parseFloat","hasDefinedValues","filteredValues"],"mappings":"~~;;;;;;;;;;~~AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAeC,~~GAAf~~,~~EAAqB~~;~~AACpB~~,~~SAAOA~~,GAAG,CACRC,IADK,CAEL,CAAEC,CAAF,EAAKC,CAAL,~~KACCH~~,~~GAAG~~,~~CAACI~~,~~MAAJ~~,~~CAAcC~~,CAAF,IAASA,CAAC,~~KAAKH~~,~~CAA3B~~,~~EAA+BI~~,~~MAA/B~~,~~GACAN~~,~~GAAG~~,~~CAACI~~,~~MAAJ~~,~~CAAcC~~,CAAF,IAASA,CAAC,~~KAAKF~~,~~CAA3B~~,~~EAA+BG~~,~~MAJ3B~~,EAMLC,~~GANK~~,EAAP;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,UAAT,CAAqBC,MAAM,GAAG,EAA9B,EAAmC;AACzC,MAAK,OAAOA,MAAP,KAAkB,QAAvB,EAAkC;AACjC,UAAM,GAAIC,IAAJ,IAAa,yCAAWD,MAAX,CAAnB;AACA,WAAOC,IAAI,IAAI,IAAf;AACA;;AAED,QAAMC,QAAQ,GAAGC,MAAM,CAACH,MAAP,CAAeA,MAAf,EAAwBI,GAAxB,CAA+BC,KAAF,IAAa;AAC1D,UAAM,GAAIJ,IAAJ,IAAa,yCAAWI,KAAX,CAAnB;AACA,WAAOJ,IAAP;AACA,GAHgB,CAAjB;AAKA,~~SAAOX~~,IAAI,~~CAAEY~~,QAAF,~~CAAX~~;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASI,WAAT,CAAsBN,MAAM,GAAG,EAA/B,EAAoC;AAC1C;AACD;AACA;AACA;AACA;AACC,MAAK,OAAOA,MAAP,KAAkB,QAAvB,EAAkC;AACjC,WAAOA,MAAP;AACA;;AAED,QAAMO,YAAY,GAAGJ,MAAM,CAACH,MAAP,CAAeA,MAAf,EAAwBI,GAAxB,CAA+BC,KAAF,IACjD,yCAAWA,KAAX,CADoB,CAArB;AAIA,QAAMG,SAAS,GAAGD,YAAY,CAACH,GAAb,CAAoBC,KAAF,IAAaA,KAAK,CAAE,CAAF,CAApC,CAAlB;AACA,QAAMH,QAAQ,GAAGK,YAAY,CAACH,GAAb,CAAoBC,KAAF,IAAaA,KAAK,CAAE,CAAF,CAApC,CAAjB;AAEA,QAAMA,KAAK,GAAGG,SAAS,CAACC,KAAV,CAAmBb,CAAF,IAASA,CAAC,KAAKY,SAAS,CAAE,CAAF,CAAzC,IACXA,SAAS,CAAE,CAAF,CADE,GAEX,EAFH;AAGA,QAAMP,IAAI,~~GAAGX~~,IAAI,~~CAAEY~~,QAAF,CAAjB;AAEA,QAAMQ,QAAQ,GAAGL,KAAK,KAAK,CAAV,IAAeA,KAAf,GAAwB,GAAGA,KAAO,GAAGJ,IAAM,EAA3C,GAA+C,IAAhE;AAEA,SAAOS,QAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,cAAT,CAAyBX,MAAM,GAAG,EAAlC,EAAuC;AAC7C,QAAMU,QAAQ,GAAGJ,WAAW,CAAEN,MAAF,CAA5B;AACA,QAAMY,OAAO,GAAGC,KAAK,CAAEC,UAAU,CAAEJ,QAAF,CAAZ,CAArB;AAEA,SAAOE,OAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,gBAAT,CAA2Bf,MAA3B,EAAoC;AAC1C,MAAK,CAAEA,MAAP,EAAgB;AACf,WAAO,KAAP;AACA,GAHyC,CAK1C;;;AACA,MAAK,OAAOA,MAAP,KAAkB,QAAvB,EAAkC;AACjC,WAAO,IAAP;AACA,GARyC,CAU1C;AACA;;;AACA,QAAMgB,cAAc,GAAGb,MAAM,CAACH,MAAP,CAAeA,MAAf,EAAwBL,MAAxB,CAAkCU,KAAF,IAAa;AACnE,WAAO,CAAC,CAAEA,KAAH,IAAYA,KAAK,KAAK,CAA7B;AACA,GAFsB,CAAvB;AAIA,SAAO,CAAC,CAAEW,cAAc,CAACnB,MAAzB;AACA","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalParseUnit as parseUnit } from '@wordpress/components';\n\n/\n Gets the item with the highest occurrence within an array\n * https://stackoverflow.com/a/20762713\n \n @param {Array<any>} ~~arr~~ Array of items to check.\n * @return {any} The item with the most occurrences.\n /\~~nfunction~~ mode( ~~arr~~ ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\~~tarr~~.filter( ( v ) => v === a ).length -\n\t\t\t\~~tarr~~.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.~~pop~~();\n}\n\n/\n Returns the most common CSS unit in the radius values.\n \n @param {Object\|string} values Radius values.\n * @return {string} Most common CSS unit in values.\n /\nexport function getAllUnit( values = {} ) {\n\tif ( typeof values === 'string' ) {\n\t\tconst [ , unit ] = parseUnit( values );\n\t\treturn unit \|\| 'px';\n\t}\n\n\tconst allUnits = Object.values( values ).map( ( value ) => {\n\t\tconst [ , unit ] = parseUnit( value );\n\t\treturn unit;\n\t} );\n\n\treturn mode( allUnits );\n}\n\n/\n Gets the 'all' input value and unit from values data.\n \n @param {Object\|string} values Radius values.\n * @return {string} A value + unit for the 'all' input.\n /\nexport function getAllValue( values = {} ) {\n\t/\n\t Border radius support was originally a single pixel value.\n\t \n\t To maintain backwards compatibility treat this case as the all value.\n\t /\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\tconst parsedValues = Object.values( values ).map( ( value ) =>\n\t\tparseUnit( value )\n\t);\n\n\tconst allValues = parsedValues.map( ( value ) => value[ 0 ] );\n\tconst allUnits = parsedValues.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\tconst allValue = value === 0 \|\| value ? `${ value }${ unit }` : null;\n\n\treturn allValue;\n}\n\n/\n Checks to determine if values are mixed.\n \n @param {Object} values Radius values.\n * @return {boolean} Whether values are mixed.\n /\nexport function hasMixedValues( values = {} ) {\n\tconst allValue = getAllValue( values );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/\n Checks to determine if values are defined.\n \n @param {Object} values Radius values.\n * @return {boolean} Whether values are mixed.\n */\nexport function hasDefinedValues( values ) {\n\tif ( ! values ) {\n\t\treturn false;\n\t}\n\n\t// A string value represents a shorthand value.\n\tif ( typeof values === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// An object represents longhand border radius values, if any are set\n\t// flag values as being defined.\n\tconst filteredValues = Object.values( values ).filter( ( value ) => {\n\t\treturn !! value \|\| value === 0;\n\t} );\n\n\treturn !! filteredValues.length;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/border-radius-control/utils.js"],"names":["mode","inputArray","arr","sort","a","b","filter","v","length","shift","getAllUnit","values","unit","allUnits","Object","map","value","getAllValue","parsedValues","allValues","every","allValue","hasMixedValues","isMixed","isNaN","parseFloat","hasDefinedValues","filteredValues"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalParseUnit as parseUnit } from '@wordpress/components';\n\n/\n Gets the (non-undefined) item with the highest occurrence within an array\n * Based in part on: https://stackoverflow.com/a/20762713\n \n Undefined values are always sorted to the end by `sort`, so this function\n * returns the first element, to always prioritize real values over undefined\n * values.\n \n See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description\n \n @param {Array<any>} inputArray Array of items to check.\n * @return {any} The item with the most occurrences.\n /\nexport function mode( inputArray ) {\n\tconst arr = [ ...inputArray ];\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tinputArray.filter( ( v ) => v === b ).length -\n\t\t\t\tinputArray.filter( ( v ) => v === a ).length\n\t\t)\n\t\t.shift();\n}\n\n/\n Returns the most common CSS unit in the radius values.\n * Falls back to `px` as a default unit.\n \n @param {Object\|string} values Radius values.\n * @return {string} Most common CSS unit in values. Default: `px`.\n /\nexport function getAllUnit( values = {} ) {\n\tif ( typeof values === 'string' ) {\n\t\tconst [ , unit ] = parseUnit( values );\n\t\treturn unit \|\| 'px';\n\t}\n\n\tconst allUnits = Object.values( values ).map( ( value ) => {\n\t\tconst [ , unit ] = parseUnit( value );\n\t\treturn unit;\n\t} );\n\n\treturn mode( allUnits ) \|\| 'px';\n}\n\n/\n Gets the 'all' input value and unit from values data.\n \n @param {Object\|string} values Radius values.\n * @return {string} A value + unit for the 'all' input.\n /\nexport function getAllValue( values = {} ) {\n\t/\n\t Border radius support was originally a single pixel value.\n\t \n\t To maintain backwards compatibility treat this case as the all value.\n\t /\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\tconst parsedValues = Object.values( values ).map( ( value ) =>\n\t\tparseUnit( value )\n\t);\n\n\tconst allValues = parsedValues.map( ( value ) => value[ 0 ] );\n\tconst allUnits = parsedValues.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\tconst allValue = value === 0 \|\| value ? `${ value }${ unit }` : null;\n\n\treturn allValue;\n}\n\n/\n Checks to determine if values are mixed.\n \n @param {Object} values Radius values.\n * @return {boolean} Whether values are mixed.\n /\nexport function hasMixedValues( values = {} ) {\n\tconst allValue = getAllValue( values );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/\n Checks to determine if values are defined.\n \n @param {Object} values Radius values.\n * @return {boolean} Whether values are mixed.\n */\nexport function hasDefinedValues( values ) {\n\tif ( ! values ) {\n\t\treturn false;\n\t}\n\n\t// A string value represents a shorthand value.\n\tif ( typeof values === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// An object represents longhand border radius values, if any are set\n\t// flag values as being defined.\n\tconst filteredValues = Object.values( values ).filter( ( value ) => {\n\t\treturn !! value \|\| value === 0;\n\t} );\n\n\treturn !! filteredValues.length;\n}\n"]}

package/build/components/colors/utils.js CHANGED Viewed

@@ -11,12 +11,16 @@ exports.getColorObjectByColorValue = exports.getColorObjectByAttributeValues = v
 var _lodash = require("lodash");
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _colord = require("colord");
+var _names = _interopRequireDefault(require("colord/plugins/names"));
+var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 /**
  * External dependencies
  */
+(0, _colord.extend)([_names.default, _a11y.default]);
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
  * and the values of the defined color or custom color returns a color object describing the color.
@@ -29,6 +33,7 @@ var _tinycolor = _interopRequireDefault(require("tinycolor2"));
  *                   the color object exactly as set by the theme or editor defaults is returned.
  *                   Otherwise, an object that just sets the color is defined.
  */
 const getColorObjectByAttributeValues = (colors, definedColor, customColor) => {
   if (definedColor) {
     const colorObj = (0, _lodash.find)(colors, {
@@ -93,6 +98,9 @@ function getColorClassName(colorContextName, colorSlug) {
 function getMostReadableColor(colors, colorValue) {
-  return _tinycolor.default.mostReadable(colorValue, (0, _lodash.map)(colors, 'color')).toHexString();
+  const colordColor = (0, _colord.colord)(colorValue);
+  return (0, _lodash.maxBy)(colors, ({
+    color
+  }) => colordColor.contrast(color)).color;
 }
 //# sourceMappingURL=utils.js.map

package/build/components/colors/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"names":["getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","slug","color","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","~~tinycolor~~","~~mostReadable~~"~~,"toHexString"~~],"mappings":";;;;;;;;;;;AAGA;;AACA;;~~AAJA~~;AACA;AACA~~;;AAIA~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,~~MAAMA~~,+BAA+B,GAAG,CAC9CC,MAD8C,EAE9CC,YAF8C,EAG9CC,WAH8C,KAI1C;AACJ,MAAKD,YAAL,EAAoB;AACnB,UAAME,QAAQ,GAAG,kBAAMH,MAAN,EAAc;AAAEI,MAAAA,IAAI,EAAEH;AAAR,KAAd,CAAjB;;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;;;;;AACO,MAAMI,0BAA0B,GAAG,CAAEN,MAAF,EAAUO,UAAV,KAA0B;AACnE,SAAO,kBAAMP,MAAN,EAAc;AAAEK,IAAAA,KAAK,EAAEE;AAAT,GAAd,CAAP;AACA,CAFM;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,SAASC,iBAAT,CAA4BC,gBAA5B,EAA8CC,SAA9C,EAA0D;AAChE,MAAK,CAAED,gBAAF,IAAsB,CAAEC,SAA7B,EAAyC;AACxC,WAAOC,SAAP;AACA;;AAED,SAAQ,OAAO,uBAAWD,SAAX,CAAwB,IAAID,gBAAkB,EAA7D;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,oBAAT,CAA+BZ,MAA/B,EAAuCO,UAAvC,EAAoD;AAC1D,~~SAAOM~~,~~mBACLC~~,~~YADK~~,~~CACSP~~,~~UADT~~,~~EACqB~~,~~iBAAKP~~,~~MAAL~~,~~EAAa~~,~~OAAb~~,~~CADrB~~,~~EAELe~~,~~WAFK~~,~~EAAP~~;~~AAGA~~","sourcesContent":["/*\n External dependencies\n /\nimport { find, kebabCase, ~~map~~ } from 'lodash';\nimport ~~tinycolor~~ from '~~tinycolor2~~';\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\~~treturn~~ ~~tinycolor\n\t\t.mostReadable~~( colorValue, ~~map~~( colors, 'color' ) )\n\t\t.~~toHexString()~~;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"names":["namesPlugin","a11yPlugin","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","slug","color","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","contrast"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;AAMA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,MAAMC,+BAA+B,GAAG,CAC9CC,MAD8C,EAE9CC,YAF8C,EAG9CC,WAH8C,KAI1C;AACJ,MAAKD,YAAL,EAAoB;AACnB,UAAME,QAAQ,GAAG,kBAAMH,MAAN,EAAc;AAAEI,MAAAA,IAAI,EAAEH;AAAR,KAAd,CAAjB;;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;;;;;AACO,MAAMI,0BAA0B,GAAG,CAAEN,MAAF,EAAUO,UAAV,KAA0B;AACnE,SAAO,kBAAMP,MAAN,EAAc;AAAEK,IAAAA,KAAK,EAAEE;AAAT,GAAd,CAAP;AACA,CAFM;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,SAASC,iBAAT,CAA4BC,gBAA5B,EAA8CC,SAA9C,EAA0D;AAChE,MAAK,CAAED,gBAAF,IAAsB,CAAEC,SAA7B,EAAyC;AACxC,WAAOC,SAAP;AACA;;AAED,SAAQ,OAAO,uBAAWD,SAAX,CAAwB,IAAID,gBAAkB,EAA7D;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,oBAAT,CAA+BZ,MAA/B,EAAuCO,UAAvC,EAAoD;AAC1D,QAAMM,WAAW,GAAG,oBAAQN,UAAR,CAApB;AACA,SAAO,mBAAOP,MAAP,EAAe,CAAE;AAAEK,IAAAA;AAAF,GAAF,KAAiBQ,WAAW,CAACC,QAAZ,CAAsBT,KAAtB,CAAhC,EACLA,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"]}

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

@@ -95,24 +95,28 @@ function ColorGradientControlInner({
   return (0, _element.createElement)(_components.BaseControl, {
     className: (0, _classnames.default)('block-editor-color-gradient-control', className)
-  }, (0, _element.createElement)("fieldset", null, (0, _element.createElement)("legend", null, (0, _element.createElement)("div", {
+  }, (0, _element.createElement)("fieldset", null, (0, _element.createElement)(_components.__experimentalVStack, {
+    space: 3
+  }, (0, _element.createElement)("legend", null, (0, _element.createElement)("div", {
     className: "block-editor-color-gradient-control__color-indicator"
   }, (0, _element.createElement)(_components.BaseControl.VisualLabel, null, (0, _element.createElement)(VisualLabel, {
     currentTab: currentTab,
     label: label,
     colorValue: colorValue,
     gradientValue: gradientValue
-  })))), canChooseAColor && canChooseAGradient && (0, _element.createElement)(_components.ButtonGroup, {
-    className: "block-editor-color-gradient-control__button-tabs"
-  }, (0, _element.createElement)(_components.Button, {
-    isSmall: true,
-    isPressed: currentTab === 'color',
-    onClick: () => setCurrentTab('color')
-  }, (0, _i18n.__)('Solid')), (0, _element.createElement)(_components.Button, {
-    isSmall: true,
-    isPressed: currentTab === 'gradient',
-    onClick: () => setCurrentTab('gradient')
-  }, (0, _i18n.__)('Gradient'))), (currentTab === 'color' || !canChooseAGradient) && (0, _element.createElement)(_components.ColorPalette, {
+  })))), canChooseAColor && canChooseAGradient && (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+    value: currentTab,
+    onChange: setCurrentTab,
+    label: (0, _i18n.__)('Select color type'),
+    hideLabelFromVision: true,
+    isBlock: true
+  }, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
+    value: "color",
+    label: (0, _i18n.__)('Solid')
+  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
+    value: "gradient",
+    label: (0, _i18n.__)('Gradient')
+  })), (currentTab === 'color' || !canChooseAGradient) && (0, _element.createElement)(_components.ColorPalette, {
     value: colorValue,
     onChange: canChooseAGradient ? newColor => {
       onColorChange(newColor);
@@ -130,7 +134,7 @@ function ColorGradientControlInner({
     gradients,
     disableCustomGradients,
     clearable: clearable
-  })));
+  }))));
 }
 function ColorGradientControlSelect(props) {

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

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

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

@@ -87,6 +87,7 @@ const PanelColorGradientSettingsInner = ({
   children,
   settings,
   title,
+  showTitle = true,
   ...props
 }) => {
   if ((0, _lodash.isEmpty)(colors) && (0, _lodash.isEmpty)(gradients) && disableCustomColors && disableCustomGradients && (0, _lodash.every)(settings, setting => (0, _lodash.isEmpty)(setting.colors) && (0, _lodash.isEmpty)(setting.gradients) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
@@ -102,7 +103,7 @@ const PanelColorGradientSettingsInner = ({
   }));
   return (0, _element.createElement)(_components.PanelBody, (0, _extends2.default)({
     className: (0, _classnames.default)('block-editor-panel-color-gradient-settings', className),
-    title: titleElement
+    title: showTitle ? titleElement : undefined
   }, props), settings.map((setting, index) => (0, _element.createElement)(_control.default, (0, _extends2.default)({
     key: index,
     colors,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","colorValue","gradientValue","label","availableColors","availableGradients","index","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","props","setting","undefined","titleElement","PanelColorGradientSettingsSelect","colorGradientSettings","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAMA;AACA,MAAMA,uBAAuB,GAAG,cAAI,gBAAJ,CAAhC,C,CAEA;;AACA,MAAMC,0BAA0B,GAAG,cAAI,mBAAJ,CAAnC;AAEA,MAAMC,qBAAqB,GAAG,CAC7B,QAD6B,EAE7B,qBAF6B,EAG7B,WAH6B,EAI7B,wBAJ6B,CAA9B;;AAOA,MAAMC,UAAU,GAAG,CAAE;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,SAAV;AAAqBC,EAAAA;AAArB,CAAF,KAAuC;AACzD,SAAOA,QAAQ,CAACC,GAAT,CACN,CACC;AACCC,IAAAA,UADD;AAECC,IAAAA,aAFD;AAGCC,IAAAA,KAHD;AAICN,IAAAA,MAAM,EAAEO,eAJT;AAKCN,IAAAA,SAAS,EAAEO;AALZ,GADD,EAQCC,KARD,KASK;AACJ,QAAK,CAAEL,UAAF,IAAgB,CAAEC,aAAvB,EAAuC;AACtC,aAAO,IAAP;AACA;;AACD,QAAIK,SAAJ;;AACA,QAAKN,UAAL,EAAkB;AACjB,YAAMO,WAAW,GAAG,wCACnBJ,eAAe,IAAIP,MADA,EAEnBI,UAFmB,CAApB;AAIAM,MAAAA,SAAS,GAAG,mBACXd,uBADW,EAEXU,KAAK,CAACM,WAAN,EAFW,EAGTD,WAAW,IAAIA,WAAW,CAACE,IAA7B,IAAuCT,UAH5B,CAAZ;AAKA,KAVD,MAUO;AACN,YAAMU,cAAc,GAAG,+DACtBN,kBAAkB,IAAIP,SADA,EAEtBG,UAFsB,CAAvB;AAIAM,MAAAA,SAAS,GAAG,mBACXb,0BADW,EAEXS,KAAK,CAACM,WAAN,EAFW,EAGTE,cAAc,IAAIA,cAAc,CAACD,IAAnC,IAA6CR,aAHlC,CAAZ;AAKA;;AAED,WACC,4BAAC,0BAAD;AACC,MAAA,GAAG,EAAGI,KADP;AAEC,MAAA,UAAU,EAAGL,UAAU,IAAIC,aAF5B;AAGC,oBAAaK;AAHd,MADD;AAOA,GA5CK,CAAP;AA8CA,CA/CD;;AAiDO,MAAMK,+BAA+B,GAAG,CAAE;AAChDC,EAAAA,SADgD;AAEhDhB,EAAAA,MAFgD;AAGhDC,EAAAA,SAHgD;AAIhDgB,EAAAA,mBAJgD;AAKhDC,EAAAA,sBALgD;AAMhDC,EAAAA,QANgD;AAOhDjB,EAAAA,QAPgD;AAQhDkB,EAAAA,KARgD;~~AAShD~~,KAAGC;~~AAT6C~~,CAAF,~~KAUxC~~;AACN,MACC,~~qBAASrB~~,MAAT,KACA,qBAASC,SAAT,CADA,IAEAgB,mBAFA,IAGAC,sBAHA,IAIA,mBACChB,QADD,~~EAEGoB~~,OAAF,IACC,qBAASA,OAAO,~~CAACtB~~,MAAjB,KACA,~~qBAASsB~~,OAAO,~~CAACrB~~,SAAjB,CADA,~~KAEEqB~~,OAAO,~~CAACL~~,mBAAR,~~KAAgCM~~,SAAhC,IACDD,OAAO,~~CAACL~~,mBAHT,~~MAIEK~~,OAAO,~~CAACJ~~,sBAAR,~~KAAmCK~~,SAAnC,IACDD,OAAO,~~CAACJ~~,sBALT,CAHF,CALD,EAeE;AACD,WAAO,IAAP;AACA;;AAED,~~QAAMM~~,YAAY,GACjB;AAAM,IAAA,SAAS,EAAC;AAAhB,~~KACGJ~~,KADH,EAEC,4BAAC,UAAD;AACC,IAAA,MAAM,EAAGpB,MADV;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IAFD,CADD;~~AAUA~~,SACC,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAG,yBACX,4CADW,EAEXc,SAFW,CADb;AAKC,IAAA,KAAK,~~EAAGQ~~;~~AALT~~,~~KAMMH~~,KANN,~~GAQGnB~~,QAAQ,CAACC,GAAT,CAAc,~~CAAEmB~~,OAAF,~~EAAWb~~,KAAX,KACf,4BAAC,gBAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAGET,IAAAA,MAHF;AAIEC,IAAAA,SAJF;AAKEgB,IAAAA,mBALF;AAMEC,IAAAA;AANF,~~KAOKI~~,OAPL,EADC,CARH,~~EAoBGH~~,QApBH,CADD;AAwBA,~~CAhEM~~;;;;~~AAkEP~~,~~MAAMM~~,gCAAgC,GAAKJ,KAAF,IAAa;AACrD,QAAMK,qBAAqB,GAAG,EAA9B;AACAA,EAAAA,qBAAqB,~~CAAC1B~~,MAAtB,GAA+B,yBAAY,eAAZ,CAA/B;~~AACA0B~~,EAAAA,qBAAqB,~~CAACzB~~,SAAtB,GAAkC,yBAAY,iBAAZ,CAAlC;~~AACAyB~~,EAAAA,qBAAqB,~~CAACT~~,mBAAtB,GAA4C,CAAE,yBAAY,cAAZ,CAA9C;~~AACAS~~,EAAAA,qBAAqB,~~CAACR~~,sBAAtB,GAA+C,CAAE,yBAChD,sBADgD,CAAjD;AAGA,SACC,4BAAC,+BAAD,~~6BACWQ~~,qBADX,EACqCL,KADrC,EADD;AAKA,CAbD;;AAeA,MAAMM,0BAA0B,GAAKN,KAAF,IAAa;AAC/C,MACC,~~mBAAOvB~~,qBAAP,~~EAAgC8B~~,GAAF,IAAWP,KAAK,CAACQ,cAAN,CAAsBD,GAAtB,CAAzC,CADD,EAEE;AACD,WAAO,4BAAC,+BAAD,EAAsCP,KAAtC,CAAP;AACA;;AACD,SAAO,4BAAC,gCAAD,EAAuCA,KAAvC,CAAP;AACA,CAPD;;eASeM,0B","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors \|\| colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) \|\| colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients \|\| gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) \|\| gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue \|\| gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\n\t\t\t\t( setting.disableCustomColors === undefined \|\|\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined \|\|\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ titleElement }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tkey={ index }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</PanelBody>\n\t);\n};\n\nconst PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","colorValue","gradientValue","label","availableColors","availableGradients","index","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","props","setting","undefined","titleElement","PanelColorGradientSettingsSelect","colorGradientSettings","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors \|\| colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) \|\| colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients \|\| gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) \|\| gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue \|\| gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\n\t\t\t\t( setting.disableCustomColors === undefined \|\|\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined \|\|\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ showTitle ? titleElement : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tkey={ index }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</PanelBody>\n\t);\n};\n\nconst PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}

package/build/components/contrast-checker/index.js CHANGED Viewed

@@ -9,9 +9,13 @@ exports.default = void 0;
 var _element = require("@wordpress/element");
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _colord = require("colord");
-var _a11y = require("@wordpress/a11y");
+var _names = _interopRequireDefault(require("colord/plugins/names"));
+var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
+var _a11y2 = require("@wordpress/a11y");
 var _i18n = require("@wordpress/i18n");
@@ -24,19 +28,21 @@ var _components = require("@wordpress/components");
 /**
  * WordPress dependencies
  */
+(0, _colord.extend)([_names.default, _a11y.default]);
 function ContrastCheckerMessage({
-  tinyBackgroundColor,
-  tinyTextColor,
+  colordBackgroundColor,
+  colordTextColor,
   backgroundColor,
   textColor
 }) {
-  const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ? (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : (0, _i18n.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'); // Note: The `Notice` component can speak messages via its `spokenMessage`
+  const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : (0, _i18n.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'); // Note: The `Notice` component can speak messages via its `spokenMessage`
   // prop, but the contrast checker requires granular control over when the
   // announcements are made. Notably, the message will be re-announced if a
   // new color combination is selected and the contrast is still insufficient.
   (0, _element.useEffect)(() => {
-    (0, _a11y.speak)((0, _i18n.__)('This color combination may be hard for people to read.'));
+    (0, _a11y2.speak)((0, _i18n.__)('This color combination may be hard for people to read.'));
   }, [backgroundColor, textColor]);
   return (0, _element.createElement)("div", {
     className: "block-editor-contrast-checker"
@@ -60,11 +66,11 @@ function ContrastChecker({
     return null;
   }
-  const tinyBackgroundColor = (0, _tinycolor.default)(backgroundColor || fallbackBackgroundColor);
-  const tinyTextColor = (0, _tinycolor.default)(textColor || fallbackTextColor);
-  const hasTransparency = tinyBackgroundColor.getAlpha() !== 1 || tinyTextColor.getAlpha() !== 1;
+  const colordBackgroundColor = (0, _colord.colord)(backgroundColor || fallbackBackgroundColor);
+  const colordTextColor = (0, _colord.colord)(textColor || fallbackTextColor);
+  const hasTransparency = colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
-  if (hasTransparency || _tinycolor.default.isReadable(tinyBackgroundColor, tinyTextColor, {
+  if (hasTransparency || colordTextColor.isReadable(colordBackgroundColor, {
     level: 'AA',
     size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
   })) {
@@ -74,8 +80,8 @@ function ContrastChecker({
   return (0, _element.createElement)(ContrastCheckerMessage, {
     backgroundColor: backgroundColor,
     textColor: textColor,
-    tinyBackgroundColor: tinyBackgroundColor,
-    tinyTextColor: tinyTextColor
+    colordBackgroundColor: colordBackgroundColor,
+    colordTextColor: colordTextColor
   });
 }

package/build/components/contrast-checker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.js"],"names":["ContrastCheckerMessage","~~tinyBackgroundColor~~","~~tinyTextColor~~","backgroundColor","textColor","msg","~~getBrightness~~","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","hasTransparency","~~getAlpha~~","~~tinycolor","~~isReadable","level","size"],"mappings":";;;;;;;;;~~AAWA~~;;~~AARA~~;;AAKA;;AACA;;AACA;;~~AAVA~~;AACA;AACA;;~~AAGA~~;AACA;AACA;AAMA,~~SAASA~~,sBAAT,CAAiC;AAChCC,EAAAA,~~mBADgC~~;AAEhCC,EAAAA,~~aAFgC~~;AAGhCC,EAAAA,eAHgC;AAIhCC,EAAAA;AAJgC,CAAjC,EAKI;AACH,QAAMC,GAAG,GACRJ,~~mBAAmB~~,CAACK,~~aAApB~~,~~KAAsCJ~~,~~aAAa~~,CAACI,~~aAAd~~,~~EAAtC~~,GACG,cACA,0HADA,CADH,GAIG,cACA,0HADA,CALJ,CADG,CAUH;AACA;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,~~qBAAO~~,cAAI,wDAAJ,CAAP;AACA,GAFD,EAEG,CAAEH,eAAF,EAAmBC,SAAnB,CAFH;AAIA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kBAAD;AACC,IAAA,aAAa,EAAG,IADjB;AAEC,IAAA,MAAM,EAAC,SAFR;AAGC,IAAA,aAAa,EAAG;AAHjB,KAKGC,GALH,CADD,CADD;AAWA;;AAED,SAASE,eAAT,CAA0B;AACzBJ,EAAAA,eADyB;AAEzBK,EAAAA,uBAFyB;AAGzBC,EAAAA,iBAHyB;AAIzBC,EAAAA,QAJyB;AAIf;AACVC,EAAAA,WALyB;AAMzBP,EAAAA;AANyB,CAA1B,EAOI;AACH,MACC,EAAID,eAAe,IAAIK,uBAAvB,KACA,EAAIJ,SAAS,IAAIK,iBAAjB,CAFD,EAGE;AACD,WAAO,IAAP;AACA;;AACD,QAAMR,~~mBAAmB~~,GAAG,~~wBAC3BE~~,eAAe,IAAIK,~~uBADQ~~,~~CAA5B~~;AAGA,QAAMN,~~aAAa~~,GAAG,~~wBAAWE~~,SAAS,IAAIK,~~iBAAxB~~,~~CAAtB~~;AACA,QAAMG,eAAe,GACpBX,~~mBAAmB~~,CAACY,~~QAApB~~,~~OAAmC~~,~~CAAnC~~,~~IAAwCX~~,~~aAAa~~,CAACW,~~QAAd~~,~~OAA6B~~,~~CADtE~~;;AAGA,MACCD,eAAe,~~IACfE~~,~~mBAAUC~~,~~UAAV~~,~~CAAsBd~~,~~mBAAtB~~,~~EAA2CC~~,~~aAA3C,EAA0D~~;~~AACzDc~~,IAAAA,KAAK,EAAE,~~IADkD~~;~~AAEzDC~~,IAAAA,IAAI,~~EACHN~~,WAAW,IAAMA,WAAW,KAAK,KAAhB,IAAyBD,QAAQ,IAAI,EAAtD,GACG,OADH,GAEG;~~AALqD~~,~~GAA1D~~,CAFD,EASE;AACD,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,sBAAD;AACC,IAAA,eAAe,EAAGP,eADnB;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,~~mBAAmB~~,EAAGH,~~mBAHvB~~;AAIC,IAAA,~~aAAa~~,EAAGC;~~AAJjB~~,IADD;AAQA;;eAEcK,e","sourcesContent":["/*\n External dependencies\n /\nimport ~~tinycolor~~ from '~~tinycolor2~~';\n\n/\n WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { useEffect } from '@wordpress/element';\n\nfunction ContrastCheckerMessage( {\n\~~ttinyBackgroundColor~~,\n\~~ttinyTextColor~~,\n\tbackgroundColor,\n\ttextColor,\n} ) {\n\tconst msg =\n\t\~~ttinyBackgroundColor~~.~~getBrightness~~() < ~~tinyTextColor~~.~~getBrightness~~()\n\t\t\t? __(\n\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'\n\t\t\t )\n\t\t\t: __(\n\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'\n\t\t\t );\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tuseEffect( () => {\n\t\tspeak( __( 'This color combination may be hard for people to read.' ) );\n\t}, [ backgroundColor, textColor ] );\n\n\treturn (\n\t\t<div className=\"block-editor-contrast-checker\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ msg }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n\nfunction ContrastChecker( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfontSize, // font size value in pixels\n\tisLargeText,\n\ttextColor,\n} ) {\n\tif (\n\t\t! ( backgroundColor \|\| fallbackBackgroundColor ) \|\|\n\t\t! ( textColor \|\| fallbackTextColor )\n\t) {\n\t\treturn null;\n\t}\n\tconst ~~tinyBackgroundColor~~ = ~~tinycolor~~(\n\t\tbackgroundColor \|\| fallbackBackgroundColor\n\t);\n\tconst ~~tinyTextColor~~ = ~~tinycolor~~( textColor \|\| fallbackTextColor );\n\tconst hasTransparency =\n\t\~~ttinyBackgroundColor~~.~~getAlpha~~() !== 1 \|\| ~~tinyTextColor~~.~~getAlpha~~() !== 1;\n\n\tif (\n\t\thasTransparency \|\|\n\t\~~ttinycolor~~.isReadable( ~~tinyBackgroundColor~~, ~~tinyTextColor,~~ {\n\t\t\tlevel: 'AA',\n\t\t\tsize:\n\t\t\t\tisLargeText \|\| ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t\t? 'large'\n\t\t\t\t\t: 'small',\n\t\t} )\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ContrastCheckerMessage\n\t\t\tbackgroundColor={ backgroundColor }\n\t\t\ttextColor={ textColor }\n\t\t\~~ttinyBackgroundColor~~={ ~~tinyBackgroundColor~~ }\n\t\t\~~ttinyTextColor~~={ ~~tinyTextColor~~ }\n\t\t/>\n\t);\n}\n\nexport default ContrastChecker;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.js"],"names":["namesPlugin","a11yPlugin","ContrastCheckerMessage","colordBackgroundColor","colordTextColor","backgroundColor","textColor","msg","brightness","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","hasTransparency","alpha","isReadable","level","size"],"mappings":";;;;;;;;;AAaA;;AAVA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAZA;AACA;AACA;;AAKA;AACA;AACA;AAMA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,sBAAT,CAAiC;AAChCC,EAAAA,qBADgC;AAEhCC,EAAAA,eAFgC;AAGhCC,EAAAA,eAHgC;AAIhCC,EAAAA;AAJgC,CAAjC,EAKI;AACH,QAAMC,GAAG,GACRJ,qBAAqB,CAACK,UAAtB,KAAqCJ,eAAe,CAACI,UAAhB,EAArC,GACG,cACA,0HADA,CADH,GAIG,cACA,0HADA,CALJ,CADG,CAUH;AACA;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,sBAAO,cAAI,wDAAJ,CAAP;AACA,GAFD,EAEG,CAAEH,eAAF,EAAmBC,SAAnB,CAFH;AAIA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kBAAD;AACC,IAAA,aAAa,EAAG,IADjB;AAEC,IAAA,MAAM,EAAC,SAFR;AAGC,IAAA,aAAa,EAAG;AAHjB,KAKGC,GALH,CADD,CADD;AAWA;;AAED,SAASE,eAAT,CAA0B;AACzBJ,EAAAA,eADyB;AAEzBK,EAAAA,uBAFyB;AAGzBC,EAAAA,iBAHyB;AAIzBC,EAAAA,QAJyB;AAIf;AACVC,EAAAA,WALyB;AAMzBP,EAAAA;AANyB,CAA1B,EAOI;AACH,MACC,EAAID,eAAe,IAAIK,uBAAvB,KACA,EAAIJ,SAAS,IAAIK,iBAAjB,CAFD,EAGE;AACD,WAAO,IAAP;AACA;;AACD,QAAMR,qBAAqB,GAAG,oBAC7BE,eAAe,IAAIK,uBADU,CAA9B;AAGA,QAAMN,eAAe,GAAG,oBAAQE,SAAS,IAAIK,iBAArB,CAAxB;AACA,QAAMG,eAAe,GACpBX,qBAAqB,CAACY,KAAtB,OAAkC,CAAlC,IAAuCX,eAAe,CAACW,KAAhB,OAA4B,CADpE;;AAGA,MACCD,eAAe,IACfV,eAAe,CAACY,UAAhB,CAA4Bb,qBAA5B,EAAmD;AAClDc,IAAAA,KAAK,EAAE,IAD2C;AAElDC,IAAAA,IAAI,EACHL,WAAW,IAAMA,WAAW,KAAK,KAAhB,IAAyBD,QAAQ,IAAI,EAAtD,GACG,OADH,GAEG;AAL8C,GAAnD,CAFD,EASE;AACD,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,sBAAD;AACC,IAAA,eAAe,EAAGP,eADnB;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,qBAAqB,EAAGH,qBAHzB;AAIC,IAAA,eAAe,EAAGC;AAJnB,IADD;AAQA;;eAEcK,e","sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/\n WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { useEffect } from '@wordpress/element';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction ContrastCheckerMessage( {\n\tcolordBackgroundColor,\n\tcolordTextColor,\n\tbackgroundColor,\n\ttextColor,\n} ) {\n\tconst msg =\n\t\tcolordBackgroundColor.brightness() < colordTextColor.brightness()\n\t\t\t? __(\n\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'\n\t\t\t )\n\t\t\t: __(\n\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'\n\t\t\t );\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tuseEffect( () => {\n\t\tspeak( __( 'This color combination may be hard for people to read.' ) );\n\t}, [ backgroundColor, textColor ] );\n\n\treturn (\n\t\t<div className=\"block-editor-contrast-checker\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ msg }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n\nfunction ContrastChecker( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfontSize, // font size value in pixels\n\tisLargeText,\n\ttextColor,\n} ) {\n\tif (\n\t\t! ( backgroundColor \|\| fallbackBackgroundColor ) \|\|\n\t\t! ( textColor \|\| fallbackTextColor )\n\t) {\n\t\treturn null;\n\t}\n\tconst colordBackgroundColor = colord(\n\t\tbackgroundColor \|\| fallbackBackgroundColor\n\t);\n\tconst colordTextColor = colord( textColor \|\| fallbackTextColor );\n\tconst hasTransparency =\n\t\tcolordBackgroundColor.alpha() !== 1 \|\| colordTextColor.alpha() !== 1;\n\n\tif (\n\t\thasTransparency \|\|\n\t\tcolordTextColor.isReadable( colordBackgroundColor, {\n\t\t\tlevel: 'AA',\n\t\t\tsize:\n\t\t\t\tisLargeText \|\| ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t\t? 'large'\n\t\t\t\t\t: 'small',\n\t\t} )\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ContrastCheckerMessage\n\t\t\tbackgroundColor={ backgroundColor }\n\t\t\ttextColor={ textColor }\n\t\t\tcolordBackgroundColor={ colordBackgroundColor }\n\t\t\tcolordTextColor={ colordTextColor }\n\t\t/>\n\t);\n}\n\nexport default ContrastChecker;\n"]}