@wordpress/block-editor 12.5.0 → 12.6.0

package/build/components/link-control/search-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/link-control/search-item.js"],"names":["ICONS_MAP","post","postList","page","post_tag","tag","category","attachment","file","SearchItemIcon","isURL","suggestion","icon","globe","type","LinkControlSearchItem","itemProps","searchTerm","onClick","shouldShowType","info","url","getVisualTypeName","title","isFrontPage"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AASA;;AACA;;AAfA;AACA;AACA;AAeA,MAAMA,SAAS,GAAG;AACjBC,EAAAA,IAAI,EAAEC,eADW;AAEjBC,EAAAA,IAAI,EAAJA,WAFiB;AAGjBC,EAAAA,QAAQ,EAAEC,UAHO;AAIjBC,EAAAA,QAAQ,EAARA,eAJiB;AAKjBC,EAAAA,UAAU,EAAEC;AALK,CAAlB;;AAQA,SAASC,cAAT,CAAyB;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAzB,EAAiD;AAChD,MAAIC,IAAI,GAAG,IAAX;;AAEA,MAAKF,KAAL,EAAa;AACZE,IAAAA,IAAI,GAAGC,YAAP;AACA,GAFD,MAEO,IAAKF,UAAU,CAACG,IAAX,IAAmBd,SAAxB,EAAoC;AAC1CY,IAAAA,IAAI,GAAGZ,SAAS,CAAEW,UAAU,CAACG,IAAb,CAAhB;AACA;;AAED,MAAKF,IAAL,EAAY;AACX,WACC,4BAAC,WAAD;AACC,MAAA,SAAS,EAAC,6CADX;AAEC,MAAA,IAAI,EAAGA;AAFR,MADD;AAMA;;AAED,SAAO,IAAP;AACA;;AAEM,MAAMG,qBAAqB,GAAG,CAAE;AACtCC,EAAAA,SADsC;AAEtCL,EAAAA,UAFsC;AAGtCM,EAAAA,UAHsC;AAItCC,EAAAA,OAJsC;AAKtCR,EAAAA,KAAK,GAAG,KAL8B;AAMtCS,EAAAA,cAAc,GAAG;AANqB,CAAF,KAO9B;AACN,QAAMC,IAAI,GAAGV,KAAK,GACf,cAAI,8BAAJ,CADe,GAEf,8BAAqB,wBAAeC,UAAU,EAAEU,GAA3B,CAArB,CAFH;AAIA,SACC,4BAAC,oBAAD,OACML,SADN;AAEC,IAAA,IAAI,EAAGI,IAFR;AAGC,IAAA,YAAY,EAAC,MAHd;AAIC,IAAA,IAAI,EACH,4BAAC,cAAD;AAAgB,MAAA,UAAU,EAAGT,UAA7B;AAA0C,MAAA,KAAK,EAAGD;AAAlD,MALF;AAOC,IAAA,OAAO,EAAGQ,OAPX;AAQC,IAAA,QAAQ,EAAGC,cAAc,IAAIG,iBAAiB,CAAEX,UAAF,CAR/C;AASC,IAAA,SAAS,EAAC;AATX,KAWC,4BAAC,yBAAD,CACC;AADD;AAEC,IAAA,IAAI,EAAG,8BAAWA,UAAU,CAACY,KAAtB,CAFR;AAGC,IAAA,SAAS,EAAGN;AAHb,IAXD,CADD;AAmBA,CA/BM;;;;AAiCP,SAASK,iBAAT,CAA4BX,UAA5B,EAAyC;AACxC,MAAKA,UAAU,CAACa,WAAhB,EAA8B;AAC7B,WAAO,YAAP;AACA,GAHuC,CAKxC;;;AACA,SAAOb,UAAU,CAACG,IAAX,KAAoB,UAApB,GAAiC,KAAjC,GAAyCH,UAAU,CAACG,IAA3D;AACA;;eAEcC,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuItem, TextHighlight } from '@wordpress/components';\nimport {\n\tIcon,\n\tglobe,\n\tpage,\n\ttag,\n\tpostList,\n\tcategory,\n\tfile,\n} from '@wordpress/icons';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';\n\nconst ICONS_MAP = {\n\tpost: postList,\n\tpage,\n\tpost_tag: tag,\n\tcategory,\n\tattachment: file,\n};\n\nfunction SearchItemIcon( { isURL, suggestion } ) {\n\tlet icon = null;\n\n\tif ( isURL ) {\n\t\ticon = globe;\n\t} else if ( suggestion.type in ICONS_MAP ) {\n\t\ticon = ICONS_MAP[ suggestion.type ];\n\t}\n\n\tif ( icon ) {\n\t\treturn (\n\t\t\t<Icon\n\t\t\t\tclassName=\"block-editor-link-control__search-item-icon\"\n\t\t\t\ticon={ icon }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nexport const LinkControlSearchItem = ( {\n\titemProps,\n\tsuggestion,\n\tsearchTerm,\n\tonClick,\n\tisURL = false,\n\tshouldShowType = false,\n} ) => {\n\tconst info = isURL\n\t\t? __( 'Press ENTER to add this link' )\n\t\t: filterURLForDisplay( safeDecodeURI( suggestion?.url ) );\n\n\treturn (\n\t\t<MenuItem\n\t\t\t{ ...itemProps }\n\t\t\tinfo={ info }\n\t\t\ticonPosition=\"left\"\n\t\t\ticon={\n\t\t\t\t<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />\n\t\t\t}\n\t\t\tonClick={ onClick }\n\t\t\tshortcut={ shouldShowType && getVisualTypeName( suggestion ) }\n\t\t\tclassName=\"block-editor-link-control__search-item\"\n\t\t>\n\t\t\t<TextHighlight\n\t\t\t\t// The component expects a plain text string.\n\t\t\t\ttext={ stripHTML( suggestion.title ) }\n\t\t\t\thighlight={ searchTerm }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n\nfunction getVisualTypeName( suggestion ) {\n\tif ( suggestion.isFrontPage ) {\n\t\treturn 'front page';\n\t}\n\n\t// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.\n\treturn suggestion.type === 'post_tag' ? 'tag' : suggestion.type;\n}\n\nexport default LinkControlSearchItem;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/link-control/search-item.js"],"names":["ICONS_MAP","post","postList","page","post_tag","tag","category","attachment","file","SearchItemIcon","isURL","suggestion","icon","globe","type","LinkControlSearchItem","itemProps","searchTerm","onClick","shouldShowType","info","url","getVisualTypeName","title","isFrontPage"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AASA;;AACA;;AAfA;AACA;AACA;AAeA,MAAMA,SAAS,GAAG;AACjBC,EAAAA,IAAI,EAAEC,eADW;AAEjBC,EAAAA,IAAI,EAAJA,WAFiB;AAGjBC,EAAAA,QAAQ,EAAEC,UAHO;AAIjBC,EAAAA,QAAQ,EAARA,eAJiB;AAKjBC,EAAAA,UAAU,EAAEC;AALK,CAAlB;;AAQA,SAASC,cAAT,CAAyB;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAzB,EAAiD;AAChD,MAAIC,IAAI,GAAG,IAAX;;AAEA,MAAKF,KAAL,EAAa;AACZE,IAAAA,IAAI,GAAGC,YAAP;AACA,GAFD,MAEO,IAAKF,UAAU,CAACG,IAAX,IAAmBd,SAAxB,EAAoC;AAC1CY,IAAAA,IAAI,GAAGZ,SAAS,CAAEW,UAAU,CAACG,IAAb,CAAhB;AACA;;AAED,MAAKF,IAAL,EAAY;AACX,WACC,4BAAC,WAAD;AACC,MAAA,SAAS,EAAC,6CADX;AAEC,MAAA,IAAI,EAAGA;AAFR,MADD;AAMA;;AAED,SAAO,IAAP;AACA;;AAEM,MAAMG,qBAAqB,GAAG,CAAE;AACtCC,EAAAA,SADsC;AAEtCL,EAAAA,UAFsC;AAGtCM,EAAAA,UAHsC;AAItCC,EAAAA,OAJsC;AAKtCR,EAAAA,KAAK,GAAG,KAL8B;AAMtCS,EAAAA,cAAc,GAAG;AANqB,CAAF,KAO9B;AACN,QAAMC,IAAI,GAAGV,KAAK,GACf,cAAI,8BAAJ,CADe,GAEf,8BAAqB,wBAAeC,UAAU,EAAEU,GAA3B,CAArB,EAAuD,EAAvD,CAFH;AAIA,SACC,4BAAC,oBAAD,OACML,SADN;AAEC,IAAA,IAAI,EAAGI,IAFR;AAGC,IAAA,YAAY,EAAC,MAHd;AAIC,IAAA,IAAI,EACH,4BAAC,cAAD;AAAgB,MAAA,UAAU,EAAGT,UAA7B;AAA0C,MAAA,KAAK,EAAGD;AAAlD,MALF;AAOC,IAAA,OAAO,EAAGQ,OAPX;AAQC,IAAA,QAAQ,EAAGC,cAAc,IAAIG,iBAAiB,CAAEX,UAAF,CAR/C;AASC,IAAA,SAAS,EAAC;AATX,KAWC,4BAAC,yBAAD,CACC;AADD;AAEC,IAAA,IAAI,EAAG,8BAAWA,UAAU,CAACY,KAAtB,CAFR;AAGC,IAAA,SAAS,EAAGN;AAHb,IAXD,CADD;AAmBA,CA/BM;;;;AAiCP,SAASK,iBAAT,CAA4BX,UAA5B,EAAyC;AACxC,MAAKA,UAAU,CAACa,WAAhB,EAA8B;AAC7B,WAAO,YAAP;AACA,GAHuC,CAKxC;;;AACA,SAAOb,UAAU,CAACG,IAAX,KAAoB,UAApB,GAAiC,KAAjC,GAAyCH,UAAU,CAACG,IAA3D;AACA;;eAEcC,qB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuItem, TextHighlight } from '@wordpress/components';\nimport {\n\tIcon,\n\tglobe,\n\tpage,\n\ttag,\n\tpostList,\n\tcategory,\n\tfile,\n} from '@wordpress/icons';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';\n\nconst ICONS_MAP = {\n\tpost: postList,\n\tpage,\n\tpost_tag: tag,\n\tcategory,\n\tattachment: file,\n};\n\nfunction SearchItemIcon( { isURL, suggestion } ) {\n\tlet icon = null;\n\n\tif ( isURL ) {\n\t\ticon = globe;\n\t} else if ( suggestion.type in ICONS_MAP ) {\n\t\ticon = ICONS_MAP[ suggestion.type ];\n\t}\n\n\tif ( icon ) {\n\t\treturn (\n\t\t\t<Icon\n\t\t\t\tclassName=\"block-editor-link-control__search-item-icon\"\n\t\t\t\ticon={ icon }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nexport const LinkControlSearchItem = ( {\n\titemProps,\n\tsuggestion,\n\tsearchTerm,\n\tonClick,\n\tisURL = false,\n\tshouldShowType = false,\n} ) => {\n\tconst info = isURL\n\t\t? __( 'Press ENTER to add this link' )\n\t\t: filterURLForDisplay( safeDecodeURI( suggestion?.url ), 24 );\n\n\treturn (\n\t\t<MenuItem\n\t\t\t{ ...itemProps }\n\t\t\tinfo={ info }\n\t\t\ticonPosition=\"left\"\n\t\t\ticon={\n\t\t\t\t<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />\n\t\t\t}\n\t\t\tonClick={ onClick }\n\t\t\tshortcut={ shouldShowType && getVisualTypeName( suggestion ) }\n\t\t\tclassName=\"block-editor-link-control__search-item\"\n\t\t>\n\t\t\t<TextHighlight\n\t\t\t\t// The component expects a plain text string.\n\t\t\t\ttext={ stripHTML( suggestion.title ) }\n\t\t\t\thighlight={ searchTerm }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n\nfunction getVisualTypeName( suggestion ) {\n\tif ( suggestion.isFrontPage ) {\n\t\treturn 'front page';\n\t}\n\n\t// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.\n\treturn suggestion.type === 'post_tag' ? 'tag' : suggestion.type;\n}\n\nexport default LinkControlSearchItem;\n"]}

package/build/components/list-view/use-list-view-client-ids.js

