@wordpress/block-editor 7.0.2 → 8.0.1

package/build/components/inserter/search-results.native.js

@@ -21,6 +21,8 @@ var _store = require("../../store");
 
 var _useBlockTypeImpressions = _interopRequireDefault(require("./hooks/use-block-type-impressions"));
 
+var _utils = require("./utils");
+
 /**
  * WordPress dependencies
  */
@@ -28,9 +30,6 @@ var _useBlockTypeImpressions = _interopRequireDefault(require("./hooks/use-block
 /**
  * Internal dependencies
  */
-const NON_BLOCK_CATEGORIES = ['reusable'];
-const ALLOWED_EMBED_VARIATIONS = ['core/embed'];
-
 function InserterSearchResults({
   filterValue,
   onSelect,
@@ -42,14 +41,10 @@ function InserterSearchResults({
     blockTypes
   } = (0, _data.useSelect)(select => {
     const allItems = select(_store.store).getInserterItems(rootClientId);
-    const blockItems = allItems.filter(({
-      id,
-      category
-    }) => !NON_BLOCK_CATEGORIES.includes(category) && ( // We don't want to show all possible embed variations
-    // as different blocks in the inserter. We'll only show a
-    // few popular ones.
-    category !== 'embed' || category === 'embed' && ALLOWED_EMBED_VARIATIONS.includes(id)));
-    const filteredItems = (0, _searchItems.searchItems)(blockItems, filterValue);
+    const availableItems = (0, _utils.filterInserterItems)(allItems, {
+      allowReusable: true
+    });
+    const filteredItems = (0, _searchItems.searchItems)(availableItems, filterValue);
     return {
       blockTypes: filteredItems
     };

package/build/components/inserter/search-results.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/search-results.native.js"],"names":["NON_BLOCK_CATEGORIES","ALLOWED_EMBED_VARIATIONS","InserterSearchResults","filterValue","onSelect","listProps","rootClientId","isFullScreen","blockTypes","select","allItems","blockEditorStore","getInserterItems","blockItems","filter","id","category","includes","filteredItems","items","trackBlockTypeSelected","length","handleSelect","args"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AAOA,MAAMA,oBAAoB,GAAG,CAAE,UAAF,CAA7B;AACA,MAAMC,wBAAwB,GAAG,CAAE,YAAF,CAAjC;;AAEA,SAASC,qBAAT,CAAgC;AAC/BC,EAAAA,WAD+B;AAE/BC,EAAAA,QAF+B;AAG/BC,EAAAA,SAH+B;AAI/BC,EAAAA,YAJ+B;AAK/BC,EAAAA;AAL+B,CAAhC,EAMI;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBACpBC,MAAF,IAAc;AACb,UAAMC,QAAQ,GAAGD,MAAM,CAAEE,YAAF,CAAN,CAA2BC,gBAA3B,CAChBN,YADgB,CAAjB;AAIA,UAAMO,UAAU,GAAGH,QAAQ,CAACI,MAAT,CAClB,CAAE;AAAEC,MAAAA,EAAF;AAAMC,MAAAA;AAAN,KAAF,KACC,CAAEhB,oBAAoB,CAACiB,QAArB,CAA+BD,QAA/B,CAAF,MACA;AACA;AACA;AACEA,IAAAA,QAAQ,KAAK,OAAb,IACCA,QAAQ,KAAK,OAAb,IACDf,wBAAwB,CAACgB,QAAzB,CAAmCF,EAAnC,CANF,CAFiB,CAAnB;AAWA,UAAMG,aAAa,GAAG,8BAAaL,UAAb,EAAyBV,WAAzB,CAAtB;AAEA,WAAO;AAAEK,MAAAA,UAAU,EAAEU;AAAd,KAAP;AACA,GApBqB,EAqBtB,CAAEZ,YAAF,EAAgBH,WAAhB,CArBsB,CAAvB;AAwBA,QAAM;AAAEgB,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoC,sCACzCZ,UADyC,CAA1C;;AAIA,MAAK,CAAEW,KAAF,IAAW,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,MAAP,MAAkB,CAAlC,EAAsC;AACrC,WAAO,4BAAC,kBAAD,OAAP;AACA;;AAED,QAAMC,YAAY,GAAG,CAAE,GAAGC,IAAL,KAAe;AACnCH,IAAAA,sBAAsB,CAAE,GAAGG,IAAL,CAAtB;AACAnB,IAAAA,QAAQ,CAAE,GAAGmB,IAAL,CAAR;AACA,GAHD;;AAKA,SACC,4BAAC,uBAAD;AACC,IAAA,IAAI,EAAC,QADN;AAEC,IAAA,kBAAkB,EAAGhB,YAAY,GAAG,EAAH,GAAQ,CAF1C;AAGQY,IAAAA,KAHR;AAGef,IAAAA,QAAQ,EAAEkB,YAHzB;AAGuCjB,IAAAA;AAHvC,IADD;AAOA;;eAEcH,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { searchItems } from './search-items';\nimport BlockTypesList from '../block-types-list';\nimport InserterNoResults from './no-results';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockTypeImpressions from './hooks/use-block-type-impressions';\n\nconst NON_BLOCK_CATEGORIES = [ 'reusable' ];\nconst ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];\n\nfunction InserterSearchResults( {\n\tfilterValue,\n\tonSelect,\n\tlistProps,\n\trootClientId,\n\tisFullScreen,\n} ) {\n\tconst { blockTypes } = useSelect(\n\t\t( select ) => {\n\t\t\tconst allItems = select( blockEditorStore ).getInserterItems(\n\t\t\t\trootClientId\n\t\t\t);\n\n\t\t\tconst blockItems = allItems.filter(\n\t\t\t\t( { id, category } ) =>\n\t\t\t\t\t! NON_BLOCK_CATEGORIES.includes( category ) &&\n\t\t\t\t\t// We don't want to show all possible embed variations\n\t\t\t\t\t// as different blocks in the inserter. We'll only show a\n\t\t\t\t\t// few popular ones.\n\t\t\t\t\t( category !== 'embed' ||\n\t\t\t\t\t\t( category === 'embed' &&\n\t\t\t\t\t\t\tALLOWED_EMBED_VARIATIONS.includes( id ) ) )\n\t\t\t);\n\n\t\t\tconst filteredItems = searchItems( blockItems, filterValue );\n\n\t\t\treturn { blockTypes: filteredItems };\n\t\t},\n\t\t[ rootClientId, filterValue ]\n\t);\n\n\tconst { items, trackBlockTypeSelected } = useBlockTypeImpressions(\n\t\tblockTypes\n\t);\n\n\tif ( ! items || items?.length === 0 ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\tconst handleSelect = ( ...args ) => {\n\t\ttrackBlockTypeSelected( ...args );\n\t\tonSelect( ...args );\n\t};\n\n\treturn (\n\t\t<BlockTypesList\n\t\t\tname=\"Blocks\"\n\t\t\tinitialNumToRender={ isFullScreen ? 10 : 3 }\n\t\t\t{ ...{ items, onSelect: handleSelect, listProps } }\n\t\t/>\n\t);\n}\n\nexport default InserterSearchResults;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/search-results.native.js"],"names":["InserterSearchResults","filterValue","onSelect","listProps","rootClientId","isFullScreen","blockTypes","select","allItems","blockEditorStore","getInserterItems","availableItems","allowReusable","filteredItems","items","trackBlockTypeSelected","length","handleSelect","args"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;AAQA,SAASA,qBAAT,CAAgC;AAC/BC,EAAAA,WAD+B;AAE/BC,EAAAA,QAF+B;AAG/BC,EAAAA,SAH+B;AAI/BC,EAAAA,YAJ+B;AAK/BC,EAAAA;AAL+B,CAAhC,EAMI;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBACpBC,MAAF,IAAc;AACb,UAAMC,QAAQ,GAAGD,MAAM,CAAEE,YAAF,CAAN,CAA2BC,gBAA3B,CAChBN,YADgB,CAAjB;AAIA,UAAMO,cAAc,GAAG,gCAAqBH,QAArB,EAA+B;AACrDI,MAAAA,aAAa,EAAE;AADsC,KAA/B,CAAvB;AAGA,UAAMC,aAAa,GAAG,8BAAaF,cAAb,EAA6BV,WAA7B,CAAtB;AAEA,WAAO;AAAEK,MAAAA,UAAU,EAAEO;AAAd,KAAP;AACA,GAZqB,EAatB,CAAET,YAAF,EAAgBH,WAAhB,CAbsB,CAAvB;AAgBA,QAAM;AAAEa,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoC,sCACzCT,UADyC,CAA1C;;AAIA,MAAK,CAAEQ,KAAF,IAAW,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,MAAP,MAAkB,CAAlC,EAAsC;AACrC,WAAO,4BAAC,kBAAD,OAAP;AACA;;AAED,QAAMC,YAAY,GAAG,CAAE,GAAGC,IAAL,KAAe;AACnCH,IAAAA,sBAAsB,CAAE,GAAGG,IAAL,CAAtB;AACAhB,IAAAA,QAAQ,CAAE,GAAGgB,IAAL,CAAR;AACA,GAHD;;AAKA,SACC,4BAAC,uBAAD;AACC,IAAA,IAAI,EAAC,QADN;AAEC,IAAA,kBAAkB,EAAGb,YAAY,GAAG,EAAH,GAAQ,CAF1C;AAGQS,IAAAA,KAHR;AAGeZ,IAAAA,QAAQ,EAAEe,YAHzB;AAGuCd,IAAAA;AAHvC,IADD;AAOA;;eAEcH,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { searchItems } from './search-items';\nimport BlockTypesList from '../block-types-list';\nimport InserterNoResults from './no-results';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockTypeImpressions from './hooks/use-block-type-impressions';\nimport { filterInserterItems } from './utils';\n\nfunction InserterSearchResults( {\n\tfilterValue,\n\tonSelect,\n\tlistProps,\n\trootClientId,\n\tisFullScreen,\n} ) {\n\tconst { blockTypes } = useSelect(\n\t\t( select ) => {\n\t\t\tconst allItems = select( blockEditorStore ).getInserterItems(\n\t\t\t\trootClientId\n\t\t\t);\n\n\t\t\tconst availableItems = filterInserterItems( allItems, {\n\t\t\t\tallowReusable: true,\n\t\t\t} );\n\t\t\tconst filteredItems = searchItems( availableItems, filterValue );\n\n\t\t\treturn { blockTypes: filteredItems };\n\t\t},\n\t\t[ rootClientId, filterValue ]\n\t);\n\n\tconst { items, trackBlockTypeSelected } = useBlockTypeImpressions(\n\t\tblockTypes\n\t);\n\n\tif ( ! items || items?.length === 0 ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\tconst handleSelect = ( ...args ) => {\n\t\ttrackBlockTypeSelected( ...args );\n\t\tonSelect( ...args );\n\t};\n\n\treturn (\n\t\t<BlockTypesList\n\t\t\tname=\"Blocks\"\n\t\t\tinitialNumToRender={ isFullScreen ? 10 : 3 }\n\t\t\t{ ...{ items, onSelect: handleSelect, listProps } }\n\t\t/>\n\t);\n}\n\nexport default InserterSearchResults;\n"]}

package/build/components/inserter/utils.native.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockAllowed = blockAllowed;
+exports.filterInserterItems = filterInserterItems;
+const REUSABLE_BLOCKS_CATEGORY = 'reusable';
+const ALLOWED_EMBED_VARIATIONS = ['core/embed', 'core/embed/youtube', 'core/embed/twitter', 'core/embed/wordpress', 'core/embed/instagram', 'core/embed/vimeo'];
+
+function blockAllowed(block, {
+  onlyReusable,
+  allowReusable
+}) {
+  const {
+    id,
+    category
+  } = block;
+  const isReusable = category === REUSABLE_BLOCKS_CATEGORY;
+
+  if (onlyReusable) {
+    return isReusable;
+  }
+
+  if (isReusable) {
+    return allowReusable;
+  } // We don't want to show all possible embed variations
+  // as different blocks in the inserter. We'll only show a
+  // few popular ones.
+
+
+  return category !== 'embed' || ALLOWED_EMBED_VARIATIONS.includes(id);
+}
+
+function filterInserterItems(items, {
+  onlyReusable = false,
+  allowReusable = false
+} = {}) {
+  return items.filter(block => blockAllowed(block, {
+    onlyReusable,
+    allowReusable
+  }));
+}
+//# sourceMappingURL=utils.native.js.map

package/build/components/inserter/utils.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/utils.native.js"],"names":["REUSABLE_BLOCKS_CATEGORY","ALLOWED_EMBED_VARIATIONS","blockAllowed","block","onlyReusable","allowReusable","id","category","isReusable","includes","filterInserterItems","items","filter"],"mappings":";;;;;;;AAAA,MAAMA,wBAAwB,GAAG,UAAjC;AACA,MAAMC,wBAAwB,GAAG,CAChC,YADgC,EAEhC,oBAFgC,EAGhC,oBAHgC,EAIhC,sBAJgC,EAKhC,sBALgC,EAMhC,kBANgC,CAAjC;;AASO,SAASC,YAAT,CAAuBC,KAAvB,EAA8B;AAAEC,EAAAA,YAAF;AAAgBC,EAAAA;AAAhB,CAA9B,EAAgE;AACtE,QAAM;AAAEC,IAAAA,EAAF;AAAMC,IAAAA;AAAN,MAAmBJ,KAAzB;AACA,QAAMK,UAAU,GAAGD,QAAQ,KAAKP,wBAAhC;;AAEA,MAAKI,YAAL,EAAoB;AACnB,WAAOI,UAAP;AACA;;AAED,MAAKA,UAAL,EAAkB;AACjB,WAAOH,aAAP;AACA,GAVqE,CAWtE;AACA;AACA;;;AACA,SAAOE,QAAQ,KAAK,OAAb,IAAwBN,wBAAwB,CAACQ,QAAzB,CAAmCH,EAAnC,CAA/B;AACA;;AAEM,SAASI,mBAAT,CACNC,KADM,EAEN;AAAEP,EAAAA,YAAY,GAAG,KAAjB;AAAwBC,EAAAA,aAAa,GAAG;AAAxC,IAAkD,EAF5C,EAGL;AACD,SAAOM,KAAK,CAACC,MAAN,CAAgBT,KAAF,IACpBD,YAAY,CAAEC,KAAF,EAAS;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAAT,CADN,CAAP;AAGA","sourcesContent":["const REUSABLE_BLOCKS_CATEGORY = 'reusable';\nconst ALLOWED_EMBED_VARIATIONS = [\n\t'core/embed',\n\t'core/embed/youtube',\n\t'core/embed/twitter',\n\t'core/embed/wordpress',\n\t'core/embed/instagram',\n\t'core/embed/vimeo',\n];\n\nexport function blockAllowed( block, { onlyReusable, allowReusable } ) {\n\tconst { id, category } = block;\n\tconst isReusable = category === REUSABLE_BLOCKS_CATEGORY;\n\n\tif ( onlyReusable ) {\n\t\treturn isReusable;\n\t}\n\n\tif ( isReusable ) {\n\t\treturn allowReusable;\n\t}\n\t// We don't want to show all possible embed variations\n\t// as different blocks in the inserter. We'll only show a\n\t// few popular ones.\n\treturn category !== 'embed' || ALLOWED_EMBED_VARIATIONS.includes( id );\n}\n\nexport function filterInserterItems(\n\titems,\n\t{ onlyReusable = false, allowReusable = false } = {}\n) {\n\treturn items.filter( ( block ) =>\n\t\tblockAllowed( block, { onlyReusable, allowReusable } )\n\t);\n}\n"]}

package/build/components/inspector-controls/block-support-slot-container.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockSupportSlotContainer;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _components = require("@wordpress/components");
+
+/**
+ * WordPress dependencies
+ */
+function BlockSupportSlotContainer({
+  Slot,
+  ...props
+}) {
+  const toolsPanelContext = (0, _element.useContext)(_components.__experimentalToolsPanelContext);
+  return (0, _element.createElement)(Slot, (0, _extends2.default)({}, props, {
+    fillProps: toolsPanelContext
+  }));
+}
+//# sourceMappingURL=block-support-slot-container.js.map

package/build/components/inspector-controls/block-support-slot-container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/block-support-slot-container.js"],"names":["BlockSupportSlotContainer","Slot","props","toolsPanelContext","ToolsPanelContext"],"mappings":";;;;;;;;;AAIA;;;;AADA;;AAHA;AACA;AACA;AAIe,SAASA,yBAAT,CAAoC;AAAEC,EAAAA,IAAF;AAAQ,KAAGC;AAAX,CAApC,EAAyD;AACvE,QAAMC,iBAAiB,GAAG,yBAAYC,2CAAZ,CAA1B;AACA,SAAO,4BAAC,IAAD,6BAAWF,KAAX;AAAmB,IAAA,SAAS,EAAGC;AAA/B,KAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalToolsPanelContext as ToolsPanelContext } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\nexport default function BlockSupportSlotContainer( { Slot, ...props } ) {\n\tconst toolsPanelContext = useContext( ToolsPanelContext );\n\treturn <Slot { ...props } fillProps={ toolsPanelContext } />;\n}\n"]}

package/build/components/inspector-controls/block-support-tools-panel.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockSupportToolsPanel;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _data = require("@wordpress/data");
+
+var _store = require("../../store");
+
+var _utils = require("../../hooks/utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function BlockSupportToolsPanel({
+  children,
+  group,
+  label
+}) {
+  const {
+    clientId,
+    attributes
+  } = (0, _data.useSelect)(select => {
+    const {
+      getBlockAttributes,
+      getSelectedBlockClientId
+    } = select(_store.store);
+    const selectedBlockClientId = getSelectedBlockClientId();
+    return {
+      clientId: selectedBlockClientId,
+      attributes: getBlockAttributes(selectedBlockClientId)
+    };
+  }, []);
+  const {
+    updateBlockAttributes
+  } = (0, _data.useDispatch)(_store.store);
+
+  const resetAll = (resetFilters = []) => {
+    const {
+      style
+    } = attributes;
+    let newAttributes = {
+      style
+    };
+    resetFilters.forEach(resetFilter => {
+      newAttributes = { ...newAttributes,
+        ...resetFilter(newAttributes)
+      };
+    }); // Enforce a cleaned style object.
+
+    newAttributes = { ...newAttributes,
+      style: (0, _utils.cleanEmptyObject)(newAttributes.style)
+    };
+    updateBlockAttributes(clientId, newAttributes);
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    className: `${group}-block-support-panel`,
+    label: label,
+    resetAll: resetAll,
+    key: clientId,
+    panelId: clientId,
+    hasInnerWrapper: true,
+    shouldRenderPlaceholderItems: true // Required to maintain fills ordering.
+
+  }, children);
+}
+//# sourceMappingURL=block-support-tools-panel.js.map

package/build/components/inspector-controls/block-support-tools-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/block-support-tools-panel.js"],"names":["BlockSupportToolsPanel","children","group","label","clientId","attributes","select","getBlockAttributes","getSelectedBlockClientId","blockEditorStore","selectedBlockClientId","updateBlockAttributes","resetAll","resetFilters","style","newAttributes","forEach","resetFilter"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIe,SAASA,sBAAT,CAAiC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,KAAZ;AAAmBC,EAAAA;AAAnB,CAAjC,EAA8D;AAC5E,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAA2B,qBAAaC,MAAF,IAAc;AACzD,UAAM;AAAEC,MAAAA,kBAAF;AAAsBC,MAAAA;AAAtB,QAAmDF,MAAM,CAC9DG,YAD8D,CAA/D;AAGA,UAAMC,qBAAqB,GAAGF,wBAAwB,EAAtD;AAEA,WAAO;AACNJ,MAAAA,QAAQ,EAAEM,qBADJ;AAENL,MAAAA,UAAU,EAAEE,kBAAkB,CAAEG,qBAAF;AAFxB,KAAP;AAIA,GAVgC,EAU9B,EAV8B,CAAjC;AAWA,QAAM;AAAEC,IAAAA;AAAF,MAA4B,uBAAaF,YAAb,CAAlC;;AAEA,QAAMG,QAAQ,GAAG,CAAEC,YAAY,GAAG,EAAjB,KAAyB;AACzC,UAAM;AAAEC,MAAAA;AAAF,QAAYT,UAAlB;AACA,QAAIU,aAAa,GAAG;AAAED,MAAAA;AAAF,KAApB;AAEAD,IAAAA,YAAY,CAACG,OAAb,CAAwBC,WAAF,IAAmB;AACxCF,MAAAA,aAAa,GAAG,EACf,GAAGA,aADY;AAEf,WAAGE,WAAW,CAAEF,aAAF;AAFC,OAAhB;AAIA,KALD,EAJyC,CAWzC;;AACAA,IAAAA,aAAa,GAAG,EACf,GAAGA,aADY;AAEfD,MAAAA,KAAK,EAAE,6BAAkBC,aAAa,CAACD,KAAhC;AAFQ,KAAhB;AAKAH,IAAAA,qBAAqB,CAAEP,QAAF,EAAYW,aAAZ,CAArB;AACA,GAlBD;;AAoBA,SACC,4BAAC,oCAAD;AACC,IAAA,SAAS,EAAI,GAAGb,KAAO,sBADxB;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,QAAQ,EAAGS,QAHZ;AAIC,IAAA,GAAG,EAAGR,QAJP;AAKC,IAAA,OAAO,EAAGA,QALX;AAMC,IAAA,eAAe,EAAG,IANnB;AAOC,IAAA,4BAA4B,EAAG,IAPhC,CAOuC;;AAPvC,KASGH,QATH,CADD;AAaA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { cleanEmptyObject } from '../../hooks/utils';\n\nexport default function BlockSupportToolsPanel( { children, group, label } ) {\n\tconst { clientId, attributes } = useSelect( ( select ) => {\n\t\tconst { getBlockAttributes, getSelectedBlockClientId } = select(\n\t\t\tblockEditorStore\n\t\t);\n\t\tconst selectedBlockClientId = getSelectedBlockClientId();\n\n\t\treturn {\n\t\t\tclientId: selectedBlockClientId,\n\t\t\tattributes: getBlockAttributes( selectedBlockClientId ),\n\t\t};\n\t}, [] );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst resetAll = ( resetFilters = [] ) => {\n\t\tconst { style } = attributes;\n\t\tlet newAttributes = { style };\n\n\t\tresetFilters.forEach( ( resetFilter ) => {\n\t\t\tnewAttributes = {\n\t\t\t\t...newAttributes,\n\t\t\t\t...resetFilter( newAttributes ),\n\t\t\t};\n\t\t} );\n\n\t\t// Enforce a cleaned style object.\n\t\tnewAttributes = {\n\t\t\t...newAttributes,\n\t\t\tstyle: cleanEmptyObject( newAttributes.style ),\n\t\t};\n\n\t\tupdateBlockAttributes( clientId, newAttributes );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tclassName={ `${ group }-block-support-panel` }\n\t\t\tlabel={ label }\n\t\t\tresetAll={ resetAll }\n\t\t\tkey={ clientId }\n\t\t\tpanelId={ clientId }\n\t\t\thasInnerWrapper={ true }\n\t\t\tshouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n"]}

package/build/components/inspector-controls/fill.js

@@ -9,6 +9,8 @@ exports.default = InspectorControlsFill;
 
 var _element = require("@wordpress/element");
 
+var _lodash = require("lodash");
+
 var _components = require("@wordpress/components");
 
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
@@ -17,6 +19,10 @@ var _useDisplayBlockControls = _interopRequireDefault(require("../use-display-bl
 
 var _groups = _interopRequireDefault(require("./groups"));
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -44,6 +50,15 @@ function InspectorControlsFill({
 
   return (0, _element.createElement)(_components.__experimentalStyleProvider, {
     document: document
-  }, (0, _element.createElement)(Fill, null, children));
+  }, (0, _element.createElement)(Fill, null, fillProps => {
+    // Children passed to InspectorControlsFill will not have
+    // access to any React Context whose Provider is part of
+    // the InspectorControlsSlot tree. So we re-create the
+    // Provider in this subtree.
+    const value = !(0, _lodash.isEmpty)(fillProps) ? fillProps : null;
+    return (0, _element.createElement)(_components.__experimentalToolsPanelContext.Provider, {
+      value: value
+    }, children);
+  }));
 }
 //# sourceMappingURL=fill.js.map

package/build/components/inspector-controls/fill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/fill.js"],"names":["InspectorControlsFill","__experimentalGroup","group","children","isDisplayed","Fill","groups","document"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIe,SAASA,qBAAT,CAAgC;AAC9CC,EAAAA,mBAAmB,EAAEC,KAAK,GAAG,SADiB;AAE9CC,EAAAA;AAF8C,CAAhC,EAGX;AAAA;;AACH,QAAMC,WAAW,GAAG,uCAApB;AACA,QAAMC,IAAI,oBAAGC,gBAAQJ,KAAR,CAAH,kDAAG,cAAiBG,IAA9B;;AACA,MAAK,CAAEA,IAAP,EAAc;AACb,mHAAU,mCAAmCH,KAAO,aAApD;AACA,WAAO,IAAP;AACA;;AACD,MAAK,CAAEE,WAAP,EAAqB;AACpB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,uCAAD;AAAe,IAAA,QAAQ,EAAGG;AAA1B,KACC,4BAAC,IAAD,QAAQJ,QAAR,CADD,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport useDisplayBlockControls from '../use-display-block-controls';\nimport groups from './groups';\n\nexport default function InspectorControlsFill( {\n\t__experimentalGroup: group = 'default',\n\tchildren,\n} ) {\n\tconst isDisplayed = useDisplayBlockControls();\n\tconst Fill = groups[ group ]?.Fill;\n\tif ( ! Fill ) {\n\t\twarning( `Unknown InspectorControl group \"${ group }\" provided.` );\n\t\treturn null;\n\t}\n\tif ( ! isDisplayed ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyleProvider document={ document }>\n\t\t\t<Fill>{ children }</Fill>\n\t\t</StyleProvider>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/fill.js"],"names":["InspectorControlsFill","__experimentalGroup","group","children","isDisplayed","Fill","groups","document","fillProps","value"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAIA;;AAKA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AAIe,SAASA,qBAAT,CAAgC;AAC9CC,EAAAA,mBAAmB,EAAEC,KAAK,GAAG,SADiB;AAE9CC,EAAAA;AAF8C,CAAhC,EAGX;AAAA;;AACH,QAAMC,WAAW,GAAG,uCAApB;AACA,QAAMC,IAAI,oBAAGC,gBAAQJ,KAAR,CAAH,kDAAG,cAAiBG,IAA9B;;AACA,MAAK,CAAEA,IAAP,EAAc;AACb,mHAAU,mCAAmCH,KAAO,aAApD;AACA,WAAO,IAAP;AACA;;AACD,MAAK,CAAEE,WAAP,EAAqB;AACpB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,uCAAD;AAAe,IAAA,QAAQ,EAAGG;AAA1B,KACC,4BAAC,IAAD,QACKC,SAAF,IAAiB;AAClB;AACA;AACA;AACA;AACA,UAAMC,KAAK,GAAG,CAAE,qBAASD,SAAT,CAAF,GAAyBA,SAAzB,GAAqC,IAAnD;AACA,WACC,4BAAC,2CAAD,CAAmB,QAAnB;AAA4B,MAAA,KAAK,EAAGC;AAApC,OACGN,QADH,CADD;AAKA,GAZF,CADD,CADD;AAkBA","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalStyleProvider as StyleProvider,\n\t__experimentalToolsPanelContext as ToolsPanelContext,\n} from '@wordpress/components';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport useDisplayBlockControls from '../use-display-block-controls';\nimport groups from './groups';\n\nexport default function InspectorControlsFill( {\n\t__experimentalGroup: group = 'default',\n\tchildren,\n} ) {\n\tconst isDisplayed = useDisplayBlockControls();\n\tconst Fill = groups[ group ]?.Fill;\n\tif ( ! Fill ) {\n\t\twarning( `Unknown InspectorControl group \"${ group }\" provided.` );\n\t\treturn null;\n\t}\n\tif ( ! isDisplayed ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyleProvider document={ document }>\n\t\t\t<Fill>\n\t\t\t\t{ ( fillProps ) => {\n\t\t\t\t\t// Children passed to InspectorControlsFill will not have\n\t\t\t\t\t// access to any React Context whose Provider is part of\n\t\t\t\t\t// the InspectorControlsSlot tree. So we re-create the\n\t\t\t\t\t// Provider in this subtree.\n\t\t\t\t\tconst value = ! isEmpty( fillProps ) ? fillProps : null;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ToolsPanelContext.Provider value={ value }>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</ToolsPanelContext.Provider>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</Fill>\n\t\t</StyleProvider>\n\t);\n}\n"]}

package/build/components/inspector-controls/groups.js

@@ -12,9 +12,13 @@ var _components = require("@wordpress/components");
  */
 const InspectorControlsDefault = (0, _components.createSlotFill)('InspectorControls');
 const InspectorControlsAdvanced = (0, _components.createSlotFill)('InspectorAdvancedControls');
+const InspectorControlsDimensions = (0, _components.createSlotFill)('InspectorControlsDimensions');
+const InspectorControlsTypography = (0, _components.createSlotFill)('InspectorControlsTypography');
 const groups = {
   default: InspectorControlsDefault,
-  advanced: InspectorControlsAdvanced
+  advanced: InspectorControlsAdvanced,
+  dimensions: InspectorControlsDimensions,
+  typography: InspectorControlsTypography
 };
 var _default = groups;
 exports.default = _default;

package/build/components/inspector-controls/groups.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/groups.js"],"names":["InspectorControlsDefault","InspectorControlsAdvanced","groups","default","advanced"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,wBAAwB,GAAG,gCAAgB,mBAAhB,CAAjC;AACA,MAAMC,yBAAyB,GAAG,gCAAgB,2BAAhB,CAAlC;AAEA,MAAMC,MAAM,GAAG;AACdC,EAAAA,OAAO,EAAEH,wBADK;AAEdI,EAAAA,QAAQ,EAAEH;AAFI,CAAf;eAKeC,M","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst InspectorControlsDefault = createSlotFill( 'InspectorControls' );\nconst InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );\n\nconst groups = {\n\tdefault: InspectorControlsDefault,\n\tadvanced: InspectorControlsAdvanced,\n};\n\nexport default groups;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/groups.js"],"names":["InspectorControlsDefault","InspectorControlsAdvanced","InspectorControlsDimensions","InspectorControlsTypography","groups","default","advanced","dimensions","typography"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,wBAAwB,GAAG,gCAAgB,mBAAhB,CAAjC;AACA,MAAMC,yBAAyB,GAAG,gCAAgB,2BAAhB,CAAlC;AACA,MAAMC,2BAA2B,GAAG,gCACnC,6BADmC,CAApC;AAGA,MAAMC,2BAA2B,GAAG,gCACnC,6BADmC,CAApC;AAIA,MAAMC,MAAM,GAAG;AACdC,EAAAA,OAAO,EAAEL,wBADK;AAEdM,EAAAA,QAAQ,EAAEL,yBAFI;AAGdM,EAAAA,UAAU,EAAEL,2BAHE;AAIdM,EAAAA,UAAU,EAAEL;AAJE,CAAf;eAOeC,M","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst InspectorControlsDefault = createSlotFill( 'InspectorControls' );\nconst InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );\nconst InspectorControlsDimensions = createSlotFill(\n\t'InspectorControlsDimensions'\n);\nconst InspectorControlsTypography = createSlotFill(\n\t'InspectorControlsTypography'\n);\n\nconst groups = {\n\tdefault: InspectorControlsDefault,\n\tadvanced: InspectorControlsAdvanced,\n\tdimensions: InspectorControlsDimensions,\n\ttypography: InspectorControlsTypography,\n};\n\nexport default groups;\n"]}

package/build/components/inspector-controls/slot.js

@@ -15,6 +15,10 @@ var _components = require("@wordpress/components");
 
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
 
+var _blockSupportToolsPanel = _interopRequireDefault(require("./block-support-tools-panel"));
+
+var _blockSupportSlotContainer = _interopRequireDefault(require("./block-support-slot-container"));
+
 var _groups = _interopRequireDefault(require("./groups"));
 
 /**
@@ -27,6 +31,7 @@ var _groups = _interopRequireDefault(require("./groups"));
 function InspectorControlsSlot({
   __experimentalGroup: group = 'default',
   bubblesVirtually = true,
+  label,
   ...props
 }) {
   var _groups$group;
@@ -45,6 +50,16 @@ function InspectorControlsSlot({
     return null;
   }
 
+  if (label) {
+    return (0, _element.createElement)(_blockSupportToolsPanel.default, {
+      group: group,
+      label: label
+    }, (0, _element.createElement)(_blockSupportSlotContainer.default, (0, _extends2.default)({}, props, {
+      bubblesVirtually: bubblesVirtually,
+      Slot: Slot
+    })));
+  }
+
   return (0, _element.createElement)(Slot, (0, _extends2.default)({}, props, {
     bubblesVirtually: bubblesVirtually
   }));

package/build/components/inspector-controls/slot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/slot.js"],"names":["InspectorControlsSlot","__experimentalGroup","group","bubblesVirtually","props","Slot","groups","slot","__unstableName","hasFills","Boolean","fills","length"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,qBAAT,CAAgC;AAC9CC,EAAAA,mBAAmB,EAAEC,KAAK,GAAG,SADiB;AAE9CC,EAAAA,gBAAgB,GAAG,IAF2B;AAG9C,KAAGC;AAH2C,CAAhC,EAIX;AAAA;;AACH,QAAMC,IAAI,oBAAGC,gBAAQJ,KAAR,CAAH,kDAAG,cAAiBG,IAA9B;AACA,QAAME,IAAI,GAAG,uCAASF,IAAT,aAASA,IAAT,uBAASA,IAAI,CAAEG,cAAf,CAAb;;AACA,MAAK,CAAEH,IAAF,IAAU,CAAEE,IAAjB,EAAwB;AACvB,mHAAU,mCAAmCL,KAAO,aAApD;AACA,WAAO,IAAP;AACA;;AAED,QAAMO,QAAQ,GAAGC,OAAO,CAAEH,IAAI,CAACI,KAAL,IAAcJ,IAAI,CAACI,KAAL,CAAWC,MAA3B,CAAxB;;AACA,MAAK,CAAEH,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,SAAO,4BAAC,IAAD,6BAAWL,KAAX;AAAmB,IAAA,gBAAgB,EAAGD;AAAtC,KAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUseSlot as useSlot } from '@wordpress/components';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport groups from './groups';\n\nexport default function InspectorControlsSlot( {\n\t__experimentalGroup: group = 'default',\n\tbubblesVirtually = true,\n\t...props\n} ) {\n\tconst Slot = groups[ group ]?.Slot;\n\tconst slot = useSlot( Slot?.__unstableName );\n\tif ( ! Slot || ! slot ) {\n\t\twarning( `Unknown InspectorControl group \"${ group }\" provided.` );\n\t\treturn null;\n\t}\n\n\tconst hasFills = Boolean( slot.fills && slot.fills.length );\n\tif ( ! hasFills ) {\n\t\treturn null;\n\t}\n\n\treturn <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/slot.js"],"names":["InspectorControlsSlot","__experimentalGroup","group","bubblesVirtually","label","props","Slot","groups","slot","__unstableName","hasFills","Boolean","fills","length"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AAXA;AACA;AACA;;AAIA;AACA;AACA;AAKe,SAASA,qBAAT,CAAgC;AAC9CC,EAAAA,mBAAmB,EAAEC,KAAK,GAAG,SADiB;AAE9CC,EAAAA,gBAAgB,GAAG,IAF2B;AAG9CC,EAAAA,KAH8C;AAI9C,KAAGC;AAJ2C,CAAhC,EAKX;AAAA;;AACH,QAAMC,IAAI,oBAAGC,gBAAQL,KAAR,CAAH,kDAAG,cAAiBI,IAA9B;AACA,QAAME,IAAI,GAAG,uCAASF,IAAT,aAASA,IAAT,uBAASA,IAAI,CAAEG,cAAf,CAAb;;AACA,MAAK,CAAEH,IAAF,IAAU,CAAEE,IAAjB,EAAwB;AACvB,mHAAU,mCAAmCN,KAAO,aAApD;AACA,WAAO,IAAP;AACA;;AAED,QAAMQ,QAAQ,GAAGC,OAAO,CAAEH,IAAI,CAACI,KAAL,IAAcJ,IAAI,CAACI,KAAL,CAAWC,MAA3B,CAAxB;;AACA,MAAK,CAAEH,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,MAAKN,KAAL,EAAa;AACZ,WACC,4BAAC,+BAAD;AAAwB,MAAA,KAAK,EAAGF,KAAhC;AAAwC,MAAA,KAAK,EAAGE;AAAhD,OACC,4BAAC,kCAAD,6BACMC,KADN;AAEC,MAAA,gBAAgB,EAAGF,gBAFpB;AAGC,MAAA,IAAI,EAAGG;AAHR,OADD,CADD;AASA;;AAED,SAAO,4BAAC,IAAD,6BAAWD,KAAX;AAAmB,IAAA,gBAAgB,EAAGF;AAAtC,KAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUseSlot as useSlot } from '@wordpress/components';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport BlockSupportToolsPanel from './block-support-tools-panel';\nimport BlockSupportSlotContainer from './block-support-slot-container';\nimport groups from './groups';\n\nexport default function InspectorControlsSlot( {\n\t__experimentalGroup: group = 'default',\n\tbubblesVirtually = true,\n\tlabel,\n\t...props\n} ) {\n\tconst Slot = groups[ group ]?.Slot;\n\tconst slot = useSlot( Slot?.__unstableName );\n\tif ( ! Slot || ! slot ) {\n\t\twarning( `Unknown InspectorControl group \"${ group }\" provided.` );\n\t\treturn null;\n\t}\n\n\tconst hasFills = Boolean( slot.fills && slot.fills.length );\n\tif ( ! hasFills ) {\n\t\treturn null;\n\t}\n\n\tif ( label ) {\n\t\treturn (\n\t\t\t<BlockSupportToolsPanel group={ group } label={ label }>\n\t\t\t\t<BlockSupportSlotContainer\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tbubblesVirtually={ bubblesVirtually }\n\t\t\t\t\tSlot={ Slot }\n\t\t\t\t/>\n\t\t\t</BlockSupportToolsPanel>\n\t\t);\n\t}\n\n\treturn <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;\n}\n"]}

package/build/components/letter-spacing-control/index.js

@@ -26,14 +26,17 @@ var _useSetting = _interopRequireDefault(require("../../components/use-setting")
 /**
  * Control for letter-spacing.
  *
- * @param {Object}   props          Component props.
- * @param {string}   props.value    Currently selected letter-spacing.
- * @param {Function} props.onChange Handles change in letter-spacing selection.
- * @return {WPElement}                      Letter-spacing control.
+ * @param {Object}   props                      Component props.
+ * @param {string}   props.value                Currently selected letter-spacing.
+ * @param {Function} props.onChange             Handles change in letter-spacing selection.
+ * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.
+ *
+ * @return {WPElement}                          Letter-spacing control.
  */
 function LetterSpacingControl({
   value,
-  onChange
+  onChange,
+  __unstableInputWidth = '60px'
 }) {
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: (0, _useSetting.default)('spacing.units') || ['px', 'em', 'rem'],
@@ -46,7 +49,7 @@ function LetterSpacingControl({
   return (0, _element.createElement)(_components.__experimentalUnitControl, {
     label: (0, _i18n.__)('Letter-spacing'),
     value: value,
-    __unstableInputWidth: "60px",
+    __unstableInputWidth: __unstableInputWidth,
     units: units,
     onChange: onChange
   });

package/build/components/letter-spacing-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/letter-spacing-control/index.js"],"names":["LetterSpacingControl","value","onChange","units","availableUnits","defaultValues","px","em","rem"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AAKA;;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,oBAAT,CAA+B;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAA/B,EAAqD;AACnE,QAAMC,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd,CADpB;AAE7BC,IAAAA,aAAa,EAAE;AAAEC,MAAAA,EAAE,EAAE,GAAN;AAAWC,MAAAA,EAAE,EAAE,IAAf;AAAqBC,MAAAA,GAAG,EAAE;AAA1B;AAFc,GAAhB,CAAd;AAIA,SACC,4BAAC,qCAAD;AACC,IAAA,KAAK,EAAG,cAAI,gBAAJ,CADT;AAEC,IAAA,KAAK,EAAGP,KAFT;AAGC,IAAA,oBAAoB,EAAC,MAHtB;AAIC,IAAA,KAAK,EAAGE,KAJT;AAKC,IAAA,QAAQ,EAAGD;AALZ,IADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../../components/use-setting';\n\n/**\n * Control for letter-spacing.\n *\n * @param {Object}   props          Component props.\n * @param {string}   props.value    Currently selected letter-spacing.\n * @param {Function} props.onChange Handles change in letter-spacing selection.\n * @return {WPElement}                      Letter-spacing control.\n */\nexport default function LetterSpacingControl( { value, onChange } ) {\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t\tdefaultValues: { px: '2', em: '.2', rem: '.2' },\n\t} );\n\treturn (\n\t\t<UnitControl\n\t\t\tlabel={ __( 'Letter-spacing' ) }\n\t\t\tvalue={ value }\n\t\t\t__unstableInputWidth=\"60px\"\n\t\t\tunits={ units }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/letter-spacing-control/index.js"],"names":["LetterSpacingControl","value","onChange","__unstableInputWidth","units","availableUnits","defaultValues","px","em","rem"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AAKA;;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,oBAAT,CAA+B;AAC7CC,EAAAA,KAD6C;AAE7CC,EAAAA,QAF6C;AAG7CC,EAAAA,oBAAoB,GAAG;AAHsB,CAA/B,EAIX;AACH,QAAMC,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd,CADpB;AAE7BC,IAAAA,aAAa,EAAE;AAAEC,MAAAA,EAAE,EAAE,GAAN;AAAWC,MAAAA,EAAE,EAAE,IAAf;AAAqBC,MAAAA,GAAG,EAAE;AAA1B;AAFc,GAAhB,CAAd;AAIA,SACC,4BAAC,qCAAD;AACC,IAAA,KAAK,EAAG,cAAI,gBAAJ,CADT;AAEC,IAAA,KAAK,EAAGR,KAFT;AAGC,IAAA,oBAAoB,EAAGE,oBAHxB;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,QAAQ,EAAGF;AALZ,IADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../../components/use-setting';\n\n/**\n * Control for letter-spacing.\n *\n * @param {Object}   props                      Component props.\n * @param {string}   props.value                Currently selected letter-spacing.\n * @param {Function} props.onChange             Handles change in letter-spacing selection.\n * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.\n *\n * @return {WPElement}                          Letter-spacing control.\n */\nexport default function LetterSpacingControl( {\n\tvalue,\n\tonChange,\n\t__unstableInputWidth = '60px',\n} ) {\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t\tdefaultValues: { px: '2', em: '.2', rem: '.2' },\n\t} );\n\treturn (\n\t\t<UnitControl\n\t\t\tlabel={ __( 'Letter-spacing' ) }\n\t\t\tvalue={ value }\n\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\tunits={ units }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n"]}

package/build/components/link-control/index.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _lodash = require("lodash");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _components = require("@wordpress/components");
 
 var _icons = require("@wordpress/icons");
@@ -117,6 +119,7 @@ var _constants = require("./constants");
  * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.
  * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.
+ * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.
  */
 
 /**
@@ -142,35 +145,72 @@ function LinkControl({
   suggestionsQuery = {},
   noURLSuggestion = false,
   createSuggestionButtonText,
-  hasRichPreviews = false
+  hasRichPreviews = false,
+  hasTextControl = false,
+  renderControlBottom = null
 }) {
+  var _currentInputValue$tr, _value$url, _value$url$trim;
+
   if (withCreateSuggestion === undefined && createSuggestion) {
     withCreateSuggestion = true;
   }
 
   const isMounting = (0, _element.useRef)(true);
   const wrapperNode = (0, _element.useRef)();
-  const [internalInputValue, setInternalInputValue] = (0, _element.useState)(value && value.url || '');
+  const textInputRef = (0, _element.useRef)();
+  const [internalInputValue, setInternalInputValue] = (0, _element.useState)((value === null || value === void 0 ? void 0 : value.url) || '');
+  const [internalTextValue, setInternalTextValue] = (0, _element.useState)((value === null || value === void 0 ? void 0 : value.title) || '');
   const currentInputValue = propInputValue || internalInputValue;
   const [isEditingLink, setIsEditingLink] = (0, _element.useState)(forceIsEditingLink !== undefined ? forceIsEditingLink : !value || !value.url);
   const isEndingEditWithFocus = (0, _element.useRef)(false);
+  const currentInputIsEmpty = !(currentInputValue !== null && currentInputValue !== void 0 && (_currentInputValue$tr = currentInputValue.trim()) !== null && _currentInputValue$tr !== void 0 && _currentInputValue$tr.length);
   (0, _element.useEffect)(() => {
     if (forceIsEditingLink !== undefined && forceIsEditingLink !== isEditingLink) {
       setIsEditingLink(forceIsEditingLink);
     }
   }, [forceIsEditingLink]);
   (0, _element.useEffect)(() => {
+    // We don't auto focus into the Link UI on mount
+    // because otherwise using the keyboard to select text
+    // *within* the link format is not possible.
     if (isMounting.current) {
       isMounting.current = false;
       return;
-    } // When switching between editable and non editable LinkControl
-    // move focus to the first element to avoid focus loss.
+    } // Unless we are mounting, we always want to focus either:
+    // - the URL input
+    // - the first focusable element in the Link UI.
+    // But in editing mode if there is a text input present then
+    // the URL input is at index 1. If not then it is at index 0.
+
 
+    const whichFocusTargetIndex = textInputRef !== null && textInputRef !== void 0 && textInputRef.current ? 1 : 0; // Scenario - when:
+    // - switching between editable and non editable LinkControl
+    // - clicking on a link
+    // ...then move focus to the *first* element to avoid focus loss
+    // and to ensure focus is *within* the Link UI.
 
-    const nextFocusTarget = _dom.focus.focusable.find(wrapperNode.current)[0] || wrapperNode.current;
+    const nextFocusTarget = _dom.focus.focusable.find(wrapperNode.current)[whichFocusTargetIndex] || wrapperNode.current;
     nextFocusTarget.focus();
     isEndingEditWithFocus.current = false;
   }, [isEditingLink]);
+  (0, _element.useEffect)(() => {
+    /**
+     * If the value's `text` property changes then sync this
+     * back up with state.
+     */
+    if (value !== null && value !== void 0 && value.title && value.title !== internalTextValue) {
+      setInternalTextValue(value.title);
+    }
+    /**
+     * Update the state value internalInputValue if the url value changes
+     * for example when clicking on another anchor
+     */
+
+
+    if (value !== null && value !== void 0 && value.url) {
+      setInternalInputValue(value.url);
+    }
+  }, [value]);
   /**
    * Cancels editing state and marks that focus may need to be restored after
    * the next render, if focus was within the wrapper when editing finished.
@@ -190,22 +230,41 @@ function LinkControl({
   } = (0, _useCreatePage.default)(createSuggestion);
 
   const handleSelectSuggestion = updatedValue => {
-    onChange(updatedValue);
+    onChange({ ...updatedValue,
+      title: internalTextValue || (updatedValue === null || updatedValue === void 0 ? void 0 : updatedValue.title)
+    });
     stopEditing();
   };
 
-  const handleSubmitButton = () => {
-    if (currentInputValue !== (value === null || value === void 0 ? void 0 : value.url)) {
+  const handleSubmit = () => {
+    if (currentInputValue !== (value === null || value === void 0 ? void 0 : value.url) || internalTextValue !== (value === null || value === void 0 ? void 0 : value.title)) {
       onChange({
-        url: currentInputValue
+        url: currentInputValue,
+        title: internalTextValue
       });
     }
 
     stopEditing();
   };
 
+  const handleSubmitWithEnter = event => {
+    const {
+      keyCode
+    } = event;
+
+    if (keyCode === _keycodes.ENTER && !currentInputIsEmpty // disallow submitting empty values.
+    ) {
+        event.preventDefault();
+        handleSubmit();
+      }
+  };
+
   const shownUnlinkControl = onRemove && value && !isEditingLink && !isCreatingPage;
-  const showSettingsDrawer = !!(settings !== null && settings !== void 0 && settings.length);
+  const showSettingsDrawer = !!(settings !== null && settings !== void 0 && settings.length); // Only show text control once a URL value has been committed
+  // and it isn't just empty whitespace.
+  // See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
+
+  const showTextControl = (value === null || value === void 0 ? void 0 : (_value$url = value.url) === null || _value$url === void 0 ? void 0 : (_value$url$trim = _value$url.trim()) === null || _value$url$trim === void 0 ? void 0 : _value$url$trim.length) > 0 && hasTextControl;
   return (0, _element.createElement)("div", {
     tabIndex: -1,
     ref: wrapperNode,
@@ -213,10 +272,20 @@ function LinkControl({
   }, isCreatingPage && (0, _element.createElement)("div", {
     className: "block-editor-link-control__loading"
   }, (0, _element.createElement)(_components.Spinner, null), " ", (0, _i18n.__)('Creating'), "\u2026"), (isEditingLink || !value) && !isCreatingPage && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
-    className: "block-editor-link-control__search-input-wrapper"
-  }, (0, _element.createElement)(_searchInput.default, {
+    className: (0, _classnames.default)({
+      'block-editor-link-control__search-input-wrapper': true,
+      'has-text-control': showTextControl
+    })
+  }, showTextControl && (0, _element.createElement)(_components.TextControl, {
+    ref: textInputRef,
+    className: "block-editor-link-control__field block-editor-link-control__text-content",
+    label: "Text",
+    value: internalTextValue,
+    onChange: setInternalTextValue,
+    onKeyDown: handleSubmitWithEnter
+  }), (0, _element.createElement)(_searchInput.default, {
     currentLink: value,
-    className: "block-editor-link-control__search-input",
+    className: "block-editor-link-control__field block-editor-link-control__search-input",
     placeholder: searchInputPlaceholder,
     value: currentInputValue,
     withCreateSuggestion: withCreateSuggestion,
@@ -228,24 +297,17 @@ function LinkControl({
     showSuggestions: showSuggestions,
     suggestionsQuery: suggestionsQuery,
     withURLSuggestion: !noURLSuggestion,
-    createSuggestionButtonText: createSuggestionButtonText
+    createSuggestionButtonText: createSuggestionButtonText,
+    useLabel: showTextControl
   }, (0, _element.createElement)("div", {
     className: "block-editor-link-control__search-actions"
   }, (0, _element.createElement)(_components.Button, {
-    onClick: () => handleSubmitButton(),
-    onKeyDown: event => {
-      const {
-        keyCode
-      } = event;
-
-      if (keyCode === _keycodes.ENTER) {
-        event.preventDefault();
-        handleSubmitButton();
-      }
-    },
+    onClick: handleSubmit,
     label: (0, _i18n.__)('Submit'),
     icon: _icons.keyboardReturn,
-    className: "block-editor-link-control__search-submit"
+    className: "block-editor-link-control__search-submit",
+    disabled: currentInputIsEmpty // disallow submitting empty values.
+
   })))), errorMessage && (0, _element.createElement)(_components.Notice, {
     className: "block-editor-link-control__search-error",
     status: "error",
@@ -255,19 +317,16 @@ function LinkControl({
     ,
     value: value,
     onEditClick: () => setIsEditingLink(true),
-    hasRichPreviews: hasRichPreviews
-  }), (showSettingsDrawer || shownUnlinkControl) && (0, _element.createElement)("div", {
+    hasRichPreviews: hasRichPreviews,
+    hasUnlinkControl: shownUnlinkControl,
+    onRemove: onRemove
+  }), showSettingsDrawer && (0, _element.createElement)("div", {
     className: "block-editor-link-control__tools"
   }, (0, _element.createElement)(_settingsDrawer.default, {
     value: value,
     settings: settings,
     onChange: onChange
-  }), shownUnlinkControl && (0, _element.createElement)(_components.Button, {
-    className: "block-editor-link-control__unlink",
-    isDestructive: true,
-    variant: "link",
-    onClick: onRemove
-  }, (0, _i18n.__)('Unlink'))));
+  })), renderControlBottom && renderControlBottom());
 }
 
 LinkControl.ViewerFill = _viewerSlot.ViewerFill;