@wordpress/block-editor 15.6.1 → 15.7.0

package/build/components/global-styles/utils.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,165 +15,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
-  PRESET_METADATA: () => PRESET_METADATA,
-  ROOT_BLOCK_SELECTOR: () => ROOT_BLOCK_SELECTOR,
-  ROOT_CSS_PROPERTIES_SELECTOR: () => ROOT_CSS_PROPERTIES_SELECTOR,
-  STYLE_PATH_TO_CSS_VAR_INFIX: () => STYLE_PATH_TO_CSS_VAR_INFIX,
-  STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE: () => STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
-  appendToSelector: () => appendToSelector,
-  areGlobalStyleConfigsEqual: () => areGlobalStyleConfigsEqual,
-  getBlockStyleVariationSelector: () => getBlockStyleVariationSelector,
-  getPresetVariableFromValue: () => getPresetVariableFromValue,
-  getResolvedRefValue: () => getResolvedRefValue,
-  getResolvedThemeFilePath: () => getResolvedThemeFilePath,
-  getResolvedValue: () => getResolvedValue,
-  getValueFromVariable: () => getValueFromVariable,
-  scopeFeatureSelectors: () => scopeFeatureSelectors,
   scopeSelector: () => scopeSelector,
   useToolsPanelDropdownMenuProps: () => useToolsPanelDropdownMenuProps
 });
 module.exports = __toCommonJS(utils_exports);
-var import_es6 = __toESM(require("fast-deep-equal/es6"));
 var import_compose = require("@wordpress/compose");
-var import_style_engine = require("@wordpress/style-engine");
-var import_typography_utils = require("./typography-utils");
-var import_object = require("../../utils/object");
-const ROOT_BLOCK_SELECTOR = "body";
-const ROOT_CSS_PROPERTIES_SELECTOR = ":root";
-const PRESET_METADATA = [
-  {
-    path: ["color", "palette"],
-    valueKey: "color",
-    cssVarInfix: "color",
-    classes: [
-      { classSuffix: "color", propertyName: "color" },
-      {
-        classSuffix: "background-color",
-        propertyName: "background-color"
-      },
-      {
-        classSuffix: "border-color",
-        propertyName: "border-color"
-      }
-    ]
-  },
-  {
-    path: ["color", "gradients"],
-    valueKey: "gradient",
-    cssVarInfix: "gradient",
-    classes: [
-      {
-        classSuffix: "gradient-background",
-        propertyName: "background"
-      }
-    ]
-  },
-  {
-    path: ["color", "duotone"],
-    valueKey: "colors",
-    cssVarInfix: "duotone",
-    valueFunc: ({ slug }) => `url( '#wp-duotone-${slug}' )`,
-    classes: []
-  },
-  {
-    path: ["shadow", "presets"],
-    valueKey: "shadow",
-    cssVarInfix: "shadow",
-    classes: []
-  },
-  {
-    path: ["typography", "fontSizes"],
-    valueFunc: (preset, settings) => (0, import_typography_utils.getTypographyFontSizeValue)(preset, settings),
-    valueKey: "size",
-    cssVarInfix: "font-size",
-    classes: [{ classSuffix: "font-size", propertyName: "font-size" }]
-  },
-  {
-    path: ["typography", "fontFamilies"],
-    valueKey: "fontFamily",
-    cssVarInfix: "font-family",
-    classes: [
-      { classSuffix: "font-family", propertyName: "font-family" }
-    ]
-  },
-  {
-    path: ["spacing", "spacingSizes"],
-    valueKey: "size",
-    cssVarInfix: "spacing",
-    classes: []
-  },
-  {
-    path: ["border", "radiusSizes"],
-    valueKey: "size",
-    cssVarInfix: "border-radius",
-    classes: []
-  }
-];
-const STYLE_PATH_TO_CSS_VAR_INFIX = {
-  "color.background": "color",
-  "color.text": "color",
-  "filter.duotone": "duotone",
-  "elements.link.color.text": "color",
-  "elements.link.:hover.color.text": "color",
-  "elements.link.typography.fontFamily": "font-family",
-  "elements.link.typography.fontSize": "font-size",
-  "elements.button.color.text": "color",
-  "elements.button.color.background": "color",
-  "elements.caption.color.text": "color",
-  "elements.button.typography.fontFamily": "font-family",
-  "elements.button.typography.fontSize": "font-size",
-  "elements.heading.color": "color",
-  "elements.heading.color.background": "color",
-  "elements.heading.typography.fontFamily": "font-family",
-  "elements.heading.gradient": "gradient",
-  "elements.heading.color.gradient": "gradient",
-  "elements.h1.color": "color",
-  "elements.h1.color.background": "color",
-  "elements.h1.typography.fontFamily": "font-family",
-  "elements.h1.color.gradient": "gradient",
-  "elements.h2.color": "color",
-  "elements.h2.color.background": "color",
-  "elements.h2.typography.fontFamily": "font-family",
-  "elements.h2.color.gradient": "gradient",
-  "elements.h3.color": "color",
-  "elements.h3.color.background": "color",
-  "elements.h3.typography.fontFamily": "font-family",
-  "elements.h3.color.gradient": "gradient",
-  "elements.h4.color": "color",
-  "elements.h4.color.background": "color",
-  "elements.h4.typography.fontFamily": "font-family",
-  "elements.h4.color.gradient": "gradient",
-  "elements.h5.color": "color",
-  "elements.h5.color.background": "color",
-  "elements.h5.typography.fontFamily": "font-family",
-  "elements.h5.color.gradient": "gradient",
-  "elements.h6.color": "color",
-  "elements.h6.color.background": "color",
-  "elements.h6.typography.fontFamily": "font-family",
-  "elements.h6.color.gradient": "gradient",
-  "color.gradient": "gradient",
-  shadow: "shadow",
-  "typography.fontSize": "font-size",
-  "typography.fontFamily": "font-family"
-};
-const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
-  "color.background": "backgroundColor",
-  "color.text": "textColor",
-  "color.gradient": "gradient",
-  "typography.fontSize": "fontSize",
-  "typography.fontFamily": "fontFamily"
-};
 function useToolsPanelDropdownMenuProps() {
   const isMobile = (0, import_compose.useViewportMatch)("medium", "<");
   return !isMobile ? {
@@ -186,143 +33,6 @@ function useToolsPanelDropdownMenuProps() {
     }
   } : {};
 }