@@ -26,12 +26,12 @@ function useListViewClientIds({
     const {
       getDraggedBlockClientIds,
       getSelectedBlockClientIds,
-      getListViewClientIdsTree
+      getEnabledClientIdsTree
     } = (0, _lockUnlock.unlock)(select(_store.store));
     return {
       selectedClientIds: getSelectedBlockClientIds(),
       draggedClientIds: getDraggedBlockClientIds(),
-      clientIdsTree: blocks !== null && blocks !== void 0 ? blocks : getListViewClientIdsTree(rootClientId)
+      clientIdsTree: blocks !== null && blocks !== void 0 ? blocks : getEnabledClientIdsTree(rootClientId)
     };
   }, [blocks, rootClientId]);
 }

package/build/components/list-view/use-list-view-client-ids.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/use-list-view-client-ids.js"],"names":["useListViewClientIds","blocks","rootClientId","select","getDraggedBlockClientIds","getSelectedBlockClientIds","getListViewClientIdsTree","blockEditorStore","selectedClientIds","draggedClientIds","clientIdsTree"],"mappings":";;;;;;;AAIA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIe,SAASA,oBAAT,CAA+B;AAAEC,EAAAA,MAAF;AAAUC,EAAAA;AAAV,CAA/B,EAA0D;AACxE,SAAO,qBACJC,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,wBADK;AAELC,MAAAA,yBAFK;AAGLC,MAAAA;AAHK,QAIF,wBAAQH,MAAM,CAAEI,YAAF,CAAd,CAJJ;AAMA,WAAO;AACNC,MAAAA,iBAAiB,EAAEH,yBAAyB,EADtC;AAENI,MAAAA,gBAAgB,EAAEL,wBAAwB,EAFpC;AAGNM,MAAAA,aAAa,EACZT,MADY,aACZA,MADY,cACZA,MADY,GACFK,wBAAwB,CAAEJ,YAAF;AAJ7B,KAAP;AAMA,GAdK,EAeN,CAAED,MAAF,EAAUC,YAAV,CAfM,CAAP;AAiBA","sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nexport default function useListViewClientIds( { blocks, rootClientId } ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetDraggedBlockClientIds,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tgetListViewClientIdsTree,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\treturn {\n\t\t\t\tselectedClientIds: getSelectedBlockClientIds(),\n\t\t\t\tdraggedClientIds: getDraggedBlockClientIds(),\n\t\t\t\tclientIdsTree:\n\t\t\t\t\tblocks ?? getListViewClientIdsTree( rootClientId ),\n\t\t\t};\n\t\t},\n\t\t[ blocks, rootClientId ]\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/use-list-view-client-ids.js"],"names":["useListViewClientIds","blocks","rootClientId","select","getDraggedBlockClientIds","getSelectedBlockClientIds","getEnabledClientIdsTree","blockEditorStore","selectedClientIds","draggedClientIds","clientIdsTree"],"mappings":";;;;;;;AAIA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIe,SAASA,oBAAT,CAA+B;AAAEC,EAAAA,MAAF;AAAUC,EAAAA;AAAV,CAA/B,EAA0D;AACxE,SAAO,qBACJC,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,wBADK;AAELC,MAAAA,yBAFK;AAGLC,MAAAA;AAHK,QAIF,wBAAQH,MAAM,CAAEI,YAAF,CAAd,CAJJ;AAMA,WAAO;AACNC,MAAAA,iBAAiB,EAAEH,yBAAyB,EADtC;AAENI,MAAAA,gBAAgB,EAAEL,wBAAwB,EAFpC;AAGNM,MAAAA,aAAa,EACZT,MADY,aACZA,MADY,cACZA,MADY,GACFK,uBAAuB,CAAEJ,YAAF;AAJ5B,KAAP;AAMA,GAdK,EAeN,CAAED,MAAF,EAAUC,YAAV,CAfM,CAAP;AAiBA","sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nexport default function useListViewClientIds( { blocks, rootClientId } ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetDraggedBlockClientIds,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tgetEnabledClientIdsTree,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\treturn {\n\t\t\t\tselectedClientIds: getSelectedBlockClientIds(),\n\t\t\t\tdraggedClientIds: getDraggedBlockClientIds(),\n\t\t\t\tclientIdsTree:\n\t\t\t\t\tblocks ?? getEnabledClientIdsTree( rootClientId ),\n\t\t\t};\n\t\t},\n\t\t[ blocks, rootClientId ]\n\t);\n}\n"]}

package/build/components/media-placeholder/index.native.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _reactNative = require("react-native");
 
+var _changeCase = require("change-case");
+
 var _i18n = require("@wordpress/i18n");
 
 var _blockEditor = require("@wordpress/block-editor");
@@ -21,6 +23,8 @@ var _icons = require("@wordpress/icons");
 
 var _styles = _interopRequireDefault(require("./styles.scss"));
 
+var _context = require("../block-edit/context");
+
 /**
  * External dependencies
  */
@@ -37,10 +41,18 @@ const isMediaEqual = (media1, media2) => media1.id === media2.id || media1.url =
 
 const dedupMedia = media => media.reduce((dedupedMedia, mediaItem) => dedupedMedia.some(item => isMediaEqual(item, mediaItem)) ? dedupedMedia : [...dedupedMedia, mediaItem], []);
 
+const hitSlop = {
+  top: 22,
+  bottom: 22,
+  left: 22,
+  right: 22
+};
+
 function MediaPlaceholder(props) {
   const {
     addToGallery,
     allowedTypes = [],
+    className = '',
     labels = {},
     icon,
     onSelect,
@@ -48,7 +60,6 @@ function MediaPlaceholder(props) {
     __experimentalOnlyMediaLibrary,
     isAppender,
     disableMediaButtons,
-    getStylesFromColorScheme,
     multiple,
     value = [],
     children,
@@ -60,7 +71,12 @@ function MediaPlaceholder(props) {
   } = props; // Use ref to keep media array current for callbacks during rerenders.
 
   const mediaRef = (0, _element.useRef)(value);
-  mediaRef.current = value; // Append and deduplicate media array for gallery use case.
+  mediaRef.current = value;
+  const blockEditContext = (0, _context.useBlockEditContext)();
+  const onButtonPress = (0, _element.useCallback)(open => event => {
+    onFocus?.(event);
+    open();
+  }, [onFocus]); // Append and deduplicate media array for gallery use case.
 
   const setMedia = multiple && addToGallery ? selected => onSelect(dedupMedia([...mediaRef.current, ...selected])) : onSelect;
   const isOneType = allowedTypes.length === 1;
@@ -105,36 +121,65 @@ function MediaPlaceholder(props) {
     accessibilityHint = (0, _i18n.__)('Double tap to select an audio file');
   }
 
-  const emptyStateTitleStyle = getStylesFromColorScheme(_styles.default.emptyStateTitle, _styles.default.emptyStateTitleDark);
-  const addMediaButtonStyle = getStylesFromColorScheme(_styles.default.addMediaButton, _styles.default.addMediaButtonDark);
-
-  const renderContent = () => {
+  const titleStyles = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__header-title'], _styles.default['media-placeholder__header-title--dark']);
+  const addMediaButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.addMediaButton, _styles.default.addMediaButtonDark);
+  const buttonStyles = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__button'], _styles.default['media-placeholder__button--dark']);
+  const emptyStateDescriptionStyles = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.emptyStateDescription, _styles.default.emptyStateDescriptionDark);
+  const iconStyles = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__header-icon'], _styles.default['media-placeholder__header-icon--dark']);
+  const placeholderIcon = (0, _element.cloneElement)(icon, {
+    fill: iconStyles.fill
+  });
+  const accessibilityLabel = (0, _i18n.sprintf)(
+  /* translators: accessibility text for the media block empty state. %s: media type */
+  (0, _i18n.__)('%s block. Empty'), placeholderTitle);
+
+  const renderContent = open => {
     if (isAppender === undefined || !isAppender) {
       return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNative.View, {
-        style: _styles.default.modalIcon
-      }, icon), (0, _element.createElement)(_reactNative.Text, {
-        style: emptyStateTitleStyle
-      }, placeholderTitle), children, (0, _element.createElement)(_reactNative.Text, {
-        style: _styles.default.emptyStateDescription
-      }, instructions));
+        style: _styles.default['media-placeholder__header']
+      }, (0, _element.createElement)(_reactNative.View, {
+        style: iconStyles
+      }, placeholderIcon), (0, _element.createElement)(_reactNative.Text, {
+        style: titleStyles
+      }, placeholderTitle)), children, (0, _element.createElement)(_reactNative.TouchableOpacity, {
+        activeOpacity: 0.5,
+        accessibilityLabel: accessibilityLabel,
+        style: buttonStyles,
+        accessibilityRole: 'button',
+        accessibilityHint: accessibilityHint,
+        hitSlop: hitSlop,
+        onPress: onButtonPress(open)
+      }, (0, _element.createElement)(_reactNative.Text, {
+        style: emptyStateDescriptionStyles
+      }, (0, _changeCase.sentenceCase)(instructions))));
     } else if (isAppender && !disableMediaButtons) {
-      return (0, _element.createElement)(_reactNative.View, {
+      return (0, _element.createElement)(_reactNative.TouchableOpacity, {
+        activeOpacity: 0.5,
+        accessibilityLabel: accessibilityLabel,
+        style: _styles.default['media-placeholder__appender'],
+        accessibilityRole: 'button',
+        accessibilityHint: accessibilityHint,
+        hitSlop: hitSlop,
+        onPress: onButtonPress(open)
+      }, (0, _element.createElement)(_reactNative.View, {
         testID: "media-placeholder-appender-icon"
       }, (0, _element.createElement)(_icons.Icon, {
         icon: _icons.plusCircleFilled,
         style: addMediaButtonStyle,
         color: addMediaButtonStyle.color,
         size: addMediaButtonStyle.size
-      }));
+      })));
     }
   };
 
