@wordpress/block-editor 12.4.0 → 12.5.0

package/build/components/block-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-toolbar/index.js"],"names":["BlockToolbar","hideDragHandle","blockClientIds","blockClientId","blockType","hasFixedToolbar","isDistractionFree","isValid","isVisual","blockEditingMode","select","getBlockName","getBlockMode","getSelectedBlockClientIds","isBlockValid","getBlockRootClientId","getSettings","getBlockEditingMode","blockEditorStore","selectedBlockClientIds","selectedBlockClientId","blockRootClientId","settings","rootClientId","every","id","toggleBlockHighlight","nodeRef","showMovers","gestures","showMoversGestures","ref","onChange","isFocused","displayHeaderToolbar","isLargeViewport","shouldShowMovers","length","shouldShowVisualToolbar","isMultiToolbar","isSynced","classes","name"],"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 { useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tgetBlockType,\n\thasBlockSupport,\n\tisReusableBlock,\n\tisTemplatePart,\n} from '@wordpress/blocks';\nimport { ToolbarGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockMover from '../block-mover';\nimport BlockParentSelector from '../block-parent-selector';\nimport BlockSwitcher from '../block-switcher';\nimport BlockControls from '../block-controls';\nimport __unstableBlockToolbarLastItem from './block-toolbar-last-item';\nimport BlockSettingsMenu from '../block-settings-menu';\nimport { BlockLockToolbar } from '../block-lock';\nimport { BlockGroupToolbar } from '../convert-to-group-buttons';\nimport BlockEditVisuallyButton from '../block-edit-visually-button';\nimport { useShowMoversGestures } from './utils';\nimport { store as blockEditorStore } from '../../store';\nimport __unstableBlockNameContext from './block-name-context';\nimport { unlock } from '../../lock-unlock';\n\nconst BlockToolbar = ( { hideDragHandle } ) => {\n\tconst {\n\t\tblockClientIds,\n\t\tblockClientId,\n\t\tblockType,\n\t\thasFixedToolbar,\n\t\tisDistractionFree,\n\t\tisValid,\n\t\tisVisual,\n\t\tblockEditingMode,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetBlockName,\n\t\t\tgetBlockMode,\n\t\t\tgetSelectedBlockClientIds,\n\t\t\tisBlockValid,\n\t\t\tgetBlockRootClientId,\n\t\t\tgetSettings,\n\t\t\tgetBlockEditingMode,\n\t\t} = unlock( select( blockEditorStore ) );\n\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\tconst selectedBlockClientId = selectedBlockClientIds[ 0 ];\n\t\tconst blockRootClientId = getBlockRootClientId( selectedBlockClientId );\n\t\tconst settings = getSettings();\n\n\t\treturn {\n\t\t\tblockClientIds: selectedBlockClientIds,\n\t\t\tblockClientId: selectedBlockClientId,\n\t\t\tblockType:\n\t\t\t\tselectedBlockClientId &&\n\t\t\t\tgetBlockType( getBlockName( selectedBlockClientId ) ),\n\t\t\thasFixedToolbar: settings.hasFixedToolbar,\n\t\t\tisDistractionFree: settings.isDistractionFree,\n\t\t\trootClientId: blockRootClientId,\n\t\t\tisValid: selectedBlockClientIds.every( ( id ) =>\n\t\t\t\tisBlockValid( id )\n\t\t\t),\n\t\t\tisVisual: selectedBlockClientIds.every(\n\t\t\t\t( id ) => getBlockMode( id ) === 'visual'\n\t\t\t),\n\t\t\tblockEditingMode: getBlockEditingMode( selectedBlockClientId ),\n\t\t};\n\t}, [] );\n\n\t// Handles highlighting the current block outline on hover or focus of the\n\t// block type toolbar area.\n\tconst { toggleBlockHighlight } = useDispatch( blockEditorStore );\n\tconst nodeRef = useRef();\n\tconst { showMovers, gestures: showMoversGestures } = useShowMoversGestures(\n\t\t{\n\t\t\tref: nodeRef,\n\t\t\tonChange( isFocused ) {\n\t\t\t\tif ( isFocused && isDistractionFree ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleBlockHighlight( blockClientId, isFocused );\n\t\t\t},\n\t\t}\n\t);\n\n\t// Account for the cases where the block toolbar is rendered within the\n\t// header area and not contextually to the block.\n\tconst displayHeaderToolbar =\n\t\tuseViewportMatch( 'medium', '<' ) || hasFixedToolbar;\n\tconst isLargeViewport = ! useViewportMatch( 'medium', '<' );\n\n\tif ( blockType ) {\n\t\tif ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tconst shouldShowMovers = displayHeaderToolbar || showMovers;\n\n\tif ( blockClientIds.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst shouldShowVisualToolbar = isValid && isVisual;\n\tconst isMultiToolbar = blockClientIds.length > 1;\n\tconst isSynced =\n\t\tisReusableBlock( blockType ) || isTemplatePart( blockType );\n\n\tconst classes = classnames( 'block-editor-block-toolbar', {\n\t\t'is-showing-movers': shouldShowMovers,\n\t\t'is-synced': isSynced,\n\t} );\n\n\treturn (\n\t\t<div className={ classes }>\n\t\t\t{ ! isMultiToolbar &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\tblockEditingMode === 'default' && <BlockParentSelector /> }\n\t\t\t<div ref={ nodeRef } { ...showMoversGestures }>\n\t\t\t\t{ ( shouldShowVisualToolbar || isMultiToolbar ) &&\n\t\t\t\t\tblockEditingMode === 'default' && (\n\t\t\t\t\t\t<ToolbarGroup className=\"block-editor-block-toolbar__block-controls\">\n\t\t\t\t\t\t\t<BlockSwitcher clientIds={ blockClientIds } />\n\t\t\t\t\t\t\t{ ! isMultiToolbar && (\n\t\t\t\t\t\t\t\t<BlockLockToolbar\n\t\t\t\t\t\t\t\t\tclientId={ blockClientIds[ 0 ] }\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<BlockMover\n\t\t\t\t\t\t\t\tclientIds={ blockClientIds }\n\t\t\t\t\t\t\t\thideDragHandle={ hideDragHandle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ shouldShowVisualToolbar && isMultiToolbar && (\n\t\t\t\t<BlockGroupToolbar />\n\t\t\t) }\n\t\t\t{ shouldShowVisualToolbar && (\n\t\t\t\t<>\n\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\tgroup=\"parent\"\n\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\tgroup=\"block\"\n\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockControls.Slot className=\"block-editor-block-toolbar__slot\" />\n\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\tgroup=\"inline\"\n\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\tgroup=\"other\"\n\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t/>\n\t\t\t\t\t<__unstableBlockNameContext.Provider\n\t\t\t\t\t\tvalue={ blockType?.name }\n\t\t\t\t\t>\n\t\t\t\t\t\t<__unstableBlockToolbarLastItem.Slot />\n\t\t\t\t\t</__unstableBlockNameContext.Provider>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<BlockEditVisuallyButton clientIds={ blockClientIds } />\n\t\t\t{ blockEditingMode === 'default' && (\n\t\t\t\t<BlockSettingsMenu clientIds={ blockClientIds } />\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md\n */\nexport default BlockToolbar;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-toolbar/index.js"],"names":["BlockToolbar","hideDragHandle","blockClientIds","blockClientId","blockType","hasFixedToolbar","isDistractionFree","isValid","isVisual","blockEditingMode","select","getBlockName","getBlockMode","getSelectedBlockClientIds","isBlockValid","getBlockRootClientId","getSettings","getBlockEditingMode","blockEditorStore","selectedBlockClientIds","selectedBlockClientId","blockRootClientId","settings","rootClientId","every","id","toolbarWrapperRef","toggleBlockHighlight","nodeRef","showMovers","gestures","showMoversGestures","ref","onChange","isFocused","displayHeaderToolbar","isLargeViewport","shouldShowMovers","length","shouldShowVisualToolbar","isMultiToolbar","isSynced","classes","name"],"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 { useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tgetBlockType,\n\thasBlockSupport,\n\tisReusableBlock,\n\tisTemplatePart,\n} from '@wordpress/blocks';\nimport { ToolbarGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockMover from '../block-mover';\nimport BlockParentSelector from '../block-parent-selector';\nimport BlockSwitcher from '../block-switcher';\nimport BlockControls from '../block-controls';\nimport __unstableBlockToolbarLastItem from './block-toolbar-last-item';\nimport BlockSettingsMenu from '../block-settings-menu';\nimport { BlockLockToolbar } from '../block-lock';\nimport { BlockGroupToolbar } from '../convert-to-group-buttons';\nimport BlockEditVisuallyButton from '../block-edit-visually-button';\nimport { useShowMoversGestures } from './utils';\nimport { store as blockEditorStore } from '../../store';\nimport __unstableBlockNameContext from './block-name-context';\nimport { unlock } from '../../lock-unlock';\n\nconst BlockToolbar = ( { hideDragHandle } ) => {\n\tconst {\n\t\tblockClientIds,\n\t\tblockClientId,\n\t\tblockType,\n\t\thasFixedToolbar,\n\t\tisDistractionFree,\n\t\tisValid,\n\t\tisVisual,\n\t\tblockEditingMode,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetBlockName,\n\t\t\tgetBlockMode,\n\t\t\tgetSelectedBlockClientIds,\n\t\t\tisBlockValid,\n\t\t\tgetBlockRootClientId,\n\t\t\tgetSettings,\n\t\t\tgetBlockEditingMode,\n\t\t} = unlock( select( blockEditorStore ) );\n\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\tconst selectedBlockClientId = selectedBlockClientIds[ 0 ];\n\t\tconst blockRootClientId = getBlockRootClientId( selectedBlockClientId );\n\t\tconst settings = getSettings();\n\n\t\treturn {\n\t\t\tblockClientIds: selectedBlockClientIds,\n\t\t\tblockClientId: selectedBlockClientId,\n\t\t\tblockType:\n\t\t\t\tselectedBlockClientId &&\n\t\t\t\tgetBlockType( getBlockName( selectedBlockClientId ) ),\n\t\t\thasFixedToolbar: settings.hasFixedToolbar,\n\t\t\tisDistractionFree: settings.isDistractionFree,\n\t\t\trootClientId: blockRootClientId,\n\t\t\tisValid: selectedBlockClientIds.every( ( id ) =>\n\t\t\t\tisBlockValid( id )\n\t\t\t),\n\t\t\tisVisual: selectedBlockClientIds.every(\n\t\t\t\t( id ) => getBlockMode( id ) === 'visual'\n\t\t\t),\n\t\t\tblockEditingMode: getBlockEditingMode( selectedBlockClientId ),\n\t\t};\n\t}, [] );\n\n\tconst toolbarWrapperRef = useRef( null );\n\n\t// Handles highlighting the current block outline on hover or focus of the\n\t// block type toolbar area.\n\tconst { toggleBlockHighlight } = useDispatch( blockEditorStore );\n\tconst nodeRef = useRef();\n\tconst { showMovers, gestures: showMoversGestures } = useShowMoversGestures(\n\t\t{\n\t\t\tref: nodeRef,\n\t\t\tonChange( isFocused ) {\n\t\t\t\tif ( isFocused && isDistractionFree ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleBlockHighlight( blockClientId, isFocused );\n\t\t\t},\n\t\t}\n\t);\n\n\t// Account for the cases where the block toolbar is rendered within the\n\t// header area and not contextually to the block.\n\tconst displayHeaderToolbar =\n\t\tuseViewportMatch( 'medium', '<' ) || hasFixedToolbar;\n\tconst isLargeViewport = ! useViewportMatch( 'medium', '<' );\n\n\tif ( blockType ) {\n\t\tif ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tconst shouldShowMovers = displayHeaderToolbar || showMovers;\n\n\tif ( blockClientIds.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst shouldShowVisualToolbar = isValid && isVisual;\n\tconst isMultiToolbar = blockClientIds.length > 1;\n\tconst isSynced =\n\t\tisReusableBlock( blockType ) || isTemplatePart( blockType );\n\n\tconst classes = classnames( 'block-editor-block-toolbar', {\n\t\t'is-showing-movers': shouldShowMovers,\n\t\t'is-synced': isSynced,\n\t} );\n\n\treturn (\n\t\t<div className={ classes } ref={ toolbarWrapperRef }>\n\t\t\t{ ! isMultiToolbar &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\tblockEditingMode === 'default' && <BlockParentSelector /> }\n\t\t\t{ ( shouldShowVisualToolbar || isMultiToolbar ) &&\n\t\t\t\tblockEditingMode === 'default' && (\n\t\t\t\t\t<div ref={ nodeRef } { ...showMoversGestures }>\n\t\t\t\t\t\t<ToolbarGroup className=\"block-editor-block-toolbar__block-controls\">\n\t\t\t\t\t\t\t<BlockSwitcher clientIds={ blockClientIds } />\n\t\t\t\t\t\t\t{ ! isMultiToolbar && (\n\t\t\t\t\t\t\t\t<BlockLockToolbar\n\t\t\t\t\t\t\t\t\tclientId={ blockClientIds[ 0 ] }\n\t\t\t\t\t\t\t\t\twrapperRef={ toolbarWrapperRef }\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<BlockMover\n\t\t\t\t\t\t\t\tclientIds={ blockClientIds }\n\t\t\t\t\t\t\t\thideDragHandle={ hideDragHandle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t{ shouldShowVisualToolbar && isMultiToolbar && (\n\t\t\t\t<BlockGroupToolbar />\n\t\t\t) }\n\t\t\t{ shouldShowVisualToolbar && (\n\t\t\t\t<>\n\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\tgroup=\"parent\"\n\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\tgroup=\"block\"\n\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockControls.Slot className=\"block-editor-block-toolbar__slot\" />\n\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\tgroup=\"inline\"\n\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\tgroup=\"other\"\n\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t/>\n\t\t\t\t\t<__unstableBlockNameContext.Provider\n\t\t\t\t\t\tvalue={ blockType?.name }\n\t\t\t\t\t>\n\t\t\t\t\t\t<__unstableBlockToolbarLastItem.Slot />\n\t\t\t\t\t</__unstableBlockNameContext.Provider>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<BlockEditVisuallyButton clientIds={ blockClientIds } />\n\t\t\t{ blockEditingMode === 'default' && (\n\t\t\t\t<BlockSettingsMenu clientIds={ blockClientIds } />\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md\n */\nexport default BlockToolbar;\n"]}