-function findInPresetsBy(features, blockName, presetPath, presetProperty, presetValueValue) {
-  const orderedPresetsByOrigin = [
-    (0, import_object.getValueFromObjectPath)(features, [
-      "blocks",
-      blockName,
-      ...presetPath
-    ]),
-    (0, import_object.getValueFromObjectPath)(features, presetPath)
-  ];
-  for (const presetByOrigin of orderedPresetsByOrigin) {
-    if (presetByOrigin) {
-      const origins = ["custom", "theme", "default"];
-      for (const origin of origins) {
-        const presets = presetByOrigin[origin];
-        if (presets) {
-          const presetObject = presets.find(
-            (preset) => preset[presetProperty] === presetValueValue
-          );
-          if (presetObject) {
-            if (presetProperty === "slug") {
-              return presetObject;
-            }
-            const highestPresetObjectWithSameSlug = findInPresetsBy(
-              features,
-              blockName,
-              presetPath,
-              "slug",
-              presetObject.slug
-            );
-            if (highestPresetObjectWithSameSlug[presetProperty] === presetObject[presetProperty]) {
-              return presetObject;
-            }
-            return void 0;
-          }
-        }
-      }
-    }
-  }
-}
-function getPresetVariableFromValue(features, blockName, variableStylePath, presetPropertyValue) {
-  if (!presetPropertyValue) {
-    return presetPropertyValue;
-  }
-  const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[variableStylePath];
-  const metadata = PRESET_METADATA.find(
-    (data) => data.cssVarInfix === cssVarInfix
-  );
-  if (!metadata) {
-    return presetPropertyValue;
-  }
-  const { valueKey, path } = metadata;
-  const presetObject = findInPresetsBy(
-    features,
-    blockName,
-    path,
-    valueKey,
-    presetPropertyValue
-  );
-  if (!presetObject) {
-    return presetPropertyValue;
-  }
-  return `var:preset|${cssVarInfix}|${presetObject.slug}`;
-}
-function getValueFromPresetVariable(features, blockName, variable, [presetType, slug]) {
-  const metadata = PRESET_METADATA.find(
-    (data) => data.cssVarInfix === presetType
-  );
-  if (!metadata) {
-    return variable;
-  }
-  const presetObject = findInPresetsBy(
-    features.settings,
-    blockName,
-    metadata.path,
-    "slug",
-    slug
-  );
-  if (presetObject) {
-    const { valueKey } = metadata;
-    const result = presetObject[valueKey];
-    return getValueFromVariable(features, blockName, result);
-  }
-  return variable;
-}
-function getValueFromCustomVariable(features, blockName, variable, path) {
-  const result = (0, import_object.getValueFromObjectPath)(features.settings, [
-    "blocks",
-    blockName,
-    "custom",
-    ...path
-  ]) ?? (0, import_object.getValueFromObjectPath)(features.settings, ["custom", ...path]);
-  if (!result) {
-    return variable;
-  }
-  return getValueFromVariable(features, blockName, result);
-}
-function getValueFromVariable(features, blockName, variable) {
-  if (!variable || typeof variable !== "string") {
-    if (typeof variable?.ref === "string") {
-      variable = (0, import_object.getValueFromObjectPath)(features, variable.ref);
-      if (!variable || !!variable?.ref) {
-        return variable;
-      }
-    } else {
-      return variable;
-    }
-  }
-  const USER_VALUE_PREFIX = "var:";
-  const THEME_VALUE_PREFIX = "var(--wp--";
-  const THEME_VALUE_SUFFIX = ")";
-  let parsedVar;
-  if (variable.startsWith(USER_VALUE_PREFIX)) {
-    parsedVar = variable.slice(USER_VALUE_PREFIX.length).split("|");
-  } else if (variable.startsWith(THEME_VALUE_PREFIX) && variable.endsWith(THEME_VALUE_SUFFIX)) {
-    parsedVar = variable.slice(THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length).split("--");
-  } else {
-    return variable;
-  }
-  const [type, ...path] = parsedVar;
-  if (type === "preset") {
-    return getValueFromPresetVariable(
-      features,
-      blockName,
-      variable,
-      path
-    );
-  }
-  if (type === "custom") {
-    return getValueFromCustomVariable(
-      features,
-      blockName,
-      variable,
-      path
-    );
-  }
-  return variable;
-}
 function scopeSelector(scope, selector) {
   if (!scope || !selector) {
     return selector;
@@ -337,114 +47,8 @@ function scopeSelector(scope, selector) {
   });
   return selectorsScoped.join(", ");
 }
-function scopeFeatureSelectors(scope, selectors) {
-  if (!scope || !selectors) {
-    return;
-  }
-  const featureSelectors = {};
-  Object.entries(selectors).forEach(([feature, selector]) => {
-    if (typeof selector === "string") {
-      featureSelectors[feature] = scopeSelector(scope, selector);
-    }
-    if (typeof selector === "object") {
-      featureSelectors[feature] = {};
-      Object.entries(selector).forEach(
-        ([subfeature, subfeatureSelector]) => {
-          featureSelectors[feature][subfeature] = scopeSelector(
-            scope,
-            subfeatureSelector
-          );
-        }
-      );
-    }
-  });
-  return featureSelectors;
-}
-function appendToSelector(selector, toAppend) {
-  if (!selector.includes(",")) {
-    return selector + toAppend;
-  }
-  const selectors = selector.split(",");
-  const newSelectors = selectors.map((sel) => sel + toAppend);
-  return newSelectors.join(",");
-}
-function areGlobalStyleConfigsEqual(original, variation) {
-  if (typeof original !== "object" || typeof variation !== "object") {
-    return original === variation;
-  }
-  return (0, import_es6.default)(original?.styles, variation?.styles) && (0, import_es6.default)(original?.settings, variation?.settings);
-}
-function getBlockStyleVariationSelector(variation, blockSelector) {
-  const variationClass = `.is-style-${variation}`;
-  if (!blockSelector) {
-    return variationClass;
-  }
-  const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
-  const addVariationClass = (_match, group1, group2) => {
-    return group1 + group2 + variationClass;
-  };
-  const result = blockSelector.split(",").map((part) => part.replace(ancestorRegex, addVariationClass));
-  return result.join(",");
-}
-function getResolvedThemeFilePath(file, themeFileURIs) {
-  if (!file || !themeFileURIs || !Array.isArray(themeFileURIs)) {
-    return file;
-  }
-  const uri = themeFileURIs.find(
-    (themeFileUri) => themeFileUri?.name === file
-  );
-  if (!uri?.href) {
-    return file;
-  }
-  return uri?.href;
-}
-function getResolvedRefValue(ruleValue, tree) {
-  if (!ruleValue || !tree) {
-    return ruleValue;
-  }
-  if (typeof ruleValue !== "string" && ruleValue?.ref) {
-    const resolvedRuleValue = (0, import_style_engine.getCSSValueFromRawStyle)(
-      (0, import_object.getValueFromObjectPath)(tree, ruleValue.ref)
-    );
-    if (resolvedRuleValue?.ref) {
-      return void 0;
-    }
-    if (resolvedRuleValue === void 0) {
-      return ruleValue;
-    }
-    return resolvedRuleValue;
-  }
-  return ruleValue;
-}
-function getResolvedValue(ruleValue, tree) {
-  if (!ruleValue || !tree) {
-    return ruleValue;
-  }
-  const resolvedValue = getResolvedRefValue(ruleValue, tree);
-  if (resolvedValue?.url) {
-    resolvedValue.url = getResolvedThemeFilePath(
-      resolvedValue.url,
-      tree?._links?.["wp:theme-file"]
-    );
-  }
-  return resolvedValue;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PRESET_METADATA,
-  ROOT_BLOCK_SELECTOR,
-  ROOT_CSS_PROPERTIES_SELECTOR,
-  STYLE_PATH_TO_CSS_VAR_INFIX,
-  STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
-  appendToSelector,
-  areGlobalStyleConfigsEqual,
-  getBlockStyleVariationSelector,
-  getPresetVariableFromValue,
-  getResolvedRefValue,
-  getResolvedThemeFilePath,
-  getResolvedValue,
-  getValueFromVariable,
-  scopeFeatureSelectors,
   scopeSelector,
   useToolsPanelDropdownMenuProps
 });