+  const appenderStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.appender, _styles.default.appenderDark);
+  const containerSelectedStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__container-selected'], _styles.default['media-placeholder__container-selected--dark']);
+  const containerStyle = [(0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__container'], _styles.default['media-placeholder__container--dark']), blockEditContext?.isSelected && !className.includes('no-block-outline') && containerSelectedStyle];
+
   if (isAppender && disableMediaButtons) {
     return null;
   }
 
-  const appenderStyle = getStylesFromColorScheme(_styles.default.appender, _styles.default.appenderDark);
-  const emptyStateContainerStyle = getStylesFromColorScheme(_styles.default.emptyStateContainer, _styles.default.emptyStateContainerDark);
   return (0, _element.createElement)(_reactNative.View, {
     style: {
       flex: 1
@@ -151,28 +196,17 @@ function MediaPlaceholder(props) {
       open,
       getMediaOptions
     }) => {
-      return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
-        accessibilityLabel: (0, _i18n.sprintf)(
-        /* translators: accessibility text for the media block empty state. %s: media type */
-        (0, _i18n.__)('%s block. Empty'), placeholderTitle),
-        accessibilityRole: 'button',
-        accessibilityHint: accessibilityHint,
-        onPress: event => {
-          onFocus?.(event);
-          open();
-        }
-      }, (0, _element.createElement)(_reactNative.View, {
-        style: [[emptyStateContainerStyle, height && {
+      return (0, _element.createElement)(_reactNative.View, {
+        style: [[containerStyle, height && {
           height
         }, backgroundColor && {
           backgroundColor
         }], isAppender && appenderStyle]
-      }, getMediaOptions(), !hideContent && renderContent()));
+      }, getMediaOptions(), !hideContent && renderContent(open));
     }
   }));
 }
 
-var _default = (0, _compose.withPreferredColorScheme)(MediaPlaceholder);
-
+var _default = MediaPlaceholder;
 exports.default = _default;
 //# sourceMappingURL=index.native.js.map

package/build/components/media-placeholder/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/media-placeholder/index.native.js"],"names":["isMediaEqual","media1","media2","id","url","dedupMedia","media","reduce","dedupedMedia","mediaItem","some","item","MediaPlaceholder","props","addToGallery","allowedTypes","labels","icon","onSelect","onFocus","__experimentalOnlyMediaLibrary","isAppender","disableMediaButtons","getStylesFromColorScheme","multiple","value","children","height","backgroundColor","hideContent","autoOpenMediaUpload","onSelectURL","mediaRef","current","setMedia","selected","isOneType","length","isImage","includes","MEDIA_TYPE_IMAGE","isVideo","MEDIA_TYPE_VIDEO","isAudio","MEDIA_TYPE_AUDIO","placeholderTitle","title","undefined","instructions","accessibilityHint","emptyStateTitleStyle","styles","emptyStateTitle","emptyStateTitleDark","addMediaButtonStyle","addMediaButton","addMediaButtonDark","renderContent","modalIcon","emptyStateDescription","plusCircleFilled","color","size","appenderStyle","appender","appenderDark","emptyStateContainerStyle","emptyStateContainer","emptyStateContainerDark","flex","open","getMediaOptions","event"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tMediaUpload,\n\tMEDIA_TYPE_IMAGE,\n\tMEDIA_TYPE_VIDEO,\n\tMEDIA_TYPE_AUDIO,\n} from '@wordpress/block-editor';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\nimport { Icon, plusCircleFilled } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nconst isMediaEqual = ( media1, media2 ) =>\n\tmedia1.id === media2.id || media1.url === media2.url;\n\n// Remove duplicates after gallery append.\nconst dedupMedia = ( media ) =>\n\tmedia.reduce(\n\t\t( dedupedMedia, mediaItem ) =>\n\t\t\tdedupedMedia.some( ( item ) => isMediaEqual( item, mediaItem ) )\n\t\t\t\t? dedupedMedia\n\t\t\t\t: [ ...dedupedMedia, mediaItem ],\n\t\t[]\n\t);\n\nfunction MediaPlaceholder( props ) {\n\tconst {\n\t\taddToGallery,\n\t\tallowedTypes = [],\n\t\tlabels = {},\n\t\ticon,\n\t\tonSelect,\n\t\tonFocus,\n\t\t__experimentalOnlyMediaLibrary,\n\t\tisAppender,\n\t\tdisableMediaButtons,\n\t\tgetStylesFromColorScheme,\n\t\tmultiple,\n\t\tvalue = [],\n\t\tchildren,\n\t\theight,\n\t\tbackgroundColor,\n\t\thideContent,\n\t\tautoOpenMediaUpload,\n\t\tonSelectURL,\n\t} = props;\n\n\t// Use ref to keep media array current for callbacks during rerenders.\n\tconst mediaRef = useRef( value );\n\tmediaRef.current = value;\n\n\t// Append and deduplicate media array for gallery use case.\n\tconst setMedia =\n\t\tmultiple && addToGallery\n\t\t\t? ( selected ) =>\n\t\t\t\t\tonSelect(\n\t\t\t\t\t\tdedupMedia( [ ...mediaRef.current, ...selected ] )\n\t\t\t\t\t)\n\t\t\t: onSelect;\n\n\tconst isOneType = allowedTypes.length === 1;\n\tconst isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );\n\tconst isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );\n\tconst isAudio = isOneType && allowedTypes.includes( MEDIA_TYPE_AUDIO );\n\n\tlet placeholderTitle = labels.title;\n\tif ( placeholderTitle === undefined ) {\n\t\tplaceholderTitle = __( 'Media' );\n\t\tif ( isImage ) {\n\t\t\tplaceholderTitle = __( 'Image' );\n\t\t} else if ( isVideo ) {\n\t\t\tplaceholderTitle = __( 'Video' );\n\t\t} else if ( isAudio ) {\n\t\t\tplaceholderTitle = __( 'Audio' );\n\t\t}\n\t}\n\n\tlet instructions = labels.instructions;\n\tif ( instructions === undefined ) {\n\t\tif ( isImage ) {\n\t\t\tinstructions = __( 'ADD IMAGE' );\n\t\t} else if ( isVideo ) {\n\t\t\tinstructions = __( 'ADD VIDEO' );\n\t\t} else if ( isAudio ) {\n\t\t\tinstructions = __( 'ADD AUDIO' );\n\t\t} else {\n\t\t\tinstructions = __( 'ADD IMAGE OR VIDEO' );\n\t\t}\n\t}\n\n\tlet accessibilityHint = __( 'Double tap to select' );\n\tif ( isImage ) {\n\t\taccessibilityHint = __( 'Double tap to select an image' );\n\t} else if ( isVideo ) {\n\t\taccessibilityHint = __( 'Double tap to select a video' );\n\t} else if ( isAudio ) {\n\t\taccessibilityHint = __( 'Double tap to select an audio file' );\n\t}\n\n\tconst emptyStateTitleStyle = getStylesFromColorScheme(\n\t\tstyles.emptyStateTitle,\n\t\tstyles.emptyStateTitleDark\n\t);\n\tconst addMediaButtonStyle = getStylesFromColorScheme(\n\t\tstyles.addMediaButton,\n\t\tstyles.addMediaButtonDark\n\t);\n\n\tconst renderContent = () => {\n\t\tif ( isAppender === undefined || ! isAppender ) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<View style={ styles.modalIcon }>{ icon }</View>\n\t\t\t\t\t<Text style={ emptyStateTitleStyle }>\n\t\t\t\t\t\t{ placeholderTitle }\n\t\t\t\t\t</Text>\n\t\t\t\t\t{ children }\n\t\t\t\t\t<Text style={ styles.emptyStateDescription }>\n\t\t\t\t\t\t{ instructions }\n\t\t\t\t\t</Text>\n\t\t\t\t</>\n\t\t\t);\n\t\t} else if ( isAppender && ! disableMediaButtons ) {\n\t\t\treturn (\n\t\t\t\t<View testID=\"media-placeholder-appender-icon\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ plusCircleFilled }\n\t\t\t\t\t\tstyle={ addMediaButtonStyle }\n\t\t\t\t\t\tcolor={ addMediaButtonStyle.color }\n\t\t\t\t\t\tsize={ addMediaButtonStyle.size }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t);\n\t\t}\n\t};\n\n\tif ( isAppender && disableMediaButtons ) {\n\t\treturn null;\n\t}\n\n\tconst appenderStyle = getStylesFromColorScheme(\n\t\tstyles.appender,\n\t\tstyles.appenderDark\n\t);\n\tconst emptyStateContainerStyle = getStylesFromColorScheme(\n\t\tstyles.emptyStateContainer,\n\t\tstyles.emptyStateContainerDark\n\t);\n\n\treturn (\n\t\t<View style={ { flex: 1 } }>\n\t\t\t<MediaUpload\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tonSelect={ setMedia }\n\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\t__experimentalOnlyMediaLibrary={\n\t\t\t\t\t__experimentalOnlyMediaLibrary\n\t\t\t\t}\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tisReplacingMedia={ false }\n\t\t\t\tautoOpen={ autoOpenMediaUpload }\n\t\t\t\trender={ ( { open, getMediaOptions } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\taccessibilityLabel={ sprintf(\n\t\t\t\t\t\t\t\t/* translators: accessibility text for the media block empty state. %s: media type */\n\t\t\t\t\t\t\t\t__( '%s block. Empty' ),\n\t\t\t\t\t\t\t\tplaceholderTitle\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t\tonPress={ ( event ) => {\n\t\t\t\t\t\t\t\tonFocus?.( event );\n\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\temptyStateContainerStyle,\n\t\t\t\t\t\t\t\t\t\theight && { height },\n\t\t\t\t\t\t\t\t\t\tbackgroundColor && { backgroundColor },\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tisAppender && appenderStyle,\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\t{ getMediaOptions() }\n\t\t\t\t\t\t\t\t{ ! hideContent && renderContent() }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( MediaPlaceholder );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/media-placeholder/index.native.js"],"names":["isMediaEqual","media1","media2","id","url","dedupMedia","media","reduce","dedupedMedia","mediaItem","some","item","hitSlop","top","bottom","left","right","MediaPlaceholder","props","addToGallery","allowedTypes","className","labels","icon","onSelect","onFocus","__experimentalOnlyMediaLibrary","isAppender","disableMediaButtons","multiple","value","children","height","backgroundColor","hideContent","autoOpenMediaUpload","onSelectURL","mediaRef","current","blockEditContext","onButtonPress","open","event","setMedia","selected","isOneType","length","isImage","includes","MEDIA_TYPE_IMAGE","isVideo","MEDIA_TYPE_VIDEO","isAudio","MEDIA_TYPE_AUDIO","placeholderTitle","title","undefined","instructions","accessibilityHint","titleStyles","styles","addMediaButtonStyle","addMediaButton","addMediaButtonDark","buttonStyles","emptyStateDescriptionStyles","emptyStateDescription","emptyStateDescriptionDark","iconStyles","placeholderIcon","fill","accessibilityLabel","renderContent","plusCircleFilled","color","size","appenderStyle","appender","appenderDark","containerSelectedStyle","containerStyle","isSelected","flex","getMediaOptions"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableOpacity } from 'react-native';\nimport { sentenceCase } from 'change-case';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tMediaUpload,\n\tMEDIA_TYPE_IMAGE,\n\tMEDIA_TYPE_VIDEO,\n\tMEDIA_TYPE_AUDIO,\n} from '@wordpress/block-editor';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { cloneElement, useCallback, useRef } from '@wordpress/element';\nimport { Icon, plusCircleFilled } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\nimport { useBlockEditContext } from '../block-edit/context';\n\nconst isMediaEqual = ( media1, media2 ) =>\n\tmedia1.id === media2.id || media1.url === media2.url;\n\n// Remove duplicates after gallery append.\nconst dedupMedia = ( media ) =>\n\tmedia.reduce(\n\t\t( dedupedMedia, mediaItem ) =>\n\t\t\tdedupedMedia.some( ( item ) => isMediaEqual( item, mediaItem ) )\n\t\t\t\t? dedupedMedia\n\t\t\t\t: [ ...dedupedMedia, mediaItem ],\n\t\t[]\n\t);\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\nfunction MediaPlaceholder( props ) {\n\tconst {\n\t\taddToGallery,\n\t\tallowedTypes = [],\n\t\tclassName = '',\n\t\tlabels = {},\n\t\ticon,\n\t\tonSelect,\n\t\tonFocus,\n\t\t__experimentalOnlyMediaLibrary,\n\t\tisAppender,\n\t\tdisableMediaButtons,\n\t\tmultiple,\n\t\tvalue = [],\n\t\tchildren,\n\t\theight,\n\t\tbackgroundColor,\n\t\thideContent,\n\t\tautoOpenMediaUpload,\n\t\tonSelectURL,\n\t} = props;\n\n\t// Use ref to keep media array current for callbacks during rerenders.\n\tconst mediaRef = useRef( value );\n\tmediaRef.current = value;\n\n\tconst blockEditContext = useBlockEditContext();\n\n\tconst onButtonPress = useCallback(\n\t\t( open ) => ( event ) => {\n\t\t\tonFocus?.( event );\n\t\t\topen();\n\t\t},\n\t\t[ onFocus ]\n\t);\n\n\t// Append and deduplicate media array for gallery use case.\n\tconst setMedia =\n\t\tmultiple && addToGallery\n\t\t\t? ( selected ) =>\n\t\t\t\t\tonSelect(\n\t\t\t\t\t\tdedupMedia( [ ...mediaRef.current, ...selected ] )\n\t\t\t\t\t)\n\t\t\t: onSelect;\n\n\tconst isOneType = allowedTypes.length === 1;\n\tconst isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );\n\tconst isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );\n\tconst isAudio = isOneType && allowedTypes.includes( MEDIA_TYPE_AUDIO );\n\n\tlet placeholderTitle = labels.title;\n\tif ( placeholderTitle === undefined ) {\n\t\tplaceholderTitle = __( 'Media' );\n\t\tif ( isImage ) {\n\t\t\tplaceholderTitle = __( 'Image' );\n\t\t} else if ( isVideo ) {\n\t\t\tplaceholderTitle = __( 'Video' );\n\t\t} else if ( isAudio ) {\n\t\t\tplaceholderTitle = __( 'Audio' );\n\t\t}\n\t}\n\n\tlet instructions = labels.instructions;\n\tif ( instructions === undefined ) {\n\t\tif ( isImage ) {\n\t\t\tinstructions = __( 'ADD IMAGE' );\n\t\t} else if ( isVideo ) {\n\t\t\tinstructions = __( 'ADD VIDEO' );\n\t\t} else if ( isAudio ) {\n\t\t\tinstructions = __( 'ADD AUDIO' );\n\t\t} else {\n\t\t\tinstructions = __( 'ADD IMAGE OR VIDEO' );\n\t\t}\n\t}\n\n\tlet accessibilityHint = __( 'Double tap to select' );\n\tif ( isImage ) {\n\t\taccessibilityHint = __( 'Double tap to select an image' );\n\t} else if ( isVideo ) {\n\t\taccessibilityHint = __( 'Double tap to select a video' );\n\t} else if ( isAudio ) {\n\t\taccessibilityHint = __( 'Double tap to select an audio file' );\n\t}\n\n\tconst titleStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'media-placeholder__header-title' ],\n\t\tstyles[ 'media-placeholder__header-title--dark' ]\n\t);\n\tconst addMediaButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.addMediaButton,\n\t\tstyles.addMediaButtonDark\n\t);\n\tconst buttonStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'media-placeholder__button' ],\n\t\tstyles[ 'media-placeholder__button--dark' ]\n\t);\n\tconst emptyStateDescriptionStyles = usePreferredColorSchemeStyle(\n\t\tstyles.emptyStateDescription,\n\t\tstyles.emptyStateDescriptionDark\n\t);\n\tconst iconStyles = usePreferredColorSchemeStyle(\n\t\tstyles[ 'media-placeholder__header-icon' ],\n\t\tstyles[ 'media-placeholder__header-icon--dark' ]\n\t);\n\tconst placeholderIcon = cloneElement( icon, {\n\t\tfill: iconStyles.fill,\n\t} );\n\tconst accessibilityLabel = sprintf(\n\t\t/* translators: accessibility text for the media block empty state. %s: media type */\n\t\t__( '%s block. Empty' ),\n\t\tplaceholderTitle\n\t);\n\n\tconst renderContent = ( open ) => {\n\t\tif ( isAppender === undefined || ! isAppender ) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<View style={ styles[ 'media-placeholder__header' ] }>\n\t\t\t\t\t\t<View style={ iconStyles }>{ placeholderIcon }</View>\n\t\t\t\t\t\t<Text style={ titleStyles }>{ placeholderTitle }</Text>\n\t\t\t\t\t</View>\n\t\t\t\t\t{ children }\n\t\t\t\t\t<TouchableOpacity\n\t\t\t\t\t\tactiveOpacity={ 0.5 }\n\t\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t\t\tonPress={ onButtonPress( open ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text style={ emptyStateDescriptionStyles }>\n\t\t\t\t\t\t\t{ sentenceCase( instructions ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</TouchableOpacity>\n\t\t\t\t</>\n\t\t\t);\n\t\t} else if ( isAppender && ! disableMediaButtons ) {\n\t\t\treturn (\n\t\t\t\t<TouchableOpacity\n\t\t\t\t\tactiveOpacity={ 0.5 }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\tstyle={ styles[ 'media-placeholder__appender' ] }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t\tonPress={ onButtonPress( open ) }\n\t\t\t\t>\n\t\t\t\t\t<View testID=\"media-placeholder-appender-icon\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ plusCircleFilled }\n\t\t\t\t\t\t\tstyle={ addMediaButtonStyle }\n\t\t\t\t\t\t\tcolor={ addMediaButtonStyle.color }\n\t\t\t\t\t\t\tsize={ addMediaButtonStyle.size }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableOpacity>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst appenderStyle = usePreferredColorSchemeStyle(\n\t\tstyles.appender,\n\t\tstyles.appenderDark\n\t);\n\tconst containerSelectedStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'media-placeholder__container-selected' ],\n\t\tstyles[ 'media-placeholder__container-selected--dark' ]\n\t);\n\tconst containerStyle = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles[ 'media-placeholder__container' ],\n\t\t\tstyles[ 'media-placeholder__container--dark' ]\n\t\t),\n\t\tblockEditContext?.isSelected &&\n\t\t\t! className.includes( 'no-block-outline' ) &&\n\t\t\tcontainerSelectedStyle,\n\t];\n\n\tif ( isAppender && disableMediaButtons ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<View style={ { flex: 1 } }>\n\t\t\t<MediaUpload\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tonSelect={ setMedia }\n\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\t__experimentalOnlyMediaLibrary={\n\t\t\t\t\t__experimentalOnlyMediaLibrary\n\t\t\t\t}\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tisReplacingMedia={ false }\n\t\t\t\tautoOpen={ autoOpenMediaUpload }\n\t\t\t\trender={ ( { open, getMediaOptions } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\tcontainerStyle,\n\t\t\t\t\t\t\t\t\theight && { height },\n\t\t\t\t\t\t\t\t\tbackgroundColor && { backgroundColor },\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\tisAppender && appenderStyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ getMediaOptions() }\n\t\t\t\t\t\t\t{ ! hideContent && renderContent( open ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t</View>\n\t);\n}\n\nexport default MediaPlaceholder;\n"]}