package/build/components/block-tools/block-contextual-toolbar.js

@@ -29,8 +29,6 @@ var _blockToolbar = _interopRequireDefault(require("../block-toolbar"));
 
 var _store = require("../../store");
 
-var _blockIcon = _interopRequireDefault(require("../block-icon"));
-
 var _lockUnlock = require("../../lock-unlock");
 
 /**
@@ -78,7 +76,7 @@ function BlockContextualToolbar({
       selectedBlockClientId: _selectedBlockClientId,
       blockType: _selectedBlockClientId && getBlockType(getBlockName(_selectedBlockClientId)),
       hasParents: parents.length,
-      showParentSelector: parentBlockType && (0, _blocks.hasBlockSupport)(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length <= 1 && getBlockEditingMode(_selectedBlockClientId) === 'default'
+      showParentSelector: parentBlockType && getBlockEditingMode(firstParentClientId) === 'default' && (0, _blocks.hasBlockSupport)(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length <= 1 && getBlockEditingMode(_selectedBlockClientId) === 'default'
     };
   }, []);
   (0, _element.useEffect)(() => {
@@ -102,22 +100,20 @@ function BlockContextualToolbar({
     ,
     "aria-label": (0, _i18n.__)('Block tools'),
     ...props
-  }, isFixed && isLargeViewport && blockType && (0, _element.createElement)(_components.ToolbarGroup, {
+  }, !isCollapsed && (0, _element.createElement)(_blockToolbar.default, {
+    hideDragHandle: isFixed
+  }), isFixed && isLargeViewport && blockType && (0, _element.createElement)(_components.ToolbarGroup, {
     className: isCollapsed ? 'block-editor-block-toolbar__group-expand-fixed-toolbar' : 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
   }, (0, _element.createElement)(_components.ToolbarItem, {
     as: _components.ToolbarButton,
     ref: toolbarButtonRef,
-    icon: isCollapsed ? (0, _element.createElement)(_blockIcon.default, {
-      icon: blockType.icon
-    }) : _icons.levelUp,
+    icon: isCollapsed ? _icons.next : _icons.previous,
     onClick: () => {
       setIsCollapsed(collapsed => !collapsed);
       toolbarButtonRef.current.focus();
     },
-    label: isCollapsed ? (0, _i18n.__)('Show block tools') : (0, _i18n.__)('Show document tools')
-  })), !isCollapsed && (0, _element.createElement)(_blockToolbar.default, {
-    hideDragHandle: isFixed
-  }));
+    label: isCollapsed ? (0, _i18n.__)('Show block tools') : (0, _i18n.__)('Hide block tools')
+  })));
 }
 
 var _default = BlockContextualToolbar;

package/build/components/block-tools/block-contextual-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/block-contextual-toolbar.js"],"names":["BlockContextualToolbar","focusOnMount","isFixed","props","isCollapsed","setIsCollapsed","toolbarButtonRef","isLargeViewport","blockType","hasParents","showParentSelector","selectedBlockClientId","select","getBlockName","getBlockParents","getSelectedBlockClientIds","getBlockEditingMode","blockEditorStore","getBlockType","blocksStore","selectedBlockClientIds","_selectedBlockClientId","parents","firstParentClientId","length","parentBlockName","parentBlockType","classes","ToolbarButton","icon","levelUp","collapsed","current","focus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tToolbarItem,\n\tToolbarButton,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { levelUp } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableToolbar from '../navigable-toolbar';\nimport BlockToolbar from '../block-toolbar';\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\nimport { unlock } from '../../lock-unlock';\n\nfunction BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {\n\t// When the toolbar is fixed it can be collapsed\n\tconst [ isCollapsed, setIsCollapsed ] = useState( false );\n\tconst toolbarButtonRef = useRef();\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst { blockType, hasParents, showParentSelector, selectedBlockClientId } =\n\t\tuseSelect( ( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockParents,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\t\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\t\tconst _selectedBlockClientId = selectedBlockClientIds[ 0 ];\n\t\t\tconst parents = getBlockParents( _selectedBlockClientId );\n\t\t\tconst firstParentClientId = parents[ parents.length - 1 ];\n\t\t\tconst parentBlockName = getBlockName( firstParentClientId );\n\t\t\tconst parentBlockType = getBlockType( parentBlockName );\n\n\t\t\treturn {\n\t\t\t\tselectedBlockClientId: _selectedBlockClientId,\n\t\t\t\tblockType:\n\t\t\t\t\t_selectedBlockClientId &&\n\t\t\t\t\tgetBlockType( getBlockName( _selectedBlockClientId ) ),\n\t\t\t\thasParents: parents.length,\n\t\t\t\tshowParentSelector:\n\t\t\t\t\tparentBlockType &&\n\t\t\t\t\thasBlockSupport(\n\t\t\t\t\t\tparentBlockType,\n\t\t\t\t\t\t'__experimentalParentSelector',\n\t\t\t\t\t\ttrue\n\t\t\t\t\t) &&\n\t\t\t\t\tselectedBlockClientIds.length <= 1 &&\n\t\t\t\t\tgetBlockEditingMode( _selectedBlockClientId ) === 'default',\n\t\t\t};\n\t\t}, [] );\n\n\tuseEffect( () => {\n\t\tsetIsCollapsed( false );\n\t}, [ selectedBlockClientId ] );\n\n\tif (\n\t\tblockType &&\n\t\t! hasBlockSupport( blockType, '__experimentalToolbar', true )\n\t) {\n\t\treturn null;\n\t}\n\n\t// Shifts the toolbar to make room for the parent block selector.\n\tconst classes = classnames( 'block-editor-block-contextual-toolbar', {\n\t\t'has-parent': hasParents && showParentSelector,\n\t\t'is-fixed': isFixed,\n\t\t'is-collapsed': isCollapsed,\n\t} );\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tfocusOnMount={ focusOnMount }\n\t\t\tclassName={ classes }\n\t\t\t/* translators: accessibility text for the block toolbar */\n\t\t\taria-label={ __( 'Block tools' ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ isFixed && isLargeViewport && blockType && (\n\t\t\t\t<ToolbarGroup\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t? 'block-editor-block-toolbar__group-expand-fixed-toolbar'\n\t\t\t\t\t\t\t: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ ToolbarButton }\n\t\t\t\t\t\tref={ toolbarButtonRef }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\tisCollapsed ? (\n\t\t\t\t\t\t\t\t<BlockIcon icon={ blockType.icon } />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tlevelUp\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsCollapsed( ( collapsed ) => ! collapsed );\n\t\t\t\t\t\t\ttoolbarButtonRef.current.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t\t? __( 'Show block tools' )\n\t\t\t\t\t\t\t\t: __( 'Show document tools' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolbarGroup>\n\t\t\t) }\n\t\t\t{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default BlockContextualToolbar;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/block-contextual-toolbar.js"],"names":["BlockContextualToolbar","focusOnMount","isFixed","props","isCollapsed","setIsCollapsed","toolbarButtonRef","isLargeViewport","blockType","hasParents","showParentSelector","selectedBlockClientId","select","getBlockName","getBlockParents","getSelectedBlockClientIds","getBlockEditingMode","blockEditorStore","getBlockType","blocksStore","selectedBlockClientIds","_selectedBlockClientId","parents","firstParentClientId","length","parentBlockName","parentBlockType","classes","ToolbarButton","next","previous","collapsed","current","focus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tToolbarItem,\n\tToolbarButton,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { next, previous } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableToolbar from '../navigable-toolbar';\nimport BlockToolbar from '../block-toolbar';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {\n\t// When the toolbar is fixed it can be collapsed\n\tconst [ isCollapsed, setIsCollapsed ] = useState( false );\n\tconst toolbarButtonRef = useRef();\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst { blockType, hasParents, showParentSelector, selectedBlockClientId } =\n\t\tuseSelect( ( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockParents,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\t\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\t\tconst _selectedBlockClientId = selectedBlockClientIds[ 0 ];\n\t\t\tconst parents = getBlockParents( _selectedBlockClientId );\n\t\t\tconst firstParentClientId = parents[ parents.length - 1 ];\n\t\t\tconst parentBlockName = getBlockName( firstParentClientId );\n\t\t\tconst parentBlockType = getBlockType( parentBlockName );\n\n\t\t\treturn {\n\t\t\t\tselectedBlockClientId: _selectedBlockClientId,\n\t\t\t\tblockType:\n\t\t\t\t\t_selectedBlockClientId &&\n\t\t\t\t\tgetBlockType( getBlockName( _selectedBlockClientId ) ),\n\t\t\t\thasParents: parents.length,\n\t\t\t\tshowParentSelector:\n\t\t\t\t\tparentBlockType &&\n\t\t\t\t\tgetBlockEditingMode( firstParentClientId ) === 'default' &&\n\t\t\t\t\thasBlockSupport(\n\t\t\t\t\t\tparentBlockType,\n\t\t\t\t\t\t'__experimentalParentSelector',\n\t\t\t\t\t\ttrue\n\t\t\t\t\t) &&\n\t\t\t\t\tselectedBlockClientIds.length <= 1 &&\n\t\t\t\t\tgetBlockEditingMode( _selectedBlockClientId ) === 'default',\n\t\t\t};\n\t\t}, [] );\n\n\tuseEffect( () => {\n\t\tsetIsCollapsed( false );\n\t}, [ selectedBlockClientId ] );\n\n\tif (\n\t\tblockType &&\n\t\t! hasBlockSupport( blockType, '__experimentalToolbar', true )\n\t) {\n\t\treturn null;\n\t}\n\n\t// Shifts the toolbar to make room for the parent block selector.\n\tconst classes = classnames( 'block-editor-block-contextual-toolbar', {\n\t\t'has-parent': hasParents && showParentSelector,\n\t\t'is-fixed': isFixed,\n\t\t'is-collapsed': isCollapsed,\n\t} );\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tfocusOnMount={ focusOnMount }\n\t\t\tclassName={ classes }\n\t\t\t/* translators: accessibility text for the block toolbar */\n\t\t\taria-label={ __( 'Block tools' ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }\n\t\t\t{ isFixed && isLargeViewport && blockType && (\n\t\t\t\t<ToolbarGroup\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t? 'block-editor-block-toolbar__group-expand-fixed-toolbar'\n\t\t\t\t\t\t\t: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ ToolbarButton }\n\t\t\t\t\t\tref={ toolbarButtonRef }\n\t\t\t\t\t\ticon={ isCollapsed ? next : previous }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsCollapsed( ( collapsed ) => ! collapsed );\n\t\t\t\t\t\t\ttoolbarButtonRef.current.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t\t? __( 'Show block tools' )\n\t\t\t\t\t\t\t\t: __( 'Hide block tools' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolbarGroup>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default BlockContextualToolbar;\n"]}

package/build/components/dimensions-tool/aspect-ratio-tool.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_ASPECT_RATIO_OPTIONS = void 0;
+exports.default = AspectRatioTool;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @type {SelectControlProps[]}
+ */
+const DEFAULT_ASPECT_RATIO_OPTIONS = [{
+  label: (0, _i18n._x)('Original', 'Aspect ratio option for dimensions control'),
+  value: 'auto'
+}, {
+  label: (0, _i18n._x)('Square - 1:1', 'Aspect ratio option for dimensions control'),
+  value: '1'
+}, {
+  label: (0, _i18n._x)('Standard - 4:3', 'Aspect ratio option for dimensions control'),
+  value: '4/3'
+}, {
+  label: (0, _i18n._x)('Portrait - 3:4', 'Aspect ratio option for dimensions control'),
+  value: '3/4'
+}, {
+  label: (0, _i18n._x)('Classic - 3:2', 'Aspect ratio option for dimensions control'),
+  value: '3/2'
+}, {
+  label: (0, _i18n._x)('Classic Portrait - 2:3', 'Aspect ratio option for dimensions control'),
+  value: '2/3'
+}, {
+  label: (0, _i18n._x)('Wide - 16:9', 'Aspect ratio option for dimensions control'),
+  value: '16/9'
+}, {
+  label: (0, _i18n._x)('Tall - 9:16', 'Aspect ratio option for dimensions control'),
+  value: '9/16'
+}, {
+  label: (0, _i18n._x)('Custom', 'Aspect ratio option for dimensions control'),
+  value: 'custom',
+  disabled: true,
+  hidden: true
+}];
+/**
+ * @callback AspectRatioToolPropsOnChange
+ * @param {string} [value] New aspect ratio value.
+ * @return {void} No return.
+ */
+
+/**
+ * @typedef {Object} AspectRatioToolProps
+ * @property {string}                       [panelId]          ID of the panel this tool is associated with.
+ * @property {string}                       [value]            Current aspect ratio value.
+ * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.
+ * @property {SelectControlProps[]}         [options]          Aspect ratio options.
+ * @property {string}                       [defaultValue]     Default aspect ratio value.
+ * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ */
+
+exports.DEFAULT_ASPECT_RATIO_OPTIONS = DEFAULT_ASPECT_RATIO_OPTIONS;
+
+function AspectRatioTool({
+  panelId,
+  value,
+  onChange = () => {},
+  options = DEFAULT_ASPECT_RATIO_OPTIONS,
+  defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[0].value,
+  isShownByDefault = true
+}) {
+  // Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+  const displayValue = value !== null && value !== void 0 ? value : 'auto';
+  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: () => displayValue !== defaultValue,
+    label: (0, _i18n.__)('Aspect ratio'),
+    onDeselect: () => onChange(undefined),
+    isShownByDefault: isShownByDefault,
+    panelId: panelId
+  }, (0, _element.createElement)(_components.SelectControl, {
+    label: (0, _i18n.__)('Aspect ratio'),
+    value: displayValue,
+    options: options,
+    onChange: onChange,
+    size: '__unstable-large',
+    __nextHasNoMarginBottom: true
+  }));
+}
+//# sourceMappingURL=aspect-ratio-tool.js.map

package/build/components/dimensions-tool/aspect-ratio-tool.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js"],"names":["DEFAULT_ASPECT_RATIO_OPTIONS","label","value","disabled","hidden","AspectRatioTool","panelId","onChange","options","defaultValue","isShownByDefault","displayValue","undefined"],"mappings":";;;;;;;;;;AAGA;;AAIA;;AAPA;AACA;AACA;;AAOA;AACA;AACA;;AAEA;AACA;AACA;AACO,MAAMA,4BAA4B,GAAG,CAC3C;AACCC,EAAAA,KAAK,EAAE,cAAI,UAAJ,EAAgB,4CAAhB,CADR;AAECC,EAAAA,KAAK,EAAE;AAFR,CAD2C,EAK3C;AACCD,EAAAA,KAAK,EAAE,cACN,cADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAL2C,EAY3C;AACCD,EAAAA,KAAK,EAAE,cACN,gBADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAZ2C,EAmB3C;AACCD,EAAAA,KAAK,EAAE,cACN,gBADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAnB2C,EA0B3C;AACCD,EAAAA,KAAK,EAAE,cACN,eADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CA1B2C,EAiC3C;AACCD,EAAAA,KAAK,EAAE,cACN,wBADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAjC2C,EAwC3C;AACCD,EAAAA,KAAK,EAAE,cACN,aADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAxC2C,EA+C3C;AACCD,EAAAA,KAAK,EAAE,cACN,aADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CA/C2C,EAsD3C;AACCD,EAAAA,KAAK,EAAE,cAAI,QAAJ,EAAc,4CAAd,CADR;AAECC,EAAAA,KAAK,EAAE,QAFR;AAGCC,EAAAA,QAAQ,EAAE,IAHX;AAICC,EAAAA,MAAM,EAAE;AAJT,CAtD2C,CAArC;AA8DP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAEe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,OADwC;AAExCJ,EAAAA,KAFwC;AAGxCK,EAAAA,QAAQ,GAAG,MAAM,CAAE,CAHqB;AAIxCC,EAAAA,OAAO,GAAGR,4BAJ8B;AAKxCS,EAAAA,YAAY,GAAGT,4BAA4B,CAAE,CAAF,CAA5B,CAAkCE,KALT;AAMxCQ,EAAAA,gBAAgB,GAAG;AANqB,CAA1B,EAOX;AACH;AACA,QAAMC,YAAY,GAAGT,KAAH,aAAGA,KAAH,cAAGA,KAAH,GAAY,MAA9B;AAEA,SACC,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAG,MAAMS,YAAY,KAAKF,YADnC;AAEC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,IAAA,UAAU,EAAG,MAAMF,QAAQ,CAAEK,SAAF,CAH5B;AAIC,IAAA,gBAAgB,EAAGF,gBAJpB;AAKC,IAAA,OAAO,EAAGJ;AALX,KAOC,4BAAC,yBAAD;AACC,IAAA,KAAK,EAAG,cAAI,cAAJ,CADT;AAEC,IAAA,KAAK,EAAGK,YAFT;AAGC,IAAA,OAAO,EAAGH,OAHX;AAIC,IAAA,QAAQ,EAAGD,QAJZ;AAKC,IAAA,IAAI,EAAG,kBALR;AAMC,IAAA,uBAAuB;AANxB,IAPD,CADD;AAkBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tSelectControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @type {SelectControlProps[]}\n */\nexport const DEFAULT_ASPECT_RATIO_OPTIONS = [\n\t{\n\t\tlabel: _x( 'Original', 'Aspect ratio option for dimensions control' ),\n\t\tvalue: 'auto',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Square - 1:1',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '1',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Standard - 4:3',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '4/3',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Portrait - 3:4',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '3/4',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Classic - 3:2',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '3/2',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Classic Portrait - 2:3',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '2/3',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Wide - 16:9',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '16/9',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Tall - 9:16',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '9/16',\n\t},\n\t{\n\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\tvalue: 'custom',\n\t\tdisabled: true,\n\t\thidden: true,\n\t},\n];\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string}                       [panelId]          ID of the panel this tool is associated with.\n * @property {string}                       [value]            Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.\n * @property {SelectControlProps[]}         [options]          Aspect ratio options.\n * @property {string}                       [defaultValue]     Default aspect ratio value.\n * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions = DEFAULT_ASPECT_RATIO_OPTIONS,\n\tdefaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'auto';\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ options }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"]}

package/build/components/dimensions-tool/index.js

@@ -0,0 +1,207 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _aspectRatioTool = _interopRequireDefault(require("./aspect-ratio-tool"));
+
+var _scaleTool = _interopRequireDefault(require("./scale-tool"));
+
+var _widthHeightTool = _interopRequireDefault(require("./width-height-tool"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} Dimensions
+ * @property {string} [width]       CSS width property.
+ * @property {string} [height]      CSS height property.
+ * @property {string} [scale]       CSS object-fit property.
+ * @property {string} [aspectRatio] CSS aspect-ratio property.
+ */
+
+/**
+ * @callback DimensionsControlsOnChange
+ * @param {Dimensions} nextValue
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} DimensionsControlsProps
+ * @property {string}                     [panelId]            ID of the panel that contains the controls.
+ * @property {Dimensions}                 [value]              Current dimensions values.
+ * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.
+ * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.
+ * @property {SelectControlProps[]}       [scaleOptions]       Scale options.
+ * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {DimensionsControlsProps} props The component props.
+ *
+ * @return {WPElement} The dimensions controls.
+ */
+function DimensionsTool({
+  panelId,
+  value = {},
+  onChange = () => {},
+  aspectRatioOptions,
+  // Default options handled by AspectRatioTool.
+  defaultAspectRatio = 'auto',
+  // Match CSS default value for aspect-ratio.
+  scaleOptions,
+  // Default options handled by ScaleTool.
+  defaultScale = 'fill',
+  // Match CSS default value for object-fit.
+  unitsOptions // Default options handled by UnitControl.
+
+}) {
+  // Coerce undefined and CSS default values to be null.
+  const width = value.width === undefined || value.width === 'auto' ? null : value.width;
+  const height = value.height === undefined || value.height === 'auto' ? null : value.height;
+  const aspectRatio = value.aspectRatio === undefined || value.aspectRatio === 'auto' ? null : value.aspectRatio;
+  const scale = value.scale === undefined || value.scale === 'fill' ? null : value.scale; // Keep track of state internally, so when the value is cleared by means
+  // other than directly editing that field, it's easier to restore the
+  // previous value.
+
+  const [lastScale, setLastScale] = (0, _element.useState)(scale);
+  const [lastAspectRatio, setLastAspectRatio] = (0, _element.useState)(aspectRatio); // 'custom' is not a valid value for CSS aspect-ratio, but it is used in the
+  // dropdown to indicate that setting both the width and height is the same
+  // as a custom aspect ratio.
+
+  const aspectRatioValue = width && height ? 'custom' : lastAspectRatio;
+  const showScaleControl = aspectRatio || width && height;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_aspectRatioTool.default, {
+    panelId: panelId,
+    options: aspectRatioOptions,
+    defaultValue: defaultAspectRatio,
+    value: aspectRatioValue,
+    onChange: nextAspectRatio => {
+      const nextValue = { ...value
+      }; // 'auto' is CSS default, so it gets treated as null.
+
+      nextAspectRatio = nextAspectRatio === 'auto' ? null : nextAspectRatio;
+      setLastAspectRatio(nextAspectRatio); // Update aspectRatio.
+
+      if (!nextAspectRatio) {
+        delete nextValue.aspectRatio;
+      } else {
+        nextValue.aspectRatio = nextAspectRatio;
+      } // Auto-update scale.
+
+
+      if (!nextAspectRatio) {
+        delete nextValue.scale;
+      } else if (lastScale) {
+        nextValue.scale = lastScale;
+      } else {
+        nextValue.scale = defaultScale;
+        setLastScale(defaultScale);
+      } // Auto-update width and height.
+
+
+      if (nextAspectRatio && width && height) {
+        delete nextValue.height;
+      }
+
+      onChange(nextValue);
+    }
+  }), showScaleControl && (0, _element.createElement)(_scaleTool.default, {
+    panelId: panelId,
+    options: scaleOptions,
+    defaultValue: defaultScale,
+    value: lastScale,
+    onChange: nextScale => {
+      const nextValue = { ...value
+      }; // 'fill' is CSS default, so it gets treated as null.
+
+      nextScale = nextScale === 'fill' ? null : nextScale;
+      setLastScale(nextScale); // Update scale.
+
+      if (!nextScale) {
+        delete nextValue.scale;
+      } else {
+        nextValue.scale = nextScale;
+      }
+
+      onChange(nextValue);
+    }
+  }), (0, _element.createElement)(_widthHeightTool.default, {
+    panelId: panelId,
+    units: unitsOptions,
+    value: {
+      width,
+      height
+    },
+    onChange: ({
+      width: nextWidth,
+      height: nextHeight
+    }) => {
+      const nextValue = { ...value
+      }; // 'auto' is CSS default, so it gets treated as null.
+
+      nextWidth = nextWidth === 'auto' ? null : nextWidth;
+      nextHeight = nextHeight === 'auto' ? null : nextHeight; // Update width.
+
+      if (!nextWidth) {
+        delete nextValue.width;
+      } else {
+        nextValue.width = nextWidth;
+      } // Update height.
+
+
+      if (!nextHeight) {
+        delete nextValue.height;
+      } else {
+        nextValue.height = nextHeight;
+      } // Auto-update aspectRatio.
+
+
+      if (nextWidth && nextHeight) {
+        delete nextValue.aspectRatio;
+      } else if (lastAspectRatio) {
+        nextValue.aspectRatio = lastAspectRatio;
+      } else {// No setting defaultAspectRatio here, because
+        // aspectRatio is optional in this scenario,
+        // unlike scale.
+      } // Auto-update scale.
+
+
+      if (!lastAspectRatio && !!nextWidth !== !!nextHeight) {
+        delete nextValue.scale;
+      } else if (lastScale) {
+        nextValue.scale = lastScale;
+      } else {
+        nextValue.scale = defaultScale;
+        setLastScale(defaultScale);
+      }
+
+      onChange(nextValue);
+    }
+  }));
+}
+
+var _default = DimensionsTool;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/components/dimensions-tool/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/dimensions-tool/index.js"],"names":["DimensionsTool","panelId","value","onChange","aspectRatioOptions","defaultAspectRatio","scaleOptions","defaultScale","unitsOptions","width","undefined","height","aspectRatio","scale","lastScale","setLastScale","lastAspectRatio","setLastAspectRatio","aspectRatioValue","showScaleControl","nextAspectRatio","nextValue","nextScale","nextWidth","nextHeight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AspectRatioTool from './aspect-ratio-tool';\nimport ScaleTool from './scale-tool';\nimport WidthHeightTool from './width-height-tool';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit\n */\n\n/**\n * @typedef {Object} Dimensions\n * @property {string} [width]       CSS width property.\n * @property {string} [height]      CSS height property.\n * @property {string} [scale]       CSS object-fit property.\n * @property {string} [aspectRatio] CSS aspect-ratio property.\n */\n\n/**\n * @callback DimensionsControlsOnChange\n * @param {Dimensions} nextValue\n * @return {void}\n */\n\n/**\n * @typedef {Object} DimensionsControlsProps\n * @property {string}                     [panelId]            ID of the panel that contains the controls.\n * @property {Dimensions}                 [value]              Current dimensions values.\n * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.\n * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.\n * @property {SelectControlProps[]}       [scaleOptions]       Scale options.\n * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.\n */\n\n/**\n * Component that renders controls to edit the dimensions of an image or container.\n *\n * @param {DimensionsControlsProps} props The component props.\n *\n * @return {WPElement} The dimensions controls.\n */\nfunction DimensionsTool( {\n\tpanelId,\n\tvalue = {},\n\tonChange = () => {},\n\taspectRatioOptions, // Default options handled by AspectRatioTool.\n\tdefaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.\n\tscaleOptions, // Default options handled by ScaleTool.\n\tdefaultScale = 'fill', // Match CSS default value for object-fit.\n\tunitsOptions, // Default options handled by UnitControl.\n} ) {\n\t// Coerce undefined and CSS default values to be null.\n\tconst width =\n\t\tvalue.width === undefined || value.width === 'auto'\n\t\t\t? null\n\t\t\t: value.width;\n\tconst height =\n\t\tvalue.height === undefined || value.height === 'auto'\n\t\t\t? null\n\t\t\t: value.height;\n\tconst aspectRatio =\n\t\tvalue.aspectRatio === undefined || value.aspectRatio === 'auto'\n\t\t\t? null\n\t\t\t: value.aspectRatio;\n\tconst scale =\n\t\tvalue.scale === undefined || value.scale === 'fill'\n\t\t\t? null\n\t\t\t: value.scale;\n\n\t// Keep track of state internally, so when the value is cleared by means\n\t// other than directly editing that field, it's easier to restore the\n\t// previous value.\n\tconst [ lastScale, setLastScale ] = useState( scale );\n\tconst [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );\n\n\t// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the\n\t// dropdown to indicate that setting both the width and height is the same\n\t// as a custom aspect ratio.\n\tconst aspectRatioValue = width && height ? 'custom' : lastAspectRatio;\n\n\tconst showScaleControl = aspectRatio || ( width && height );\n\n\treturn (\n\t\t<>\n\t\t\t<AspectRatioTool\n\t\t\t\tpanelId={ panelId }\n\t\t\t\toptions={ aspectRatioOptions }\n\t\t\t\tdefaultValue={ defaultAspectRatio }\n\t\t\t\tvalue={ aspectRatioValue }\n\t\t\t\tonChange={ ( nextAspectRatio ) => {\n\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\tnextAspectRatio =\n\t\t\t\t\t\tnextAspectRatio === 'auto' ? null : nextAspectRatio;\n\n\t\t\t\t\tsetLastAspectRatio( nextAspectRatio );\n\n\t\t\t\t\t// Update aspectRatio.\n\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.aspectRatio = nextAspectRatio;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t}\n\n\t\t\t\t\t// Auto-update width and height.\n\t\t\t\t\tif ( nextAspectRatio && width && height ) {\n\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t}\n\n\t\t\t\t\tonChange( nextValue );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ showScaleControl && (\n\t\t\t\t<ScaleTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ scaleOptions }\n\t\t\t\t\tdefaultValue={ defaultScale }\n\t\t\t\t\tvalue={ lastScale }\n\t\t\t\t\tonChange={ ( nextScale ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'fill' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextScale = nextScale === 'fill' ? null : nextScale;\n\n\t\t\t\t\t\tsetLastScale( nextScale );\n\n\t\t\t\t\t\t// Update scale.\n\t\t\t\t\t\tif ( ! nextScale ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = nextScale;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<WidthHeightTool\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tunits={ unitsOptions }\n\t\t\t\tvalue={ { width, height } }\n\t\t\t\tonChange={ ( { width: nextWidth, height: nextHeight } ) => {\n\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\tnextWidth = nextWidth === 'auto' ? null : nextWidth;\n\t\t\t\t\tnextHeight = nextHeight === 'auto' ? null : nextHeight;\n\n\t\t\t\t\t// Update width.\n\t\t\t\t\tif ( ! nextWidth ) {\n\t\t\t\t\t\tdelete nextValue.width;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.width = nextWidth;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update height.\n\t\t\t\t\tif ( ! nextHeight ) {\n\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.height = nextHeight;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Auto-update aspectRatio.\n\t\t\t\t\tif ( nextWidth && nextHeight ) {\n\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t} else if ( lastAspectRatio ) {\n\t\t\t\t\t\tnextValue.aspectRatio = lastAspectRatio;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// No setting defaultAspectRatio here, because\n\t\t\t\t\t\t// aspectRatio is optional in this scenario,\n\t\t\t\t\t\t// unlike scale.\n\t\t\t\t\t}\n\n\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\tif ( ! lastAspectRatio && !! nextWidth !== !! nextHeight ) {\n\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t}\n\n\t\t\t\t\tonChange( nextValue );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default DimensionsTool;\n"]}

package/build/components/dimensions-tool/scale-tool.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ScaleTool;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * The descriptions are purposely made generic as object-fit could be used for
+ * any replaced element. Provide your own set of options if you need different
+ * help text or labels.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
+ *
+ * @type {SelectControlProps[]}
+ */
+const DEFAULT_SCALE_OPTIONS = [{
+  value: 'fill',
+  label: (0, _i18n._x)('Fill', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)('Fill the space by stretching the content.')
+}, {
+  value: 'contain',
+  label: (0, _i18n._x)('Contain', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)('Fit the content to the space without clipping.')
+}, {
+  value: 'cover',
+  label: (0, _i18n._x)('Cover', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)("Fill the space by clipping what doesn't fit.")
+}, {
+  value: 'none',
+  label: (0, _i18n._x)('None', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)('Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.')
+}, {
+  value: 'scale-down',
+  label: (0, _i18n._x)('Scale down', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)('Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.')
+}];
+/**
+ * @callback ScaleToolPropsOnChange
+ * @param {string} nextValue New scale value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} ScaleToolProps
+ * @property {string}                 [panelId]               ID of the panel that contains the controls.
+ * @property {string}                 [value]                 Current scale value.
+ * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.
+ * @property {SelectControlProps[]}   [options]               Scale options.
+ * @property {string}                 [defaultValue]          Default scale value.
+ * @property {boolean}                [showControl=true]      Whether to show the control.
+ * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.
+ */
+
+/**
+ * A tool to select the CSS object-fit property for the image.
+ *
+ * @param {ScaleToolProps} props
+ *
+ * @return {import('@wordpress/element').WPElement} The scale tool.
+ */
+
+function ScaleTool({
+  panelId,
+  value,
+  onChange,
+  options = DEFAULT_SCALE_OPTIONS,
+  defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
+  isShownByDefault = true
+}) {
+  // Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+  const displayValue = value !== null && value !== void 0 ? value : 'fill';
+  const scaleHelp = (0, _element.useMemo)(() => {
+    return options.reduce((acc, option) => {
+      acc[option.value] = option.help;
+      return acc;
+    }, {});
+  }, [options]);
+  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    label: (0, _i18n.__)('Scale'),
+    isShownByDefault: isShownByDefault,
+    hasValue: () => displayValue !== defaultValue,
+    onDeselect: () => onChange(defaultValue),
+    panelId: panelId
+  }, (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+    label: (0, _i18n.__)('Scale'),
+    isBlock: true,
+    help: scaleHelp[displayValue],
+    value: displayValue,
+    onChange: onChange,
+    __nextHasNoMarginBottom: true
+  }, options.map(option => (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
+    key: option.value,
+    ...option
+  }))));
+}
+//# sourceMappingURL=scale-tool.js.map

package/build/components/dimensions-tool/scale-tool.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/dimensions-tool/scale-tool.js"],"names":["DEFAULT_SCALE_OPTIONS","value","label","help","ScaleTool","panelId","onChange","options","defaultValue","isShownByDefault","displayValue","scaleHelp","reduce","acc","option","map"],"mappings":";;;;;;;AAQA;;AALA;;AAMA;;AATA;AACA;AACA;;AASA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,qBAAqB,GAAG,CAC7B;AACCC,EAAAA,KAAK,EAAE,MADR;AAECC,EAAAA,KAAK,EAAE,cAAI,MAAJ,EAAY,qCAAZ,CAFR;AAGCC,EAAAA,IAAI,EAAE,cAAI,2CAAJ;AAHP,CAD6B,EAM7B;AACCF,EAAAA,KAAK,EAAE,SADR;AAECC,EAAAA,KAAK,EAAE,cAAI,SAAJ,EAAe,qCAAf,CAFR;AAGCC,EAAAA,IAAI,EAAE,cAAI,gDAAJ;AAHP,CAN6B,EAW7B;AACCF,EAAAA,KAAK,EAAE,OADR;AAECC,EAAAA,KAAK,EAAE,cAAI,OAAJ,EAAa,qCAAb,CAFR;AAGCC,EAAAA,IAAI,EAAE,cAAI,8CAAJ;AAHP,CAX6B,EAgB7B;AACCF,EAAAA,KAAK,EAAE,MADR;AAECC,EAAAA,KAAK,EAAE,cAAI,MAAJ,EAAY,qCAAZ,CAFR;AAGCC,EAAAA,IAAI,EAAE,cACL,iJADK;AAHP,CAhB6B,EAuB7B;AACCF,EAAAA,KAAK,EAAE,YADR;AAECC,EAAAA,KAAK,EAAE,cAAI,YAAJ,EAAkB,qCAAlB,CAFR;AAGCC,EAAAA,IAAI,EAAE,cACL,mHADK;AAHP,CAvB6B,CAA9B;AAgCA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,SAAT,CAAoB;AAClCC,EAAAA,OADkC;AAElCJ,EAAAA,KAFkC;AAGlCK,EAAAA,QAHkC;AAIlCC,EAAAA,OAAO,GAAGP,qBAJwB;AAKlCQ,EAAAA,YAAY,GAAGR,qBAAqB,CAAE,CAAF,CAArB,CAA2BC,KALR;AAMlCQ,EAAAA,gBAAgB,GAAG;AANe,CAApB,EAOX;AACH;AACA,QAAMC,YAAY,GAAGT,KAAH,aAAGA,KAAH,cAAGA,KAAH,GAAY,MAA9B;AAEA,QAAMU,SAAS,GAAG,sBAAS,MAAM;AAChC,WAAOJ,OAAO,CAACK,MAAR,CAAgB,CAAEC,GAAF,EAAOC,MAAP,KAAmB;AACzCD,MAAAA,GAAG,CAAEC,MAAM,CAACb,KAAT,CAAH,GAAsBa,MAAM,CAACX,IAA7B;AACA,aAAOU,GAAP;AACA,KAHM,EAGJ,EAHI,CAAP;AAIA,GALiB,EAKf,CAAEN,OAAF,CALe,CAAlB;AAOA,SACC,4BAAC,wCAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,gBAAgB,EAAGE,gBAFpB;AAGC,IAAA,QAAQ,EAAG,MAAMC,YAAY,KAAKF,YAHnC;AAIC,IAAA,UAAU,EAAG,MAAMF,QAAQ,CAAEE,YAAF,CAJ5B;AAKC,IAAA,OAAO,EAAGH;AALX,KAOC,4BAAC,4CAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,OAAO,MAFR;AAGC,IAAA,IAAI,EAAGM,SAAS,CAAED,YAAF,CAHjB;AAIC,IAAA,KAAK,EAAGA,YAJT;AAKC,IAAA,QAAQ,EAAGJ,QALZ;AAMC,IAAA,uBAAuB;AANxB,KAQGC,OAAO,CAACQ,GAAR,CAAeD,MAAF,IACd,4BAAC,kDAAD;AACC,IAAA,GAAG,EAAGA,MAAM,CAACb,KADd;AAAA,OAEMa;AAFN,IADC,CARH,CAPD,CADD;AAyBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * The descriptions are purposely made generic as object-fit could be used for\n * any replaced element. Provide your own set of options if you need different\n * help text or labels.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element\n *\n * @type {SelectControlProps[]}\n */\nconst DEFAULT_SCALE_OPTIONS = [\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n];\n\n/**\n * @callback ScaleToolPropsOnChange\n * @param {string} nextValue New scale value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} ScaleToolProps\n * @property {string}                 [panelId]               ID of the panel that contains the controls.\n * @property {string}                 [value]                 Current scale value.\n * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.\n * @property {SelectControlProps[]}   [options]               Scale options.\n * @property {string}                 [defaultValue]          Default scale value.\n * @property {boolean}                [showControl=true]      Whether to show the control.\n * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.\n */\n\n/**\n * A tool to select the CSS object-fit property for the image.\n *\n * @param {ScaleToolProps} props\n *\n * @return {import('@wordpress/element').WPElement} The scale tool.\n */\nexport default function ScaleTool( {\n\tpanelId,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_SCALE_OPTIONS,\n\tdefaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'fill';\n\n\tconst scaleHelp = useMemo( () => {\n\t\treturn options.reduce( ( acc, option ) => {\n\t\t\tacc[ option.value ] = option.help;\n\t\t\treturn acc;\n\t\t}, {} );\n\t}, [ options ] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ __( 'Scale' ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tonDeselect={ () => onChange( defaultValue ) }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Scale' ) }\n\t\t\t\tisBlock\n\t\t\t\thelp={ scaleHelp[ displayValue ] }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t>\n\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\t{ ...option }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"]}