package/build/components/global-styles/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/utils.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { getCSSValueFromRawStyle } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport { getTypographyFontSizeValue } from './typography-utils';\nimport { getValueFromObjectPath } from '../../utils/object';\n\n/* Supporting data. */\nexport const ROOT_BLOCK_SELECTOR = 'body';\nexport const ROOT_CSS_PROPERTIES_SELECTOR = ':root';\n\nexport const PRESET_METADATA = [\n\t{\n\t\tpath: [ 'color', 'palette' ],\n\t\tvalueKey: 'color',\n\t\tcssVarInfix: 'color',\n\t\tclasses: [\n\t\t\t{ classSuffix: 'color', propertyName: 'color' },\n\t\t\t{\n\t\t\t\tclassSuffix: 'background-color',\n\t\t\t\tpropertyName: 'background-color',\n\t\t\t},\n\t\t\t{\n\t\t\t\tclassSuffix: 'border-color',\n\t\t\t\tpropertyName: 'border-color',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'color', 'gradients' ],\n\t\tvalueKey: 'gradient',\n\t\tcssVarInfix: 'gradient',\n\t\tclasses: [\n\t\t\t{\n\t\t\t\tclassSuffix: 'gradient-background',\n\t\t\t\tpropertyName: 'background',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'color', 'duotone' ],\n\t\tvalueKey: 'colors',\n\t\tcssVarInfix: 'duotone',\n\t\tvalueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'shadow', 'presets' ],\n\t\tvalueKey: 'shadow',\n\t\tcssVarInfix: 'shadow',\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'typography', 'fontSizes' ],\n\t\tvalueFunc: ( preset, settings ) =>\n\t\t\tgetTypographyFontSizeValue( preset, settings ),\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'font-size',\n\t\tclasses: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],\n\t},\n\t{\n\t\tpath: [ 'typography', 'fontFamilies' ],\n\t\tvalueKey: 'fontFamily',\n\t\tcssVarInfix: 'font-family',\n\t\tclasses: [\n\t\t\t{ classSuffix: 'font-family', propertyName: 'font-family' },\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'spacing', 'spacingSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'spacing',\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'border', 'radiusSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'border-radius',\n\t\tclasses: [],\n\t},\n];\n\nexport const STYLE_PATH_TO_CSS_VAR_INFIX = {\n\t'color.background': 'color',\n\t'color.text': 'color',\n\t'filter.duotone': 'duotone',\n\t'elements.link.color.text': 'color',\n\t'elements.link.:hover.color.text': 'color',\n\t'elements.link.typography.fontFamily': 'font-family',\n\t'elements.link.typography.fontSize': 'font-size',\n\t'elements.button.color.text': 'color',\n\t'elements.button.color.background': 'color',\n\t'elements.caption.color.text': 'color',\n\t'elements.button.typography.fontFamily': 'font-family',\n\t'elements.button.typography.fontSize': 'font-size',\n\t'elements.heading.color': 'color',\n\t'elements.heading.color.background': 'color',\n\t'elements.heading.typography.fontFamily': 'font-family',\n\t'elements.heading.gradient': 'gradient',\n\t'elements.heading.color.gradient': 'gradient',\n\t'elements.h1.color': 'color',\n\t'elements.h1.color.background': 'color',\n\t'elements.h1.typography.fontFamily': 'font-family',\n\t'elements.h1.color.gradient': 'gradient',\n\t'elements.h2.color': 'color',\n\t'elements.h2.color.background': 'color',\n\t'elements.h2.typography.fontFamily': 'font-family',\n\t'elements.h2.color.gradient': 'gradient',\n\t'elements.h3.color': 'color',\n\t'elements.h3.color.background': 'color',\n\t'elements.h3.typography.fontFamily': 'font-family',\n\t'elements.h3.color.gradient': 'gradient',\n\t'elements.h4.color': 'color',\n\t'elements.h4.color.background': 'color',\n\t'elements.h4.typography.fontFamily': 'font-family',\n\t'elements.h4.color.gradient': 'gradient',\n\t'elements.h5.color': 'color',\n\t'elements.h5.color.background': 'color',\n\t'elements.h5.typography.fontFamily': 'font-family',\n\t'elements.h5.color.gradient': 'gradient',\n\t'elements.h6.color': 'color',\n\t'elements.h6.color.background': 'color',\n\t'elements.h6.typography.fontFamily': 'font-family',\n\t'elements.h6.color.gradient': 'gradient',\n\t'color.gradient': 'gradient',\n\tshadow: 'shadow',\n\t'typography.fontSize': 'font-size',\n\t'typography.fontFamily': 'font-family',\n};\n\n// A static list of block attributes that store global style preset slugs.\nexport const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {\n\t'color.background': 'backgroundColor',\n\t'color.text': 'textColor',\n\t'color.gradient': 'gradient',\n\t'typography.fontSize': 'fontSize',\n\t'typography.fontFamily': 'fontFamily',\n};\n\nexport function useToolsPanelDropdownMenuProps() {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t  }\n\t\t: {};\n}\n\nfunction findInPresetsBy(\n\tfeatures,\n\tblockName,\n\tpresetPath,\n\tpresetProperty,\n\tpresetValueValue\n) {\n\t// Block presets take priority above root level presets.\n\tconst orderedPresetsByOrigin = [\n\t\tgetValueFromObjectPath( features, [\n\t\t\t'blocks',\n\t\t\tblockName,\n\t\t\t...presetPath,\n\t\t] ),\n\t\tgetValueFromObjectPath( features, presetPath ),\n\t];\n\n\tfor ( const presetByOrigin of orderedPresetsByOrigin ) {\n\t\tif ( presetByOrigin ) {\n\t\t\t// Preset origins ordered by priority.\n\t\t\tconst origins = [ 'custom', 'theme', 'default' ];\n\t\t\tfor ( const origin of origins ) {\n\t\t\t\tconst presets = presetByOrigin[ origin ];\n\t\t\t\tif ( presets ) {\n\t\t\t\t\tconst presetObject = presets.find(\n\t\t\t\t\t\t( preset ) =>\n\t\t\t\t\t\t\tpreset[ presetProperty ] === presetValueValue\n\t\t\t\t\t);\n\t\t\t\t\tif ( presetObject ) {\n\t\t\t\t\t\tif ( presetProperty === 'slug' ) {\n\t\t\t\t\t\t\treturn presetObject;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.\n\t\t\t\t\t\tconst highestPresetObjectWithSameSlug = findInPresetsBy(\n\t\t\t\t\t\t\tfeatures,\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tpresetPath,\n\t\t\t\t\t\t\t'slug',\n\t\t\t\t\t\t\tpresetObject.slug\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\thighestPresetObjectWithSameSlug[\n\t\t\t\t\t\t\t\tpresetProperty\n\t\t\t\t\t\t\t] === presetObject[ presetProperty ]\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn presetObject;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\nexport function getPresetVariableFromValue(\n\tfeatures,\n\tblockName,\n\tvariableStylePath,\n\tpresetPropertyValue\n) {\n\tif ( ! presetPropertyValue ) {\n\t\treturn presetPropertyValue;\n\t}\n\n\tconst cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];\n\n\tconst metadata = PRESET_METADATA.find(\n\t\t( data ) => data.cssVarInfix === cssVarInfix\n\t);\n\n\tif ( ! metadata ) {\n\t\t// The property doesn't have preset data\n\t\t// so the value should be returned as it is.\n\t\treturn presetPropertyValue;\n\t}\n\tconst { valueKey, path } = metadata;\n\n\tconst presetObject = findInPresetsBy(\n\t\tfeatures,\n\t\tblockName,\n\t\tpath,\n\t\tvalueKey,\n\t\tpresetPropertyValue\n\t);\n\n\tif ( ! presetObject ) {\n\t\t// Value wasn't found in the presets,\n\t\t// so it must be a custom value.\n\t\treturn presetPropertyValue;\n\t}\n\n\treturn `var:preset|${ cssVarInfix }|${ presetObject.slug }`;\n}\n\nfunction getValueFromPresetVariable(\n\tfeatures,\n\tblockName,\n\tvariable,\n\t[ presetType, slug ]\n) {\n\tconst metadata = PRESET_METADATA.find(\n\t\t( data ) => data.cssVarInfix === presetType\n\t);\n\tif ( ! metadata ) {\n\t\treturn variable;\n\t}\n\n\tconst presetObject = findInPresetsBy(\n\t\tfeatures.settings,\n\t\tblockName,\n\t\tmetadata.path,\n\t\t'slug',\n\t\tslug\n\t);\n\n\tif ( presetObject ) {\n\t\tconst { valueKey } = metadata;\n\t\tconst result = presetObject[ valueKey ];\n\t\treturn getValueFromVariable( features, blockName, result );\n\t}\n\n\treturn variable;\n}\n\nfunction getValueFromCustomVariable( features, blockName, variable, path ) {\n\tconst result =\n\t\tgetValueFromObjectPath( features.settings, [\n\t\t\t'blocks',\n\t\t\tblockName,\n\t\t\t'custom',\n\t\t\t...path,\n\t\t] ) ??\n\t\tgetValueFromObjectPath( features.settings, [ 'custom', ...path ] );\n\tif ( ! result ) {\n\t\treturn variable;\n\t}\n\t// A variable may reference another variable so we need recursion until we find the value.\n\treturn getValueFromVariable( features, blockName, result );\n}\n\n/**\n * Attempts to fetch the value of a theme.json CSS variable.\n *\n * @param {Object}   features  GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.\n * @param {string}   blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.\n * @param {string|*} variable  An incoming style value. A CSS var value is expected, but it could be any value.\n * @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.\n */\nexport function getValueFromVariable( features, blockName, variable ) {\n\tif ( ! variable || typeof variable !== 'string' ) {\n\t\tif ( typeof variable?.ref === 'string' ) {\n\t\t\tvariable = getValueFromObjectPath( features, variable.ref );\n\t\t\t// Presence of another ref indicates a reference to another dynamic value.\n\t\t\t// Pointing to another dynamic value is not supported.\n\t\t\tif ( ! variable || !! variable?.ref ) {\n\t\t\t\treturn variable;\n\t\t\t}\n\t\t} else {\n\t\t\treturn variable;\n\t\t}\n\t}\n\tconst USER_VALUE_PREFIX = 'var:';\n\tconst THEME_VALUE_PREFIX = 'var(--wp--';\n\tconst THEME_VALUE_SUFFIX = ')';\n\n\tlet parsedVar;\n\n\tif ( variable.startsWith( USER_VALUE_PREFIX ) ) {\n\t\tparsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );\n\t} else if (\n\t\tvariable.startsWith( THEME_VALUE_PREFIX ) &&\n\t\tvariable.endsWith( THEME_VALUE_SUFFIX )\n\t) {\n\t\tparsedVar = variable\n\t\t\t.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )\n\t\t\t.split( '--' );\n\t} else {\n\t\t// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`\n\t\treturn variable;\n\t}\n\n\tconst [ type, ...path ] = parsedVar;\n\tif ( type === 'preset' ) {\n\t\treturn getValueFromPresetVariable(\n\t\t\tfeatures,\n\t\t\tblockName,\n\t\t\tvariable,\n\t\t\tpath\n\t\t);\n\t}\n\tif ( type === 'custom' ) {\n\t\treturn getValueFromCustomVariable(\n\t\t\tfeatures,\n\t\t\tblockName,\n\t\t\tvariable,\n\t\t\tpath\n\t\t);\n\t}\n\treturn variable;\n}\n\n/**\n * Function that scopes a selector with another one. This works a bit like\n * SCSS nesting except the `&` operator isn't supported.\n *\n * @example\n * ```js\n * const scope = '.a, .b .c';\n * const selector = '> .x, .y';\n * const merged = scopeSelector( scope, selector );\n * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'\n * ```\n *\n * @param {string} scope    Selector to scope to.\n * @param {string} selector Original selector.\n *\n * @return {string} Scoped selector.\n */\nexport function scopeSelector( scope, selector ) {\n\tif ( ! scope || ! selector ) {\n\t\treturn selector;\n\t}\n\n\tconst scopes = scope.split( ',' );\n\tconst selectors = selector.split( ',' );\n\n\tconst selectorsScoped = [];\n\tscopes.forEach( ( outer ) => {\n\t\tselectors.forEach( ( inner ) => {\n\t\t\tselectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );\n\t\t} );\n\t} );\n\n\treturn selectorsScoped.join( ', ' );\n}\n\n/**\n * Scopes a collection of selectors for features and subfeatures.\n *\n * @example\n * ```js\n * const scope = '.custom-scope';\n * const selectors = {\n *     color: '.wp-my-block p',\n *     typography: { fontSize: '.wp-my-block caption' },\n * };\n * const result = scopeFeatureSelector( scope, selectors );\n * // result is {\n * //     color: '.custom-scope .wp-my-block p',\n * //     typography: { fonSize: '.custom-scope .wp-my-block caption' },\n * // }\n * ```\n *\n * @param {string} scope     Selector to scope collection of selectors with.\n * @param {Object} selectors Collection of feature selectors e.g.\n *\n * @return {Object|undefined} Scoped collection of feature selectors.\n */\nexport function scopeFeatureSelectors( scope, selectors ) {\n\tif ( ! scope || ! selectors ) {\n\t\treturn;\n\t}\n\n\tconst featureSelectors = {};\n\n\tObject.entries( selectors ).forEach( ( [ feature, selector ] ) => {\n\t\tif ( typeof selector === 'string' ) {\n\t\t\tfeatureSelectors[ feature ] = scopeSelector( scope, selector );\n\t\t}\n\n\t\tif ( typeof selector === 'object' ) {\n\t\t\tfeatureSelectors[ feature ] = {};\n\n\t\t\tObject.entries( selector ).forEach(\n\t\t\t\t( [ subfeature, subfeatureSelector ] ) => {\n\t\t\t\t\tfeatureSelectors[ feature ][ subfeature ] = scopeSelector(\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tsubfeatureSelector\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t} );\n\n\treturn featureSelectors;\n}\n\n/**\n * Appends a sub-selector to an existing one.\n *\n * Given the compounded `selector` \"h1, h2, h3\"\n * and the `toAppend` selector \".some-class\" the result will be\n * \"h1.some-class, h2.some-class, h3.some-class\".\n *\n * @param {string} selector Original selector.\n * @param {string} toAppend Selector to append.\n *\n * @return {string} The new selector.\n */\nexport function appendToSelector( selector, toAppend ) {\n\tif ( ! selector.includes( ',' ) ) {\n\t\treturn selector + toAppend;\n\t}\n\tconst selectors = selector.split( ',' );\n\tconst newSelectors = selectors.map( ( sel ) => sel + toAppend );\n\treturn newSelectors.join( ',' );\n}\n\n/**\n * Compares global style variations according to their styles and settings properties.\n *\n * @example\n * ```js\n * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };\n * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };\n * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );\n * // false\n * ```\n *\n * @param {Object} original  A global styles object.\n * @param {Object} variation A global styles object.\n *\n * @return {boolean} Whether `original` and `variation` match.\n */\nexport function areGlobalStyleConfigsEqual( original, variation ) {\n\tif ( typeof original !== 'object' || typeof variation !== 'object' ) {\n\t\treturn original === variation;\n\t}\n\treturn (\n\t\tfastDeepEqual( original?.styles, variation?.styles ) &&\n\t\tfastDeepEqual( original?.settings, variation?.settings )\n\t);\n}\n\n/**\n * Generates the selector for a block style variation by creating the\n * appropriate CSS class and adding it to the ancestor portion of the block's\n * selector.\n *\n * For example, take the Button block which has a compound selector:\n * `.wp-block-button .wp-block-button__link`. With a variation named 'custom',\n * the class `.is-style-custom` should be added to the `.wp-block-button`\n * ancestor only.\n *\n * This function will take into account comma separated and complex selectors.\n *\n * @param {string} variation     Name for the variation.\n * @param {string} blockSelector CSS selector for the block.\n *\n * @return {string} CSS selector for the block style variation.\n */\nexport function getBlockStyleVariationSelector( variation, blockSelector ) {\n\tconst variationClass = `.is-style-${ variation }`;\n\n\tif ( ! blockSelector ) {\n\t\treturn variationClass;\n\t}\n\n\tconst ancestorRegex = /((?::\\([^)]+\\))?\\s*)([^\\s:]+)/;\n\tconst addVariationClass = ( _match, group1, group2 ) => {\n\t\treturn group1 + group2 + variationClass;\n\t};\n\n\tconst result = blockSelector\n\t\t.split( ',' )\n\t\t.map( ( part ) => part.replace( ancestorRegex, addVariationClass ) );\n\n\treturn result.join( ',' );\n}\n\n/**\n * Looks up a theme file URI based on a relative path.\n *\n * @param {string}        file          A relative path.\n * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.\n * @return {string} A resolved theme file URI, if one is found in the themeFileURIs collection.\n */\nexport function getResolvedThemeFilePath( file, themeFileURIs ) {\n\tif ( ! file || ! themeFileURIs || ! Array.isArray( themeFileURIs ) ) {\n\t\treturn file;\n\t}\n\n\tconst uri = themeFileURIs.find(\n\t\t( themeFileUri ) => themeFileUri?.name === file\n\t);\n\n\tif ( ! uri?.href ) {\n\t\treturn file;\n\t}\n\n\treturn uri?.href;\n}\n\n/**\n * Resolves ref values in theme JSON.\n *\n * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.\n * @param {Object}        tree      A theme.json object.\n * @return {*} The resolved value or incoming ruleValue.\n */\nexport function getResolvedRefValue( ruleValue, tree ) {\n\tif ( ! ruleValue || ! tree ) {\n\t\treturn ruleValue;\n\t}\n\n\t/*\n\t * Where the rule value is an object with a 'ref' property pointing\n\t * to a path, this converts that path into the value at that path.\n\t * For example: { \"ref\": \"style.color.background\" } => \"#fff\".\n\t */\n\tif ( typeof ruleValue !== 'string' && ruleValue?.ref ) {\n\t\tconst resolvedRuleValue = getCSSValueFromRawStyle(\n\t\t\tgetValueFromObjectPath( tree, ruleValue.ref )\n\t\t);\n\n\t\t/*\n\t\t * Presence of another ref indicates a reference to another dynamic value.\n\t\t * Pointing to another dynamic value is not supported.\n\t\t */\n\t\tif ( resolvedRuleValue?.ref ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tif ( resolvedRuleValue === undefined ) {\n\t\t\treturn ruleValue;\n\t\t}\n\n\t\treturn resolvedRuleValue;\n\t}\n\treturn ruleValue;\n}\n\n/**\n * Resolves ref and relative path values in theme JSON.\n *\n * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.\n * @param {Object}        tree      A theme.json object.\n * @return {*} The resolved value or incoming ruleValue.\n */\nexport function getResolvedValue( ruleValue, tree ) {\n\tif ( ! ruleValue || ! tree ) {\n\t\treturn ruleValue;\n\t}\n\n\t// Resolve ref values.\n\tconst resolvedValue = getResolvedRefValue( ruleValue, tree );\n\n\t// Resolve relative paths.\n\tif ( resolvedValue?.url ) {\n\t\tresolvedValue.url = getResolvedThemeFilePath(\n\t\t\tresolvedValue.url,\n\t\t\ttree?._links?.[ 'wp:theme-file' ]\n\t\t);\n\t}\n\n\treturn resolvedValue;\n}\n"],
-  "mappings": "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",
-  "names": ["fastDeepEqual"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\n\nexport function useToolsPanelDropdownMenuProps() {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t  }\n\t\t: {};\n}\n\n/**\n * Function that scopes a selector with another one. This works a bit like\n * SCSS nesting except the `&` operator isn't supported.\n *\n * @example\n * ```js\n * const scope = '.a, .b .c';\n * const selector = '> .x, .y';\n * const merged = scopeSelector( scope, selector );\n * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'\n * ```\n *\n * @param {string} scope    Selector to scope to.\n * @param {string} selector Original selector.\n *\n * @return {string} Scoped selector.\n */\nexport function scopeSelector( scope, selector ) {\n\tif ( ! scope || ! selector ) {\n\t\treturn selector;\n\t}\n\n\tconst scopes = scope.split( ',' );\n\tconst selectors = selector.split( ',' );\n\n\tconst selectorsScoped = [];\n\tscopes.forEach( ( outer ) => {\n\t\tselectors.forEach( ( inner ) => {\n\t\t\tselectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );\n\t\t} );\n\t} );\n\n\treturn selectorsScoped.join( ', ' );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AAE1B,SAAS,iCAAiC;AAChD,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,SAAO,CAAE,WACN;AAAA,IACA,cAAc;AAAA,MACb,WAAW;AAAA;AAAA,MAEX,QAAQ;AAAA,IACT;AAAA,EACA,IACA,CAAC;AACL;AAmBO,SAAS,cAAe,OAAO,UAAW;AAChD,MAAK,CAAE,SAAS,CAAE,UAAW;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,SAAS,MAAM,MAAO,GAAI;AAChC,QAAM,YAAY,SAAS,MAAO,GAAI;AAEtC,QAAM,kBAAkB,CAAC;AACzB,SAAO,QAAS,CAAE,UAAW;AAC5B,cAAU,QAAS,CAAE,UAAW;AAC/B,sBAAgB,KAAM,GAAI,MAAM,KAAK,CAAE,IAAK,MAAM,KAAK,CAAE,EAAG;AAAA,IAC7D,CAAE;AAAA,EACH,CAAE;AAEF,SAAO,gBAAgB,KAAM,IAAK;AACnC;",
+  "names": []
 }