package/build/components/preview-options/index.js

@@ -61,7 +61,7 @@ function PreviewOptions({
     menuProps: menuProps,
     icon: deviceIcons[deviceType.toLowerCase()],
     label: label || (0, _i18n.__)('Preview')
-  }, () => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
+  }, renderProps => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
     className: "block-editor-post-preview__button-resize",
     onClick: () => setDeviceType('Desktop'),
     icon: deviceType === 'Desktop' && _icons.check
@@ -73,6 +73,6 @@ function PreviewOptions({
     className: "block-editor-post-preview__button-resize",
     onClick: () => setDeviceType('Mobile'),
     icon: deviceType === 'Mobile' && _icons.check
-  }, (0, _i18n.__)('Mobile'))), children));
+  }, (0, _i18n.__)('Mobile'))), children(renderProps)));
 }
 //# sourceMappingURL=index.js.map

package/build/components/preview-options/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/preview-options/index.js"],"names":["PreviewOptions","children","viewLabel","className","isEnabled","deviceType","setDeviceType","label","isMobile","popoverProps","placement","toggleProps","disabled","menuProps","deviceIcons","mobile","tablet","desktop","toLowerCase","check"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMe,SAASA,cAAT,CAAyB;AACvCC,EAAAA,QADuC;AAEvCC,EAAAA,SAFuC;AAGvCC,EAAAA,SAHuC;AAIvCC,EAAAA,SAAS,GAAG,IAJ2B;AAKvCC,EAAAA,UALuC;AAMvCC,EAAAA,aANuC;AAOvCC,EAAAA;AAPuC,CAAzB,EAQX;AACH,QAAMC,QAAQ,GAAG,+BAAkB,OAAlB,EAA2B,GAA3B,CAAjB;AACA,MAAKA,QAAL,EAAgB,OAAO,IAAP;AAEhB,QAAMC,YAAY,GAAG;AACpBN,IAAAA,SAAS,EAAE,yBACVA,SADU,EAEV,6CAFU,CADS;AAKpBO,IAAAA,SAAS,EAAE;AALS,GAArB;AAOA,QAAMC,WAAW,GAAG;AACnBR,IAAAA,SAAS,EAAE,0CADQ;AAEnBS,IAAAA,QAAQ,EAAE,CAAER,SAFO;AAGnBH,IAAAA,QAAQ,EAAEC;AAHS,GAApB;AAKA,QAAMW,SAAS,GAAG;AACjB,kBAAc,cAAI,cAAJ;AADG,GAAlB;AAIA,QAAMC,WAAW,GAAG;AACnBC,IAAAA,MAAM,EAANA,aADmB;AAEnBC,IAAAA,MAAM,EAANA,aAFmB;AAGnBC,IAAAA,OAAO,EAAPA;AAHmB,GAApB;AAMA,SACC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,YAAY,EAAGR,YAFhB;AAGC,IAAA,WAAW,EAAGE,WAHf;AAIC,IAAA,SAAS,EAAGE,SAJb;AAKC,IAAA,IAAI,EAAGC,WAAW,CAAET,UAAU,CAACa,WAAX,EAAF,CALnB;AAMC,IAAA,KAAK,EAAGX,KAAK,IAAI,cAAI,SAAJ;AANlB,KAQG,MACD,qDACC,4BAAC,qBAAD,QACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,OAAO,EAAG,MAAMD,aAAa,CAAE,SAAF,CAF9B;AAGC,IAAA,IAAI,EAAGD,UAAU,KAAK,SAAf,IAA4Bc;AAHpC,KAKG,cAAI,SAAJ,CALH,CADD,EAQC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,OAAO,EAAG,MAAMb,aAAa,CAAE,QAAF,CAF9B;AAGC,IAAA,IAAI,EAAGD,UAAU,KAAK,QAAf,IAA2Bc;AAHnC,KAKG,cAAI,QAAJ,CALH,CARD,EAeC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,OAAO,EAAG,MAAMb,aAAa,CAAE,QAAF,CAF9B;AAGC,IAAA,IAAI,EAAGD,UAAU,KAAK,QAAf,IAA2Bc;AAHnC,KAKG,cAAI,QAAJ,CALH,CAfD,CADD,EAwBGlB,QAxBH,CATF,CADD;AAuCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { check, desktop, mobile, tablet } from '@wordpress/icons';\n\nexport default function PreviewOptions( {\n\tchildren,\n\tviewLabel,\n\tclassName,\n\tisEnabled = true,\n\tdeviceType,\n\tsetDeviceType,\n\tlabel,\n} ) {\n\tconst isMobile = useViewportMatch( 'small', '<' );\n\tif ( isMobile ) return null;\n\n\tconst popoverProps = {\n\t\tclassName: classnames(\n\t\t\tclassName,\n\t\t\t'block-editor-post-preview__dropdown-content'\n\t\t),\n\t\tplacement: 'bottom-end',\n\t};\n\tconst toggleProps = {\n\t\tclassName: 'block-editor-post-preview__button-toggle',\n\t\tdisabled: ! isEnabled,\n\t\tchildren: viewLabel,\n\t};\n\tconst menuProps = {\n\t\t'aria-label': __( 'View options' ),\n\t};\n\n\tconst deviceIcons = {\n\t\tmobile,\n\t\ttablet,\n\t\tdesktop,\n\t};\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"block-editor-post-preview__dropdown\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\ttoggleProps={ toggleProps }\n\t\t\tmenuProps={ menuProps }\n\t\t\ticon={ deviceIcons[ deviceType.toLowerCase() ] }\n\t\t\tlabel={ label || __( 'Preview' ) }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<>\n\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tclassName=\"block-editor-post-preview__button-resize\"\n\t\t\t\t\t\t\tonClick={ () => setDeviceType( 'Desktop' ) }\n\t\t\t\t\t\t\ticon={ deviceType === 'Desktop' && check }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Desktop' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tclassName=\"block-editor-post-preview__button-resize\"\n\t\t\t\t\t\t\tonClick={ () => setDeviceType( 'Tablet' ) }\n\t\t\t\t\t\t\ticon={ deviceType === 'Tablet' && check }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Tablet' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tclassName=\"block-editor-post-preview__button-resize\"\n\t\t\t\t\t\t\tonClick={ () => setDeviceType( 'Mobile' ) }\n\t\t\t\t\t\t\ticon={ deviceType === 'Mobile' && check }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Mobile' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t{ children }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/preview-options/index.js"],"names":["PreviewOptions","children","viewLabel","className","isEnabled","deviceType","setDeviceType","label","isMobile","popoverProps","placement","toggleProps","disabled","menuProps","deviceIcons","mobile","tablet","desktop","toLowerCase","renderProps","check"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMe,SAASA,cAAT,CAAyB;AACvCC,EAAAA,QADuC;AAEvCC,EAAAA,SAFuC;AAGvCC,EAAAA,SAHuC;AAIvCC,EAAAA,SAAS,GAAG,IAJ2B;AAKvCC,EAAAA,UALuC;AAMvCC,EAAAA,aANuC;AAOvCC,EAAAA;AAPuC,CAAzB,EAQX;AACH,QAAMC,QAAQ,GAAG,+BAAkB,OAAlB,EAA2B,GAA3B,CAAjB;AACA,MAAKA,QAAL,EAAgB,OAAO,IAAP;AAEhB,QAAMC,YAAY,GAAG;AACpBN,IAAAA,SAAS,EAAE,yBACVA,SADU,EAEV,6CAFU,CADS;AAKpBO,IAAAA,SAAS,EAAE;AALS,GAArB;AAOA,QAAMC,WAAW,GAAG;AACnBR,IAAAA,SAAS,EAAE,0CADQ;AAEnBS,IAAAA,QAAQ,EAAE,CAAER,SAFO;AAGnBH,IAAAA,QAAQ,EAAEC;AAHS,GAApB;AAKA,QAAMW,SAAS,GAAG;AACjB,kBAAc,cAAI,cAAJ;AADG,GAAlB;AAIA,QAAMC,WAAW,GAAG;AACnBC,IAAAA,MAAM,EAANA,aADmB;AAEnBC,IAAAA,MAAM,EAANA,aAFmB;AAGnBC,IAAAA,OAAO,EAAPA;AAHmB,GAApB;AAMA,SACC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,YAAY,EAAGR,YAFhB;AAGC,IAAA,WAAW,EAAGE,WAHf;AAIC,IAAA,SAAS,EAAGE,SAJb;AAKC,IAAA,IAAI,EAAGC,WAAW,CAAET,UAAU,CAACa,WAAX,EAAF,CALnB;AAMC,IAAA,KAAK,EAAGX,KAAK,IAAI,cAAI,SAAJ;AANlB,KAQKY,WAAF,IACD,qDACC,4BAAC,qBAAD,QACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,OAAO,EAAG,MAAMb,aAAa,CAAE,SAAF,CAF9B;AAGC,IAAA,IAAI,EAAGD,UAAU,KAAK,SAAf,IAA4Be;AAHpC,KAKG,cAAI,SAAJ,CALH,CADD,EAQC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,OAAO,EAAG,MAAMd,aAAa,CAAE,QAAF,CAF9B;AAGC,IAAA,IAAI,EAAGD,UAAU,KAAK,QAAf,IAA2Be;AAHnC,KAKG,cAAI,QAAJ,CALH,CARD,EAeC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,OAAO,EAAG,MAAMd,aAAa,CAAE,QAAF,CAF9B;AAGC,IAAA,IAAI,EAAGD,UAAU,KAAK,QAAf,IAA2Be;AAHnC,KAKG,cAAI,QAAJ,CALH,CAfD,CADD,EAwBGnB,QAAQ,CAAEkB,WAAF,CAxBX,CATF,CADD;AAuCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { check, desktop, mobile, tablet } from '@wordpress/icons';\n\nexport default function PreviewOptions( {\n\tchildren,\n\tviewLabel,\n\tclassName,\n\tisEnabled = true,\n\tdeviceType,\n\tsetDeviceType,\n\tlabel,\n} ) {\n\tconst isMobile = useViewportMatch( 'small', '<' );\n\tif ( isMobile ) return null;\n\n\tconst popoverProps = {\n\t\tclassName: classnames(\n\t\t\tclassName,\n\t\t\t'block-editor-post-preview__dropdown-content'\n\t\t),\n\t\tplacement: 'bottom-end',\n\t};\n\tconst toggleProps = {\n\t\tclassName: 'block-editor-post-preview__button-toggle',\n\t\tdisabled: ! isEnabled,\n\t\tchildren: viewLabel,\n\t};\n\tconst menuProps = {\n\t\t'aria-label': __( 'View options' ),\n\t};\n\n\tconst deviceIcons = {\n\t\tmobile,\n\t\ttablet,\n\t\tdesktop,\n\t};\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"block-editor-post-preview__dropdown\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\ttoggleProps={ toggleProps }\n\t\t\tmenuProps={ menuProps }\n\t\t\ticon={ deviceIcons[ deviceType.toLowerCase() ] }\n\t\t\tlabel={ label || __( 'Preview' ) }\n\t\t>\n\t\t\t{ ( renderProps ) => (\n\t\t\t\t<>\n\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tclassName=\"block-editor-post-preview__button-resize\"\n\t\t\t\t\t\t\tonClick={ () => setDeviceType( 'Desktop' ) }\n\t\t\t\t\t\t\ticon={ deviceType === 'Desktop' && check }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Desktop' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tclassName=\"block-editor-post-preview__button-resize\"\n\t\t\t\t\t\t\tonClick={ () => setDeviceType( 'Tablet' ) }\n\t\t\t\t\t\t\ticon={ deviceType === 'Tablet' && check }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Tablet' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tclassName=\"block-editor-post-preview__button-resize\"\n\t\t\t\t\t\t\tonClick={ () => setDeviceType( 'Mobile' ) }\n\t\t\t\t\t\t\ticon={ deviceType === 'Mobile' && check }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Mobile' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t{ children( renderProps ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"]}

