npm - @wordpress/block-editor - Versions diffs - 12.15.0 → 12.16.0 - Mend

@wordpress/block-editor 12.15.0 → 12.16.0

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

Files changed (500) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_data","require","_compose","_components","_keyboardShortcuts","_element","_blocks","_emptyBlockInserter","_interopRequireDefault","_insertionPoint","_interopRequireWildcard","_selectedBlockTools","_store","_blockContextualToolbar","_usePopoverScroll","_zoomOutModeInserters","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","selector","select","getSelectedBlockClientId","getFirstMultiSelectedBlockClientId","getBlock","getSettings","__unstableGetEditorMode","isTyping","blockEditorStore","clientId","name","attributes","hasFixedToolbar","hasSelectedBlock","isZoomOutMode","showEmptyBlockSideInserter","isUnmodifiedDefaultBlock","BlockTools","children","__unstableContentRef","props","isLargeViewport","useViewportMatch","useSelect","isMatch","useShortcutEventMatch","getSelectedBlockClientIds","getBlockRootClientId","duplicateBlocks","removeBlocks","insertAfterBlock","insertBeforeBlock","clearSelectedBlock","selectBlock","moveBlocksUp","moveBlocksDown","useDispatch","onKeyDown","event","defaultPrevented","clientIds","length","preventDefault","rootClientId","target","closest","ownerDocument","defaultView","getSelection","removeAllRanges","current","focus","blockToolbarRef","usePopoverScroll","blockToolbarAfterRef","isTopToolbar","_react","createElement","InsertionPointOpenRef","Provider","value","useRef","isFixed","Popover","Slot","ref"],"sources":["@wordpress/block-editor/src/components/block-tools/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Popover } from '@wordpress/components';\nimport { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';\nimport { useRef } from '@wordpress/element';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/\n Internal dependencies\n /\nimport EmptyBlockInserter from './empty-block-inserter';\nimport {\n\tInsertionPointOpenRef,\n\tdefault as InsertionPoint,\n} from './insertion-point';\nimport SelectedBlockTools from './selected-block-tools';\nimport { store as blockEditorStore } from '../../store';\nimport BlockContextualToolbar from './block-contextual-toolbar';\nimport usePopoverScroll from '../block-popover/use-popover-scroll';\nimport ZoomOutModeInserters from './zoom-out-mode-inserters';\n\nfunction selector( select ) {\n\tconst {\n\t\tgetSelectedBlockClientId,\n\t\tgetFirstMultiSelectedBlockClientId,\n\t\tgetBlock,\n\t\tgetSettings,\n\t\t__unstableGetEditorMode,\n\t\tisTyping,\n\t} = select( blockEditorStore );\n\n\tconst clientId =\n\t\tgetSelectedBlockClientId() \|\| getFirstMultiSelectedBlockClientId();\n\n\tconst { name = '', attributes = {} } = getBlock( clientId ) \|\| {};\n\n\treturn {\n\t\tclientId,\n\t\thasFixedToolbar: getSettings().hasFixedToolbar,\n\t\thasSelectedBlock: clientId && name,\n\t\tisTyping: isTyping(),\n\t\tisZoomOutMode: __unstableGetEditorMode() === 'zoom-out',\n\t\tshowEmptyBlockSideInserter:\n\t\t\tclientId &&\n\t\t\t! isTyping() &&\n\t\t\t__unstableGetEditorMode() === 'edit' &&\n\t\t\tisUnmodifiedDefaultBlock( { name, attributes } ),\n\t};\n}\n\n/\n Renders block tools (the block toolbar, select/navigation mode toolbar, the\n * insertion point and a slot for the inline rich text toolbar). Must be wrapped\n * around the block content and editor styles wrapper or iframe.\n \n @param {Object} $0 Props.\n * @param {Object} $0.children The block content and style container.\n * @param {Object} $0.__unstableContentRef Ref holding the content scroll container.\n /\nexport default function BlockTools( {\n\tchildren,\n\t__unstableContentRef,\n\t...props\n} ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst {\n\t\tclientId,\n\t\thasFixedToolbar,\n\t\thasSelectedBlock,\n\t\tisTyping,\n\t\tisZoomOutMode,\n\t\tshowEmptyBlockSideInserter,\n\t} = useSelect( selector, [] );\n\tconst isMatch = useShortcutEventMatch();\n\tconst { getSelectedBlockClientIds, getBlockRootClientId } =\n\t\tuseSelect( blockEditorStore );\n\tconst {\n\t\tduplicateBlocks,\n\t\tremoveBlocks,\n\t\tinsertAfterBlock,\n\t\tinsertBeforeBlock,\n\t\tclearSelectedBlock,\n\t\tselectBlock,\n\t\tmoveBlocksUp,\n\t\tmoveBlocksDown,\n\t} = useDispatch( blockEditorStore );\n\n\tfunction onKeyDown( event ) {\n\t\tif ( event.defaultPrevented ) return;\n\n\t\tif ( isMatch( 'core/block-editor/move-up', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\t\tmoveBlocksUp( clientIds, rootClientId );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/move-down', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\t\tmoveBlocksDown( clientIds, rootClientId );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tduplicateBlocks( clientIds );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/remove', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tremoveBlocks( clientIds );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinsertAfterBlock( clientIds[ clientIds.length - 1 ] );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinsertBeforeBlock( clientIds[ 0 ] );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/unselect', event ) ) {\n\t\t\tif ( event.target.closest( '[role=toolbar]' ) ) {\n\t\t\t\t// This shouldn't be necessary, but we have a combination of a few things all combining to create a situation where:\n\t\t\t\t// - Because the block toolbar uses createPortal to populate the block toolbar fills, we can't rely on the React event bubbling to hit the onKeyDown listener for the block toolbar\n\t\t\t\t// - Since we can't use the React tree, we use the DOM tree which _should_ handle the event bubbling correctly from a `createPortal` element.\n\t\t\t\t// - This bubbles via the React tree, which hits this `unselect` escape keypress before the block toolbar DOM event listener has access to it.\n\t\t\t\t// An alternative would be to remove the addEventListener on the navigableToolbar and use this event to handle it directly right here. That feels hacky too though.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// If there is more than one block selected, select the first\n\t\t\t\t// block so that focus is directed back to the beginning of the selection.\n\t\t\t\t// In effect, to the user this feels like deselecting the multi-selection.\n\t\t\t\tif ( clientIds.length > 1 ) {\n\t\t\t\t\tselectBlock( clientIds[ 0 ] );\n\t\t\t\t} else {\n\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t}\n\t\t\t\tevent.target.ownerDocument.defaultView\n\t\t\t\t\t.getSelection()\n\t\t\t\t\t.removeAllRanges();\n\t\t\t\t__unstableContentRef?.current.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tconst blockToolbarRef = usePopoverScroll( __unstableContentRef );\n\tconst blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );\n\n\t// Conditions for fixed toolbar\n\t// 1. Not zoom out mode\n\t// 2. It's a large viewport. If it's a smaller viewport, let the floating toolbar handle it as it already has styles attached to make it render that way.\n\t// 3. Fixed toolbar is enabled\n\tconst isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div { ...props } onKeyDown={ onKeyDown }>\n\t\t\t<InsertionPointOpenRef.Provider value={ useRef( false ) }>\n\t\t\t\t{ ! isTyping && (\n\t\t\t\t\t<InsertionPoint\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ / If there is no slot available, such as in the standalone block editor, render within the editor / }\n\n\t\t\t\t{ ! isLargeViewport && ( // Small viewports always get a fixed toolbar\n\t\t\t\t\t<BlockContextualToolbar isFixed />\n\t\t\t\t) }\n\n\t\t\t\t{ showEmptyBlockSideInserter && (\n\t\t\t\t\t<EmptyBlockInserter\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ / Even if the toolbar is fixed, the block popover is still\n\t\t\t\t\tneeded for navigation and zoom-out mode. / }\n\t\t\t\t{ ! showEmptyBlockSideInserter && hasSelectedBlock && (\n\t\t\t\t\t<SelectedBlockTools\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ / Used for the inline rich text toolbar. / }\n\t\t\t\t{ ! isTopToolbar && (\n\t\t\t\t\t<Popover.Slot\n\t\t\t\t\t\tname=\"block-toolbar\"\n\t\t\t\t\t\tref={ blockToolbarRef }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ / Used for inline rich text popovers. */ }\n\t\t\t\t<Popover.Slot\n\t\t\t\t\tname=\"__unstable-block-tools-after\"\n\t\t\t\t\tref={ blockToolbarAfterRef }\n\t\t\t\t/>\n\t\t\t\t{ isZoomOutMode && (\n\t\t\t\t\t<ZoomOutModeInserters\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</InsertionPointOpenRef.Provider>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["_data","require","_components","_keyboardShortcuts","_element","_blocks","_emptyBlockInserter","_interopRequireDefault","_insertionPoint","_interopRequireWildcard","_blockToolbarPopover","_blockToolbarBreadcrumb","_store","_usePopoverScroll","_zoomOutModeInserters","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","selector","select","getSelectedBlockClientId","getFirstMultiSelectedBlockClientId","getBlock","getSettings","hasMultiSelection","__unstableGetEditorMode","isTyping","blockEditorStore","clientId","name","attributes","editorMode","hasSelectedBlock","isEmptyDefaultBlock","isUnmodifiedDefaultBlock","_showEmptyBlockSideInserter","maybeShowBreadcrumb","hasFixedToolbar","isZoomOutMode","showEmptyBlockSideInserter","showBreadcrumb","showBlockToolbar","BlockTools","children","__unstableContentRef","props","useSelect","isMatch","useShortcutEventMatch","getSelectedBlockClientIds","getBlockRootClientId","duplicateBlocks","removeBlocks","insertAfterBlock","insertBeforeBlock","clearSelectedBlock","selectBlock","moveBlocksUp","moveBlocksDown","useDispatch","onKeyDown","event","defaultPrevented","clientIds","length","preventDefault","rootClientId","target","closest","ownerDocument","defaultView","getSelection","removeAllRanges","current","focus","blockToolbarRef","usePopoverScroll","blockToolbarAfterRef","_react","createElement","InsertionPointOpenRef","Provider","value","useRef","Popover","Slot","ref"],"sources":["@wordpress/block-editor/src/components/block-tools/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { Popover } from '@wordpress/components';\nimport { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';\nimport { useRef } from '@wordpress/element';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/\n Internal dependencies\n /\nimport EmptyBlockInserter from './empty-block-inserter';\nimport {\n\tInsertionPointOpenRef,\n\tdefault as InsertionPoint,\n} from './insertion-point';\nimport BlockToolbarPopover from './block-toolbar-popover';\nimport BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';\nimport { store as blockEditorStore } from '../../store';\nimport usePopoverScroll from '../block-popover/use-popover-scroll';\nimport ZoomOutModeInserters from './zoom-out-mode-inserters';\n\nfunction selector( select ) {\n\tconst {\n\t\tgetSelectedBlockClientId,\n\t\tgetFirstMultiSelectedBlockClientId,\n\t\tgetBlock,\n\t\tgetSettings,\n\t\thasMultiSelection,\n\t\t__unstableGetEditorMode,\n\t\tisTyping,\n\t} = select( blockEditorStore );\n\n\tconst clientId =\n\t\tgetSelectedBlockClientId() \|\| getFirstMultiSelectedBlockClientId();\n\n\tconst { name = '', attributes = {} } = getBlock( clientId ) \|\| {};\n\tconst editorMode = __unstableGetEditorMode();\n\tconst hasSelectedBlock = clientId && name;\n\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {\n\t\tname,\n\t\tattributes,\n\t} );\n\tconst _showEmptyBlockSideInserter =\n\t\tclientId &&\n\t\t! isTyping() &&\n\t\teditorMode === 'edit' &&\n\t\tisUnmodifiedDefaultBlock( { name, attributes } );\n\tconst maybeShowBreadcrumb =\n\t\thasSelectedBlock &&\n\t\t! hasMultiSelection() &&\n\t\t( editorMode === 'navigation' \|\| editorMode === 'zoom-out' );\n\n\treturn {\n\t\tclientId,\n\t\thasFixedToolbar: getSettings().hasFixedToolbar,\n\t\tisTyping: isTyping(),\n\t\tisZoomOutMode: editorMode === 'zoom-out',\n\t\tshowEmptyBlockSideInserter: _showEmptyBlockSideInserter,\n\t\tshowBreadcrumb: ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,\n\t\tshowBlockToolbar:\n\t\t\t! getSettings().hasFixedToolbar &&\n\t\t\t! _showEmptyBlockSideInserter &&\n\t\t\thasSelectedBlock &&\n\t\t\t! isEmptyDefaultBlock &&\n\t\t\t! maybeShowBreadcrumb,\n\t};\n}\n\n/\n Renders block tools (the block toolbar, select/navigation mode toolbar, the\n * insertion point and a slot for the inline rich text toolbar). Must be wrapped\n * around the block content and editor styles wrapper or iframe.\n \n @param {Object} $0 Props.\n * @param {Object} $0.children The block content and style container.\n * @param {Object} $0.__unstableContentRef Ref holding the content scroll container.\n /\nexport default function BlockTools( {\n\tchildren,\n\t__unstableContentRef,\n\t...props\n} ) {\n\tconst {\n\t\tclientId,\n\t\thasFixedToolbar,\n\t\tisTyping,\n\t\tisZoomOutMode,\n\t\tshowEmptyBlockSideInserter,\n\t\tshowBreadcrumb,\n\t\tshowBlockToolbar,\n\t} = useSelect( selector, [] );\n\tconst isMatch = useShortcutEventMatch();\n\tconst { getSelectedBlockClientIds, getBlockRootClientId } =\n\t\tuseSelect( blockEditorStore );\n\tconst {\n\t\tduplicateBlocks,\n\t\tremoveBlocks,\n\t\tinsertAfterBlock,\n\t\tinsertBeforeBlock,\n\t\tclearSelectedBlock,\n\t\tselectBlock,\n\t\tmoveBlocksUp,\n\t\tmoveBlocksDown,\n\t} = useDispatch( blockEditorStore );\n\n\tfunction onKeyDown( event ) {\n\t\tif ( event.defaultPrevented ) return;\n\n\t\tif ( isMatch( 'core/block-editor/move-up', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\t\tmoveBlocksUp( clientIds, rootClientId );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/move-down', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\t\tmoveBlocksDown( clientIds, rootClientId );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tduplicateBlocks( clientIds );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/remove', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tremoveBlocks( clientIds );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinsertAfterBlock( clientIds[ clientIds.length - 1 ] );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tinsertBeforeBlock( clientIds[ 0 ] );\n\t\t\t}\n\t\t} else if ( isMatch( 'core/block-editor/unselect', event ) ) {\n\t\t\tif ( event.target.closest( '[role=toolbar]' ) ) {\n\t\t\t\t// This shouldn't be necessary, but we have a combination of a few things all combining to create a situation where:\n\t\t\t\t// - Because the block toolbar uses createPortal to populate the block toolbar fills, we can't rely on the React event bubbling to hit the onKeyDown listener for the block toolbar\n\t\t\t\t// - Since we can't use the React tree, we use the DOM tree which _should_ handle the event bubbling correctly from a `createPortal` element.\n\t\t\t\t// - This bubbles via the React tree, which hits this `unselect` escape keypress before the block toolbar DOM event listener has access to it.\n\t\t\t\t// An alternative would be to remove the addEventListener on the navigableToolbar and use this event to handle it directly right here. That feels hacky too though.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst clientIds = getSelectedBlockClientIds();\n\t\t\tif ( clientIds.length ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// If there is more than one block selected, select the first\n\t\t\t\t// block so that focus is directed back to the beginning of the selection.\n\t\t\t\t// In effect, to the user this feels like deselecting the multi-selection.\n\t\t\t\tif ( clientIds.length > 1 ) {\n\t\t\t\t\tselectBlock( clientIds[ 0 ] );\n\t\t\t\t} else {\n\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t}\n\t\t\t\tevent.target.ownerDocument.defaultView\n\t\t\t\t\t.getSelection()\n\t\t\t\t\t.removeAllRanges();\n\t\t\t\t__unstableContentRef?.current.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tconst blockToolbarRef = usePopoverScroll( __unstableContentRef );\n\tconst blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div { ...props } onKeyDown={ onKeyDown }>\n\t\t\t<InsertionPointOpenRef.Provider value={ useRef( false ) }>\n\t\t\t\t{ ! isTyping && (\n\t\t\t\t\t<InsertionPoint\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ showEmptyBlockSideInserter && (\n\t\t\t\t\t<EmptyBlockInserter\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ showBlockToolbar && (\n\t\t\t\t\t<BlockToolbarPopover\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\tisTyping={ isTyping }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ showBreadcrumb && (\n\t\t\t\t\t<BlockToolbarBreadcrumb\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ / Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. / }\n\t\t\t\t{ ! isZoomOutMode && ! hasFixedToolbar && (\n\t\t\t\t\t<Popover.Slot\n\t\t\t\t\t\tname=\"block-toolbar\"\n\t\t\t\t\t\tref={ blockToolbarRef }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ / Used for inline rich text popovers. */ }\n\t\t\t\t<Popover.Slot\n\t\t\t\t\tname=\"__unstable-block-tools-after\"\n\t\t\t\t\tref={ blockToolbarAfterRef }\n\t\t\t\t/>\n\t\t\t\t{ isZoomOutMode && (\n\t\t\t\t\t<ZoomOutModeInserters\n\t\t\t\t\t\t__unstableContentRef={ __unstableContentRef }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</InsertionPointOpenRef.Provider>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAKA,IAAAK,mBAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,eAAA,GAAAC,uBAAA,CAAAR,OAAA;AAIA,IAAAS,oBAAA,GAAAH,sBAAA,CAAAN,OAAA;AACA,IAAAU,uBAAA,GAAAJ,sBAAA,CAAAN,OAAA;AACA,IAAAW,MAAA,GAAAX,OAAA;AACA,IAAAY,iBAAA,GAAAN,sBAAA,CAAAN,OAAA;AACA,IAAAa,qBAAA,GAAAP,sBAAA,CAAAN,OAAA;AAA6D,SAAAc,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAP,wBAAAW,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AArB7D;AACA;AACA;;AAOA;AACA;AACA;;AAYA,SAASW,QAAQA,CAAEC,MAAM,EAAG;EAC3B,MAAM;IACLC,wBAAwB;IACxBC,kCAAkC;IAClCC,QAAQ;IACRC,WAAW;IACXC,iBAAiB;IACjBC,uBAAuB;IACvBC;EACD,CAAC,GAAGP,MAAM,CAAEQ,YAAiB,CAAC;EAE9B,MAAMC,QAAQ,GACbR,wBAAwB,CAAC,CAAC,IAAIC,kCAAkC,CAAC,CAAC;EAEnE,MAAM;IAAEQ,IAAI,GAAG,EAAE;IAAEC,UAAU,GAAG,CAAC;EAAE,CAAC,GAAGR,QAAQ,CAAEM,QAAS,CAAC,IAAI,CAAC,CAAC;EACjE,MAAMG,UAAU,GAAGN,uBAAuB,CAAC,CAAC;EAC5C,MAAMO,gBAAgB,GAAGJ,QAAQ,IAAIC,IAAI;EACzC,MAAMI,mBAAmB,GAAG,IAAAC,gCAAwB,EAAE;IACrDL,IAAI;IACJC;EACD,CAAE,CAAC;EACH,MAAMK,2BAA2B,GAChCP,QAAQ,IACR,CAAEF,QAAQ,CAAC,CAAC,IACZK,UAAU,KAAK,MAAM,IACrB,IAAAG,gCAAwB,EAAE;IAAEL,IAAI;IAAEC;EAAW,CAAE,CAAC;EACjD,MAAMM,mBAAmB,GACxBJ,gBAAgB,IAChB,CAAER,iBAAiB,CAAC,CAAC,KACnBO,UAAU,KAAK,YAAY,IAAIA,UAAU,KAAK,UAAU,CAAE;EAE7D,OAAO;IACNH,QAAQ;IACRS,eAAe,EAAEd,WAAW,CAAC,CAAC,CAACc,eAAe;IAC9CX,QAAQ,EAAEA,QAAQ,CAAC,CAAC;IACpBY,aAAa,EAAEP,UAAU,KAAK,UAAU;IACxCQ,0BAA0B,EAAEJ,2BAA2B;IACvDK,cAAc,EAAE,CAAEL,2BAA2B,IAAIC,mBAAmB;IACpEK,gBAAgB,EACf,CAAElB,WAAW,CAAC,CAAC,CAACc,eAAe,IAC/B,CAAEF,2BAA2B,IAC7BH,gBAAgB,IAChB,CAAEC,mBAAmB,IACrB,CAAEG;EACJ,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASM,UAAUA,CAAE;EACnCC,QAAQ;EACRC,oBAAoB;EACpB,GAAGC;AACJ,CAAC,EAAG;EACH,MAAM;IACLjB,QAAQ;IACRS,eAAe;IACfX,QAAQ;IACRY,aAAa;IACbC,0BAA0B;IAC1BC,cAAc;IACdC;EACD,CAAC,GAAG,IAAAK,eAAS,EAAE5B,QAAQ,EAAE,EAAG,CAAC;EAC7B,MAAM6B,OAAO,GAAG,IAAAC,kDAAqB,EAAC,CAAC;EACvC,MAAM;IAAEC,yBAAyB;IAAEC;EAAqB,CAAC,GACxD,IAAAJ,eAAS,EAAEnB,YAAiB,CAAC;EAC9B,MAAM;IACLwB,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiB;IACjBC,kBAAkB;IAClBC,WAAW;IACXC,YAAY;IACZC;EACD,CAAC,GAAG,IAAAC,iBAAW,EAAEhC,YAAiB,CAAC;EAEnC,SAASiC,SAASA,CAAEC,KAAK,EAAG;IAC3B,IAAKA,KAAK,CAACC,gBAAgB,EAAG;IAE9B,IAAKf,OAAO,CAAE,2BAA2B,EAAEc,KAAM,CAAC,EAAG;MACpD,MAAME,SAAS,GAAGd,yBAAyB,CAAC,CAAC;MAC7C,IAAKc,SAAS,CAACC,MAAM,EAAG;QACvBH,KAAK,CAACI,cAAc,CAAC,CAAC;QACtB,MAAMC,YAAY,GAAGhB,oBAAoB,CAAEa,SAAS,CAAE,CAAC,CAAG,CAAC;QAC3DN,YAAY,CAAEM,SAAS,EAAEG,YAAa,CAAC;MACxC;IACD,CAAC,MAAM,IAAKnB,OAAO,CAAE,6BAA6B,EAAEc,KAAM,CAAC,EAAG;MAC7D,MAAME,SAAS,GAAGd,yBAAyB,CAAC,CAAC;MAC7C,IAAKc,SAAS,CAACC,MAAM,EAAG;QACvBH,KAAK,CAACI,cAAc,CAAC,CAAC;QACtB,MAAMC,YAAY,GAAGhB,oBAAoB,CAAEa,SAAS,CAAE,CAAC,CAAG,CAAC;QAC3DL,cAAc,CAAEK,SAAS,EAAEG,YAAa,CAAC;MAC1C;IACD,CAAC,MAAM,IAAKnB,OAAO,CAAE,6BAA6B,EAAEc,KAAM,CAAC,EAAG;MAC7D,MAAME,SAAS,GAAGd,yBAAyB,CAAC,CAAC;MAC7C,IAAKc,SAAS,CAACC,MAAM,EAAG;QACvBH,KAAK,CAACI,cAAc,CAAC,CAAC;QACtBd,eAAe,CAAEY,SAAU,CAAC;MAC7B;IACD,CAAC,MAAM,IAAKhB,OAAO,CAAE,0BAA0B,EAAEc,KAAM,CAAC,EAAG;MAC1D,MAAME,SAAS,GAAGd,yBAAyB,CAAC,CAAC;MAC7C,IAAKc,SAAS,CAACC,MAAM,EAAG;QACvBH,KAAK,CAACI,cAAc,CAAC,CAAC;QACtBb,YAAY,CAAEW,SAAU,CAAC;MAC1B;IACD,CAAC,MAAM,IAAKhB,OAAO,CAAE,gCAAgC,EAAEc,KAAM,CAAC,EAAG;MAChE,MAAME,SAAS,GAAGd,yBAAyB,CAAC,CAAC;MAC7C,IAAKc,SAAS,CAACC,MAAM,EAAG;QACvBH,KAAK,CAACI,cAAc,CAAC,CAAC;QACtBZ,gBAAgB,CAAEU,SAAS,CAAEA,SAAS,CAACC,MAAM,GAAG,CAAC,CAAG,CAAC;MACtD;IACD,CAAC,MAAM,IAAKjB,OAAO,CAAE,iCAAiC,EAAEc,KAAM,CAAC,EAAG;MACjE,MAAME,SAAS,GAAGd,yBAAyB,CAAC,CAAC;MAC7C,IAAKc,SAAS,CAACC,MAAM,EAAG;QACvBH,KAAK,CAACI,cAAc,CAAC,CAAC;QACtBX,iBAAiB,CAAES,SAAS,CAAE,CAAC,CAAG,CAAC;MACpC;IACD,CAAC,MAAM,IAAKhB,OAAO,CAAE,4BAA4B,EAAEc,KAAM,CAAC,EAAG;MAC5D,IAAKA,KAAK,CAACM,MAAM,CAACC,OAAO,CAAE,gBAAiB,CAAC,EAAG;QAC/C;QACA;QACA;QACA;QACA;QACA;MACD;MAEA,MAAML,SAAS,GAAGd,yBAAyB,CAAC,CAAC;MAC7C,IAAKc,SAAS,CAACC,MAAM,EAAG;QACvBH,KAAK,CAACI,cAAc,CAAC,CAAC;;QAEtB;QACA;QACA;QACA,IAAKF,SAAS,CAACC,MAAM,GAAG,CAAC,EAAG;UAC3BR,WAAW,CAAEO,SAAS,CAAE,CAAC,CAAG,CAAC;QAC9B,CAAC,MAAM;UACNR,kBAAkB,CAAC,CAAC;QACrB;QACAM,KAAK,CAACM,MAAM,CAACE,aAAa,CAACC,WAAW,CACpCC,YAAY,CAAC,CAAC,CACdC,eAAe,CAAC,CAAC;QACnB5B,oBAAoB,EAAE6B,OAAO,CAACC,KAAK,CAAC,CAAC;MACtC;IACD;EACD;EAEA,MAAMC,eAAe,GAAG,IAAAC,yBAAgB,EAAEhC,oBAAqB,CAAC;EAChE,MAAMiC,oBAAoB,GAAG,IAAAD,yBAAgB,EAAEhC,oBAAqB,CAAC;EAErE;IACC;IACA,IAAAkC,MAAA,CAAAC,aAAA;MAAA,GAAUlC,KAAK;MAAGe,SAAS,EAAGA;IAAW,GACxC,IAAAkB,MAAA,CAAAC,aAAA,EAAC1F,eAAA,CAAA2F,qBAAqB,CAACC,QAAQ;MAACC,KAAK,EAAG,IAAAC,eAAM,EAAE,KAAM;IAAG,GACtD,CAAEzD,QAAQ,IACX,IAAAoD,MAAA,CAAAC,aAAA,EAAC1F,eAAA,CAAAc,OAAc;MACdyC,oBAAoB,EAAGA;IAAsB,CAC7C,CACD,EAECL,0BAA0B,IAC3B,IAAAuC,MAAA,CAAAC,aAAA,EAAC5F,mBAAA,CAAAgB,OAAkB;MAClByC,oBAAoB,EAAGA,oBAAsB;MAC7ChB,QAAQ,EAAGA;IAAU,CACrB,CACD,EAECa,gBAAgB,IACjB,IAAAqC,MAAA,CAAAC,aAAA,EAACxF,oBAAA,CAAAY,OAAmB;MACnByC,oBAAoB,EAAGA,oBAAsB;MAC7ChB,QAAQ,EAAGA,QAAU;MACrBF,QAAQ,EAAGA;IAAU,CACrB,CACD,EAECc,cAAc,IACf,IAAAsC,MAAA,CAAAC,aAAA,EAACvF,uBAAA,CAAAW,OAAsB;MACtByC,oBAAoB,EAAGA,oBAAsB;MAC7ChB,QAAQ,EAAGA;IAAU,CACrB,CACD,EAGC,CAAEU,aAAa,IAAI,CAAED,eAAe,IACrC,IAAAyC,MAAA,CAAAC,aAAA,EAAChG,WAAA,CAAAqG,OAAO,CAACC,IAAI;MACZxD,IAAI,EAAC,eAAe;MACpByD,GAAG,EAAGX;IAAiB,CACvB,CACD,EACChC,QAAQ,EAEV,IAAAmC,MAAA,CAAAC,aAAA,EAAChG,WAAA,CAAAqG,OAAO,CAACC,IAAI;MACZxD,IAAI,EAAC,8BAA8B;MACnCyD,GAAG,EAAGT;IAAsB,CAC5B,CAAC,EACAvC,aAAa,IACd,IAAAwC,MAAA,CAAAC,aAAA,EAACpF,qBAAA,CAAAQ,OAAoB;MACpByC,oBAAoB,EAAGA;IAAsB,CAC7C,CAE6B,CAC5B;EAAC;AAER"}

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

@@ -11,6 +11,7 @@ var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
 var _style = _interopRequireDefault(require("./style.scss"));
+var _inserterButton = _interopRequireDefault(require("../inserter-button"));
 /**
  * External dependencies
  */
@@ -46,10 +47,10 @@ function BlockTypesList({
     const {
       paddingLeft: itemPaddingLeft,
       paddingRight: itemPaddingRight
-    } = _components.InserterButton.Styles.modalItem;
+    } = _inserterButton.default.Styles.modalItem;
     const {
       width
-    } = _components.InserterButton.Styles.modalIconWrapper;
+    } = _inserterButton.default.Styles.modalIconWrapper;
     return width + itemPaddingLeft + itemPaddingRight;
   }
   function onLayout() {
@@ -90,7 +91,7 @@ function BlockTypesList({
   const renderListItem = ({
     item
   }) => {
-    return (0, _react.createElement)(_components.InserterButton, {
+    return (0, _react.createElement)(_inserterButton.default, {
       item: item,
       itemWidth: itemWidth,
       maxWidth: maxWidth,

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

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

package/build/components/block-variation-picker/index.native.js CHANGED Viewed

@@ -15,6 +15,7 @@ var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
 var _style = _interopRequireDefault(require("./style.scss"));
 var _store = require("../../store");
+var _inserterButton = _interopRequireDefault(require("../inserter-button"));
 /**
  * External dependencies
  */
@@ -71,7 +72,7 @@ function BlockVariationPicker({
     showsHorizontalScrollIndicator: false,
     contentContainerStyle: _style.default.contentContainerStyle,
     style: _style.default.containerStyle
-  }, variations.map(v => (0, _react.createElement)(_components.InserterButton, {
+  }, variations.map(v => (0, _react.createElement)(_inserterButton.default, {
     item: v,
     key: v.name,
     onSelect: () => onVariationSelect(v)

package/build/components/block-variation-picker/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_reactNative","require","_data","_compose","_blocks","_i18n","_components","_icons","_style","_interopRequireDefault","_store","hitSlop","top","bottom","left","right","BlockVariationPicker","isVisible","onClose","clientId","variations","replaceInnerBlocks","useDispatch","blockEditorStore","isIOS","Platform","OS","cancelButtonStyle","usePreferredColorSchemeStyle","styles","cancelButton","cancelButtonDark","leftButton","_react","createElement","TouchableWithoutFeedback","onPress","View","Text","style","maxFontSizeMultiplier","__","Icon","icon","close","size","closeIcon","onVariationSelect","variation","createBlocksFromInnerBlocksTemplate","innerBlocks","BottomSheet","title","contentStyle","testID","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","containerStyle","map","v","~~InserterButton~~","item","key","name","onSelect","PanelBody","FooterMessageControl","label","_default","exports"~~,"default"~~],"sources":["@wordpress/block-editor/src/components/block-variation-picker/index.native.js"],"sourcesContent":["/*\n External dependencies\n /\nimport {\n\tScrollView,\n\tView,\n\tText,\n\tTouchableWithoutFeedback,\n\tPlatform,\n} from 'react-native';\n\n/\n WordPress dependencies\n /\nimport { useDispatch } from '@wordpress/data';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPanelBody,\n\tBottomSheet,\n\tFooterMessageControl,\n~~\tInserterButton,\n~~} from '@wordpress/components';\nimport { Icon, close } from '@wordpress/icons';\n\n/\n Internal dependencies\n */\nimport styles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\nfunction BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {\n\tconst { replaceInnerBlocks } = useDispatch( blockEditorStore );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\n\tconst leftButton = (\n\t\t<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>\n\t\t\t<View>\n\t\t\t\t{ isIOS ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\tstyle={ styles.closeIcon }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n\n\tconst onVariationSelect = ( variation ) => {\n\t\treplaceInnerBlocks(\n\t\t\tclientId,\n\t\t\tcreateBlocksFromInnerBlocksTemplate( variation.innerBlocks )\n\t\t);\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ isVisible }\n\t\t\tonClose={ onClose }\n\t\t\ttitle={ __( 'Select a layout' ) }\n\t\t\tcontentStyle={ styles.contentStyle }\n\t\t\tleftButton={ leftButton }\n\t\t\ttestID=\"block-variation-modal\"\n\t\t>\n\t\t\t<ScrollView\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tcontentContainerStyle={ styles.contentContainerStyle }\n\t\t\t\tstyle={ styles.containerStyle }\n\t\t\t>\n\t\t\t\t{ variations.map( ( v ) => (\n\t\t\t\t\t<InserterButton\n\t\t\t\t\t\titem={ v }\n\t\t\t\t\t\tkey={ v.name }\n\t\t\t\t\t\tonSelect={ () => onVariationSelect( v ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ScrollView>\n\t\t\t<PanelBody>\n\t\t\t\t<FooterMessageControl\n\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t'Note: Column layout may vary between themes and screen sizes'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default BlockVariationPicker;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAWA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;~~AAMA~~,IAAAM,MAAA,GAAAN,OAAA;AAKA,IAAAO,MAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AA9BA;AACA;AACA;;AASA;AACA;AACA;;~~AAaA~~;AACA;AACA;;~~AAIA~~,~~MAAMU~~,OAAO,GAAG;EAAEC,GAAG,EAAE,EAAE;EAAEC,MAAM,EAAE,EAAE;EAAEC,IAAI,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAG,CAAC;AAE5D,SAASC,oBAAoBA,CAAE;EAAEC,SAAS;EAAEC,OAAO;EAAEC,QAAQ;EAAEC;AAAW,CAAC,EAAG;EAC7E,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,iBAAW,EAAEC,YAAiB,CAAC;EAC9D,MAAMC,KAAK,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK;EAEnC,MAAMC,iBAAiB,GAAG,IAAAC,qCAA4B,EACrDC,cAAM,CAACC,YAAY,EACnBD,cAAM,CAACE,gBACR,CAAC;EAED,MAAMC,UAAU,GACf,IAAAC,MAAA,CAAAC,aAAA,~~EAAClC~~,YAAA,~~CAAAmC~~,wBAAwB;IAACC,OAAO,EAAGlB,OAAS;IAACP,OAAO,EAAGA;EAAS,GAChE,IAAAsB,MAAA,CAAAC,aAAA,~~EAAClC~~,YAAA,~~CAAAqC~~,IAAI,QACFb,KAAK,GACN,IAAAS,MAAA,CAAAC,aAAA,~~EAAClC~~,YAAA,~~CAAAsC~~,IAAI;IACJC,KAAK,EAAGZ,iBAAmB;IAC3Ba,qBAAqB,EAAG;EAAG,GAEzB,IAAAC,QAAE,EAAE,QAAS,CACV,CAAC,GAEP,IAAAR,MAAA,CAAAC,aAAA,~~EAAC3B~~,MAAA,~~CAAAmC~~,IAAI;IACJC,IAAI,EAAGC,YAAO;IACdC,IAAI,EAAG,EAAI;IACXN,KAAK,EAAGV,cAAM,CAACiB;EAAW,CAC1B,CAEG,CACmB,CAC1B;EAED,MAAMC,iBAAiB,GAAKC,SAAS,IAAM;IAC1C3B,kBAAkB,CACjBF,QAAQ,EACR,IAAA8B,2CAAmC,EAAED,SAAS,CAACE,WAAY,CAC5D,CAAC;IACDhC,OAAO,CAAC,CAAC;EACV,CAAC;EAED,OACC,IAAAe,MAAA,CAAAC,aAAA,~~EAAC5B~~,WAAA,~~CAAA6C~~,WAAW;IACXlC,SAAS,EAAGA,SAAW;IACvBC,OAAO,EAAGA,OAAS;IACnBkC,KAAK,EAAG,IAAAX,QAAE,EAAE,iBAAkB,CAAG;IACjCY,YAAY,EAAGxB,cAAM,CAACwB,YAAc;IACpCrB,UAAU,EAAGA,UAAY;IACzBsB,MAAM,EAAC;EAAuB,GAE9B,IAAArB,MAAA,CAAAC,aAAA,~~EAAClC~~,YAAA,~~CAAAuD~~,UAAU;IACVC,UAAU;IACVC,8BAA8B,EAAG,KAAO;IACxCC,qBAAqB,EAAG7B,cAAM,CAAC6B,qBAAuB;IACtDnB,KAAK,EAAGV,cAAM,CAAC8B;EAAgB,GAE7BvC,UAAU,CAACwC,GAAG,CAAIC,CAAC,IACpB,IAAA5B,MAAA,CAAAC,aAAA,~~EAAC5B~~,~~WAAA~~,~~CAAAwD~~,~~cAAc~~;IACdC,IAAI,EAAGF,CAAG;IACVG,GAAG,EAAGH,CAAC,CAACI,IAAM;IACdC,QAAQ,EAAGA,CAAA,KAAMnB,iBAAiB,CAAEc,CAAE;EAAG,CACzC,CACA,CACS,CAAC,EACb,IAAA5B,MAAA,CAAAC,aAAA,~~EAAC5B~~,WAAA,~~CAAA6D~~,SAAS,QACT,IAAAlC,MAAA,CAAAC,aAAA,~~EAAC5B~~,WAAA,~~CAAA8D~~,oBAAoB;IACpBC,KAAK,EAAG,IAAA5B,QAAE,EACT,8DACD;EAAG,CACH,CACS,CACC,CAAC;AAEhB;AAAC,IAAA6B,QAAA,GAEctD,oBAAoB;AAAAuD,OAAA,~~CAAAC~~,OAAA,~~GAAAF~~,QAAA"}
1	+ {"version":3,"names":["_reactNative","require","_data","_compose","_blocks","_i18n","_components","_icons","_style","_interopRequireDefault","_store","_inserterButton","hitSlop","top","bottom","left","right","BlockVariationPicker","isVisible","onClose","clientId","variations","replaceInnerBlocks","useDispatch","blockEditorStore","isIOS","Platform","OS","cancelButtonStyle","usePreferredColorSchemeStyle","styles","cancelButton","cancelButtonDark","leftButton","_react","createElement","TouchableWithoutFeedback","onPress","View","Text","style","maxFontSizeMultiplier","__","Icon","icon","close","size","closeIcon","onVariationSelect","variation","createBlocksFromInnerBlocksTemplate","innerBlocks","BottomSheet","title","contentStyle","testID","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","containerStyle","map","v","default","item","key","name","onSelect","PanelBody","FooterMessageControl","label","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-variation-picker/index.native.js"],"sourcesContent":["/*\n External dependencies\n /\nimport {\n\tScrollView,\n\tView,\n\tText,\n\tTouchableWithoutFeedback,\n\tPlatform,\n} from 'react-native';\n\n/\n WordPress dependencies\n /\nimport { useDispatch } from '@wordpress/data';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPanelBody,\n\tBottomSheet,\n\tFooterMessageControl,\n} from '@wordpress/components';\nimport { Icon, close } from '@wordpress/icons';\n\n/\n Internal dependencies\n */\nimport styles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\nimport InserterButton from '../inserter-button';\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\nfunction BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {\n\tconst { replaceInnerBlocks } = useDispatch( blockEditorStore );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\n\tconst leftButton = (\n\t\t<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>\n\t\t\t<View>\n\t\t\t\t{ isIOS ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\tstyle={ styles.closeIcon }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n\n\tconst onVariationSelect = ( variation ) => {\n\t\treplaceInnerBlocks(\n\t\t\tclientId,\n\t\t\tcreateBlocksFromInnerBlocksTemplate( variation.innerBlocks )\n\t\t);\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ isVisible }\n\t\t\tonClose={ onClose }\n\t\t\ttitle={ __( 'Select a layout' ) }\n\t\t\tcontentStyle={ styles.contentStyle }\n\t\t\tleftButton={ leftButton }\n\t\t\ttestID=\"block-variation-modal\"\n\t\t>\n\t\t\t<ScrollView\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tcontentContainerStyle={ styles.contentContainerStyle }\n\t\t\t\tstyle={ styles.containerStyle }\n\t\t\t>\n\t\t\t\t{ variations.map( ( v ) => (\n\t\t\t\t\t<InserterButton\n\t\t\t\t\t\titem={ v }\n\t\t\t\t\t\tkey={ v.name }\n\t\t\t\t\t\tonSelect={ () => onVariationSelect( v ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ScrollView>\n\t\t\t<PanelBody>\n\t\t\t\t<FooterMessageControl\n\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t'Note: Column layout may vary between themes and screen sizes'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default BlockVariationPicker;\n"],"mappings":"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"}

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

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _useSettings = require("../use-settings");
+var _lockUnlock = require("../../lock-unlock");
 /**
  * External dependencies
  */
@@ -23,17 +24,10 @@ var _useSettings = require("../use-settings");
  */
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
-const TAB_COLOR = {
-  name: 'color',
-  title: (0, _i18n.__)('Solid'),
-  value: 'color'
+const TAB_IDS = {
+  color: 'color',
+  gradient: 'gradient'
 };
-const TAB_GRADIENT = {
-  name: 'gradient',
-  title: (0, _i18n.__)('Gradient'),
-  value: 'gradient'
-};
-const TABS_SETTINGS = [TAB_COLOR, TAB_GRADIENT];
 function ColorGradientControlInner({
   colors,
   gradients,
@@ -57,7 +51,7 @@ function ColorGradientControlInner({
     return null;
   }
   const tabPanels = {
-    [TAB_COLOR.value]: (0, _react.createElement)(_components.ColorPalette, {
+    [TAB_IDS.color]: (0, _react.createElement)(_components.ColorPalette, {
       value: colorValue,
       onChange: canChooseAGradient ? newColor => {
         onColorChange(newColor);
@@ -70,7 +64,7 @@ function ColorGradientControlInner({
       enableAlpha: enableAlpha,
       headingLevel: headingLevel
     }),
-    [TAB_GRADIENT.value]: (0, _react.createElement)(_components.GradientPicker, {
+    [TAB_IDS.gradient]: (0, _react.createElement)(_components.GradientPicker, {
       __nextHasNoMargin: true,
       value: gradientValue,
       onChange: canChooseAColor ? newGradient => {
@@ -87,6 +81,13 @@ function ColorGradientControlInner({
   const renderPanelType = type => (0, _react.createElement)("div", {
     className: "block-editor-color-gradient-control__panel"
   }, tabPanels[type]);
+  // Unlocking `Tabs` too early causes the `unlock` method to receive an empty
+  // object, due to circular dependencies.
+  // See https://github.com/WordPress/gutenberg/issues/52692
+  const {
+    Tabs
+  } = (0, _lockUnlock.unlock)(_components.privateApis);
   return (0, _react.createElement)(_components.BaseControl, {
     __nextHasNoMarginBottom: true,
     className: (0, _classnames.default)('block-editor-color-gradient-control', className)
@@ -96,11 +97,21 @@ function ColorGradientControlInner({
     spacing: 1
   }, showTitle && (0, _react.createElement)("legend", null, (0, _react.createElement)("div", {
     className: "block-editor-color-gradient-control__color-indicator"
-  }, (0, _react.createElement)(_components.BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && (0, _react.createElement)(_components.TabPanel, {
-    className: "block-editor-color-gradient-control__tabs",
-    tabs: TABS_SETTINGS,
-    initialTabName: gradientValue ? TAB_GRADIENT.value : !!canChooseAColor && TAB_COLOR.value
-  }, tab => renderPanelType(tab.value)), !canChooseAGradient && renderPanelType(TAB_COLOR.value), !canChooseAColor && renderPanelType(TAB_GRADIENT.value))));
+  }, (0, _react.createElement)(_components.BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && (0, _react.createElement)("div", null, (0, _react.createElement)(Tabs, {
+    initialTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color
+  }, (0, _react.createElement)(Tabs.TabList, null, (0, _react.createElement)(Tabs.Tab, {
+    tabId: TAB_IDS.color
+  }, (0, _i18n.__)('Solid')), (0, _react.createElement)(Tabs.Tab, {
+    tabId: TAB_IDS.gradient
+  }, (0, _i18n.__)('Gradient'))), (0, _react.createElement)(Tabs.TabPanel, {
+    tabId: TAB_IDS.color,
+    className: 'block-editor-color-gradient-control__panel',
+    focusable: false
+  }, tabPanels.color), (0, _react.createElement)(Tabs.TabPanel, {
+    tabId: TAB_IDS.gradient,
+    className: 'block-editor-color-gradient-control__panel',
+    focusable: false
+  }, tabPanels.gradient))), !canChooseAGradient && renderPanelType(TAB_IDS.color), !canChooseAColor && renderPanelType(TAB_IDS.gradient))));
 }
 function ColorGradientControlSelect(props) {
   const [colors, gradients, customColors, customGradients] = (0, _useSettings.useSettings)('color.palette', 'color.gradients', 'color.custom', 'color.customGradient');

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_components","_useSettings","colorsAndGradientKeys","TAB_COLOR","name","title","__","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","_react","createElement","ColorPalette","onChange","newColor","GradientPicker","__nextHasNoMargin","newGradient","renderPanelType","type","BaseControl","__nextHasNoMarginBottom","classnames","__experimentalVStack","spacing","VisualLabel","TabPanel","tabs","initialTabName","tab","ColorGradientControlSelect","props","customColors","customGradients","useSettings","ColorGradientControl","every","key","hasOwnProperty","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: __( 'Solid' ),\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: __( 'Gradient' ),\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) \|\| ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) \|\| ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\t__nextHasNoMargin\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\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 className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => renderPanelType( tab.value ) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient &&\n\t\t\t\t\t\trenderPanelType( TAB_COLOR.value ) }\n\t\t\t\t\t{ ! canChooseAColor &&\n\t\t\t\t\t\trenderPanelType( TAB_GRADIENT.value ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],"mappings":"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"}
1	+ {"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_components","_useSettings","_lockUnlock","colorsAndGradientKeys","TAB_IDS","color","gradient","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","_react","createElement","ColorPalette","value","onChange","newColor","GradientPicker","__nextHasNoMargin","newGradient","renderPanelType","type","Tabs","unlock","componentsPrivateApis","BaseControl","__nextHasNoMarginBottom","classnames","__experimentalVStack","spacing","VisualLabel","initialTabId","TabList","Tab","tabId","__","TabPanel","focusable","ColorGradientControlSelect","props","customColors","customGradients","useSettings","ColorGradientControl","every","key","hasOwnProperty","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) \|\| ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) \|\| ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\t__nextHasNoMargin\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\t// Unlocking `Tabs` too early causes the `unlock` method to receive an empty\n\t// object, due to circular dependencies.\n\t// See https://github.com/WordPress/gutenberg/issues/52692\n\tconst { Tabs } = unlock( componentsPrivateApis );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\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 className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tinitialTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Solid' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t'block-editor-color-gradient-control__panel'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t'block-editor-color-gradient-control__panel'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],"mappings":"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"}

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

@@ -67,10 +67,7 @@ function DuotoneControl({
     },
     renderContent: () => (0, _react.createElement)(_components.MenuGroup, {
       label: (0, _i18n.__)('Duotone')
-    }, (0, _react.createElement)("div", {
-      id: descriptionId,
-      className: "block-editor-duotone-control__description"
-    }, (0, _i18n.__)('Create a two-tone color effect without losing your original image.')), (0, _react.createElement)(_components.DuotonePicker, {
+    }, (0, _react.createElement)("p", null, (0, _i18n.__)('Create a two-tone color effect without losing your original image.')), (0, _react.createElement)(_components.DuotonePicker, {
       "aria-label": actionLabel,
       "aria-describedby": descriptionId,
       colorPalette: colorPalette,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_components","require","_i18n","_keycodes","_icons","_compose","DuotoneControl","id","idProp","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","toolbarIcon","_react","createElement","ColorIndicator","className","DuotoneSwatch","values","Icon","icon","filter","actionLabel","__","useInstanceId","descriptionId","Dropdown","popoverProps","headerTitle","renderToggle","isOpen","onToggle","openOnArrowDown","event","keyCode","DOWN","preventDefault","ToolbarButton","showTooltip","onClick","onKeyDown","label","renderContent","MenuGroup","DuotonePicker","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/duotone-control/index.js"],"sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\tColorIndicator,\n\tDropdown,\n\tDuotonePicker,\n\tDuotoneSwatch,\n\tMenuGroup,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport { Icon, filter } from '@wordpress/icons';\nimport { useInstanceId } from '@wordpress/compose';\n\nfunction DuotoneControl( {\n\tid: idProp,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tlet toolbarIcon;\n\tif ( value === 'unset' ) {\n\t\ttoolbarIcon = (\n\t\t\t<ColorIndicator className=\"block-editor-duotone-control__unset-indicator\" />\n\t\t);\n\t} else if ( value ) {\n\t\ttoolbarIcon = <DuotoneSwatch values={ value } />;\n\t} else {\n\t\ttoolbarIcon = <Icon icon={ filter } />;\n\t}\n\n\tconst actionLabel = __( 'Apply duotone filter' );\n\tconst id = useInstanceId( DuotoneControl, 'duotone-control', idProp );\n\tconst descriptionId = `${ id }__description`;\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ {\n\t\t\t\tclassName: 'block-editor-duotone-control__popover',\n\t\t\t\theaderTitle: __( 'Duotone' ),\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ actionLabel }\n\t\t\t\t\t\ticon={ toolbarIcon }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<MenuGroup label={ __( 'Duotone' ) }>\n\t\t\t\t\t<~~div\n\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\tclassName=\"block-editor-duotone-control__description\"\n\t\t\t\t\t~~>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</~~div~~>\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\taria-label={ actionLabel }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default DuotoneControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAdA;AACA;AACA;;AAcA,SAASK,cAAcA,CAAE;EACxBC,EAAE,EAAEC,MAAM;EACVC,YAAY;EACZC,cAAc;EACdC,mBAAmB;EACnBC,oBAAoB;EACpBC,KAAK;EACLC;AACD,CAAC,EAAG;EACH,IAAIC,WAAW;EACf,IAAKF,KAAK,KAAK,OAAO,EAAG;IACxBE,WAAW,GACV,IAAAC,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAkB,cAAc;MAACC,SAAS,EAAC;IAA+C,CAAE,CAC3E;EACF,CAAC,MAAM,IAAKN,KAAK,EAAG;IACnBE,WAAW,GAAG,IAAAC,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAoB,aAAa;MAACC,MAAM,EAAGR;IAAO,CAAE,CAAC;EACjD,CAAC,MAAM;IACNE,WAAW,GAAG,IAAAC,MAAA,CAAAC,aAAA,EAACb,MAAA,CAAAkB,IAAI;MAACC,IAAI,EAAGC;IAAQ,CAAE,CAAC;EACvC;EAEA,MAAMC,WAAW,GAAG,IAAAC,QAAE,EAAE,sBAAuB,CAAC;EAChD,MAAMnB,EAAE,GAAG,IAAAoB,sBAAa,EAAErB,cAAc,EAAE,iBAAiB,EAAEE,MAAO,CAAC;EACrE,MAAMoB,aAAa,GAAI,GAAGrB,EAAI,eAAc;EAE5C,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAA6B,QAAQ;IACRC,YAAY,EAAG;MACdX,SAAS,EAAE,uCAAuC;MAClDY,WAAW,EAAE,IAAAL,QAAE,EAAE,SAAU;IAC5B,CAAG;IACHM,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KAAM;MAC1C,MAAMC,eAAe,GAAKC,KAAK,IAAM;QACpC,IAAK,CAAEH,MAAM,IAAIG,KAAK,CAACC,OAAO,KAAKC,cAAI,EAAG;UACzCF,KAAK,CAACG,cAAc,CAAC,CAAC;UACtBL,QAAQ,CAAC,CAAC;QACX;MACD,CAAC;MACD,OACC,IAAAlB,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAwC,aAAa;QACbC,WAAW;QACXC,OAAO,EAAGR,QAAU;QACpB,iBAAc,MAAM;QACpB,iBAAgBD,MAAQ;QACxBU,SAAS,EAAGR,eAAiB;QAC7BS,KAAK,EAAGnB,WAAa;QACrBF,IAAI,EAAGR;MAAa,CACpB,CAAC;IAEJ,CAAG;IACH8B,aAAa,EAAGA,CAAA,KACf,IAAA7B,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAA8C,SAAS;MAACF,KAAK,EAAG,IAAAlB,QAAE,EAAE,SAAU;IAAG,GACnC,IAAAV,MAAA,CAAAC,aAAA~~;MACCV~~,~~EAAE~~,~~EAAGqB~~,~~aAAe;MACpBT,SAAS,EAAC;IAA2C,GAEnD,IAAAO,~~QAAE,EACH,oEACD,~~CACI~~,CAAC,~~EACN~~,IAAAV,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAA+C,aAAa;MACb,cAAatB,WAAa;MAC1B,oBAAmBG,aAAe;MAClCnB,YAAY,EAAGA,YAAc;MAC7BC,cAAc,EAAGA,cAAgB;MACjCC,mBAAmB,EAAGA,mBAAqB;MAC3CC,oBAAoB,EAAGA,oBAAsB;MAC7CC,KAAK,EAAGA,KAAO;MACfC,QAAQ,EAAGA;IAAU,CACrB,CACS;EACT,CACH,CAAC;AAEJ;AAAC,IAAAkC,QAAA,GAEc1C,cAAc;AAAA2C,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
1	+ {"version":3,"names":["_components","require","_i18n","_keycodes","_icons","_compose","DuotoneControl","id","idProp","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","toolbarIcon","_react","createElement","ColorIndicator","className","DuotoneSwatch","values","Icon","icon","filter","actionLabel","__","useInstanceId","descriptionId","Dropdown","popoverProps","headerTitle","renderToggle","isOpen","onToggle","openOnArrowDown","event","keyCode","DOWN","preventDefault","ToolbarButton","showTooltip","onClick","onKeyDown","label","renderContent","MenuGroup","DuotonePicker","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/duotone-control/index.js"],"sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\tColorIndicator,\n\tDropdown,\n\tDuotonePicker,\n\tDuotoneSwatch,\n\tMenuGroup,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport { Icon, filter } from '@wordpress/icons';\nimport { useInstanceId } from '@wordpress/compose';\n\nfunction DuotoneControl( {\n\tid: idProp,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tlet toolbarIcon;\n\tif ( value === 'unset' ) {\n\t\ttoolbarIcon = (\n\t\t\t<ColorIndicator className=\"block-editor-duotone-control__unset-indicator\" />\n\t\t);\n\t} else if ( value ) {\n\t\ttoolbarIcon = <DuotoneSwatch values={ value } />;\n\t} else {\n\t\ttoolbarIcon = <Icon icon={ filter } />;\n\t}\n\n\tconst actionLabel = __( 'Apply duotone filter' );\n\tconst id = useInstanceId( DuotoneControl, 'duotone-control', idProp );\n\tconst descriptionId = `${ id }__description`;\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ {\n\t\t\t\tclassName: 'block-editor-duotone-control__popover',\n\t\t\t\theaderTitle: __( 'Duotone' ),\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ actionLabel }\n\t\t\t\t\t\ticon={ toolbarIcon }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<MenuGroup label={ __( 'Duotone' ) }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\taria-label={ actionLabel }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default DuotoneControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAdA;AACA;AACA;;AAcA,SAASK,cAAcA,CAAE;EACxBC,EAAE,EAAEC,MAAM;EACVC,YAAY;EACZC,cAAc;EACdC,mBAAmB;EACnBC,oBAAoB;EACpBC,KAAK;EACLC;AACD,CAAC,EAAG;EACH,IAAIC,WAAW;EACf,IAAKF,KAAK,KAAK,OAAO,EAAG;IACxBE,WAAW,GACV,IAAAC,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAkB,cAAc;MAACC,SAAS,EAAC;IAA+C,CAAE,CAC3E;EACF,CAAC,MAAM,IAAKN,KAAK,EAAG;IACnBE,WAAW,GAAG,IAAAC,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAoB,aAAa;MAACC,MAAM,EAAGR;IAAO,CAAE,CAAC;EACjD,CAAC,MAAM;IACNE,WAAW,GAAG,IAAAC,MAAA,CAAAC,aAAA,EAACb,MAAA,CAAAkB,IAAI;MAACC,IAAI,EAAGC;IAAQ,CAAE,CAAC;EACvC;EAEA,MAAMC,WAAW,GAAG,IAAAC,QAAE,EAAE,sBAAuB,CAAC;EAChD,MAAMnB,EAAE,GAAG,IAAAoB,sBAAa,EAAErB,cAAc,EAAE,iBAAiB,EAAEE,MAAO,CAAC;EACrE,MAAMoB,aAAa,GAAI,GAAGrB,EAAI,eAAc;EAE5C,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAA6B,QAAQ;IACRC,YAAY,EAAG;MACdX,SAAS,EAAE,uCAAuC;MAClDY,WAAW,EAAE,IAAAL,QAAE,EAAE,SAAU;IAC5B,CAAG;IACHM,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KAAM;MAC1C,MAAMC,eAAe,GAAKC,KAAK,IAAM;QACpC,IAAK,CAAEH,MAAM,IAAIG,KAAK,CAACC,OAAO,KAAKC,cAAI,EAAG;UACzCF,KAAK,CAACG,cAAc,CAAC,CAAC;UACtBL,QAAQ,CAAC,CAAC;QACX;MACD,CAAC;MACD,OACC,IAAAlB,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAAwC,aAAa;QACbC,WAAW;QACXC,OAAO,EAAGR,QAAU;QACpB,iBAAc,MAAM;QACpB,iBAAgBD,MAAQ;QACxBU,SAAS,EAAGR,eAAiB;QAC7BS,KAAK,EAAGnB,WAAa;QACrBF,IAAI,EAAGR;MAAa,CACpB,CAAC;IAEJ,CAAG;IACH8B,aAAa,EAAGA,CAAA,KACf,IAAA7B,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAA8C,SAAS;MAACF,KAAK,EAAG,IAAAlB,QAAE,EAAE,SAAU;IAAG,GACnC,IAAAV,MAAA,CAAAC,aAAA,aACG,IAAAS,QAAE,EACH,oEACD,CACE,CAAC,EACJ,IAAAV,MAAA,CAAAC,aAAA,EAACjB,WAAA,CAAA+C,aAAa;MACb,cAAatB,WAAa;MAC1B,oBAAmBG,aAAe;MAClCnB,YAAY,EAAGA,YAAc;MAC7BC,cAAc,EAAGA,cAAgB;MACjCC,mBAAmB,EAAGA,mBAAqB;MAC3CC,oBAAoB,EAAGA,oBAAsB;MAC7CC,KAAK,EAAGA,KAAO;MACfC,QAAQ,EAAGA;IAAU,CACrB,CACS;EACT,CACH,CAAC;AAEJ;AAAC,IAAAkC,QAAA,GAEc1C,cAAc;AAAA2C,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/components/global-styles/color-panel.js CHANGED Viewed

@@ -21,6 +21,7 @@ var _control = _interopRequireDefault(require("../colors-gradients/control"));
 var _hooks = require("./hooks");
 var _utils = require("./utils");
 var _object = require("../../utils/object");
+var _lockUnlock = require("../../lock-unlock");
 /**
  * External dependencies
  */
@@ -152,15 +153,13 @@ function ColorPanelDropdown({
   colorGradientControlSettings,
   panelId
 }) {
-  const tabConfigs = tabs.map(({
-    key,
-    label: tabLabel
-  }) => {
-    return {
-      name: key,
-      title: tabLabel
-    };
-  });
+  const currentTab = tabs.find(tab => tab.userValue !== undefined);
+  // Unlocking `Tabs` too early causes the `unlock` method to receive an empty
+  // object, due to circular dependencies.
+  // See https://github.com/WordPress/gutenberg/issues/52692
+  const {
+    Tabs
+  } = (0, _lockUnlock.unlock)(_components.privateApis);
   return (0, _react.createElement)(_components.__experimentalToolsPanelItem, {
     className: "block-editor-tools-panel-color-gradient-settings__item",
     hasValue: hasValue,
@@ -198,18 +197,21 @@ function ColorPanelDropdown({
     }, tabs.length === 1 && (0, _react.createElement)(ColorPanelTab, {
       ...tabs[0],
       colorGradientControlSettings: colorGradientControlSettings
-    }), tabs.length > 1 && (0, _react.createElement)(_components.TabPanel, {
-      tabs: tabConfigs
-    }, tab => {
-      const selectedTab = tabs.find(t => t.key === tab.name);
-      if (!selectedTab) {
-        return null;
-      }
-      return (0, _react.createElement)(ColorPanelTab, {
-        ...selectedTab,
+    }), tabs.length > 1 && (0, _react.createElement)(Tabs, {
+      initialTabId: currentTab?.key
+    }, (0, _react.createElement)(Tabs.TabList, null, tabs.map(tab => (0, _react.createElement)(Tabs.Tab, {
+      key: tab.key,
+      tabId: tab.key
+    }, tab.label))), tabs.map(tab => {
+      return (0, _react.createElement)(Tabs.TabPanel, {
+        key: tab.key,
+        tabId: tab.key,
+        focusable: false
+      }, (0, _react.createElement)(ColorPanelTab, {
+        ...tab,
         colorGradientControlSettings: colorGradientControlSettings
-      });
-    })))
+      }));
+    }))))
   }));
 }
 function ColorPanel({