@wordpress/block-editor 12.3.1 → 12.3.3

package/README.md

@@ -711,6 +711,7 @@ _Properties_
 -   _maxWidth_ `number`: Max width to constraint resizing
 -   _allowedBlockTypes_ `boolean|Array`: Allowed block types
 -   _hasFixedToolbar_ `boolean`: Whether or not the editor toolbar is fixed
+-   _distractionFree_ `boolean`: Whether or not the editor UI is distraction free
 -   _focusMode_ `boolean`: Whether the focus mode is enabled or not
 -   _styles_ `Array`: Editor Styles
 -   _keepCaretInsideBlock_ `boolean`: Whether caret should move between blocks in edit mode

package/build/components/block-lock/toolbar.js

@@ -13,6 +13,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
+var _dom = require("@wordpress/dom");
+
 var _icons = require("@wordpress/icons");
 
 var _modal = _interopRequireDefault(require("./modal"));
@@ -27,7 +29,8 @@ var _useBlockLock = _interopRequireDefault(require("./use-block-lock"));
  * Internal dependencies
  */
 function BlockLockToolbar({
-  clientId
+  clientId,
+  wrapperRef
 }) {
   const {
     canEdit,
@@ -36,12 +39,27 @@ function BlockLockToolbar({
     canLock
   } = (0, _useBlockLock.default)(clientId);
   const [isModalOpen, toggleModal] = (0, _element.useReducer)(isActive => !isActive, false);
+  const lockButtonRef = (0, _element.useRef)(null);
+  const isFirstRender = (0, _element.useRef)(true);
+  const shouldHideBlockLockUI = !canLock || canEdit && canMove && canRemove; // Restore focus manually on the first focusable element in the toolbar
+  // when the block lock modal is closed and the block is not locked anymore.
+  // See https://github.com/WordPress/gutenberg/issues/51447
 
-  if (!canLock) {
-    return null;
-  }
+  (0, _element.useEffect)(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (!isModalOpen && shouldHideBlockLockUI) {
+      _dom.focus.focusable.find(wrapperRef.current, {
+        sequential: false
+      }).find(element => element.tagName === 'BUTTON' && element !== lockButtonRef.current)?.focus();
+    } // wrapperRef is a reference object and should be stable
+
+  }, [isModalOpen, shouldHideBlockLockUI, wrapperRef]);
 
-  if (canEdit && canMove && canRemove) {
+  if (shouldHideBlockLockUI) {
     return null;
   }
 
@@ -50,7 +68,8 @@ function BlockLockToolbar({
   }, (0, _element.createElement)(_components.ToolbarButton, {
     icon: _icons.lock,
     label: (0, _i18n.__)('Unlock'),
-    onClick: toggleModal
+    onClick: toggleModal,
+    ref: lockButtonRef
   })), isModalOpen && (0, _element.createElement)(_modal.default, {
     clientId: clientId,
     onClose: toggleModal

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-lock/toolbar.js"],"names":["BlockLockToolbar","clientId","canEdit","canMove","canRemove","canLock","isModalOpen","toggleModal","isActive","lock"],"mappings":";;;;;;;;;AAKA;;AAFA;;AACA;;AAEA;;AAKA;;AACA;;AAZA;AACA;AACA;;AAMA;AACA;AACA;AAIe,SAASA,gBAAT,CAA2B;AAAEC,EAAAA;AAAF,CAA3B,EAA0C;AACxD,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,OAAX;AAAoBC,IAAAA,SAApB;AAA+BC,IAAAA;AAA/B,MAA2C,2BAAcJ,QAAd,CAAjD;AAEA,QAAM,CAAEK,WAAF,EAAeC,WAAf,IAA+B,yBAClCC,QAAF,IAAgB,CAAEA,QADkB,EAEpC,KAFoC,CAArC;;AAKA,MAAK,CAAEH,OAAP,EAAiB;AAChB,WAAO,IAAP;AACA;;AAED,MAAKH,OAAO,IAAIC,OAAX,IAAsBC,SAA3B,EAAuC;AACtC,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,wBAAD;AAAc,IAAA,SAAS,EAAC;AAAxB,KACC,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAGK,WADR;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,OAAO,EAAGF;AAHX,IADD,CADD,EAQGD,WAAW,IACZ,4BAAC,cAAD;AAAgB,IAAA,QAAQ,EAAGL,QAA3B;AAAsC,IAAA,OAAO,EAAGM;AAAhD,IATF,CADD;AAcA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { useReducer } from '@wordpress/element';\nimport { lock } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockLockModal from './modal';\nimport useBlockLock from './use-block-lock';\n\nexport default function BlockLockToolbar( { clientId } ) {\n\tconst { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );\n\n\tconst [ isModalOpen, toggleModal ] = useReducer(\n\t\t( isActive ) => ! isActive,\n\t\tfalse\n\t);\n\n\tif ( ! canLock ) {\n\t\treturn null;\n\t}\n\n\tif ( canEdit && canMove && canRemove ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ToolbarGroup className=\"block-editor-block-lock-toolbar\">\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ lock }\n\t\t\t\t\tlabel={ __( 'Unlock' ) }\n\t\t\t\t\tonClick={ toggleModal }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<BlockLockModal clientId={ clientId } onClose={ toggleModal } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-lock/toolbar.js"],"names":["BlockLockToolbar","clientId","wrapperRef","canEdit","canMove","canRemove","canLock","isModalOpen","toggleModal","isActive","lockButtonRef","isFirstRender","shouldHideBlockLockUI","current","focus","focusable","find","sequential","element","tagName","lock"],"mappings":";;;;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAEA;;AAKA;;AACA;;AAbA;AACA;AACA;;AAOA;AACA;AACA;AAIe,SAASA,gBAAT,CAA2B;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAA3B,EAAsD;AACpE,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,OAAX;AAAoBC,IAAAA,SAApB;AAA+BC,IAAAA;AAA/B,MAA2C,2BAAcL,QAAd,CAAjD;AAEA,QAAM,CAAEM,WAAF,EAAeC,WAAf,IAA+B,yBAClCC,QAAF,IAAgB,CAAEA,QADkB,EAEpC,KAFoC,CAArC;AAKA,QAAMC,aAAa,GAAG,qBAAQ,IAAR,CAAtB;AACA,QAAMC,aAAa,GAAG,qBAAQ,IAAR,CAAtB;AAEA,QAAMC,qBAAqB,GAC1B,CAAEN,OAAF,IAAeH,OAAO,IAAIC,OAAX,IAAsBC,SADtC,CAXoE,CAcpE;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,QAAKM,aAAa,CAACE,OAAnB,EAA6B;AAC5BF,MAAAA,aAAa,CAACE,OAAd,GAAwB,KAAxB;AACA;AACA;;AAED,QAAK,CAAEN,WAAF,IAAiBK,qBAAtB,EAA8C;AAC7CE,iBAAMC,SAAN,CACEC,IADF,CACQd,UAAU,CAACW,OADnB,EAC4B;AAC1BI,QAAAA,UAAU,EAAE;AADc,OAD5B,EAIED,IAJF,CAKIE,OAAF,IACCA,OAAO,CAACC,OAAR,KAAoB,QAApB,IACAD,OAAO,KAAKR,aAAa,CAACG,OAP7B,GASGC,KATH;AAUA,KAjBe,CAkBhB;;AACA,GAnBD,EAmBG,CAAEP,WAAF,EAAeK,qBAAf,EAAsCV,UAAtC,CAnBH;;AAqBA,MAAKU,qBAAL,EAA6B;AAC5B,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,wBAAD;AAAc,IAAA,SAAS,EAAC;AAAxB,KACC,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAGQ,WADR;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,OAAO,EAAGZ,WAHX;AAIC,IAAA,GAAG,EAAGE;AAJP,IADD,CADD,EASGH,WAAW,IACZ,4BAAC,cAAD;AAAgB,IAAA,QAAQ,EAAGN,QAA3B;AAAsC,IAAA,OAAO,EAAGO;AAAhD,IAVF,CADD;AAeA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { focus } from '@wordpress/dom';\nimport { useReducer, useRef, useEffect } from '@wordpress/element';\nimport { lock } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockLockModal from './modal';\nimport useBlockLock from './use-block-lock';\n\nexport default function BlockLockToolbar( { clientId, wrapperRef } ) {\n\tconst { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );\n\n\tconst [ isModalOpen, toggleModal ] = useReducer(\n\t\t( isActive ) => ! isActive,\n\t\tfalse\n\t);\n\n\tconst lockButtonRef = useRef( null );\n\tconst isFirstRender = useRef( true );\n\n\tconst shouldHideBlockLockUI =\n\t\t! canLock || ( canEdit && canMove && canRemove );\n\n\t// Restore focus manually on the first focusable element in the toolbar\n\t// when the block lock modal is closed and the block is not locked anymore.\n\t// See https://github.com/WordPress/gutenberg/issues/51447\n\tuseEffect( () => {\n\t\tif ( isFirstRender.current ) {\n\t\t\tisFirstRender.current = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! isModalOpen && shouldHideBlockLockUI ) {\n\t\t\tfocus.focusable\n\t\t\t\t.find( wrapperRef.current, {\n\t\t\t\t\tsequential: false,\n\t\t\t\t} )\n\t\t\t\t.find(\n\t\t\t\t\t( element ) =>\n\t\t\t\t\t\telement.tagName === 'BUTTON' &&\n\t\t\t\t\t\telement !== lockButtonRef.current\n\t\t\t\t)\n\t\t\t\t?.focus();\n\t\t}\n\t\t// wrapperRef is a reference object and should be stable\n\t}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );\n\n\tif ( shouldHideBlockLockUI ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ToolbarGroup className=\"block-editor-block-lock-toolbar\">\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ lock }\n\t\t\t\t\tlabel={ __( 'Unlock' ) }\n\t\t\t\t\tonClick={ toggleModal }\n\t\t\t\t\tref={ lockButtonRef }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<BlockLockModal clientId={ clientId } onClose={ toggleModal } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

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

@@ -93,7 +93,8 @@ const BlockToolbar = ({
       isVisual: selectedBlockClientIds.every(id => getBlockMode(id) === 'visual'),
       blockEditingMode: getBlockEditingMode(selectedBlockClientId)
     };
-  }, []); // Handles highlighting the current block outline on hover or focus of the
+  }, []);
+  const toolbarWrapperRef = (0, _element.useRef)(null); // Handles highlighting the current block outline on hover or focus of the
   // block type toolbar area.
 
   const {
@@ -140,16 +141,18 @@ const BlockToolbar = ({
     'is-synced': isSynced
   });
   return (0, _element.createElement)("div", {
-    className: classes
-  }, !isMultiToolbar && isLargeViewport && blockEditingMode === 'default' && (0, _element.createElement)(_blockParentSelector.default, null), (0, _element.createElement)("div", {
+    className: classes,
+    ref: toolbarWrapperRef
+  }, !isMultiToolbar && isLargeViewport && blockEditingMode === 'default' && (0, _element.createElement)(_blockParentSelector.default, null), (shouldShowVisualToolbar || isMultiToolbar) && blockEditingMode === 'default' && (0, _element.createElement)("div", {
     ref: nodeRef,
     ...showMoversGestures
-  }, (shouldShowVisualToolbar || isMultiToolbar) && blockEditingMode === 'default' && (0, _element.createElement)(_components.ToolbarGroup, {
+  }, (0, _element.createElement)(_components.ToolbarGroup, {
     className: "block-editor-block-toolbar__block-controls"
   }, (0, _element.createElement)(_blockSwitcher.default, {
     clientIds: blockClientIds
   }), !isMultiToolbar && (0, _element.createElement)(_blockLock.BlockLockToolbar, {
-    clientId: blockClientIds[0]
+    clientId: blockClientIds[0],
+    wrapperRef: toolbarWrapperRef
   }), (0, _element.createElement)(_blockMover.default, {
     clientIds: blockClientIds,
     hideDragHandle: hideDragHandle

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/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