package/build/components/rich-text/content.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Content = void 0;
-exports.getRichTextValues = getRichTextValues;
 
 var _element = require("@wordpress/element");
 
@@ -61,39 +60,4 @@ const Content = ({
 };
 
 exports.Content = Content;
-Content.__unstableIsRichTextContent = {};
-
-function findContent(blocks, richTextValues = []) {
-  if (!Array.isArray(blocks)) {
-    blocks = [blocks];
-  }
-
-  for (const block of blocks) {
-    if (block?.type?.__unstableIsRichTextContent === Content.__unstableIsRichTextContent) {
-      richTextValues.push(block.props.value);
-      continue;
-    }
-
-    if (block?.props?.children) {
-      findContent(block.props.children, richTextValues);
-    }
-  }
-
-  return richTextValues;
-}
-
-function _getSaveElement({
-  name,
-  attributes,
-  innerBlocks
-}) {
-  return (0, _blocks.getSaveElement)(name, attributes, innerBlocks.map(_getSaveElement));
-}
-
-function getRichTextValues(blocks = []) {
-  _blocks.__unstableGetBlockProps.skipFilters = true;
-  const values = findContent((Array.isArray(blocks) ? blocks : [blocks]).map(_getSaveElement));
-  _blocks.__unstableGetBlockProps.skipFilters = false;
-  return values;
-}
 //# sourceMappingURL=content.js.map

package/build/components/rich-text/content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/content.js"],"names":["Content","value","tagName","Tag","multiline","props","Array","isArray","since","version","alternative","link","childrenSource","toHTML","MultilineTag","content","format","restProps","__unstableIsRichTextContent","findContent","blocks","richTextValues","block","type","push","children","_getSaveElement","name","attributes","innerBlocks","map","getRichTextValues","getBlockProps","skipFilters","values"],"mappings":";;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAdA;AACA;AACA;;AASA;AACA;AACA;AAGO,MAAMA,OAAO,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,OAAO,EAAEC,GAAlB;AAAuBC,EAAAA,SAAvB;AAAkC,KAAGC;AAArC,CAAF,KAAoD;AAC1E;AACA,MAAKC,KAAK,CAACC,OAAN,CAAeN,KAAf,CAAL,EAA8B;AAC7B,6BAAY,qDAAZ,EAAmE;AAClEO,MAAAA,KAAK,EAAE,KAD2D;AAElEC,MAAAA,OAAO,EAAE,KAFyD;AAGlEC,MAAAA,WAAW,EAAE,sBAHqD;AAIlEC,MAAAA,IAAI,EAAE;AAJ4D,KAAnE;AAOAV,IAAAA,KAAK,GAAGW,iBAAeC,MAAf,CAAuBZ,KAAvB,CAAR;AACA;;AAED,QAAMa,YAAY,GAAG,4BAAiBV,SAAjB,CAArB;;AAEA,MAAK,CAAEH,KAAF,IAAWa,YAAhB,EAA+B;AAC9Bb,IAAAA,KAAK,GAAI,IAAIa,YAAc,MAAMA,YAAc,GAA/C;AACA;;AAED,QAAMC,OAAO,GAAG,4BAAC,gBAAD,QAAWd,KAAX,CAAhB;;AAEA,MAAKE,GAAL,EAAW;AACV,UAAM;AAAEa,MAAAA,MAAF;AAAU,SAAGC;AAAb,QAA2BZ,KAAjC;AACA,WAAO,4BAAC,GAAD,OAAUY;AAAV,OAAwBF,OAAxB,CAAP;AACA;;AAED,SAAOA,OAAP;AACA,CA3BM;;;AA6BPf,OAAO,CAACkB,2BAAR,GAAsC,EAAtC;;AAEA,SAASC,WAAT,CAAsBC,MAAtB,EAA8BC,cAAc,GAAG,EAA/C,EAAoD;AACnD,MAAK,CAAEf,KAAK,CAACC,OAAN,CAAea,MAAf,CAAP,EAAiC;AAChCA,IAAAA,MAAM,GAAG,CAAEA,MAAF,CAAT;AACA;;AAED,OAAM,MAAME,KAAZ,IAAqBF,MAArB,EAA8B;AAC7B,QACCE,KAAK,EAAEC,IAAP,EAAaL,2BAAb,KACAlB,OAAO,CAACkB,2BAFT,EAGE;AACDG,MAAAA,cAAc,CAACG,IAAf,CAAqBF,KAAK,CAACjB,KAAN,CAAYJ,KAAjC;AACA;AACA;;AAED,QAAKqB,KAAK,EAAEjB,KAAP,EAAcoB,QAAnB,EAA8B;AAC7BN,MAAAA,WAAW,CAAEG,KAAK,CAACjB,KAAN,CAAYoB,QAAd,EAAwBJ,cAAxB,CAAX;AACA;AACD;;AAED,SAAOA,cAAP;AACA;;AAED,SAASK,eAAT,CAA0B;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,UAAR;AAAoBC,EAAAA;AAApB,CAA1B,EAA8D;AAC7D,SAAO,4BACNF,IADM,EAENC,UAFM,EAGNC,WAAW,CAACC,GAAZ,CAAiBJ,eAAjB,CAHM,CAAP;AAKA;;AAEM,SAASK,iBAAT,CAA4BX,MAAM,GAAG,EAArC,EAA0C;AAChDY,kCAAcC,WAAd,GAA4B,IAA5B;AACA,QAAMC,MAAM,GAAGf,WAAW,CACzB,CAAEb,KAAK,CAACC,OAAN,CAAea,MAAf,IAA0BA,MAA1B,GAAmC,CAAEA,MAAF,CAArC,EAAkDU,GAAlD,CAAuDJ,eAAvD,CADyB,CAA1B;AAGAM,kCAAcC,WAAd,GAA4B,KAA5B;AACA,SAAOC,MAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RawHTML } from '@wordpress/element';\nimport {\n\tchildren as childrenSource,\n\tgetSaveElement,\n\t__unstableGetBlockProps as getBlockProps,\n} from '@wordpress/blocks';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { getMultilineTag } from './utils';\n\nexport const Content = ( { value, tagName: Tag, multiline, ...props } ) => {\n\t// Handle deprecated `children` and `node` sources.\n\tif ( Array.isArray( value ) ) {\n\t\tdeprecated( 'wp.blockEditor.RichText value prop as children type', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.3',\n\t\t\talternative: 'value prop as string',\n\t\t\tlink: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',\n\t\t} );\n\n\t\tvalue = childrenSource.toHTML( value );\n\t}\n\n\tconst MultilineTag = getMultilineTag( multiline );\n\n\tif ( ! value && MultilineTag ) {\n\t\tvalue = `<${ MultilineTag }></${ MultilineTag }>`;\n\t}\n\n\tconst content = <RawHTML>{ value }</RawHTML>;\n\n\tif ( Tag ) {\n\t\tconst { format, ...restProps } = props;\n\t\treturn <Tag { ...restProps }>{ content }</Tag>;\n\t}\n\n\treturn content;\n};\n\nContent.__unstableIsRichTextContent = {};\n\nfunction findContent( blocks, richTextValues = [] ) {\n\tif ( ! Array.isArray( blocks ) ) {\n\t\tblocks = [ blocks ];\n\t}\n\n\tfor ( const block of blocks ) {\n\t\tif (\n\t\t\tblock?.type?.__unstableIsRichTextContent ===\n\t\t\tContent.__unstableIsRichTextContent\n\t\t) {\n\t\t\trichTextValues.push( block.props.value );\n\t\t\tcontinue;\n\t\t}\n\n\t\tif ( block?.props?.children ) {\n\t\t\tfindContent( block.props.children, richTextValues );\n\t\t}\n\t}\n\n\treturn richTextValues;\n}\n\nfunction _getSaveElement( { name, attributes, innerBlocks } ) {\n\treturn getSaveElement(\n\t\tname,\n\t\tattributes,\n\t\tinnerBlocks.map( _getSaveElement )\n\t);\n}\n\nexport function getRichTextValues( blocks = [] ) {\n\tgetBlockProps.skipFilters = true;\n\tconst values = findContent(\n\t\t( Array.isArray( blocks ) ? blocks : [ blocks ] ).map( _getSaveElement )\n\t);\n\tgetBlockProps.skipFilters = false;\n\treturn values;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/content.js"],"names":["Content","value","tagName","Tag","multiline","props","Array","isArray","since","version","alternative","link","childrenSource","toHTML","MultilineTag","content","format","restProps"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AAVA;AACA;AACA;;AAKA;AACA;AACA;AAGO,MAAMA,OAAO,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,OAAO,EAAEC,GAAlB;AAAuBC,EAAAA,SAAvB;AAAkC,KAAGC;AAArC,CAAF,KAAoD;AAC1E;AACA,MAAKC,KAAK,CAACC,OAAN,CAAeN,KAAf,CAAL,EAA8B;AAC7B,6BAAY,qDAAZ,EAAmE;AAClEO,MAAAA,KAAK,EAAE,KAD2D;AAElEC,MAAAA,OAAO,EAAE,KAFyD;AAGlEC,MAAAA,WAAW,EAAE,sBAHqD;AAIlEC,MAAAA,IAAI,EAAE;AAJ4D,KAAnE;AAOAV,IAAAA,KAAK,GAAGW,iBAAeC,MAAf,CAAuBZ,KAAvB,CAAR;AACA;;AAED,QAAMa,YAAY,GAAG,4BAAiBV,SAAjB,CAArB;;AAEA,MAAK,CAAEH,KAAF,IAAWa,YAAhB,EAA+B;AAC9Bb,IAAAA,KAAK,GAAI,IAAIa,YAAc,MAAMA,YAAc,GAA/C;AACA;;AAED,QAAMC,OAAO,GAAG,4BAAC,gBAAD,QAAWd,KAAX,CAAhB;;AAEA,MAAKE,GAAL,EAAW;AACV,UAAM;AAAEa,MAAAA,MAAF;AAAU,SAAGC;AAAb,QAA2BZ,KAAjC;AACA,WAAO,4BAAC,GAAD,OAAUY;AAAV,OAAwBF,OAAxB,CAAP;AACA;;AAED,SAAOA,OAAP;AACA,CA3BM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RawHTML } from '@wordpress/element';\nimport { children as childrenSource } from '@wordpress/blocks';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { getMultilineTag } from './utils';\n\nexport const Content = ( { value, tagName: Tag, multiline, ...props } ) => {\n\t// Handle deprecated `children` and `node` sources.\n\tif ( Array.isArray( value ) ) {\n\t\tdeprecated( 'wp.blockEditor.RichText value prop as children type', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.3',\n\t\t\talternative: 'value prop as string',\n\t\t\tlink: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',\n\t\t} );\n\n\t\tvalue = childrenSource.toHTML( value );\n\t}\n\n\tconst MultilineTag = getMultilineTag( multiline );\n\n\tif ( ! value && MultilineTag ) {\n\t\tvalue = `<${ MultilineTag }></${ MultilineTag }>`;\n\t}\n\n\tconst content = <RawHTML>{ value }</RawHTML>;\n\n\tif ( Tag ) {\n\t\tconst { format, ...restProps } = props;\n\t\treturn <Tag { ...restProps }>{ content }</Tag>;\n\t}\n\n\treturn content;\n};\n"]}

package/build/components/rich-text/get-rich-text-values.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRichTextValues = getRichTextValues;
+
+var _element = require("@wordpress/element");
+
+var _blocks = require("@wordpress/blocks");
+
+var _innerBlocks = _interopRequireDefault(require("../inner-blocks"));
+
+var _content = require("./content");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/*
+ * This function is similar to `@wordpress/element`'s `renderToString` function,
+ * except that it does not render the elements to a string, but instead collects
+ * the values of all rich text `Content` elements.
+ */
+function addValuesForElement(element, ...args) {
+  if (null === element || undefined === element || false === element) {
+    return;
+  }
+
+  if (Array.isArray(element)) {
+    return addValuesForElements(element, ...args);
+  }
+
+  switch (typeof element) {
+    case 'string':
+    case 'number':
+      return;
+  }
+
+  const {
+    type,
+    props
+  } = element;
+
+  switch (type) {
+    case _element.StrictMode:
+    case _element.Fragment:
+      return addValuesForElements(props.children, ...args);
+
+    case _element.RawHTML:
+      return;
+
+    case _innerBlocks.default.Content:
+      return addValuesForBlocks(...args);
+
+    case _content.Content:
+      const [values] = args;
+      values.push(props.value);
+      return;
+  }
+
+  switch (typeof type) {
+    case 'string':
+      if (typeof props.children !== 'undefined') {
+        return addValuesForElements(props.children, ...args);
+      }
+
+      return;
+
+    case 'function':
+      if (type.prototype && typeof type.prototype.render === 'function') {
+        return addValuesForElement(new type(props).render(), ...args);
+      }
+
+      return addValuesForElement(type(props), ...args);
+  }
+}
+
+function addValuesForElements(children, ...args) {
+  children = Array.isArray(children) ? children : [children];
+
+  for (let i = 0; i < children.length; i++) {
+    addValuesForElement(children[i], ...args);
+  }
+}
+
+function _getSaveElement(name, attributes, innerBlocks) {
+  return (0, _blocks.getSaveElement)(name, attributes, innerBlocks.map(block => _getSaveElement(block.name, block.attributes, block.innerBlocks)));
+}
+
+function addValuesForBlocks(values, blocks) {
+  for (let i = 0; i < blocks.length; i++) {
+    const {
+      name,
+      attributes,
+      innerBlocks
+    } = blocks[i];
+
+    const saveElement = _getSaveElement(name, attributes, innerBlocks);
+
+    addValuesForElement(saveElement, values, innerBlocks);
+  }
+}
+
+function getRichTextValues(blocks = []) {
+  _blocks.__unstableGetBlockProps.skipFilters = true;
+  const values = [];
+  addValuesForBlocks(values, blocks);
+  _blocks.__unstableGetBlockProps.skipFilters = false;
+  return values;
+}
+//# sourceMappingURL=get-rich-text-values.js.map

package/build/components/rich-text/get-rich-text-values.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/get-rich-text-values.js"],"names":["addValuesForElement","element","args","undefined","Array","isArray","addValuesForElements","type","props","StrictMode","Fragment","children","RawHTML","InnerBlocks","Content","addValuesForBlocks","values","push","value","prototype","render","i","length","_getSaveElement","name","attributes","innerBlocks","map","block","blocks","saveElement","getRichTextValues","getBlockProps","skipFilters"],"mappings":";;;;;;;;;AAGA;;AACA;;AAQA;;AACA;;AAbA;AACA;AACA;;AAOA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA,SAASA,mBAAT,CAA8BC,OAA9B,EAAuC,GAAGC,IAA1C,EAAiD;AAChD,MAAK,SAASD,OAAT,IAAoBE,SAAS,KAAKF,OAAlC,IAA6C,UAAUA,OAA5D,EAAsE;AACrE;AACA;;AAED,MAAKG,KAAK,CAACC,OAAN,CAAeJ,OAAf,CAAL,EAAgC;AAC/B,WAAOK,oBAAoB,CAAEL,OAAF,EAAW,GAAGC,IAAd,CAA3B;AACA;;AAED,UAAS,OAAOD,OAAhB;AACC,SAAK,QAAL;AACA,SAAK,QAAL;AACC;AAHF;;AAMA,QAAM;AAAEM,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBP,OAAxB;;AAEA,UAASM,IAAT;AACC,SAAKE,mBAAL;AACA,SAAKC,iBAAL;AACC,aAAOJ,oBAAoB,CAAEE,KAAK,CAACG,QAAR,EAAkB,GAAGT,IAArB,CAA3B;;AACD,SAAKU,gBAAL;AACC;;AACD,SAAKC,qBAAYC,OAAjB;AACC,aAAOC,kBAAkB,CAAE,GAAGb,IAAL,CAAzB;;AACD,SAAKY,gBAAL;AACC,YAAM,CAAEE,MAAF,IAAad,IAAnB;AACAc,MAAAA,MAAM,CAACC,IAAP,CAAaT,KAAK,CAACU,KAAnB;AACA;AAXF;;AAcA,UAAS,OAAOX,IAAhB;AACC,SAAK,QAAL;AACC,UAAK,OAAOC,KAAK,CAACG,QAAb,KAA0B,WAA/B,EAA6C;AAC5C,eAAOL,oBAAoB,CAAEE,KAAK,CAACG,QAAR,EAAkB,GAAGT,IAArB,CAA3B;AACA;;AACD;;AACD,SAAK,UAAL;AACC,UACCK,IAAI,CAACY,SAAL,IACA,OAAOZ,IAAI,CAACY,SAAL,CAAeC,MAAtB,KAAiC,UAFlC,EAGE;AACD,eAAOpB,mBAAmB,CACzB,IAAIO,IAAJ,CAAUC,KAAV,EAAkBY,MAAlB,EADyB,EAEzB,GAAGlB,IAFsB,CAA1B;AAIA;;AAED,aAAOF,mBAAmB,CAAEO,IAAI,CAAEC,KAAF,CAAN,EAAiB,GAAGN,IAApB,CAA1B;AAjBF;AAmBA;;AAED,SAASI,oBAAT,CAA+BK,QAA/B,EAAyC,GAAGT,IAA5C,EAAmD;AAClDS,EAAAA,QAAQ,GAAGP,KAAK,CAACC,OAAN,CAAeM,QAAf,IAA4BA,QAA5B,GAAuC,CAAEA,QAAF,CAAlD;;AAEA,OAAM,IAAIU,CAAC,GAAG,CAAd,EAAiBA,CAAC,GAAGV,QAAQ,CAACW,MAA9B,EAAsCD,CAAC,EAAvC,EAA4C;AAC3CrB,IAAAA,mBAAmB,CAAEW,QAAQ,CAAEU,CAAF,CAAV,EAAiB,GAAGnB,IAApB,CAAnB;AACA;AACD;;AAED,SAASqB,eAAT,CAA0BC,IAA1B,EAAgCC,UAAhC,EAA4CC,WAA5C,EAA0D;AACzD,SAAO,4BACNF,IADM,EAENC,UAFM,EAGNC,WAAW,CAACC,GAAZ,CAAmBC,KAAF,IAChBL,eAAe,CAAEK,KAAK,CAACJ,IAAR,EAAcI,KAAK,CAACH,UAApB,EAAgCG,KAAK,CAACF,WAAtC,CADhB,CAHM,CAAP;AAOA;;AAED,SAASX,kBAAT,CAA6BC,MAA7B,EAAqCa,MAArC,EAA8C;AAC7C,OAAM,IAAIR,CAAC,GAAG,CAAd,EAAiBA,CAAC,GAAGQ,MAAM,CAACP,MAA5B,EAAoCD,CAAC,EAArC,EAA0C;AACzC,UAAM;AAAEG,MAAAA,IAAF;AAAQC,MAAAA,UAAR;AAAoBC,MAAAA;AAApB,QAAoCG,MAAM,CAAER,CAAF,CAAhD;;AACA,UAAMS,WAAW,GAAGP,eAAe,CAAEC,IAAF,EAAQC,UAAR,EAAoBC,WAApB,CAAnC;;AACA1B,IAAAA,mBAAmB,CAAE8B,WAAF,EAAed,MAAf,EAAuBU,WAAvB,CAAnB;AACA;AACD;;AAEM,SAASK,iBAAT,CAA4BF,MAAM,GAAG,EAArC,EAA0C;AAChDG,kCAAcC,WAAd,GAA4B,IAA5B;AACA,QAAMjB,MAAM,GAAG,EAAf;AACAD,EAAAA,kBAAkB,CAAEC,MAAF,EAAUa,MAAV,CAAlB;AACAG,kCAAcC,WAAd,GAA4B,KAA5B;AACA,SAAOjB,MAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RawHTML, StrictMode, Fragment } from '@wordpress/element';\nimport {\n\tgetSaveElement,\n\t__unstableGetBlockProps as getBlockProps,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport InnerBlocks from '../inner-blocks';\nimport { Content } from './content';\n\n/*\n * This function is similar to `@wordpress/element`'s `renderToString` function,\n * except that it does not render the elements to a string, but instead collects\n * the values of all rich text `Content` elements.\n */\nfunction addValuesForElement( element, ...args ) {\n\tif ( null === element || undefined === element || false === element ) {\n\t\treturn;\n\t}\n\n\tif ( Array.isArray( element ) ) {\n\t\treturn addValuesForElements( element, ...args );\n\t}\n\n\tswitch ( typeof element ) {\n\t\tcase 'string':\n\t\tcase 'number':\n\t\t\treturn;\n\t}\n\n\tconst { type, props } = element;\n\n\tswitch ( type ) {\n\t\tcase StrictMode:\n\t\tcase Fragment:\n\t\t\treturn addValuesForElements( props.children, ...args );\n\t\tcase RawHTML:\n\t\t\treturn;\n\t\tcase InnerBlocks.Content:\n\t\t\treturn addValuesForBlocks( ...args );\n\t\tcase Content:\n\t\t\tconst [ values ] = args;\n\t\t\tvalues.push( props.value );\n\t\t\treturn;\n\t}\n\n\tswitch ( typeof type ) {\n\t\tcase 'string':\n\t\t\tif ( typeof props.children !== 'undefined' ) {\n\t\t\t\treturn addValuesForElements( props.children, ...args );\n\t\t\t}\n\t\t\treturn;\n\t\tcase 'function':\n\t\t\tif (\n\t\t\t\ttype.prototype &&\n\t\t\t\ttypeof type.prototype.render === 'function'\n\t\t\t) {\n\t\t\t\treturn addValuesForElement(\n\t\t\t\t\tnew type( props ).render(),\n\t\t\t\t\t...args\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn addValuesForElement( type( props ), ...args );\n\t}\n}\n\nfunction addValuesForElements( children, ...args ) {\n\tchildren = Array.isArray( children ) ? children : [ children ];\n\n\tfor ( let i = 0; i < children.length; i++ ) {\n\t\taddValuesForElement( children[ i ], ...args );\n\t}\n}\n\nfunction _getSaveElement( name, attributes, innerBlocks ) {\n\treturn getSaveElement(\n\t\tname,\n\t\tattributes,\n\t\tinnerBlocks.map( ( block ) =>\n\t\t\t_getSaveElement( block.name, block.attributes, block.innerBlocks )\n\t\t)\n\t);\n}\n\nfunction addValuesForBlocks( values, blocks ) {\n\tfor ( let i = 0; i < blocks.length; i++ ) {\n\t\tconst { name, attributes, innerBlocks } = blocks[ i ];\n\t\tconst saveElement = _getSaveElement( name, attributes, innerBlocks );\n\t\taddValuesForElement( saveElement, values, innerBlocks );\n\t}\n}\n\nexport function getRichTextValues( blocks = [] ) {\n\tgetBlockProps.skipFilters = true;\n\tconst values = [];\n\taddValuesForBlocks( values, blocks );\n\tgetBlockProps.skipFilters = false;\n\treturn values;\n}\n"]}

package/build/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -22,7 +22,7 @@ function useSpacingSizes() {
   const spacingSizes = [{
     name: 0,
     slug: '0',
-    side: 0
+    size: 0
   }, ...((0, _useSetting.default)('spacing.spacingSizes') || [])];
 
   if (spacingSizes.length > 8) {

package/build/components/spacing-sizes-control/hooks/use-spacing-sizes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js"],"names":["useSpacingSizes","spacingSizes","name","slug","side","length","unshift","size","undefined"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,eAAT,GAA2B;AACzC,QAAMC,YAAY,GAAG,CACpB;AAAEC,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,IAAI,EAAE,GAAjB;AAAsBC,IAAAA,IAAI,EAAE;AAA5B,GADoB,EAEpB,IAAK,yBAAY,sBAAZ,KAAwC,EAA7C,CAFoB,CAArB;;AAKA,MAAKH,YAAY,CAACI,MAAb,GAAsB,CAA3B,EAA+B;AAC9BJ,IAAAA,YAAY,CAACK,OAAb,CAAsB;AACrBJ,MAAAA,IAAI,EAAE,cAAI,SAAJ,CADe;AAErBC,MAAAA,IAAI,EAAE,SAFe;AAGrBI,MAAAA,IAAI,EAAEC;AAHe,KAAtB;AAKA;;AAED,SAAOP,YAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../../use-setting';\n\nexport default function useSpacingSizes() {\n\tconst spacingSizes = [\n\t\t{ name: 0, slug: '0', side: 0 },\n\t\t...( useSetting( 'spacing.spacingSizes' ) || [] ),\n\t];\n\n\tif ( spacingSizes.length > 8 ) {\n\t\tspacingSizes.unshift( {\n\t\t\tname: __( 'Default' ),\n\t\t\tslug: 'default',\n\t\t\tsize: undefined,\n\t\t} );\n\t}\n\n\treturn spacingSizes;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js"],"names":["useSpacingSizes","spacingSizes","name","slug","size","length","unshift","undefined"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,eAAT,GAA2B;AACzC,QAAMC,YAAY,GAAG,CACpB;AAAEC,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,IAAI,EAAE,GAAjB;AAAsBC,IAAAA,IAAI,EAAE;AAA5B,GADoB,EAEpB,IAAK,yBAAY,sBAAZ,KAAwC,EAA7C,CAFoB,CAArB;;AAKA,MAAKH,YAAY,CAACI,MAAb,GAAsB,CAA3B,EAA+B;AAC9BJ,IAAAA,YAAY,CAACK,OAAb,CAAsB;AACrBJ,MAAAA,IAAI,EAAE,cAAI,SAAJ,CADe;AAErBC,MAAAA,IAAI,EAAE,SAFe;AAGrBC,MAAAA,IAAI,EAAEG;AAHe,KAAtB;AAKA;;AAED,SAAON,YAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../../use-setting';\n\nexport default function useSpacingSizes() {\n\tconst spacingSizes = [\n\t\t{ name: 0, slug: '0', size: 0 },\n\t\t...( useSetting( 'spacing.spacingSizes' ) || [] ),\n\t];\n\n\tif ( spacingSizes.length > 8 ) {\n\t\tspacingSizes.unshift( {\n\t\t\tname: __( 'Default' ),\n\t\t\tslug: 'default',\n\t\t\tsize: undefined,\n\t\t} );\n\t}\n\n\treturn spacingSizes;\n}\n"]}

package/build/components/spacing-sizes-control/input-controls/axial.js

@@ -31,9 +31,13 @@ function AxialInputControls({
   const createHandleOnChange = side => next => {
     if (!onChange) {
       return;
-    }
+    } // Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+
 
-    const nextValues = { ...values
+    const nextValues = { ...Object.keys(values).reduce((acc, key) => {
+        acc[key] = (0, _utils.getPresetValueFromCustomValue)(values[key], spacingSizes);
+        return acc;
+      }, {})
     };
 
     if (side === 'vertical') {

package/build/components/spacing-sizes-control/input-controls/axial.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls/axial.js"],"names":["groupedSides","AxialInputControls","minimumCustomValue","onChange","onMouseOut","onMouseOver","sides","spacingSizes","type","values","createHandleOnChange","side","next","nextValues","top","bottom","left","right","filteredSides","length","filter","map","axisValue","ICONS","LABELS"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,MAAMA,YAAY,GAAG,CAAE,UAAF,EAAc,YAAd,CAArB;;AAEe,SAASC,kBAAT,CAA6B;AAC3CC,EAAAA,kBAD2C;AAE3CC,EAAAA,QAF2C;AAG3CC,EAAAA,UAH2C;AAI3CC,EAAAA,WAJ2C;AAK3CC,EAAAA,KAL2C;AAM3CC,EAAAA,YAN2C;AAO3CC,EAAAA,IAP2C;AAQ3CC,EAAAA;AAR2C,CAA7B,EASX;AACH,QAAMC,oBAAoB,GAAKC,IAAF,IAAcC,IAAF,IAAY;AACpD,QAAK,CAAET,QAAP,EAAkB;AACjB;AACA;;AACD,UAAMU,UAAU,GAAG,EAAE,GAAGJ;AAAL,KAAnB;;AAEA,QAAKE,IAAI,KAAK,UAAd,EAA2B;AAC1BE,MAAAA,UAAU,CAACC,GAAX,GAAiBF,IAAjB;AACAC,MAAAA,UAAU,CAACE,MAAX,GAAoBH,IAApB;AACA;;AAED,QAAKD,IAAI,KAAK,YAAd,EAA6B;AAC5BE,MAAAA,UAAU,CAACG,IAAX,GAAkBJ,IAAlB;AACAC,MAAAA,UAAU,CAACI,KAAX,GAAmBL,IAAnB;AACA;;AAEDT,IAAAA,QAAQ,CAAEU,UAAF,CAAR;AACA,GAjBD,CADG,CAoBH;;;AACA,QAAMK,aAAa,GAAGZ,KAAK,EAAEa,MAAP,GACnBnB,YAAY,CAACoB,MAAb,CAAuBT,IAAF,IAAY,2BAAgBL,KAAhB,EAAuBK,IAAvB,CAAjC,CADmB,GAEnBX,YAFH;AAIA,SACC,qDACGkB,aAAa,CAACG,GAAd,CAAqBV,IAAF,IAAY;AAChC,UAAMW,SAAS,GACdX,IAAI,KAAK,UAAT,GAAsBF,MAAM,CAACK,GAA7B,GAAmCL,MAAM,CAACO,IAD3C;AAEA,WACC,4BAAC,4BAAD;AACC,MAAA,GAAG,EAAI,yBAAyBL,IAAM,EADvC;AAEC,MAAA,IAAI,EAAGY,aAAOZ,IAAP,CAFR;AAGC,MAAA,KAAK,EAAGa,cAAQb,IAAR,CAHT;AAIC,MAAA,kBAAkB,EAAGT,kBAJtB;AAKC,MAAA,QAAQ,EAAGQ,oBAAoB,CAAEC,IAAF,CALhC;AAMC,MAAA,UAAU,EAAGP,UANd;AAOC,MAAA,WAAW,EAAGC,WAPf;AAQC,MAAA,IAAI,EAAGM,IARR;AASC,MAAA,YAAY,EAAGJ,YAThB;AAUC,MAAA,IAAI,EAAGC,IAVR;AAWC,MAAA,KAAK,EAAGc,SAXT;AAYC,MAAA,cAAc,EAAG;AAZlB,MADD;AAgBA,GAnBC,CADH,CADD;AAwBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport { LABELS, ICONS, hasAxisSupport } from '../utils';\n\nconst groupedSides = [ 'vertical', 'horizontal' ];\n\nexport default function AxialInputControls( {\n\tminimumCustomValue,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tsides,\n\tspacingSizes,\n\ttype,\n\tvalues,\n} ) {\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = next;\n\t\t\tnextValues.bottom = next;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = next;\n\t\t\tnextValues.right = next;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => hasAxisSupport( sides, side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst axisValue =\n\t\t\t\t\tside === 'vertical' ? values.top : values.left;\n\t\t\t\treturn (\n\t\t\t\t\t<SpacingInputControl\n\t\t\t\t\t\tkey={ `spacing-sizes-control-${ side }` }\n\t\t\t\t\t\ticon={ ICONS[ side ] }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\t\tside={ side }\n\t\t\t\t\t\tspacingSizes={ spacingSizes }\n\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\tvalue={ axisValue }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls/axial.js"],"names":["groupedSides","AxialInputControls","minimumCustomValue","onChange","onMouseOut","onMouseOver","sides","spacingSizes","type","values","createHandleOnChange","side","next","nextValues","Object","keys","reduce","acc","key","top","bottom","left","right","filteredSides","length","filter","map","axisValue","ICONS","LABELS"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AASA,MAAMA,YAAY,GAAG,CAAE,UAAF,EAAc,YAAd,CAArB;;AAEe,SAASC,kBAAT,CAA6B;AAC3CC,EAAAA,kBAD2C;AAE3CC,EAAAA,QAF2C;AAG3CC,EAAAA,UAH2C;AAI3CC,EAAAA,WAJ2C;AAK3CC,EAAAA,KAL2C;AAM3CC,EAAAA,YAN2C;AAO3CC,EAAAA,IAP2C;AAQ3CC,EAAAA;AAR2C,CAA7B,EASX;AACH,QAAMC,oBAAoB,GAAKC,IAAF,IAAcC,IAAF,IAAY;AACpD,QAAK,CAAET,QAAP,EAAkB;AACjB;AACA,KAHmD,CAKpD;;;AACA,UAAMU,UAAU,GAAG,EAClB,GAAGC,MAAM,CAACC,IAAP,CAAaN,MAAb,EAAsBO,MAAtB,CAA8B,CAAEC,GAAF,EAAOC,GAAP,KAAgB;AAChDD,QAAAA,GAAG,CAAEC,GAAF,CAAH,GAAa,0CACZT,MAAM,CAAES,GAAF,CADM,EAEZX,YAFY,CAAb;AAIA,eAAOU,GAAP;AACA,OANE,EAMA,EANA;AADe,KAAnB;;AAUA,QAAKN,IAAI,KAAK,UAAd,EAA2B;AAC1BE,MAAAA,UAAU,CAACM,GAAX,GAAiBP,IAAjB;AACAC,MAAAA,UAAU,CAACO,MAAX,GAAoBR,IAApB;AACA;;AAED,QAAKD,IAAI,KAAK,YAAd,EAA6B;AAC5BE,MAAAA,UAAU,CAACQ,IAAX,GAAkBT,IAAlB;AACAC,MAAAA,UAAU,CAACS,KAAX,GAAmBV,IAAnB;AACA;;AAEDT,IAAAA,QAAQ,CAAEU,UAAF,CAAR;AACA,GA3BD,CADG,CA8BH;;;AACA,QAAMU,aAAa,GAAGjB,KAAK,EAAEkB,MAAP,GACnBxB,YAAY,CAACyB,MAAb,CAAuBd,IAAF,IAAY,2BAAgBL,KAAhB,EAAuBK,IAAvB,CAAjC,CADmB,GAEnBX,YAFH;AAIA,SACC,qDACGuB,aAAa,CAACG,GAAd,CAAqBf,IAAF,IAAY;AAChC,UAAMgB,SAAS,GACdhB,IAAI,KAAK,UAAT,GAAsBF,MAAM,CAACU,GAA7B,GAAmCV,MAAM,CAACY,IAD3C;AAEA,WACC,4BAAC,4BAAD;AACC,MAAA,GAAG,EAAI,yBAAyBV,IAAM,EADvC;AAEC,MAAA,IAAI,EAAGiB,aAAOjB,IAAP,CAFR;AAGC,MAAA,KAAK,EAAGkB,cAAQlB,IAAR,CAHT;AAIC,MAAA,kBAAkB,EAAGT,kBAJtB;AAKC,MAAA,QAAQ,EAAGQ,oBAAoB,CAAEC,IAAF,CALhC;AAMC,MAAA,UAAU,EAAGP,UANd;AAOC,MAAA,WAAW,EAAGC,WAPf;AAQC,MAAA,IAAI,EAAGM,IARR;AASC,MAAA,YAAY,EAAGJ,YAThB;AAUC,MAAA,IAAI,EAAGC,IAVR;AAWC,MAAA,KAAK,EAAGmB,SAXT;AAYC,MAAA,cAAc,EAAG;AAZlB,MADD;AAgBA,GAnBC,CADH,CADD;AAwBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport {\n\tLABELS,\n\tICONS,\n\tgetPresetValueFromCustomValue,\n\thasAxisSupport,\n} from '../utils';\n\nconst groupedSides = [ 'vertical', 'horizontal' ];\n\nexport default function AxialInputControls( {\n\tminimumCustomValue,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tsides,\n\tspacingSizes,\n\ttype,\n\tvalues,\n} ) {\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.\n\t\tconst nextValues = {\n\t\t\t...Object.keys( values ).reduce( ( acc, key ) => {\n\t\t\t\tacc[ key ] = getPresetValueFromCustomValue(\n\t\t\t\t\tvalues[ key ],\n\t\t\t\t\tspacingSizes\n\t\t\t\t);\n\t\t\t\treturn acc;\n\t\t\t}, {} ),\n\t\t};\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = next;\n\t\t\tnextValues.bottom = next;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = next;\n\t\t\tnextValues.right = next;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => hasAxisSupport( sides, side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst axisValue =\n\t\t\t\t\tside === 'vertical' ? values.top : values.left;\n\t\t\t\treturn (\n\t\t\t\t\t<SpacingInputControl\n\t\t\t\t\t\tkey={ `spacing-sizes-control-${ side }` }\n\t\t\t\t\t\ticon={ ICONS[ side ] }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\t\tside={ side }\n\t\t\t\t\t\tspacingSizes={ spacingSizes }\n\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\tvalue={ axisValue }\n\t\t\t\t\t\twithInputField={ false }\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/spacing-sizes-control/input-controls/separated.js

@@ -30,7 +30,11 @@ function SeparatedInputControls({
   const filteredSides = sides?.length ? _utils.ALL_SIDES.filter(side => sides.includes(side)) : _utils.ALL_SIDES;
 
   const createHandleOnChange = side => next => {
-    const nextValues = { ...values
+    // Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+    const nextValues = { ...Object.keys(values).reduce((acc, key) => {
+        acc[key] = (0, _utils.getPresetValueFromCustomValue)(values[key], spacingSizes);
+        return acc;
+      }, {})
     };
     nextValues[side] = next;
     onChange(nextValues);

package/build/components/spacing-sizes-control/input-controls/separated.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls/separated.js"],"names":["SeparatedInputControls","minimumCustomValue","onChange","onMouseOut","onMouseOver","sides","spacingSizes","type","values","filteredSides","length","ALL_SIDES","filter","side","includes","createHandleOnChange","next","nextValues","map","ICONS","LABELS"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIe,SAASA,sBAAT,CAAiC;AAC/CC,EAAAA,kBAD+C;AAE/CC,EAAAA,QAF+C;AAG/CC,EAAAA,UAH+C;AAI/CC,EAAAA,WAJ+C;AAK/CC,EAAAA,KAL+C;AAM/CC,EAAAA,YAN+C;AAO/CC,EAAAA,IAP+C;AAQ/CC,EAAAA;AAR+C,CAAjC,EASX;AACH;AACA,QAAMC,aAAa,GAAGJ,KAAK,EAAEK,MAAP,GACnBC,iBAAUC,MAAV,CAAoBC,IAAF,IAAYR,KAAK,CAACS,QAAN,CAAgBD,IAAhB,CAA9B,CADmB,GAEnBF,gBAFH;;AAIA,QAAMI,oBAAoB,GAAKF,IAAF,IAAcG,IAAF,IAAY;AACpD,UAAMC,UAAU,GAAG,EAAE,GAAGT;AAAL,KAAnB;AACAS,IAAAA,UAAU,CAAEJ,IAAF,CAAV,GAAqBG,IAArB;AAEAd,IAAAA,QAAQ,CAAEe,UAAF,CAAR;AACA,GALD;;AAOA,SACC,qDACGR,aAAa,CAACS,GAAd,CAAqBL,IAAF,IAAY;AAChC,WACC,4BAAC,4BAAD;AACC,MAAA,GAAG,EAAI,yBAAyBA,IAAM,EADvC;AAEC,MAAA,IAAI,EAAGM,aAAON,IAAP,CAFR;AAGC,MAAA,KAAK,EAAGO,cAAQP,IAAR,CAHT;AAIC,MAAA,kBAAkB,EAAGZ,kBAJtB;AAKC,MAAA,QAAQ,EAAGc,oBAAoB,CAAEF,IAAF,CALhC;AAMC,MAAA,UAAU,EAAGV,UANd;AAOC,MAAA,WAAW,EAAGC,WAPf;AAQC,MAAA,IAAI,EAAGS,IARR;AASC,MAAA,YAAY,EAAGP,YAThB;AAUC,MAAA,IAAI,EAAGC,IAVR;AAWC,MAAA,KAAK,EAAGC,MAAM,CAAEK,IAAF,CAXf;AAYC,MAAA,cAAc,EAAG;AAZlB,MADD;AAgBA,GAjBC,CADH,CADD;AAsBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport { ALL_SIDES, LABELS, ICONS } from '../utils';\n\nexport default function SeparatedInputControls( {\n\tminimumCustomValue,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tsides,\n\tspacingSizes,\n\ttype,\n\tvalues,\n} ) {\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tconst nextValues = { ...values };\n\t\tnextValues[ side ] = next;\n\n\t\tonChange( nextValues );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<SpacingInputControl\n\t\t\t\t\t\tkey={ `spacing-sizes-control-${ side }` }\n\t\t\t\t\t\ticon={ ICONS[ side ] }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\t\tside={ side }\n\t\t\t\t\t\tspacingSizes={ spacingSizes }\n\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\tvalue={ values[ side ] }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls/separated.js"],"names":["SeparatedInputControls","minimumCustomValue","onChange","onMouseOut","onMouseOver","sides","spacingSizes","type","values","filteredSides","length","ALL_SIDES","filter","side","includes","createHandleOnChange","next","nextValues","Object","keys","reduce","acc","key","map","ICONS","LABELS"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AASe,SAASA,sBAAT,CAAiC;AAC/CC,EAAAA,kBAD+C;AAE/CC,EAAAA,QAF+C;AAG/CC,EAAAA,UAH+C;AAI/CC,EAAAA,WAJ+C;AAK/CC,EAAAA,KAL+C;AAM/CC,EAAAA,YAN+C;AAO/CC,EAAAA,IAP+C;AAQ/CC,EAAAA;AAR+C,CAAjC,EASX;AACH;AACA,QAAMC,aAAa,GAAGJ,KAAK,EAAEK,MAAP,GACnBC,iBAAUC,MAAV,CAAoBC,IAAF,IAAYR,KAAK,CAACS,QAAN,CAAgBD,IAAhB,CAA9B,CADmB,GAEnBF,gBAFH;;AAIA,QAAMI,oBAAoB,GAAKF,IAAF,IAAcG,IAAF,IAAY;AACpD;AACA,UAAMC,UAAU,GAAG,EAClB,GAAGC,MAAM,CAACC,IAAP,CAAaX,MAAb,EAAsBY,MAAtB,CAA8B,CAAEC,GAAF,EAAOC,GAAP,KAAgB;AAChDD,QAAAA,GAAG,CAAEC,GAAF,CAAH,GAAa,0CACZd,MAAM,CAAEc,GAAF,CADM,EAEZhB,YAFY,CAAb;AAIA,eAAOe,GAAP;AACA,OANE,EAMA,EANA;AADe,KAAnB;AAUAJ,IAAAA,UAAU,CAAEJ,IAAF,CAAV,GAAqBG,IAArB;AAEAd,IAAAA,QAAQ,CAAEe,UAAF,CAAR;AACA,GAfD;;AAiBA,SACC,qDACGR,aAAa,CAACc,GAAd,CAAqBV,IAAF,IAAY;AAChC,WACC,4BAAC,4BAAD;AACC,MAAA,GAAG,EAAI,yBAAyBA,IAAM,EADvC;AAEC,MAAA,IAAI,EAAGW,aAAOX,IAAP,CAFR;AAGC,MAAA,KAAK,EAAGY,cAAQZ,IAAR,CAHT;AAIC,MAAA,kBAAkB,EAAGZ,kBAJtB;AAKC,MAAA,QAAQ,EAAGc,oBAAoB,CAAEF,IAAF,CALhC;AAMC,MAAA,UAAU,EAAGV,UANd;AAOC,MAAA,WAAW,EAAGC,WAPf;AAQC,MAAA,IAAI,EAAGS,IARR;AASC,MAAA,YAAY,EAAGP,YAThB;AAUC,MAAA,IAAI,EAAGC,IAVR;AAWC,MAAA,KAAK,EAAGC,MAAM,CAAEK,IAAF,CAXf;AAYC,MAAA,cAAc,EAAG;AAZlB,MADD;AAgBA,GAjBC,CADH,CADD;AAsBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport {\n\tALL_SIDES,\n\tLABELS,\n\tICONS,\n\tgetPresetValueFromCustomValue,\n} from '../utils';\n\nexport default function SeparatedInputControls( {\n\tminimumCustomValue,\n\tonChange,\n\tonMouseOut,\n\tonMouseOver,\n\tsides,\n\tspacingSizes,\n\ttype,\n\tvalues,\n} ) {\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\t// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.\n\t\tconst nextValues = {\n\t\t\t...Object.keys( values ).reduce( ( acc, key ) => {\n\t\t\t\tacc[ key ] = getPresetValueFromCustomValue(\n\t\t\t\t\tvalues[ key ],\n\t\t\t\t\tspacingSizes\n\t\t\t\t);\n\t\t\t\treturn acc;\n\t\t\t}, {} ),\n\t\t};\n\n\t\tnextValues[ side ] = next;\n\n\t\tonChange( nextValues );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<SpacingInputControl\n\t\t\t\t\t\tkey={ `spacing-sizes-control-${ side }` }\n\t\t\t\t\t\ticon={ ICONS[ side ] }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\t\tside={ side }\n\t\t\t\t\t\tspacingSizes={ spacingSizes }\n\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\tvalue={ values[ side ] }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}