@wordpress/block-editor 12.2.0 → 12.3.1

package/build/components/block-heading-level-dropdown/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HeadingLevelDropdown;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _headingLevelIcon = _interopRequireDefault(require("./heading-level-icon"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+const POPOVER_PROPS = {
+  className: 'block-library-heading-level-dropdown'
+};
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelDropdown props.
+ *
+ * @typedef WPHeadingLevelDropdownProps
+ *
+ * @property {number}                 value    The chosen heading level.
+ * @property {number[]}               options  An array of supported heading levels.
+ * @property {(newValue:number)=>any} onChange Callback to run when
+ *                                             toolbar value is changed.
+ */
+
+/**
+ * Dropdown for selecting a heading level (1 through 6) or paragraph (0).
+ *
+ * @param {WPHeadingLevelDropdownProps} props Component props.
+ *
+ * @return {WPComponent} The toolbar.
+ */
+
+function HeadingLevelDropdown({
+  options = HEADING_LEVELS,
+  value,
+  onChange
+}) {
+  return (0, _element.createElement)(_components.ToolbarDropdownMenu, {
+    popoverProps: POPOVER_PROPS,
+    icon: (0, _element.createElement)(_headingLevelIcon.default, {
+      level: value
+    }),
+    label: (0, _i18n.__)('Change level'),
+    controls: options.map(targetLevel => {
+      {
+        const isActive = targetLevel === value;
+        return {
+          icon: (0, _element.createElement)(_headingLevelIcon.default, {
+            level: targetLevel,
+            isPressed: isActive
+          }),
+          label: targetLevel === 0 ? (0, _i18n.__)('Paragraph') : (0, _i18n.sprintf)( // translators: %s: heading level e.g: "1", "2", "3"
+          (0, _i18n.__)('Heading %d'), targetLevel),
+          isActive,
+
+          onClick() {
+            onChange(targetLevel);
+          },
+
+          role: 'menuitemradio'
+        };
+      }
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

package/build/components/block-heading-level-dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-heading-level-dropdown/index.js"],"names":["HEADING_LEVELS","POPOVER_PROPS","className","HeadingLevelDropdown","options","value","onChange","map","targetLevel","isActive","icon","label","onClick","role"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG,CAAE,CAAF,EAAK,CAAL,EAAQ,CAAR,EAAW,CAAX,EAAc,CAAd,EAAiB,CAAjB,CAAvB;AAEA,MAAMC,aAAa,GAAG;AACrBC,EAAAA,SAAS,EAAE;AADU,CAAtB;AAIA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,oBAAT,CAA+B;AAC7CC,EAAAA,OAAO,GAAGJ,cADmC;AAE7CK,EAAAA,KAF6C;AAG7CC,EAAAA;AAH6C,CAA/B,EAIX;AACH,SACC,4BAAC,+BAAD;AACC,IAAA,YAAY,EAAGL,aADhB;AAEC,IAAA,IAAI,EAAG,4BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAGI;AAA1B,MAFR;AAGC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAHT;AAIC,IAAA,QAAQ,EAAGD,OAAO,CAACG,GAAR,CAAeC,WAAF,IAAmB;AAC1C;AACC,cAAMC,QAAQ,GAAGD,WAAW,KAAKH,KAAjC;AAEA,eAAO;AACNK,UAAAA,IAAI,EACH,4BAAC,yBAAD;AACC,YAAA,KAAK,EAAGF,WADT;AAEC,YAAA,SAAS,EAAGC;AAFb,YAFK;AAONE,UAAAA,KAAK,EACJH,WAAW,KAAK,CAAhB,GACG,cAAI,WAAJ,CADH,GAEG,oBACA;AACA,wBAAI,YAAJ,CAFA,EAGAA,WAHA,CAVE;AAeNC,UAAAA,QAfM;;AAgBNG,UAAAA,OAAO,GAAG;AACTN,YAAAA,QAAQ,CAAEE,WAAF,CAAR;AACA,WAlBK;;AAmBNK,UAAAA,IAAI,EAAE;AAnBA,SAAP;AAqBA;AACD,KA1BU;AAJZ,IADD;AAkCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarDropdownMenu } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport HeadingLevelIcon from './heading-level-icon';\n\nconst HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];\n\nconst POPOVER_PROPS = {\n\tclassName: 'block-library-heading-level-dropdown',\n};\n\n/** @typedef {import('@wordpress/element').WPComponent} WPComponent */\n\n/**\n * HeadingLevelDropdown props.\n *\n * @typedef WPHeadingLevelDropdownProps\n *\n * @property {number}                 value    The chosen heading level.\n * @property {number[]}               options  An array of supported heading levels.\n * @property {(newValue:number)=>any} onChange Callback to run when\n *                                             toolbar value is changed.\n */\n\n/**\n * Dropdown for selecting a heading level (1 through 6) or paragraph (0).\n *\n * @param {WPHeadingLevelDropdownProps} props Component props.\n *\n * @return {WPComponent} The toolbar.\n */\nexport default function HeadingLevelDropdown( {\n\toptions = HEADING_LEVELS,\n\tvalue,\n\tonChange,\n} ) {\n\treturn (\n\t\t<ToolbarDropdownMenu\n\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t\ticon={ <HeadingLevelIcon level={ value } /> }\n\t\t\tlabel={ __( 'Change level' ) }\n\t\t\tcontrols={ options.map( ( targetLevel ) => {\n\t\t\t\t{\n\t\t\t\t\tconst isActive = targetLevel === value;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\ticon: (\n\t\t\t\t\t\t\t<HeadingLevelIcon\n\t\t\t\t\t\t\t\tlevel={ targetLevel }\n\t\t\t\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tlabel:\n\t\t\t\t\t\t\ttargetLevel === 0\n\t\t\t\t\t\t\t\t? __( 'Paragraph' )\n\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: heading level e.g: \"1\", \"2\", \"3\"\n\t\t\t\t\t\t\t\t\t\t__( 'Heading %d' ),\n\t\t\t\t\t\t\t\t\t\ttargetLevel\n\t\t\t\t\t\t\t\t  ),\n\t\t\t\t\t\tisActive,\n\t\t\t\t\t\tonClick() {\n\t\t\t\t\t\t\tonChange( targetLevel );\n\t\t\t\t\t\t},\n\t\t\t\t\t\trole: 'menuitemradio',\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} ) }\n\t\t/>\n\t);\n}\n"]}

package/build/components/block-heading-level-dropdown/index.native.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HeadingLevelDropdown;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _headingLevelIcon = _interopRequireDefault(require("./heading-level-icon"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
+/**
+ * HeadingLevelDropdown props.
+ *
+ * @typedef WPHeadingLevelDropdownProps
+ *
+ * @property {number}                 selectedLevel The chosen heading level.
+ * @property {(newValue:number)=>any} onChange      Callback to run when
+ *                                                  toolbar value is changed.
+ */
+
+/**
+ * Dropdown for selecting a heading level (1 through 6).
+ *
+ * @param {WPHeadingLevelDropdownProps} props Component props.
+ *
+ * @return {WPComponent} The toolbar.
+ */
+
+function HeadingLevelDropdown({
+  selectedLevel,
+  onChange
+}) {
+  const createLevelControl = (targetLevel, currentLevel, onChangeCallback) => {
+    const isActive = targetLevel === currentLevel;
+    return {
+      icon: (0, _element.createElement)(_headingLevelIcon.default, {
+        level: targetLevel,
+        isPressed: isActive
+      }),
+      // translators: %s: heading level e.g: "1", "2", "3"
+      title: (0, _i18n.sprintf)((0, _i18n.__)('Heading %d'), targetLevel),
+      isActive,
+      onClick: () => onChangeCallback(targetLevel)
+    };
+  };
+
+  return (0, _element.createElement)(_components.DropdownMenu, {
+    icon: (0, _element.createElement)(_headingLevelIcon.default, {
+      level: selectedLevel
+    }),
+    controls: HEADING_LEVELS.map(index => createLevelControl(index, selectedLevel, onChange)),
+    label: (0, _i18n.__)('Change level')
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/build/components/block-heading-level-dropdown/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-heading-level-dropdown/index.native.js"],"names":["HEADING_LEVELS","HeadingLevelDropdown","selectedLevel","onChange","createLevelControl","targetLevel","currentLevel","onChangeCallback","isActive","icon","title","onClick","map","index"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG,CAAE,CAAF,EAAK,CAAL,EAAQ,CAAR,EAAW,CAAX,EAAc,CAAd,EAAiB,CAAjB,CAAvB;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,oBAAT,CAA+B;AAAEC,EAAAA,aAAF;AAAiBC,EAAAA;AAAjB,CAA/B,EAA6D;AAC3E,QAAMC,kBAAkB,GAAG,CAC1BC,WAD0B,EAE1BC,YAF0B,EAG1BC,gBAH0B,KAItB;AACJ,UAAMC,QAAQ,GAAGH,WAAW,KAAKC,YAAjC;AACA,WAAO;AACNG,MAAAA,IAAI,EACH,4BAAC,yBAAD;AACC,QAAA,KAAK,EAAGJ,WADT;AAEC,QAAA,SAAS,EAAGG;AAFb,QAFK;AAON;AACAE,MAAAA,KAAK,EAAE,mBAAS,cAAI,YAAJ,CAAT,EAA6BL,WAA7B,CARD;AASNG,MAAAA,QATM;AAUNG,MAAAA,OAAO,EAAE,MAAMJ,gBAAgB,CAAEF,WAAF;AAVzB,KAAP;AAYA,GAlBD;;AAoBA,SACC,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAG,4BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAGH;AAA1B,MADR;AAEC,IAAA,QAAQ,EAAGF,cAAc,CAACY,GAAf,CAAsBC,KAAF,IAC9BT,kBAAkB,CAAES,KAAF,EAASX,aAAT,EAAwBC,QAAxB,CADR,CAFZ;AAKC,IAAA,KAAK,EAAG,cAAI,cAAJ;AALT,IADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { DropdownMenu } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport HeadingLevelIcon from './heading-level-icon';\n\nconst HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];\n\n/** @typedef {import('@wordpress/element').WPComponent} WPComponent */\n\n/**\n * HeadingLevelDropdown props.\n *\n * @typedef WPHeadingLevelDropdownProps\n *\n * @property {number}                 selectedLevel The chosen heading level.\n * @property {(newValue:number)=>any} onChange      Callback to run when\n *                                                  toolbar value is changed.\n */\n\n/**\n * Dropdown for selecting a heading level (1 through 6).\n *\n * @param {WPHeadingLevelDropdownProps} props Component props.\n *\n * @return {WPComponent} The toolbar.\n */\nexport default function HeadingLevelDropdown( { selectedLevel, onChange } ) {\n\tconst createLevelControl = (\n\t\ttargetLevel,\n\t\tcurrentLevel,\n\t\tonChangeCallback\n\t) => {\n\t\tconst isActive = targetLevel === currentLevel;\n\t\treturn {\n\t\t\ticon: (\n\t\t\t\t<HeadingLevelIcon\n\t\t\t\t\tlevel={ targetLevel }\n\t\t\t\t\tisPressed={ isActive }\n\t\t\t\t/>\n\t\t\t),\n\t\t\t// translators: %s: heading level e.g: \"1\", \"2\", \"3\"\n\t\t\ttitle: sprintf( __( 'Heading %d' ), targetLevel ),\n\t\t\tisActive,\n\t\t\tonClick: () => onChangeCallback( targetLevel ),\n\t\t};\n\t};\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\ticon={ <HeadingLevelIcon level={ selectedLevel } /> }\n\t\t\tcontrols={ HEADING_LEVELS.map( ( index ) =>\n\t\t\t\tcreateLevelControl( index, selectedLevel, onChange )\n\t\t\t) }\n\t\t\tlabel={ __( 'Change level' ) }\n\t\t/>\n\t);\n}\n"]}

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

@@ -22,17 +22,13 @@ var _icons = require("@wordpress/icons");
 /**
  * WordPress dependencies
  */
-function BlockIcon(_ref) {
-  var _icon;
-
-  let {
-    icon,
-    showColors = false,
-    className,
-    context
-  } = _ref;
-
-  if (((_icon = icon) === null || _icon === void 0 ? void 0 : _icon.src) === 'block-default') {
+function BlockIcon({
+  icon,
+  showColors = false,
+  className,
+  context
+}) {
+  if (icon?.src === 'block-default') {
     icon = {
       src: _icons.blockDefault
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-icon/index.js"],"names":["BlockIcon","icon","showColors","className","context","src","blockDefault","renderedIcon","style","backgroundColor","background","color","foreground"],"mappings":";;;;;;;;;AAUA;;AAPA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,SAAT,OAAuE;AAAA;;AAAA,MAAnD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAU,GAAG,KAArB;AAA4BC,IAAAA,SAA5B;AAAuCC,IAAAA;AAAvC,GAAmD;;AACtE,MAAK,UAAAH,IAAI,UAAJ,sCAAMI,GAAN,MAAc,eAAnB,EAAqC;AACpCJ,IAAAA,IAAI,GAAG;AACNI,MAAAA,GAAG,EAAEC;AADC,KAAP;AAGA;;AAED,QAAMC,YAAY,GACjB,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAGN,IAAI,IAAIA,IAAI,CAACI,GAAb,GAAmBJ,IAAI,CAACI,GAAxB,GAA8BJ,IAA3C;AAAkD,IAAA,OAAO,EAAGG;AAA5D,IADD;AAGA,QAAMI,KAAK,GAAGN,UAAU,GACrB;AACAO,IAAAA,eAAe,EAAER,IAAI,IAAIA,IAAI,CAACS,UAD9B;AAEAC,IAAAA,KAAK,EAAEV,IAAI,IAAIA,IAAI,CAACW;AAFpB,GADqB,GAKrB,EALH;AAOA,SACC;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,SAAS,EAAG,yBAAY,yBAAZ,EAAuCL,SAAvC,EAAkD;AAC7D,oBAAcD;AAD+C,KAAlD;AAFb,KAMGK,YANH,CADD;AAUA;AAED;AACA;AACA;;;eACe,mBAAMP,SAAN,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\nimport { blockDefault } from '@wordpress/icons';\nimport { memo } from '@wordpress/element';\n\nfunction BlockIcon( { icon, showColors = false, className, context } ) {\n\tif ( icon?.src === 'block-default' ) {\n\t\ticon = {\n\t\t\tsrc: blockDefault,\n\t\t};\n\t}\n\n\tconst renderedIcon = (\n\t\t<Icon icon={ icon && icon.src ? icon.src : icon } context={ context } />\n\t);\n\tconst style = showColors\n\t\t? {\n\t\t\t\tbackgroundColor: icon && icon.background,\n\t\t\t\tcolor: icon && icon.foreground,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t<span\n\t\t\tstyle={ style }\n\t\t\tclassName={ classnames( 'block-editor-block-icon', className, {\n\t\t\t\t'has-colors': showColors,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ renderedIcon }\n\t\t</span>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md\n */\nexport default memo( BlockIcon );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-icon/index.js"],"names":["BlockIcon","icon","showColors","className","context","src","blockDefault","renderedIcon","style","backgroundColor","background","color","foreground"],"mappings":";;;;;;;;;AAUA;;AAPA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,SAAT,CAAoB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,UAAU,GAAG,KAArB;AAA4BC,EAAAA,SAA5B;AAAuCC,EAAAA;AAAvC,CAApB,EAAuE;AACtE,MAAKH,IAAI,EAAEI,GAAN,KAAc,eAAnB,EAAqC;AACpCJ,IAAAA,IAAI,GAAG;AACNI,MAAAA,GAAG,EAAEC;AADC,KAAP;AAGA;;AAED,QAAMC,YAAY,GACjB,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAGN,IAAI,IAAIA,IAAI,CAACI,GAAb,GAAmBJ,IAAI,CAACI,GAAxB,GAA8BJ,IAA3C;AAAkD,IAAA,OAAO,EAAGG;AAA5D,IADD;AAGA,QAAMI,KAAK,GAAGN,UAAU,GACrB;AACAO,IAAAA,eAAe,EAAER,IAAI,IAAIA,IAAI,CAACS,UAD9B;AAEAC,IAAAA,KAAK,EAAEV,IAAI,IAAIA,IAAI,CAACW;AAFpB,GADqB,GAKrB,EALH;AAOA,SACC;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,SAAS,EAAG,yBAAY,yBAAZ,EAAuCL,SAAvC,EAAkD;AAC7D,oBAAcD;AAD+C,KAAlD;AAFb,KAMGK,YANH,CADD;AAUA;AAED;AACA;AACA;;;eACe,mBAAMP,SAAN,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\nimport { blockDefault } from '@wordpress/icons';\nimport { memo } from '@wordpress/element';\n\nfunction BlockIcon( { icon, showColors = false, className, context } ) {\n\tif ( icon?.src === 'block-default' ) {\n\t\ticon = {\n\t\t\tsrc: blockDefault,\n\t\t};\n\t}\n\n\tconst renderedIcon = (\n\t\t<Icon icon={ icon && icon.src ? icon.src : icon } context={ context } />\n\t);\n\tconst style = showColors\n\t\t? {\n\t\t\t\tbackgroundColor: icon && icon.background,\n\t\t\t\tcolor: icon && icon.foreground,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t<span\n\t\t\tstyle={ style }\n\t\t\tclassName={ classnames( 'block-editor-block-icon', className, {\n\t\t\t\t'has-colors': showColors,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ renderedIcon }\n\t\t</span>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md\n */\nexport default memo( BlockIcon );\n"]}

package/build/components/block-icon/index.native.js

@@ -10,8 +10,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _reactNative = require("react-native");
 
 var _components = require("@wordpress/components");
@@ -33,30 +31,27 @@ var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * Internal dependencies
  */
-function BlockIcon(_ref) {
-  var _icon, _usePreferredColorSch, _icon2;
-
-  let {
-    icon,
-    fill,
-    size,
-    showColors = false
-  } = _ref;
-
-  if (((_icon = icon) === null || _icon === void 0 ? void 0 : _icon.src) === 'block-default') {
+function BlockIcon({
+  icon,
+  fill,
+  size,
+  showColors = false
+}) {
+  if (icon?.src === 'block-default') {
     icon = {
       src: _icons.blockDefault
     };
   }
 
-  const defaultFill = (_usePreferredColorSch = (0, _compose.usePreferredColorSchemeStyle)(_style.default.iconPlaceholder, _style.default.iconPlaceholderDark)) === null || _usePreferredColorSch === void 0 ? void 0 : _usePreferredColorSch.fill;
-  const iconForeground = showColors ? (_icon2 = icon) === null || _icon2 === void 0 ? void 0 : _icon2.foreground : undefined;
-  const renderedIcon = (0, _element.createElement)(_components.Icon, (0, _extends2.default)({
+  const defaultFill = (0, _compose.usePreferredColorSchemeStyle)(_style.default.iconPlaceholder, _style.default.iconPlaceholderDark)?.fill;
+  const iconForeground = showColors ? icon?.foreground : undefined;
+  const renderedIcon = (0, _element.createElement)(_components.Icon, {
     icon: icon && icon.src ? icon.src : icon,
-    fill: fill || iconForeground || defaultFill
-  }, size && {
-    size
-  }));
+    fill: fill || iconForeground || defaultFill,
+    ...(size && {
+      size
+    })
+  });
   const style = showColors ? {
     backgroundColor: icon && icon.background
   } : {};

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-icon/index.native.js"],"names":["BlockIcon","icon","fill","size","showColors","src","blockDefault","defaultFill","styles","iconPlaceholder","iconPlaceholderDark","iconForeground","foreground","undefined","renderedIcon","style","backgroundColor","background"],"mappings":";;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGO,SAASA,SAAT,OAA+D;AAAA;;AAAA,MAA3C;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,IAAR;AAAcC,IAAAA,IAAd;AAAoBC,IAAAA,UAAU,GAAG;AAAjC,GAA2C;;AACrE,MAAK,UAAAH,IAAI,UAAJ,sCAAMI,GAAN,MAAc,eAAnB,EAAqC;AACpCJ,IAAAA,IAAI,GAAG;AACNI,MAAAA,GAAG,EAAEC;AADC,KAAP;AAGA;;AAED,QAAMC,WAAW,4BAAG,2CACnBC,eAAOC,eADY,EAEnBD,eAAOE,mBAFY,CAAH,0DAAG,sBAGjBR,IAHH;AAIA,QAAMS,cAAc,GAAGP,UAAU,aAAGH,IAAH,2CAAG,OAAMW,UAAT,GAAsBC,SAAvD;AAEA,QAAMC,YAAY,GACjB,4BAAC,gBAAD;AACC,IAAA,IAAI,EAAGb,IAAI,IAAIA,IAAI,CAACI,GAAb,GAAmBJ,IAAI,CAACI,GAAxB,GAA8BJ,IADtC;AAEC,IAAA,IAAI,EAAGC,IAAI,IAAIS,cAAR,IAA0BJ;AAFlC,KAGQJ,IAAI,IAAI;AAAEA,IAAAA;AAAF,GAHhB,EADD;AAOA,QAAMY,KAAK,GAAGX,UAAU,GACrB;AACAY,IAAAA,eAAe,EAAEf,IAAI,IAAIA,IAAI,CAACgB;AAD9B,GADqB,GAIrB,EAJH;AAMA,SAAO,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGF;AAAd,KAAwBD,YAAxB,CAAP;AACA;;eAEcd,S","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\nimport { blockDefault } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport function BlockIcon( { icon, fill, size, showColors = false } ) {\n\tif ( icon?.src === 'block-default' ) {\n\t\ticon = {\n\t\t\tsrc: blockDefault,\n\t\t};\n\t}\n\n\tconst defaultFill = usePreferredColorSchemeStyle(\n\t\tstyles.iconPlaceholder,\n\t\tstyles.iconPlaceholderDark\n\t)?.fill;\n\tconst iconForeground = showColors ? icon?.foreground : undefined;\n\n\tconst renderedIcon = (\n\t\t<Icon\n\t\t\ticon={ icon && icon.src ? icon.src : icon }\n\t\t\tfill={ fill || iconForeground || defaultFill }\n\t\t\t{ ...( size && { size } ) }\n\t\t/>\n\t);\n\tconst style = showColors\n\t\t? {\n\t\t\t\tbackgroundColor: icon && icon.background,\n\t\t  }\n\t\t: {};\n\n\treturn <View style={ style }>{ renderedIcon }</View>;\n}\n\nexport default BlockIcon;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-icon/index.native.js"],"names":["BlockIcon","icon","fill","size","showColors","src","blockDefault","defaultFill","styles","iconPlaceholder","iconPlaceholderDark","iconForeground","foreground","undefined","renderedIcon","style","backgroundColor","background"],"mappings":";;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGO,SAASA,SAAT,CAAoB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,IAAd;AAAoBC,EAAAA,UAAU,GAAG;AAAjC,CAApB,EAA+D;AACrE,MAAKH,IAAI,EAAEI,GAAN,KAAc,eAAnB,EAAqC;AACpCJ,IAAAA,IAAI,GAAG;AACNI,MAAAA,GAAG,EAAEC;AADC,KAAP;AAGA;;AAED,QAAMC,WAAW,GAAG,2CACnBC,eAAOC,eADY,EAEnBD,eAAOE,mBAFY,GAGjBR,IAHH;AAIA,QAAMS,cAAc,GAAGP,UAAU,GAAGH,IAAI,EAAEW,UAAT,GAAsBC,SAAvD;AAEA,QAAMC,YAAY,GACjB,4BAAC,gBAAD;AACC,IAAA,IAAI,EAAGb,IAAI,IAAIA,IAAI,CAACI,GAAb,GAAmBJ,IAAI,CAACI,GAAxB,GAA8BJ,IADtC;AAEC,IAAA,IAAI,EAAGC,IAAI,IAAIS,cAAR,IAA0BJ,WAFlC;AAAA,QAGQJ,IAAI,IAAI;AAAEA,MAAAA;AAAF,KAHhB;AAAA,IADD;AAOA,QAAMY,KAAK,GAAGX,UAAU,GACrB;AACAY,IAAAA,eAAe,EAAEf,IAAI,IAAIA,IAAI,CAACgB;AAD9B,GADqB,GAIrB,EAJH;AAMA,SAAO,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGF;AAAd,KAAwBD,YAAxB,CAAP;AACA;;eAEcd,S","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\nimport { blockDefault } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport function BlockIcon( { icon, fill, size, showColors = false } ) {\n\tif ( icon?.src === 'block-default' ) {\n\t\ticon = {\n\t\t\tsrc: blockDefault,\n\t\t};\n\t}\n\n\tconst defaultFill = usePreferredColorSchemeStyle(\n\t\tstyles.iconPlaceholder,\n\t\tstyles.iconPlaceholderDark\n\t)?.fill;\n\tconst iconForeground = showColors ? icon?.foreground : undefined;\n\n\tconst renderedIcon = (\n\t\t<Icon\n\t\t\ticon={ icon && icon.src ? icon.src : icon }\n\t\t\tfill={ fill || iconForeground || defaultFill }\n\t\t\t{ ...( size && { size } ) }\n\t\t/>\n\t);\n\tconst style = showColors\n\t\t? {\n\t\t\t\tbackgroundColor: icon && icon.background,\n\t\t  }\n\t\t: {};\n\n\treturn <View style={ style }>{ renderedIcon }</View>;\n}\n\nexport default BlockIcon;\n"]}

package/build/components/block-info-slot-fill/index.js

@@ -37,10 +37,12 @@ const BlockInfo = props => {
     return null;
   }
 
-  return (0, _element.createElement)(Fill, props);
+  return (0, _element.createElement)(Fill, { ...props
+  });
 };
 
-BlockInfo.Slot = props => (0, _element.createElement)(Slot, props);
+BlockInfo.Slot = props => (0, _element.createElement)(Slot, { ...props
+});
 
 var _default = BlockInfo;
 exports.default = _default;

package/build/components/block-info-slot-fill/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-info-slot-fill/index.js"],"names":["createPrivateSlotFill","componentsPrivateApis","Fill","Slot","BlockInfo","props","isDisplayed"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA;AAAF,IAA4B,wBAAQC,uBAAR,CAAlC;AACA,MAAM;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IAAiBH,qBAAqB,CAAE,kBAAF,CAA5C;;AAEA,MAAMI,SAAS,GAAKC,KAAF,IAAa;AAC9B,QAAMC,WAAW,GAAG,uCAApB;;AACA,MAAK,CAAEA,WAAP,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAO,4BAAC,IAAD,EAAWD,KAAX,CAAP;AACA,CAND;;AAOAD,SAAS,CAACD,IAAV,GAAmBE,KAAF,IAAa,4BAAC,IAAD,EAAWA,KAAX,CAA9B;;eAEeD,S","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport useDisplayBlockControls from '../use-display-block-controls';\n\nconst { createPrivateSlotFill } = unlock( componentsPrivateApis );\nconst { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );\n\nconst BlockInfo = ( props ) => {\n\tconst isDisplayed = useDisplayBlockControls();\n\tif ( ! isDisplayed ) {\n\t\treturn null;\n\t}\n\treturn <Fill { ...props } />;\n};\nBlockInfo.Slot = ( props ) => <Slot { ...props } />;\n\nexport default BlockInfo;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-info-slot-fill/index.js"],"names":["createPrivateSlotFill","componentsPrivateApis","Fill","Slot","BlockInfo","props","isDisplayed"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA;AAAF,IAA4B,wBAAQC,uBAAR,CAAlC;AACA,MAAM;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IAAiBH,qBAAqB,CAAE,kBAAF,CAA5C;;AAEA,MAAMI,SAAS,GAAKC,KAAF,IAAa;AAC9B,QAAMC,WAAW,GAAG,uCAApB;;AACA,MAAK,CAAEA,WAAP,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAO,4BAAC,IAAD,OAAWD;AAAX,IAAP;AACA,CAND;;AAOAD,SAAS,CAACD,IAAV,GAAmBE,KAAF,IAAa,4BAAC,IAAD,OAAWA;AAAX,EAA9B;;eAEeD,S","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport useDisplayBlockControls from '../use-display-block-controls';\n\nconst { createPrivateSlotFill } = unlock( componentsPrivateApis );\nconst { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );\n\nconst BlockInfo = ( props ) => {\n\tconst isDisplayed = useDisplayBlockControls();\n\tif ( ! isDisplayed ) {\n\t\treturn null;\n\t}\n\treturn <Fill { ...props } />;\n};\nBlockInfo.Slot = ( props ) => <Slot { ...props } />;\n\nexport default BlockInfo;\n"]}

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

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _i18n = require("@wordpress/i18n");
 
 var _blocks = require("@wordpress/blocks");
@@ -31,8 +29,6 @@ var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-d
 
 var _store = require("../../store");
 
-var _blockIcon = _interopRequireDefault(require("../block-icon"));
-
 var _blockStyles = _interopRequireDefault(require("../block-styles"));
 
 var _defaultStylePicker = _interopRequireDefault(require("../default-style-picker"));
@@ -51,6 +47,10 @@ var _useBlockInspectorAnimationSettings = _interopRequireDefault(require("./useB
 
 var _blockInfoSlotFill = _interopRequireDefault(require("../block-info-slot-fill"));
 
+var _blockQuickNavigation = _interopRequireDefault(require("../block-quick-navigation"));
+
+var _lockUnlock = require("../../lock-unlock");
+
 /**
  * WordPress dependencies
  */
@@ -58,110 +58,34 @@ var _blockInfoSlotFill = _interopRequireDefault(require("../block-info-slot-fill
 /**
  * Internal dependencies
  */
-function useContentBlocks(blockTypes, block) {
-  const contentBlocksObjectAux = (0, _element.useMemo)(() => {
-    return blockTypes.reduce((result, blockType) => {
-      if (blockType.name !== 'core/list-item' && Object.entries(blockType.attributes).some(_ref => {
-        let [, {
-          __experimentalRole
-        }] = _ref;
-        return __experimentalRole === 'content';
-      })) {
-        result[blockType.name] = true;
-      }
-
-      return result;
-    }, {});
-  }, [blockTypes]);
-  const isContentBlock = (0, _element.useCallback)(blockName => {
-    return !!contentBlocksObjectAux[blockName];
-  }, [contentBlocksObjectAux]);
-  return (0, _element.useMemo)(() => {
-    return getContentBlocks([block], isContentBlock);
-  }, [block, isContentBlock]);
-}
-
-function getContentBlocks(blocks, isContentBlock) {
-  const result = [];
-
-  for (const block of blocks) {
-    if (isContentBlock(block.name)) {
-      result.push(block);
-    }
-
-    result.push(...getContentBlocks(block.innerBlocks, isContentBlock));
-  }
-
-  return result;
-}
-
-function BlockNavigationButton(_ref2) {
-  let {
-    blockTypes,
-    block,
-    selectedBlock
-  } = _ref2;
-  const {
-    selectBlock
-  } = (0, _data.useDispatch)(_store.store);
-  const blockType = blockTypes.find(_ref3 => {
-    let {
-      name
-    } = _ref3;
-    return name === block.name;
-  });
-  const isSelected = selectedBlock && selectedBlock.clientId === block.clientId;
-  return (0, _element.createElement)(_components.Button, {
-    isPressed: isSelected,
-    onClick: () => selectBlock(block.clientId)
-  }, (0, _element.createElement)(_components.__experimentalHStack, {
-    justify: "flex-start"
-  }, (0, _element.createElement)(_blockIcon.default, {
-    icon: blockType.icon
-  }), (0, _element.createElement)(_components.FlexItem, null, blockType.title)));
-}
-
-function BlockInspectorLockedBlocks(_ref4) {
-  let {
-    topLevelLockedBlock
-  } = _ref4;
-  const {
-    blockTypes,
-    block,
-    selectedBlock
-  } = (0, _data.useSelect)(select => {
-    return {
-      blockTypes: select(_blocks.store).getBlockTypes(),
-      block: select(_store.store).getBlock(topLevelLockedBlock),
-      selectedBlock: select(_store.store).getSelectedBlock()
-    };
+function BlockInspectorLockedBlocks({
+  topLevelLockedBlock
+}) {
+  const contentClientIds = (0, _data.useSelect)(select => {
+    const {
+      getClientIdsOfDescendants,
+      getBlockName,
+      getBlockEditingMode
+    } = (0, _lockUnlock.unlock)(select(_store.store));
+    return getClientIdsOfDescendants([topLevelLockedBlock]).filter(clientId => getBlockName(clientId) !== 'core/list-item' && getBlockEditingMode(clientId) === 'contentOnly');
   }, [topLevelLockedBlock]);
   const blockInformation = (0, _useBlockDisplayInformation.default)(topLevelLockedBlock);
-  const contentBlocks = useContentBlocks(blockTypes, block);
   return (0, _element.createElement)("div", {
     className: "block-editor-block-inspector"
-  }, (0, _element.createElement)(_blockCard.default, (0, _extends2.default)({}, blockInformation, {
+  }, (0, _element.createElement)(_blockCard.default, { ...blockInformation,
     className: blockInformation.isSynced && 'is-synced'
-  })), (0, _element.createElement)(_blockVariationTransforms.default, {
+  }), (0, _element.createElement)(_blockVariationTransforms.default, {
     blockClientId: topLevelLockedBlock
-  }), (0, _element.createElement)(_blockInfoSlotFill.default.Slot, null), (0, _element.createElement)(_components.__experimentalVStack, {
-    spacing: 1,
-    padding: 4,
-    className: "block-editor-block-inspector__block-buttons-container"
-  }, (0, _element.createElement)("h2", {
-    className: "block-editor-block-card__title"
-  }, (0, _i18n.__)('Content')), contentBlocks.map(contentBlock => (0, _element.createElement)(BlockNavigationButton, {
-    selectedBlock: selectedBlock,
-    key: contentBlock.clientId,
-    block: contentBlock,
-    blockTypes: blockTypes
-  }))));
+  }), (0, _element.createElement)(_blockInfoSlotFill.default.Slot, null), (0, _element.createElement)(_components.PanelBody, {
+    title: (0, _i18n.__)('Content')
+  }, (0, _element.createElement)(_blockQuickNavigation.default, {
+    clientIds: contentClientIds
+  })));
 }
 
-const BlockInspector = _ref5 => {
-  let {
-    showNoBlockSelectedMessage = true
-  } = _ref5;
+const BlockInspector = ({
+  showNoBlockSelectedMessage = true
+}) => {
   const {
     count,
     selectedBlockName,
@@ -191,8 +115,8 @@ const BlockInspector = _ref5 => {
       topLevelLockedBlock: __unstableGetContentLockingParent(_selectedBlockClientId) || (getTemplateLock(_selectedBlockClientId) === 'contentOnly' ? _selectedBlockClientId : undefined)
     };
   }, []);
-  const availableTabs = (0, _useInspectorControlsTabs.default)(blockType === null || blockType === void 0 ? void 0 : blockType.name);
-  const showTabs = (availableTabs === null || availableTabs === void 0 ? void 0 : availableTabs.length) > 1; // The block inspector animation settings will be completely
+  const availableTabs = (0, _useInspectorControlsTabs.default)(blockType?.name);
+  const showTabs = availableTabs?.length > 1; // The block inspector animation settings will be completely
   // removed in the future to create an API which allows the block
   // inspector to transition between what it
   // displays based on the relationship between the selected block
@@ -258,21 +182,19 @@ const BlockInspector = _ref5 => {
   }));
 };
 
-const BlockInspectorSingleBlockWrapper = _ref6 => {
-  let {
-    animate,
-    wrapper,
-    children
-  } = _ref6;
+const BlockInspectorSingleBlockWrapper = ({
+  animate,
+  wrapper,
+  children
+}) => {
   return animate ? wrapper(children) : children;
 };
 
-const AnimatedContainer = _ref7 => {
-  let {
-    blockInspectorAnimationSettings,
-    selectedBlockClientId,
-    children
-  } = _ref7;
+const AnimatedContainer = ({
+  blockInspectorAnimationSettings,
+  selectedBlockClientId,
+  children
+}) => {
   const animationOrigin = blockInspectorAnimationSettings && blockInspectorAnimationSettings.enterDirection === 'leftToRight' ? -50 : 50;
   return (0, _element.createElement)(_components.__unstableMotion.div, {
     animate: {
@@ -291,13 +213,12 @@ const AnimatedContainer = _ref7 => {
   }, children);
 };
 
-const BlockInspectorSingleBlock = _ref8 => {
-  let {
-    clientId,
-    blockName
-  } = _ref8;
+const BlockInspectorSingleBlock = ({
+  clientId,
+  blockName
+}) => {
   const availableTabs = (0, _useInspectorControlsTabs.default)(blockName);
-  const showTabs = (availableTabs === null || availableTabs === void 0 ? void 0 : availableTabs.length) > 1;
+  const showTabs = availableTabs?.length > 1;
   const hasBlockStyles = (0, _data.useSelect)(select => {
     const {
       getBlockStyles
@@ -308,9 +229,9 @@ const BlockInspectorSingleBlock = _ref8 => {
   const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
   return (0, _element.createElement)("div", {
     className: "block-editor-block-inspector"
-  }, (0, _element.createElement)(_blockCard.default, (0, _extends2.default)({}, blockInformation, {
+  }, (0, _element.createElement)(_blockCard.default, { ...blockInformation,
     className: blockInformation.isSynced && 'is-synced'
-  })), (0, _element.createElement)(_blockVariationTransforms.default, {
+  }), (0, _element.createElement)(_blockVariationTransforms.default, {
     blockClientId: clientId
   }), (0, _element.createElement)(_blockInfoSlotFill.default.Slot, null), showTabs && (0, _element.createElement)(_inspectorControlsTabs.default, {
     hasBlockStyles: hasBlockStyles,
@@ -324,6 +245,8 @@ const BlockInspectorSingleBlock = _ref8 => {
   }), (0, _blocks.hasBlockSupport)(blockName, 'defaultStylePicker', true) && (0, _element.createElement)(_defaultStylePicker.default, {
     blockName: blockName
   }))), (0, _element.createElement)(_inspectorControls.default.Slot, null), (0, _element.createElement)(_inspectorControls.default.Slot, {
+    group: "list"
+  }), (0, _element.createElement)(_inspectorControls.default.Slot, {
     group: "color",
     label: (0, _i18n.__)('Color'),
     className: "color-block-support-panel__inner-wrapper"