@wordpress/block-editor 12.15.0 → 12.16.0

package/build/components/block-styles/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_blocks","_data","_element","_i18n","_utils","_preview","_interopRequireDefault","_style","_store","BlockStyles","clientId","url","selector","select","getBlock","blockEditorStore","getBlockStyles","blocksStore","block","styles","name","className","attributes","useSelect","updateBlockAttributes","useDispatch","renderedStyles","find","style","isDefault","label","_x","mappedRenderedStyles","useMemo","activeStyle","getActiveStyle","map","styleClassName","replaceActiveStyle","isActive","onStylePress","_react","createElement","default","onPress","key","length","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","containerStyles","content","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-styles/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { ScrollView } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getActiveStyle, replaceActiveStyle } from './utils';\nimport StylePreview from './preview';\nimport containerStyles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nfunction BlockStyles( { clientId, url } ) {\n\tconst selector = ( select ) => {\n\t\tconst { getBlock } = select( blockEditorStore );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\t\tconst block = getBlock( clientId );\n\t\treturn {\n\t\t\tstyles: getBlockStyles( block.name ),\n\t\t\tclassName: block.attributes.className || '',\n\t\t};\n\t};\n\n\tconst { styles, className } = useSelect( selector, [ clientId ] );\n\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst renderedStyles = styles?.find( ( style ) => style.isDefault )\n\t\t? styles\n\t\t: [\n\t\t\t\t{\n\t\t\t\t\tname: 'default',\n\t\t\t\t\tlabel: _x( 'Default', 'block style' ),\n\t\t\t\t\tisDefault: true,\n\t\t\t\t},\n\t\t\t\t...styles,\n\t\t  ];\n\n\tconst mappedRenderedStyles = useMemo( () => {\n\t\tconst activeStyle = getActiveStyle( renderedStyles, className );\n\n\t\treturn renderedStyles.map( ( style ) => {\n\t\t\tconst styleClassName = replaceActiveStyle(\n\t\t\t\tclassName,\n\t\t\t\tactiveStyle,\n\t\t\t\tstyle\n\t\t\t);\n\t\t\tconst isActive = activeStyle === style;\n\n\t\t\tconst onStylePress = () => {\n\t\t\t\tupdateBlockAttributes( clientId, {\n\t\t\t\t\tclassName: styleClassName,\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<StylePreview\n\t\t\t\t\tonPress={ onStylePress }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tkey={ style.name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\turl={ url }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ renderedStyles, className, clientId ] );\n\n\tif ( ! styles || styles.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ScrollView\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tcontentContainerStyle={ containerStyles.content }\n\t\t>\n\t\t\t{ mappedRenderedStyles }\n\t\t</ScrollView>\n\t);\n}\n\nexport default BlockStyles;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAD,sBAAA,CAAAP,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;;AAMA,SAASU,WAAWA,CAAE;EAAEC,QAAQ;EAAEC;AAAI,CAAC,EAAG;EACzC,MAAMC,QAAQ,GAAKC,MAAM,IAAM;IAC9B,MAAM;MAAEC;IAAS,CAAC,GAAGD,MAAM,CAAEE,YAAiB,CAAC;IAC/C,MAAM;MAAEC;IAAe,CAAC,GAAGH,MAAM,CAAEI,aAAY,CAAC;IAChD,MAAMC,KAAK,GAAGJ,QAAQ,CAAEJ,QAAS,CAAC;IAClC,OAAO;MACNS,MAAM,EAAEH,cAAc,CAAEE,KAAK,CAACE,IAAK,CAAC;MACpCC,SAAS,EAAEH,KAAK,CAACI,UAAU,CAACD,SAAS,IAAI;IAC1C,CAAC;EACF,CAAC;EAED,MAAM;IAAEF,MAAM;IAAEE;EAAU,CAAC,GAAG,IAAAE,eAAS,EAAEX,QAAQ,EAAE,CAAEF,QAAQ,CAAG,CAAC;EAEjE,MAAM;IAAEc;EAAsB,CAAC,GAAG,IAAAC,iBAAW,EAAEV,YAAiB,CAAC;EAEjE,MAAMW,cAAc,GAAGP,MAAM,EAAEQ,IAAI,CAAIC,KAAK,IAAMA,KAAK,CAACC,SAAU,CAAC,GAChEV,MAAM,GACN,CACA;IACCC,IAAI,EAAE,SAAS;IACfU,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAS,EAAE,aAAc,CAAC;IACrCF,SAAS,EAAE;EACZ,CAAC,EACD,GAAGV,MAAM,CACR;EAEJ,MAAMa,oBAAoB,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC3C,MAAMC,WAAW,GAAG,IAAAC,qBAAc,EAAET,cAAc,EAAEL,SAAU,CAAC;IAE/D,OAAOK,cAAc,CAACU,GAAG,CAAIR,KAAK,IAAM;MACvC,MAAMS,cAAc,GAAG,IAAAC,yBAAkB,EACxCjB,SAAS,EACTa,WAAW,EACXN,KACD,CAAC;MACD,MAAMW,QAAQ,GAAGL,WAAW,KAAKN,KAAK;MAEtC,MAAMY,YAAY,GAAGA,CAAA,KAAM;QAC1BhB,qBAAqB,CAAEd,QAAQ,EAAE;UAChCW,SAAS,EAAEgB;QACZ,CAAE,CAAC;MACJ,CAAC;MAED,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACrC,QAAA,CAAAsC,OAAY;QACZC,OAAO,EAAGJ,YAAc;QACxBD,QAAQ,EAAGA,QAAU;QACrBM,GAAG,EAAGjB,KAAK,CAACR,IAAM;QAClBQ,KAAK,EAAGA,KAAO;QACfjB,GAAG,EAAGA;MAAK,CACX,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEe,cAAc,EAAEL,SAAS,EAAEX,QAAQ,CAAG,CAAC;EAE5C,IAAK,CAAES,MAAM,IAAIA,MAAM,CAAC2B,MAAM,KAAK,CAAC,EAAG;IACtC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAL,MAAA,CAAAC,aAAA,EAAC5C,YAAA,CAAAiD,UAAU;IACVC,UAAU;IACVC,8BAA8B,EAAG,KAAO;IACxCC,qBAAqB,EAAGC,cAAe,CAACC;EAAS,GAE/CpB,oBACS,CAAC;AAEf;AAAC,IAAAqB,QAAA,GAEc5C,WAAW;AAAA6C,OAAA,CAAAX,OAAA,GAAAU,QAAA"}
+{"version":3,"names":["_reactNative","require","_blocks","_data","_element","_i18n","_utils","_preview","_interopRequireDefault","_style","_store","EMPTY_ARRAY","BlockStyles","clientId","url","selector","select","getBlock","blockEditorStore","getBlockStyles","blocksStore","block","styles","name","className","attributes","useSelect","updateBlockAttributes","useDispatch","renderedStyles","find","style","isDefault","label","_x","mappedRenderedStyles","useMemo","activeStyle","getActiveStyle","map","styleClassName","replaceActiveStyle","isActive","onStylePress","_react","createElement","default","onPress","key","length","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","containerStyles","content","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-styles/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { ScrollView } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getActiveStyle, replaceActiveStyle } from './utils';\nimport StylePreview from './preview';\nimport containerStyles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst EMPTY_ARRAY = [];\n\nfunction BlockStyles( { clientId, url } ) {\n\tconst selector = ( select ) => {\n\t\tconst { getBlock } = select( blockEditorStore );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\t\tconst block = getBlock( clientId );\n\t\treturn {\n\t\t\tstyles: getBlockStyles( block?.name ) || EMPTY_ARRAY,\n\t\t\tclassName: block?.attributes?.className || '',\n\t\t};\n\t};\n\n\tconst { styles, className } = useSelect( selector, [ clientId ] );\n\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst renderedStyles = styles?.find( ( style ) => style.isDefault )\n\t\t? styles\n\t\t: [\n\t\t\t\t{\n\t\t\t\t\tname: 'default',\n\t\t\t\t\tlabel: _x( 'Default', 'block style' ),\n\t\t\t\t\tisDefault: true,\n\t\t\t\t},\n\t\t\t\t...styles,\n\t\t  ];\n\n\tconst mappedRenderedStyles = useMemo( () => {\n\t\tconst activeStyle = getActiveStyle( renderedStyles, className );\n\n\t\treturn renderedStyles.map( ( style ) => {\n\t\t\tconst styleClassName = replaceActiveStyle(\n\t\t\t\tclassName,\n\t\t\t\tactiveStyle,\n\t\t\t\tstyle\n\t\t\t);\n\t\t\tconst isActive = activeStyle === style;\n\n\t\t\tconst onStylePress = () => {\n\t\t\t\tupdateBlockAttributes( clientId, {\n\t\t\t\t\tclassName: styleClassName,\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<StylePreview\n\t\t\t\t\tonPress={ onStylePress }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tkey={ style.name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\turl={ url }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ renderedStyles, className, clientId ] );\n\n\tif ( ! styles || styles.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ScrollView\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tcontentContainerStyle={ containerStyles.content }\n\t\t>\n\t\t\t{ mappedRenderedStyles }\n\t\t</ScrollView>\n\t);\n}\n\nexport default BlockStyles;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAD,sBAAA,CAAAP,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;;AAMA,MAAMU,WAAW,GAAG,EAAE;AAEtB,SAASC,WAAWA,CAAE;EAAEC,QAAQ;EAAEC;AAAI,CAAC,EAAG;EACzC,MAAMC,QAAQ,GAAKC,MAAM,IAAM;IAC9B,MAAM;MAAEC;IAAS,CAAC,GAAGD,MAAM,CAAEE,YAAiB,CAAC;IAC/C,MAAM;MAAEC;IAAe,CAAC,GAAGH,MAAM,CAAEI,aAAY,CAAC;IAChD,MAAMC,KAAK,GAAGJ,QAAQ,CAAEJ,QAAS,CAAC;IAClC,OAAO;MACNS,MAAM,EAAEH,cAAc,CAAEE,KAAK,EAAEE,IAAK,CAAC,IAAIZ,WAAW;MACpDa,SAAS,EAAEH,KAAK,EAAEI,UAAU,EAAED,SAAS,IAAI;IAC5C,CAAC;EACF,CAAC;EAED,MAAM;IAAEF,MAAM;IAAEE;EAAU,CAAC,GAAG,IAAAE,eAAS,EAAEX,QAAQ,EAAE,CAAEF,QAAQ,CAAG,CAAC;EAEjE,MAAM;IAAEc;EAAsB,CAAC,GAAG,IAAAC,iBAAW,EAAEV,YAAiB,CAAC;EAEjE,MAAMW,cAAc,GAAGP,MAAM,EAAEQ,IAAI,CAAIC,KAAK,IAAMA,KAAK,CAACC,SAAU,CAAC,GAChEV,MAAM,GACN,CACA;IACCC,IAAI,EAAE,SAAS;IACfU,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAS,EAAE,aAAc,CAAC;IACrCF,SAAS,EAAE;EACZ,CAAC,EACD,GAAGV,MAAM,CACR;EAEJ,MAAMa,oBAAoB,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC3C,MAAMC,WAAW,GAAG,IAAAC,qBAAc,EAAET,cAAc,EAAEL,SAAU,CAAC;IAE/D,OAAOK,cAAc,CAACU,GAAG,CAAIR,KAAK,IAAM;MACvC,MAAMS,cAAc,GAAG,IAAAC,yBAAkB,EACxCjB,SAAS,EACTa,WAAW,EACXN,KACD,CAAC;MACD,MAAMW,QAAQ,GAAGL,WAAW,KAAKN,KAAK;MAEtC,MAAMY,YAAY,GAAGA,CAAA,KAAM;QAC1BhB,qBAAqB,CAAEd,QAAQ,EAAE;UAChCW,SAAS,EAAEgB;QACZ,CAAE,CAAC;MACJ,CAAC;MAED,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACtC,QAAA,CAAAuC,OAAY;QACZC,OAAO,EAAGJ,YAAc;QACxBD,QAAQ,EAAGA,QAAU;QACrBM,GAAG,EAAGjB,KAAK,CAACR,IAAM;QAClBQ,KAAK,EAAGA,KAAO;QACfjB,GAAG,EAAGA;MAAK,CACX,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEe,cAAc,EAAEL,SAAS,EAAEX,QAAQ,CAAG,CAAC;EAE5C,IAAK,CAAES,MAAM,IAAIA,MAAM,CAAC2B,MAAM,KAAK,CAAC,EAAG;IACtC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAL,MAAA,CAAAC,aAAA,EAAC7C,YAAA,CAAAkD,UAAU;IACVC,UAAU;IACVC,8BAA8B,EAAG,KAAO;IACxCC,qBAAqB,EAAGC,cAAe,CAACC;EAAS,GAE/CpB,oBACS,CAAC;AAEf;AAAC,IAAAqB,QAAA,GAEc5C,WAAW;AAAA6C,OAAA,CAAAX,OAAA,GAAAU,QAAA"}

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

@@ -4,9 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PrivateBlockToolbar = PrivateBlockToolbar;
+exports.default = BlockToolbar;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _i18n = require("@wordpress/i18n");
 var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
@@ -24,6 +26,8 @@ var _blockEditVisuallyButton = _interopRequireDefault(require("../block-edit-vis
 var _utils = require("./utils");
 var _store = require("../../store");
 var _blockNameContext = _interopRequireDefault(require("./block-name-context"));
+var _navigableToolbar = _interopRequireDefault(require("../navigable-toolbar"));
+var _useHasBlockControls = require("../block-controls/use-has-block-controls");
 /**
  * External dependencies
  */
@@ -36,19 +40,37 @@ var _blockNameContext = _interopRequireDefault(require("./block-name-context"));
  * Internal dependencies
  */
 
-const BlockToolbar = ({
-  hideDragHandle
-}) => {
+/**
+ * Renders the block toolbar.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ *
+ * @param {Object}   props                             Components props.
+ * @param {boolean}  props.hideDragHandle              Show or hide the Drag Handle for drag and drop functionality.
+ * @param {boolean}  props.focusOnMount                Focus the toolbar when mounted.
+ * @param {number}   props.__experimentalInitialIndex  The initial index of the toolbar item to focus.
+ * @param {Function} props.__experimentalOnIndexChange Callback function to be called when the index of the focused toolbar item changes.
+ * @param {string}   props.variant                     Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
+ */
+function PrivateBlockToolbar({
+  hideDragHandle,
+  focusOnMount,
+  __experimentalInitialIndex,
+  __experimentalOnIndexChange,
+  variant = 'unstyled'
+}) {
   const {
+    blockClientId,
     blockClientIds,
+    isDefaultEditingMode,
     blockType,
-    isValid,
-    isVisual,
-    blockEditingMode
+    shouldShowVisualToolbar,
+    showParentSelector
   } = (0, _data.useSelect)(select => {
     const {
       getBlockName,
       getBlockMode,
+      getBlockParents,
       getSelectedBlockClientIds,
       isBlockValid,
       getBlockRootClientId,
@@ -57,13 +79,21 @@ const BlockToolbar = ({
     const selectedBlockClientIds = getSelectedBlockClientIds();
     const selectedBlockClientId = selectedBlockClientIds[0];
     const blockRootClientId = getBlockRootClientId(selectedBlockClientId);
+    const parents = getBlockParents(selectedBlockClientId);
+    const firstParentClientId = parents[parents.length - 1];
+    const parentBlockName = getBlockName(firstParentClientId);
+    const parentBlockType = (0, _blocks.getBlockType)(parentBlockName);
+    const _isDefaultEditingMode = getBlockEditingMode(selectedBlockClientId) === 'default';
+    const isValid = selectedBlockClientIds.every(id => isBlockValid(id));
+    const isVisual = selectedBlockClientIds.every(id => getBlockMode(id) === 'visual');
     return {
+      blockClientId: selectedBlockClientId,
       blockClientIds: selectedBlockClientIds,
+      isDefaultEditingMode: _isDefaultEditingMode,
       blockType: selectedBlockClientId && (0, _blocks.getBlockType)(getBlockName(selectedBlockClientId)),
+      shouldShowVisualToolbar: isValid && isVisual,
       rootClientId: blockRootClientId,
-      isValid: selectedBlockClientIds.every(id => isBlockValid(id)),
-      isVisual: selectedBlockClientIds.every(id => getBlockMode(id) === 'visual'),
-      blockEditingMode: getBlockEditingMode(selectedBlockClientId)
+      showParentSelector: parentBlockType && getBlockEditingMode(firstParentClientId) === 'default' && (0, _blocks.hasBlockSupport)(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length === 1 && _isDefaultEditingMode
     };
   }, []);
   const toolbarWrapperRef = (0, _element.useRef)(null);
@@ -75,24 +105,40 @@ const BlockToolbar = ({
     ref: nodeRef
   });
   const isLargeViewport = !(0, _compose.useViewportMatch)('medium', '<');
-  if (blockType) {
-    if (!(0, _blocks.hasBlockSupport)(blockType, '__experimentalToolbar', true)) {
-      return null;
-    }
-  }
-  if (blockClientIds.length === 0) {
+  const isToolbarEnabled = blockType && (0, _blocks.hasBlockSupport)(blockType, '__experimentalToolbar', true);
+  const hasAnyBlockControls = (0, _useHasBlockControls.useHasAnyBlockControls)();
+  if (!isToolbarEnabled || !isDefaultEditingMode && !hasAnyBlockControls) {
     return null;
   }
-  const shouldShowVisualToolbar = isValid && isVisual;
   const isMultiToolbar = blockClientIds.length > 1;
   const isSynced = (0, _blocks.isReusableBlock)(blockType) || (0, _blocks.isTemplatePart)(blockType);
-  const classes = (0, _classnames.default)('block-editor-block-toolbar', {
+
+  // Shifts the toolbar to make room for the parent block selector.
+  const classes = (0, _classnames.default)('block-editor-block-contextual-toolbar', {
+    'has-parent': showParentSelector
+  });
+  const innerClasses = (0, _classnames.default)('block-editor-block-toolbar', {
     'is-synced': isSynced
   });
-  return (0, _react.createElement)("div", {
-    className: classes,
-    ref: toolbarWrapperRef
-  }, !isMultiToolbar && isLargeViewport && blockEditingMode === 'default' && (0, _react.createElement)(_blockParentSelector.default, null), (shouldShowVisualToolbar || isMultiToolbar) && blockEditingMode === 'default' && (0, _react.createElement)("div", {
+  return (0, _react.createElement)(_navigableToolbar.default, {
+    focusEditorOnEscape: true,
+    className: classes
+    /* translators: accessibility text for the block toolbar */,
+    "aria-label": (0, _i18n.__)('Block tools')
+    // The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
+    ,
+    variant: variant === 'toolbar' ? undefined : variant,
+    focusOnMount: focusOnMount,
+    __experimentalInitialIndex: __experimentalInitialIndex,
+    __experimentalOnIndexChange: __experimentalOnIndexChange
+    // Resets the index whenever the active block changes so
+    // this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+    ,
+    key: blockClientId
+  }, (0, _react.createElement)("div", {
+    ref: toolbarWrapperRef,
+    className: innerClasses
+  }, !isMultiToolbar && isLargeViewport && isDefaultEditingMode && (0, _react.createElement)(_blockParentSelector.default, null), (shouldShowVisualToolbar || isMultiToolbar) && isDefaultEditingMode && (0, _react.createElement)("div", {
     ref: nodeRef,
     ...showHoveredOrFocusedGestures
   }, (0, _react.createElement)(_components.ToolbarGroup, {
@@ -123,14 +169,30 @@ const BlockToolbar = ({
     value: blockType?.name
   }, (0, _react.createElement)(_blockToolbarLastItem.default.Slot, null))), (0, _react.createElement)(_blockEditVisuallyButton.default, {
     clientIds: blockClientIds
-  }), blockEditingMode === 'default' && (0, _react.createElement)(_blockSettingsMenu.default, {
+  }), isDefaultEditingMode && (0, _react.createElement)(_blockSettingsMenu.default, {
     clientIds: blockClientIds
-  }));
-};
+  })));
+}
 
 /**
+ * Renders the block toolbar.
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ *
+ * @param {Object}  props                Components props.
+ * @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.
+ * @param {string}  props.variant        Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
  */
-var _default = BlockToolbar;
-exports.default = _default;
+function BlockToolbar({
+  hideDragHandle,
+  variant
+}) {
+  return (0, _react.createElement)(PrivateBlockToolbar, {
+    hideDragHandle: hideDragHandle,
+    variant: variant,
+    focusOnMount: undefined,
+    __experimentalInitialIndex: undefined,
+    __experimentalOnIndexChange: undefined
+  });
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_data","_element","_compose","_blocks","_components","_blockMover","_blockParentSelector","_blockSwitcher","_blockControls","_blockToolbarLastItem","_blockSettingsMenu","_blockLock","_convertToGroupButtons","_blockEditVisuallyButton","_utils","_store","_blockNameContext","BlockToolbar","hideDragHandle","blockClientIds","blockType","isValid","isVisual","blockEditingMode","useSelect","select","getBlockName","getBlockMode","getSelectedBlockClientIds","isBlockValid","getBlockRootClientId","getBlockEditingMode","blockEditorStore","selectedBlockClientIds","selectedBlockClientId","blockRootClientId","getBlockType","rootClientId","every","id","toolbarWrapperRef","useRef","nodeRef","showHoveredOrFocusedGestures","useShowHoveredOrFocusedGestures","ref","isLargeViewport","useViewportMatch","hasBlockSupport","length","shouldShowVisualToolbar","isMultiToolbar","isSynced","isReusableBlock","isTemplatePart","classes","classnames","_react","createElement","className","default","ToolbarGroup","clientIds","BlockLockToolbar","clientId","wrapperRef","BlockGroupToolbar","Fragment","Slot","group","Provider","value","name","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-toolbar/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } 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 { useShowHoveredOrFocusedGestures } from './utils';\nimport { store as blockEditorStore } from '../../store';\nimport __unstableBlockNameContext from './block-name-context';\n\nconst BlockToolbar = ( { hideDragHandle } ) => {\n\tconst { blockClientIds, blockType, isValid, isVisual, blockEditingMode } =\n\t\tuseSelect( ( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockMode,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tisBlockValid,\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\t\tconst selectedBlockClientId = selectedBlockClientIds[ 0 ];\n\t\t\tconst blockRootClientId = getBlockRootClientId(\n\t\t\t\tselectedBlockClientId\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tblockClientIds: selectedBlockClientIds,\n\t\t\t\tblockType:\n\t\t\t\t\tselectedBlockClientId &&\n\t\t\t\t\tgetBlockType( getBlockName( selectedBlockClientId ) ),\n\t\t\t\trootClientId: blockRootClientId,\n\t\t\t\tisValid: selectedBlockClientIds.every( ( id ) =>\n\t\t\t\t\tisBlockValid( id )\n\t\t\t\t),\n\t\t\t\tisVisual: selectedBlockClientIds.every(\n\t\t\t\t\t( id ) => getBlockMode( id ) === 'visual'\n\t\t\t\t),\n\t\t\t\tblockEditingMode: getBlockEditingMode( selectedBlockClientId ),\n\t\t\t};\n\t\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 nodeRef = useRef();\n\tconst showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {\n\t\tref: nodeRef,\n\t} );\n\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\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-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 } { ...showHoveredOrFocusedGestures }>\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"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_data","_element","_compose","_blocks","_components","_blockMover","_blockParentSelector","_blockSwitcher","_blockControls","_blockToolbarLastItem","_blockSettingsMenu","_blockLock","_convertToGroupButtons","_blockEditVisuallyButton","_utils","_store","_blockNameContext","_navigableToolbar","_useHasBlockControls","PrivateBlockToolbar","hideDragHandle","focusOnMount","__experimentalInitialIndex","__experimentalOnIndexChange","variant","blockClientId","blockClientIds","isDefaultEditingMode","blockType","shouldShowVisualToolbar","showParentSelector","useSelect","select","getBlockName","getBlockMode","getBlockParents","getSelectedBlockClientIds","isBlockValid","getBlockRootClientId","getBlockEditingMode","blockEditorStore","selectedBlockClientIds","selectedBlockClientId","blockRootClientId","parents","firstParentClientId","length","parentBlockName","parentBlockType","getBlockType","_isDefaultEditingMode","isValid","every","id","isVisual","rootClientId","hasBlockSupport","toolbarWrapperRef","useRef","nodeRef","showHoveredOrFocusedGestures","useShowHoveredOrFocusedGestures","ref","isLargeViewport","useViewportMatch","isToolbarEnabled","hasAnyBlockControls","useHasAnyBlockControls","isMultiToolbar","isSynced","isReusableBlock","isTemplatePart","classes","classnames","innerClasses","_react","createElement","default","focusEditorOnEscape","className","__","undefined","key","ToolbarGroup","clientIds","BlockLockToolbar","clientId","wrapperRef","BlockGroupToolbar","Fragment","Slot","group","Provider","value","name","BlockToolbar"],"sources":["@wordpress/block-editor/src/components/block-toolbar/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } 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 { useShowHoveredOrFocusedGestures } from './utils';\nimport { store as blockEditorStore } from '../../store';\nimport __unstableBlockNameContext from './block-name-context';\nimport NavigableToolbar from '../navigable-toolbar';\nimport { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';\n\n/**\n * Renders the block toolbar.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md\n *\n * @param {Object}   props                             Components props.\n * @param {boolean}  props.hideDragHandle              Show or hide the Drag Handle for drag and drop functionality.\n * @param {boolean}  props.focusOnMount                Focus the toolbar when mounted.\n * @param {number}   props.__experimentalInitialIndex  The initial index of the toolbar item to focus.\n * @param {Function} props.__experimentalOnIndexChange Callback function to be called when the index of the focused toolbar item changes.\n * @param {string}   props.variant                     Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.\n */\nexport function PrivateBlockToolbar( {\n\thideDragHandle,\n\tfocusOnMount,\n\t__experimentalInitialIndex,\n\t__experimentalOnIndexChange,\n\tvariant = 'unstyled',\n} ) {\n\tconst {\n\t\tblockClientId,\n\t\tblockClientIds,\n\t\tisDefaultEditingMode,\n\t\tblockType,\n\t\tshouldShowVisualToolbar,\n\t\tshowParentSelector,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetBlockName,\n\t\t\tgetBlockMode,\n\t\t\tgetBlockParents,\n\t\t\tgetSelectedBlockClientIds,\n\t\t\tisBlockValid,\n\t\t\tgetBlockRootClientId,\n\t\t\tgetBlockEditingMode,\n\t\t} = select( blockEditorStore );\n\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\tconst selectedBlockClientId = selectedBlockClientIds[ 0 ];\n\t\tconst blockRootClientId = getBlockRootClientId( selectedBlockClientId );\n\t\tconst parents = getBlockParents( selectedBlockClientId );\n\t\tconst firstParentClientId = parents[ parents.length - 1 ];\n\t\tconst parentBlockName = getBlockName( firstParentClientId );\n\t\tconst parentBlockType = getBlockType( parentBlockName );\n\t\tconst _isDefaultEditingMode =\n\t\t\tgetBlockEditingMode( selectedBlockClientId ) === 'default';\n\t\tconst isValid = selectedBlockClientIds.every( ( id ) =>\n\t\t\tisBlockValid( id )\n\t\t);\n\t\tconst isVisual = selectedBlockClientIds.every(\n\t\t\t( id ) => getBlockMode( id ) === 'visual'\n\t\t);\n\t\treturn {\n\t\t\tblockClientId: selectedBlockClientId,\n\t\t\tblockClientIds: selectedBlockClientIds,\n\t\t\tisDefaultEditingMode: _isDefaultEditingMode,\n\t\t\tblockType:\n\t\t\t\tselectedBlockClientId &&\n\t\t\t\tgetBlockType( getBlockName( selectedBlockClientId ) ),\n\n\t\t\tshouldShowVisualToolbar: isValid && isVisual,\n\t\t\trootClientId: blockRootClientId,\n\t\t\tshowParentSelector:\n\t\t\t\tparentBlockType &&\n\t\t\t\tgetBlockEditingMode( firstParentClientId ) === 'default' &&\n\t\t\t\thasBlockSupport(\n\t\t\t\t\tparentBlockType,\n\t\t\t\t\t'__experimentalParentSelector',\n\t\t\t\t\ttrue\n\t\t\t\t) &&\n\t\t\t\tselectedBlockClientIds.length === 1 &&\n\t\t\t\t_isDefaultEditingMode,\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 nodeRef = useRef();\n\tconst showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {\n\t\tref: nodeRef,\n\t} );\n\n\tconst isLargeViewport = ! useViewportMatch( 'medium', '<' );\n\n\tconst isToolbarEnabled =\n\t\tblockType &&\n\t\thasBlockSupport( blockType, '__experimentalToolbar', true );\n\tconst hasAnyBlockControls = useHasAnyBlockControls();\n\n\tif (\n\t\t! isToolbarEnabled ||\n\t\t( ! isDefaultEditingMode && ! hasAnyBlockControls )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isMultiToolbar = blockClientIds.length > 1;\n\tconst isSynced =\n\t\tisReusableBlock( blockType ) || isTemplatePart( blockType );\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': showParentSelector,\n\t} );\n\n\tconst innerClasses = classnames( 'block-editor-block-toolbar', {\n\t\t'is-synced': isSynced,\n\t} );\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tfocusEditorOnEscape\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// The variant is applied as \"toolbar\" when undefined, which is the black border style of the dropdown from the toolbar popover.\n\t\t\tvariant={ variant === 'toolbar' ? undefined : variant }\n\t\t\tfocusOnMount={ focusOnMount }\n\t\t\t__experimentalInitialIndex={ __experimentalInitialIndex }\n\t\t\t__experimentalOnIndexChange={ __experimentalOnIndexChange }\n\t\t\t// Resets the index whenever the active block changes so\n\t\t\t// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169\n\t\t\tkey={ blockClientId }\n\t\t>\n\t\t\t<div ref={ toolbarWrapperRef } className={ innerClasses }>\n\t\t\t\t{ ! isMultiToolbar &&\n\t\t\t\t\tisLargeViewport &&\n\t\t\t\t\tisDefaultEditingMode && <BlockParentSelector /> }\n\t\t\t\t{ ( shouldShowVisualToolbar || isMultiToolbar ) &&\n\t\t\t\t\tisDefaultEditingMode && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ nodeRef }\n\t\t\t\t\t\t\t{ ...showHoveredOrFocusedGestures }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToolbarGroup className=\"block-editor-block-toolbar__block-controls\">\n\t\t\t\t\t\t\t\t<BlockSwitcher clientIds={ blockClientIds } />\n\t\t\t\t\t\t\t\t{ ! isMultiToolbar && (\n\t\t\t\t\t\t\t\t\t<BlockLockToolbar\n\t\t\t\t\t\t\t\t\t\tclientId={ blockClientIds[ 0 ] }\n\t\t\t\t\t\t\t\t\t\twrapperRef={ toolbarWrapperRef }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t<BlockMover\n\t\t\t\t\t\t\t\t\tclientIds={ blockClientIds }\n\t\t\t\t\t\t\t\t\thideDragHandle={ hideDragHandle }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t{ shouldShowVisualToolbar && isMultiToolbar && (\n\t\t\t\t\t<BlockGroupToolbar />\n\t\t\t\t) }\n\t\t\t\t{ shouldShowVisualToolbar && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\t\tgroup=\"parent\"\n\t\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\t\tgroup=\"block\"\n\t\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BlockControls.Slot className=\"block-editor-block-toolbar__slot\" />\n\t\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\t\tgroup=\"inline\"\n\t\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BlockControls.Slot\n\t\t\t\t\t\t\tgroup=\"other\"\n\t\t\t\t\t\t\tclassName=\"block-editor-block-toolbar__slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<__unstableBlockNameContext.Provider\n\t\t\t\t\t\t\tvalue={ blockType?.name }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<__unstableBlockToolbarLastItem.Slot />\n\t\t\t\t\t\t</__unstableBlockNameContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t<BlockEditVisuallyButton clientIds={ blockClientIds } />\n\t\t\t\t{ isDefaultEditingMode && (\n\t\t\t\t\t<BlockSettingsMenu clientIds={ blockClientIds } />\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</NavigableToolbar>\n\t);\n}\n\n/**\n * Renders the block toolbar.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md\n *\n * @param {Object}  props                Components props.\n * @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.\n * @param {string}  props.variant        Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.\n */\nexport default function BlockToolbar( { hideDragHandle, variant } ) {\n\treturn (\n\t\t<PrivateBlockToolbar\n\t\t\thideDragHandle={ hideDragHandle }\n\t\t\tvariant={ variant }\n\t\t\tfocusOnMount={ undefined }\n\t\t\t__experimentalInitialIndex={ undefined }\n\t\t\t__experimentalOnIndexChange={ undefined }\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockToolbarBreadcrumb;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _blockSelectionButton = _interopRequireDefault(require("./block-selection-button"));
+var _blockPopover = _interopRequireDefault(require("../block-popover"));
+var _useBlockToolbarPopoverProps = _interopRequireDefault(require("./use-block-toolbar-popover-props"));
+var _useSelectedBlockToolProps = _interopRequireDefault(require("./use-selected-block-tool-props"));
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function BlockToolbarBreadcrumb({
+  clientId,
+  __unstableContentRef
+}) {
+  const {
+    capturingClientId,
+    isInsertionPointVisible,
+    lastClientId,
+    rootClientId
+  } = (0, _useSelectedBlockToolProps.default)(clientId);
+  const popoverProps = (0, _useBlockToolbarPopoverProps.default)({
+    contentElement: __unstableContentRef?.current,
+    clientId
+  });
+  return (0, _react.createElement)(_blockPopover.default, {
+    clientId: capturingClientId || clientId,
+    bottomClientId: lastClientId,
+    className: (0, _classnames.default)('block-editor-block-list__block-popover', {
+      'is-insertion-point-visible': isInsertionPointVisible
+    }),
+    resize: false,
+    ...popoverProps
+  }, (0, _react.createElement)(_blockSelectionButton.default, {
+    clientId: clientId,
+    rootClientId: rootClientId
+  }));
+}
+//# sourceMappingURL=block-toolbar-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_blockSelectionButton","_blockPopover","_useBlockToolbarPopoverProps","_useSelectedBlockToolProps","BlockToolbarBreadcrumb","clientId","__unstableContentRef","capturingClientId","isInsertionPointVisible","lastClientId","rootClientId","useSelectedBlockToolProps","popoverProps","useBlockToolbarPopoverProps","contentElement","current","_react","createElement","default","bottomClientId","className","classnames","resize"],"sources":["@wordpress/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport BlockSelectionButton from './block-selection-button';\nimport BlockPopover from '../block-popover';\nimport useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';\nimport useSelectedBlockToolProps from './use-selected-block-tool-props';\n\nexport default function BlockToolbarBreadcrumb( {\n\tclientId,\n\t__unstableContentRef,\n} ) {\n\tconst {\n\t\tcapturingClientId,\n\t\tisInsertionPointVisible,\n\t\tlastClientId,\n\t\trootClientId,\n\t} = useSelectedBlockToolProps( clientId );\n\n\tconst popoverProps = useBlockToolbarPopoverProps( {\n\t\tcontentElement: __unstableContentRef?.current,\n\t\tclientId,\n\t} );\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ capturingClientId || clientId }\n\t\t\tbottomClientId={ lastClientId }\n\t\t\tclassName={ classnames( 'block-editor-block-list__block-popover', {\n\t\t\t\t'is-insertion-point-visible': isInsertionPointVisible,\n\t\t\t} ) }\n\t\t\tresize={ false }\n\t\t\t{ ...popoverProps }\n\t\t>\n\t\t\t<BlockSelectionButton\n\t\t\t\tclientId={ clientId }\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t/>\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,qBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,4BAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,0BAAA,GAAAL,sBAAA,CAAAC,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAMe,SAASK,sBAAsBA,CAAE;EAC/CC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAM;IACLC,iBAAiB;IACjBC,uBAAuB;IACvBC,YAAY;IACZC;EACD,CAAC,GAAG,IAAAC,kCAAyB,EAAEN,QAAS,CAAC;EAEzC,MAAMO,YAAY,GAAG,IAAAC,oCAA2B,EAAE;IACjDC,cAAc,EAAER,oBAAoB,EAAES,OAAO;IAC7CV;EACD,CAAE,CAAC;EAEH,OACC,IAAAW,MAAA,CAAAC,aAAA,EAAChB,aAAA,CAAAiB,OAAY;IACZb,QAAQ,EAAGE,iBAAiB,IAAIF,QAAU;IAC1Cc,cAAc,EAAGV,YAAc;IAC/BW,SAAS,EAAG,IAAAC,mBAAU,EAAE,wCAAwC,EAAE;MACjE,4BAA4B,EAAEb;IAC/B,CAAE,CAAG;IACLc,MAAM,EAAG,KAAO;IAAA,GACXV;EAAY,GAEjB,IAAAI,MAAA,CAAAC,aAAA,EAACjB,qBAAA,CAAAkB,OAAoB;IACpBb,QAAQ,EAAGA,QAAU;IACrBK,YAAY,EAAGA;EAAc,CAC7B,CACY,CAAC;AAEjB"}

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockToolbarPopover;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
+var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
+var _blockPopover = _interopRequireDefault(require("../block-popover"));
+var _useBlockToolbarPopoverProps = _interopRequireDefault(require("./use-block-toolbar-popover-props"));
+var _useSelectedBlockToolProps = _interopRequireDefault(require("./use-selected-block-tool-props"));
+var _store = require("../../store");
+var _blockToolbar = require("../block-toolbar");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function BlockToolbarPopover({
+  clientId,
+  isTyping,
+  __unstableContentRef
+}) {
+  const {
+    capturingClientId,
+    isInsertionPointVisible,
+    lastClientId
+  } = (0, _useSelectedBlockToolProps.default)(clientId);
+
+  // Stores the active toolbar item index so the block toolbar can return focus
+  // to it when re-mounting.
+  const initialToolbarItemIndexRef = (0, _element.useRef)();
+  (0, _element.useEffect)(() => {
+    // Resets the index whenever the active block changes so this is not
+    // persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+    initialToolbarItemIndexRef.current = undefined;
+  }, [clientId]);
+  const {
+    stopTyping
+  } = (0, _data.useDispatch)(_store.store);
+  const isToolbarForced = (0, _element.useRef)(false);
+  (0, _keyboardShortcuts.useShortcut)('core/block-editor/focus-toolbar', () => {
+    isToolbarForced.current = true;
+    stopTyping(true);
+  }, {
+    isDisabled: false
+  });
+  (0, _element.useEffect)(() => {
+    isToolbarForced.current = false;
+  });
+  const popoverProps = (0, _useBlockToolbarPopoverProps.default)({
+    contentElement: __unstableContentRef?.current,
+    clientId
+  });
+  return !isTyping && (0, _react.createElement)(_blockPopover.default, {
+    clientId: capturingClientId || clientId,
+    bottomClientId: lastClientId,
+    className: (0, _classnames.default)('block-editor-block-list__block-popover', {
+      'is-insertion-point-visible': isInsertionPointVisible
+    }),
+    resize: false,
+    ...popoverProps
+  }, (0, _react.createElement)(_blockToolbar.PrivateBlockToolbar
+  // If the toolbar is being shown because of being forced
+  // it should focus the toolbar right after the mount.
+  , {
+    focusOnMount: isToolbarForced.current,
+    __experimentalInitialIndex: initialToolbarItemIndexRef.current,
+    __experimentalOnIndexChange: index => {
+      initialToolbarItemIndexRef.current = index;
+    },
+    variant: "toolbar"
+  }));
+}
+//# sourceMappingURL=block-toolbar-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_data","_element","_keyboardShortcuts","_blockPopover","_useBlockToolbarPopoverProps","_useSelectedBlockToolProps","_store","_blockToolbar","BlockToolbarPopover","clientId","isTyping","__unstableContentRef","capturingClientId","isInsertionPointVisible","lastClientId","useSelectedBlockToolProps","initialToolbarItemIndexRef","useRef","useEffect","current","undefined","stopTyping","useDispatch","blockEditorStore","isToolbarForced","useShortcut","isDisabled","popoverProps","useBlockToolbarPopoverProps","contentElement","_react","createElement","default","bottomClientId","className","classnames","resize","PrivateBlockToolbar","focusOnMount","__experimentalInitialIndex","__experimentalOnIndexChange","index","variant"],"sources":["@wordpress/block-editor/src/components/block-tools/block-toolbar-popover.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../block-popover';\nimport useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';\nimport useSelectedBlockToolProps from './use-selected-block-tool-props';\nimport { store as blockEditorStore } from '../../store';\nimport { PrivateBlockToolbar } from '../block-toolbar';\n\nexport default function BlockToolbarPopover( {\n\tclientId,\n\tisTyping,\n\t__unstableContentRef,\n} ) {\n\tconst { capturingClientId, isInsertionPointVisible, lastClientId } =\n\t\tuseSelectedBlockToolProps( clientId );\n\n\t// Stores the active toolbar item index so the block toolbar can return focus\n\t// to it when re-mounting.\n\tconst initialToolbarItemIndexRef = useRef();\n\n\tuseEffect( () => {\n\t\t// Resets the index whenever the active block changes so this is not\n\t\t// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169\n\t\tinitialToolbarItemIndexRef.current = undefined;\n\t}, [ clientId ] );\n\n\tconst { stopTyping } = useDispatch( blockEditorStore );\n\tconst isToolbarForced = useRef( false );\n\n\tuseShortcut(\n\t\t'core/block-editor/focus-toolbar',\n\t\t() => {\n\t\t\tisToolbarForced.current = true;\n\t\t\tstopTyping( true );\n\t\t},\n\t\t{\n\t\t\tisDisabled: false,\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tisToolbarForced.current = false;\n\t} );\n\n\tconst popoverProps = useBlockToolbarPopoverProps( {\n\t\tcontentElement: __unstableContentRef?.current,\n\t\tclientId,\n\t} );\n\n\treturn (\n\t\t! isTyping && (\n\t\t\t<BlockPopover\n\t\t\t\tclientId={ capturingClientId || clientId }\n\t\t\t\tbottomClientId={ lastClientId }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-block-list__block-popover',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-insertion-point-visible': isInsertionPointVisible,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tresize={ false }\n\t\t\t\t{ ...popoverProps }\n\t\t\t>\n\t\t\t\t<PrivateBlockToolbar\n\t\t\t\t\t// If the toolbar is being shown because of being forced\n\t\t\t\t\t// it should focus the toolbar right after the mount.\n\t\t\t\t\tfocusOnMount={ isToolbarForced.current }\n\t\t\t\t\t__experimentalInitialIndex={\n\t\t\t\t\t\tinitialToolbarItemIndexRef.current\n\t\t\t\t\t}\n\t\t\t\t\t__experimentalOnIndexChange={ ( index ) => {\n\t\t\t\t\t\tinitialToolbarItemIndexRef.current = index;\n\t\t\t\t\t} }\n\t\t\t\t\tvariant=\"toolbar\"\n\t\t\t\t/>\n\t\t\t</BlockPopover>\n\t\t)\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAIA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,4BAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,0BAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AAjBA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;;AAOe,SAASS,mBAAmBA,CAAE;EAC5CC,QAAQ;EACRC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,iBAAiB;IAAEC,uBAAuB;IAAEC;EAAa,CAAC,GACjE,IAAAC,kCAAyB,EAAEN,QAAS,CAAC;;EAEtC;EACA;EACA,MAAMO,0BAA0B,GAAG,IAAAC,eAAM,EAAC,CAAC;EAE3C,IAAAC,kBAAS,EAAE,MAAM;IAChB;IACA;IACAF,0BAA0B,CAACG,OAAO,GAAGC,SAAS;EAC/C,CAAC,EAAE,CAAEX,QAAQ,CAAG,CAAC;EAEjB,MAAM;IAAEY;EAAW,CAAC,GAAG,IAAAC,iBAAW,EAAEC,YAAiB,CAAC;EACtD,MAAMC,eAAe,GAAG,IAAAP,eAAM,EAAE,KAAM,CAAC;EAEvC,IAAAQ,8BAAW,EACV,iCAAiC,EACjC,MAAM;IACLD,eAAe,CAACL,OAAO,GAAG,IAAI;IAC9BE,UAAU,CAAE,IAAK,CAAC;EACnB,CAAC,EACD;IACCK,UAAU,EAAE;EACb,CACD,CAAC;EAED,IAAAR,kBAAS,EAAE,MAAM;IAChBM,eAAe,CAACL,OAAO,GAAG,KAAK;EAChC,CAAE,CAAC;EAEH,MAAMQ,YAAY,GAAG,IAAAC,oCAA2B,EAAE;IACjDC,cAAc,EAAElB,oBAAoB,EAAEQ,OAAO;IAC7CV;EACD,CAAE,CAAC;EAEH,OACC,CAAEC,QAAQ,IACT,IAAAoB,MAAA,CAAAC,aAAA,EAAC5B,aAAA,CAAA6B,OAAY;IACZvB,QAAQ,EAAGG,iBAAiB,IAAIH,QAAU;IAC1CwB,cAAc,EAAGnB,YAAc;IAC/BoB,SAAS,EAAG,IAAAC,mBAAU,EACrB,wCAAwC,EACxC;MACC,4BAA4B,EAAEtB;IAC/B,CACD,CAAG;IACHuB,MAAM,EAAG,KAAO;IAAA,GACXT;EAAY,GAEjB,IAAAG,MAAA,CAAAC,aAAA,EAACxB,aAAA,CAAA8B;EACA;EACA;EAAA;IACAC,YAAY,EAAGd,eAAe,CAACL,OAAS;IACxCoB,0BAA0B,EACzBvB,0BAA0B,CAACG,OAC3B;IACDqB,2BAA2B,EAAKC,KAAK,IAAM;MAC1CzB,0BAA0B,CAACG,OAAO,GAAGsB,KAAK;IAC3C,CAAG;IACHC,OAAO,EAAC;EAAS,CACjB,CACY,CACd;AAEH"}

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

@@ -7,16 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = BlockTools;
 var _react = require("react");
 var _data = require("@wordpress/data");
-var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
 var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
 var _element = require("@wordpress/element");
 var _blocks = require("@wordpress/blocks");
 var _emptyBlockInserter = _interopRequireDefault(require("./empty-block-inserter"));
 var _insertionPoint = _interopRequireWildcard(require("./insertion-point"));
-var _selectedBlockTools = _interopRequireDefault(require("./selected-block-tools"));
+var _blockToolbarPopover = _interopRequireDefault(require("./block-toolbar-popover"));
+var _blockToolbarBreadcrumb = _interopRequireDefault(require("./block-toolbar-breadcrumb"));
 var _store = require("../../store");
-var _blockContextualToolbar = _interopRequireDefault(require("./block-contextual-toolbar"));
 var _usePopoverScroll = _interopRequireDefault(require("../block-popover/use-popover-scroll"));
 var _zoomOutModeInserters = _interopRequireDefault(require("./zoom-out-mode-inserters"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,6 +34,7 @@ function selector(select) {
     getFirstMultiSelectedBlockClientId,
     getBlock,
     getSettings,
+    hasMultiSelection,
     __unstableGetEditorMode,
     isTyping
   } = select(_store.store);
@@ -43,16 +43,25 @@ function selector(select) {
     name = '',
     attributes = {}
   } = getBlock(clientId) || {};
+  const editorMode = __unstableGetEditorMode();
+  const hasSelectedBlock = clientId && name;
+  const isEmptyDefaultBlock = (0, _blocks.isUnmodifiedDefaultBlock)({
+    name,
+    attributes
+  });
+  const _showEmptyBlockSideInserter = clientId && !isTyping() && editorMode === 'edit' && (0, _blocks.isUnmodifiedDefaultBlock)({
+    name,
+    attributes
+  });
+  const maybeShowBreadcrumb = hasSelectedBlock && !hasMultiSelection() && (editorMode === 'navigation' || editorMode === 'zoom-out');
   return {
     clientId,
     hasFixedToolbar: getSettings().hasFixedToolbar,
-    hasSelectedBlock: clientId && name,
     isTyping: isTyping(),
-    isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-    showEmptyBlockSideInserter: clientId && !isTyping() && __unstableGetEditorMode() === 'edit' && (0, _blocks.isUnmodifiedDefaultBlock)({
-      name,
-      attributes
-    })
+    isZoomOutMode: editorMode === 'zoom-out',
+    showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+    showBreadcrumb: !_showEmptyBlockSideInserter && maybeShowBreadcrumb,
+    showBlockToolbar: !getSettings().hasFixedToolbar && !_showEmptyBlockSideInserter && hasSelectedBlock && !isEmptyDefaultBlock && !maybeShowBreadcrumb
   };
 }
 
@@ -70,14 +79,14 @@ function BlockTools({
   __unstableContentRef,
   ...props
 }) {
-  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
   const {
     clientId,
     hasFixedToolbar,
-    hasSelectedBlock,
     isTyping,
     isZoomOutMode,
-    showEmptyBlockSideInserter
+    showEmptyBlockSideInserter,
+    showBreadcrumb,
+    showBlockToolbar
   } = (0, _data.useSelect)(selector, []);
   const isMatch = (0, _keyboardShortcuts.__unstableUseShortcutEventMatch)();
   const {
@@ -162,12 +171,6 @@ function BlockTools({
   }
   const blockToolbarRef = (0, _usePopoverScroll.default)(__unstableContentRef);
   const blockToolbarAfterRef = (0, _usePopoverScroll.default)(__unstableContentRef);
-
-  // Conditions for fixed toolbar
-  // 1. Not zoom out mode
-  // 2. It's a large viewport. If it's a smaller viewport, let the floating toolbar handle it as it already has styles attached to make it render that way.
-  // 3. Fixed toolbar is enabled
-  const isTopToolbar = !isZoomOutMode && hasFixedToolbar && isLargeViewport;
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, _react.createElement)("div", {
@@ -177,17 +180,17 @@ function BlockTools({
       value: (0, _element.useRef)(false)
     }, !isTyping && (0, _react.createElement)(_insertionPoint.default, {
       __unstableContentRef: __unstableContentRef
-    }), !isLargeViewport &&
-    // Small viewports always get a fixed toolbar
-    (0, _react.createElement)(_blockContextualToolbar.default, {
-      isFixed: true
     }), showEmptyBlockSideInserter && (0, _react.createElement)(_emptyBlockInserter.default, {
       __unstableContentRef: __unstableContentRef,
       clientId: clientId
-    }), !showEmptyBlockSideInserter && hasSelectedBlock && (0, _react.createElement)(_selectedBlockTools.default, {
+    }), showBlockToolbar && (0, _react.createElement)(_blockToolbarPopover.default, {
+      __unstableContentRef: __unstableContentRef,
+      clientId: clientId,
+      isTyping: isTyping
+    }), showBreadcrumb && (0, _react.createElement)(_blockToolbarBreadcrumb.default, {
       __unstableContentRef: __unstableContentRef,
       clientId: clientId
-    }), !isTopToolbar && (0, _react.createElement)(_components.Popover.Slot, {
+    }), !isZoomOutMode && !hasFixedToolbar && (0, _react.createElement)(_components.Popover.Slot, {
       name: "block-toolbar",
       ref: blockToolbarRef
     }), children, (0, _react.createElement)(_components.Popover.Slot, {