package/build/components/inserter/media-tab/media-tab.js

@@ -36,15 +36,47 @@ var import_i18n = require("@wordpress/i18n");
 var import_compose = require("@wordpress/compose");
 var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
 var import_media_panel = require("./media-panel");
 var import_check = __toESM(require("../../media-upload/check"));
 var import_media_upload = __toESM(require("../../media-upload"));
+var import_media_upload_modal = __toESM(require("../../media-upload-modal"));
 var import_hooks = require("./hooks");
 var import_utils = require("./utils");
 var import_mobile_tab_navigation = __toESM(require("../mobile-tab-navigation"));
 var import_category_tabs = __toESM(require("../category-tabs"));
 var import_no_results = __toESM(require("../no-results"));
+var import_store = require("../../../store");
 const ALLOWED_MEDIA_TYPES = ["image", "video", "audio"];
+function ConditionalMediaUpload({ render, ...props }) {
+  const [isModalOpen, setIsModalOpen] = (0, import_element.useState)(false);
+  const mediaUpload = (0, import_data.useSelect)((select) => {
+    const { getSettings } = select(import_store.store);
+    return getSettings().mediaUpload;
+  }, []);
+  if (window.__experimentalDataViewsMediaModal) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      render && render({ open: () => setIsModalOpen(true) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_media_upload_modal.default,
+        {
+          ...props,
+          isOpen: isModalOpen,
+          onClose: () => {
+            setIsModalOpen(false);
+            props.onClose?.();
+          },
+          onSelect: (media) => {
+            setIsModalOpen(false);
+            props.onSelect?.(media);
+          },
+          onUpload: mediaUpload
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media_upload.default, { ...props, render });
+}
 function MediaTab({
   rootClientId,
   selectedCategory,
@@ -87,7 +119,7 @@ function MediaTab({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_check.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_media_upload.default,
+        ConditionalMediaUpload,
         {
           multiple: false,
           onSelect: onSelectMedia,

package/build/components/inserter/media-tab/media-tab.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/inserter/media-tab/media-tab.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { MediaCategoryPanel } from './media-panel';\nimport MediaUploadCheck from '../../media-upload/check';\nimport MediaUpload from '../../media-upload';\nimport { useMediaCategories } from './hooks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];\n\nfunction MediaTab( {\n\trootClientId,\n\tselectedCategory,\n\tonSelectCategory,\n\tonInsert,\n\tchildren,\n} ) {\n\tconst mediaCategories = useMediaCategories( rootClientId );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst baseCssClass = 'block-editor-inserter__media-tabs';\n\tconst onSelectMedia = useCallback(\n\t\t( media ) => {\n\t\t\tif ( ! media?.url ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [ block ] = getBlockAndPreviewFromMedia( media, media.type );\n\t\t\tonInsert( block );\n\t\t},\n\t\t[ onInsert ]\n\t);\n\tconst categories = useMemo(\n\t\t() =>\n\t\t\tmediaCategories.map( ( mediaCategory ) => ( {\n\t\t\t\t...mediaCategory,\n\t\t\t\tlabel: mediaCategory.labels.name,\n\t\t\t} ) ),\n\t\t[ mediaCategories ]\n\t);\n\n\tif ( ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className={ `${ baseCssClass }-container` }>\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\tmultiple={ false }\n\t\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t// Safari doesn't emit a focus event on button elements when\n\t\t\t\t\t\t\t\t\t\t// clicked and we need to manually focus the button here.\n\t\t\t\t\t\t\t\t\t\t// The reason is that core's Media Library modal explicitly triggers a\n\t\t\t\t\t\t\t\t\t\t// focus event and therefore a `blur` event is triggered on a different\n\t\t\t\t\t\t\t\t\t\t// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`\n\t\t\t\t\t\t\t\t\t\t// attribute making the Inserter dialog to close.\n\t\t\t\t\t\t\t\t\t\tevent.target.focus();\n\t\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-library-button\"\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tdata-unstable-ignore-focus-outside-for-relatedtarget=\".media-modal\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Open Media Library' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<MediaCategoryPanel\n\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default MediaTab;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDS;AAjDT,kBAAmB;AACnB,qBAAiC;AACjC,wBAAuB;AACvB,qBAAqC;AAKrC,yBAAmC;AACnC,mBAA6B;AAC7B,0BAAwB;AACxB,mBAAmC;AACnC,mBAA4C;AAC5C,mCAAgC;AAChC,2BAAyB;AACzB,wBAA8B;AAE9B,MAAM,sBAAsB,CAAE,SAAS,SAAS,OAAQ;AAExD,SAAS,SAAU;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,sBAAkB,iCAAoB,YAAa;AACzD,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,QAAM,eAAe;AACrB,QAAM,oBAAgB;AAAA,IACrB,CAAE,UAAW;AACZ,UAAK,CAAE,OAAO,KAAM;AACnB;AAAA,MACD;AACA,YAAM,CAAE,KAAM,QAAI,0CAA6B,OAAO,MAAM,IAAK;AACjE,eAAU,KAAM;AAAA,IACjB;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACA,QAAM,iBAAa;AAAA,IAClB,MACC,gBAAgB,IAAK,CAAE,mBAAqB;AAAA,MAC3C,GAAG;AAAA,MACH,OAAO,cAAc,OAAO;AAAA,IAC7B,EAAI;AAAA,IACL,CAAE,eAAgB;AAAA,EACnB;AAEA,MAAK,CAAE,WAAW,QAAS;AAC1B,WAAO,4CAAC,kBAAAA,SAAA,EAAkB;AAAA,EAC3B;AAEA,SACC,4EACG;AAAA,KAAE,YACH,6CAAC,SAAI,WAAY,GAAI,YAAa,cACjC;AAAA;AAAA,QAAC,qBAAAC;AAAA,QAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEE;AAAA;AAAA,MACH;AAAA,MACA,4CAAC,aAAAC,SAAA,EACA;AAAA,QAAC,oBAAAC;AAAA,QAAA;AAAA,UACA,UAAW;AAAA,UACX,UAAW;AAAA,UACX,cAAe;AAAA,UACf,QAAS,CAAE,EAAE,KAAK,MACjB;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAU,CAAE,UAAW;AAOtB,sBAAM,OAAO,MAAM;AACnB,qBAAK;AAAA,cACN;AAAA,cACA,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,wDAAqD;AAAA,cAEnD,8BAAI,oBAAqB;AAAA;AAAA,UAC5B;AAAA;AAAA,MAEF,GACD;AAAA,OACD;AAAA,IAEC,YACD,4CAAC,6BAAAC,SAAA,EAAoB,YAClB,WAAE,aACH;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD,GAEF;AAAA,KAEF;AAEF;AAEA,IAAO,oBAAQ;",
-  "names": ["InserterNoResults", "CategoryTabs", "MediaUploadCheck", "MediaUpload", "MobileTabNavigation"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { MediaCategoryPanel } from './media-panel';\nimport MediaUploadCheck from '../../media-upload/check';\nimport MediaUpload from '../../media-upload';\nimport MediaUploadModal from '../../media-upload-modal';\nimport { useMediaCategories } from './hooks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport CategoryTabs from '../category-tabs';\nimport InserterNoResults from '../no-results';\nimport { store as blockEditorStore } from '../../../store';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to MediaUpload.\n *\n * @param {Object}   root0        Component props.\n * @param {Function} root0.render Render prop function that receives { open } object.\n * @return {JSX.Element} The component.\n */\nfunction ConditionalMediaUpload( { render, ...props } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst mediaUpload = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().mediaUpload;\n\t}, [] );\n\n\tif ( window.__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t<MediaUploadModal\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ ( media ) => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t} }\n\t\t\t\t\tonUpload={ mediaUpload }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn <MediaUpload { ...props } render={ render } />;\n}\n\nfunction MediaTab( {\n\trootClientId,\n\tselectedCategory,\n\tonSelectCategory,\n\tonInsert,\n\tchildren,\n} ) {\n\tconst mediaCategories = useMediaCategories( rootClientId );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst baseCssClass = 'block-editor-inserter__media-tabs';\n\tconst onSelectMedia = useCallback(\n\t\t( media ) => {\n\t\t\tif ( ! media?.url ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [ block ] = getBlockAndPreviewFromMedia( media, media.type );\n\t\t\tonInsert( block );\n\t\t},\n\t\t[ onInsert ]\n\t);\n\tconst categories = useMemo(\n\t\t() =>\n\t\t\tmediaCategories.map( ( mediaCategory ) => ( {\n\t\t\t\t...mediaCategory,\n\t\t\t\tlabel: mediaCategory.labels.name,\n\t\t\t} ) ),\n\t\t[ mediaCategories ]\n\t);\n\n\tif ( ! categories.length ) {\n\t\treturn <InserterNoResults />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className={ `${ baseCssClass }-container` }>\n\t\t\t\t\t<CategoryTabs\n\t\t\t\t\t\tcategories={ categories }\n\t\t\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\t\t\tonSelectCategory={ onSelectCategory }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CategoryTabs>\n\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t<ConditionalMediaUpload\n\t\t\t\t\t\t\tmultiple={ false }\n\t\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t// Safari doesn't emit a focus event on button elements when\n\t\t\t\t\t\t\t\t\t\t// clicked and we need to manually focus the button here.\n\t\t\t\t\t\t\t\t\t\t// The reason is that core's Media Library modal explicitly triggers a\n\t\t\t\t\t\t\t\t\t\t// focus event and therefore a `blur` event is triggered on a different\n\t\t\t\t\t\t\t\t\t\t// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`\n\t\t\t\t\t\t\t\t\t\t// attribute making the Inserter dialog to close.\n\t\t\t\t\t\t\t\t\t\tevent.target.focus();\n\t\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-library-button\"\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tdata-unstable-ignore-focus-outside-for-relatedtarget=\".media-modal\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Open Media Library' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<MediaCategoryPanel\n\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default MediaTab;\n"],
+  "mappings": "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",
+  "names": ["blockEditorStore", "MediaUploadModal", "MediaUpload", "InserterNoResults", "CategoryTabs", "MediaUploadCheck", "MobileTabNavigation"]
 }

package/build/components/inserter/tips.js

@@ -49,8 +49,6 @@ const globalTips = [
 ];
 function Tips() {
   const [randomIndex] = (0, import_element.useState)(
-    // Disable Reason: I'm not generating an HTML id.
-    // eslint-disable-next-line no-restricted-syntax
     Math.floor(Math.random() * globalTips.length)
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tip, { children: globalTips[randomIndex] });

package/build/components/inserter/tips.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/inserter/tips.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { createInterpolateElement, useState } from '@wordpress/element';\nimport { Tip } from '@wordpress/components';\n\nconst globalTips = [\n\tcreateInterpolateElement(\n\t\t__(\n\t\t\t'While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'\n\t\t),\n\t\t{ kbd: <kbd /> }\n\t),\n\tcreateInterpolateElement(\n\t\t__(\n\t\t\t'Indent a list by pressing <kbd>space</kbd> at the beginning of a line.'\n\t\t),\n\t\t{ kbd: <kbd /> }\n\t),\n\tcreateInterpolateElement(\n\t\t__(\n\t\t\t'Outdent a list by pressing <kbd>backspace</kbd> at the beginning of a line.'\n\t\t),\n\t\t{ kbd: <kbd /> }\n\t),\n\t__( 'Drag files into the editor to automatically insert media blocks.' ),\n\t__( \"Change a block's type by pressing the block icon on the toolbar.\" ),\n];\n\nfunction Tips() {\n\tconst [ randomIndex ] = useState(\n\t\t// Disable Reason: I'm not generating an HTML id.\n\t\t// eslint-disable-next-line no-restricted-syntax\n\t\tMath.floor( Math.random() * globalTips.length )\n\t);\n\n\treturn <Tip>{ globalTips[ randomIndex ] }</Tip>;\n}\n\nexport default Tips;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYS;AATT,kBAAmB;AACnB,qBAAmD;AACnD,wBAAoB;AAEpB,MAAM,aAAa;AAAA,MAClB;AAAA,QACC;AAAA,MACC;AAAA,IACD;AAAA,IACA,EAAE,KAAK,4CAAC,SAAI,EAAG;AAAA,EAChB;AAAA,MACA;AAAA,QACC;AAAA,MACC;AAAA,IACD;AAAA,IACA,EAAE,KAAK,4CAAC,SAAI,EAAG;AAAA,EAChB;AAAA,MACA;AAAA,QACC;AAAA,MACC;AAAA,IACD;AAAA,IACA,EAAE,KAAK,4CAAC,SAAI,EAAG;AAAA,EAChB;AAAA,MACA,gBAAI,kEAAmE;AAAA,MACvE,gBAAI,kEAAmE;AACxE;AAEA,SAAS,OAAO;AACf,QAAM,CAAE,WAAY,QAAI;AAAA;AAAA;AAAA,IAGvB,KAAK,MAAO,KAAK,OAAO,IAAI,WAAW,MAAO;AAAA,EAC/C;AAEA,SAAO,4CAAC,yBAAM,qBAAY,WAAY,GAAG;AAC1C;AAEA,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { createInterpolateElement, useState } from '@wordpress/element';\nimport { Tip } from '@wordpress/components';\n\nconst globalTips = [\n\tcreateInterpolateElement(\n\t\t__(\n\t\t\t'While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'\n\t\t),\n\t\t{ kbd: <kbd /> }\n\t),\n\tcreateInterpolateElement(\n\t\t__(\n\t\t\t'Indent a list by pressing <kbd>space</kbd> at the beginning of a line.'\n\t\t),\n\t\t{ kbd: <kbd /> }\n\t),\n\tcreateInterpolateElement(\n\t\t__(\n\t\t\t'Outdent a list by pressing <kbd>backspace</kbd> at the beginning of a line.'\n\t\t),\n\t\t{ kbd: <kbd /> }\n\t),\n\t__( 'Drag files into the editor to automatically insert media blocks.' ),\n\t__( \"Change a block's type by pressing the block icon on the toolbar.\" ),\n];\n\nfunction Tips() {\n\tconst [ randomIndex ] = useState(\n\t\tMath.floor( Math.random() * globalTips.length )\n\t);\n\n\treturn <Tip>{ globalTips[ randomIndex ] }</Tip>;\n}\n\nexport default Tips;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYS;AATT,kBAAmB;AACnB,qBAAmD;AACnD,wBAAoB;AAEpB,MAAM,aAAa;AAAA,MAClB;AAAA,QACC;AAAA,MACC;AAAA,IACD;AAAA,IACA,EAAE,KAAK,4CAAC,SAAI,EAAG;AAAA,EAChB;AAAA,MACA;AAAA,QACC;AAAA,MACC;AAAA,IACD;AAAA,IACA,EAAE,KAAK,4CAAC,SAAI,EAAG;AAAA,EAChB;AAAA,MACA;AAAA,QACC;AAAA,MACC;AAAA,IACD;AAAA,IACA,EAAE,KAAK,4CAAC,SAAI,EAAG;AAAA,EAChB;AAAA,MACA,gBAAI,kEAAmE;AAAA,MACvE,gBAAI,kEAAmE;AACxE;AAEA,SAAS,OAAO;AACf,QAAM,CAAE,WAAY,QAAI;AAAA,IACvB,KAAK,MAAO,KAAK,OAAO,IAAI,WAAW,MAAO;AAAA,EAC/C;AAEA,SAAO,4CAAC,yBAAM,qBAAY,WAAY,GAAG;AAC1C;AAEA,IAAO,eAAQ;",
   "names": []
 }