@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.21.0

package/build/hooks/state-utils.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/state-utils.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { splitSelectorList } from '@wordpress/global-styles-engine';\n\n/**\n * Given a block's `selectors.root` value, returns the part of the selector\n * that is relative to the block wrapper \u2014 i.e., everything after the first\n * compound selector segment.\n *\n * Examples:\n *   \".wp-block-button .wp-block-button__link\" \u2192 \".wp-block-button__link\"\n *   \".wp-block-foo > .inner\"                 \u2192 \"> .inner\"\n *   \".wp-block-foo\"                          \u2192 null (no descendant)\n *\n * @param {string} rootSelector The block's `selectors.root` value.\n * @return {string|null} Relative selector, or null if rootSelector targets the wrapper itself.\n */\nexport function getRelativeRootSelector( rootSelector ) {\n\t// Match everything after the first compound selector (up to the first\n\t// whitespace or combinator character).\n\t// Require at least one combinator character (space, >, +, ~) between the\n\t// first compound selector and the rest. Without this anchor, a greedy\n\t// quantifier would backtrack into the first token and produce false matches.\n\tconst match = rootSelector.trim().match( /^[^ >+~]+[ >+~](.*)$/ );\n\tif ( ! match ) {\n\t\treturn null;\n\t}\n\tconst rest = match[ 1 ].trim();\n\treturn rest || null;\n}\n\n/**\n * Builds a scoped selector from a block selector and optional suffix.\n *\n * If the block selector targets a descendant, the descendant portion is scoped\n * under the provided base selector. Otherwise the base selector itself is used.\n *\n * @param {string} baseSelector  The block-instance scoping selector.\n * @param {string} blockSelector The block or feature selector from block metadata.\n * @param {string} suffix        Optional selector suffix, e.g. \":hover\".\n * @return {string} The scoped CSS selector.\n */\nexport function buildScopedBlockSelector(\n\tbaseSelector,\n\tblockSelector,\n\tsuffix = ''\n) {\n\tif ( typeof blockSelector !== 'string' || ! blockSelector ) {\n\t\treturn splitSelectorList( baseSelector )\n\t\t\t.map( ( selector ) => `${ selector.trim() }${ suffix }` )\n\t\t\t.join( ', ' );\n\t}\n\n\tconst baseSelectors = splitSelectorList( baseSelector ).filter(\n\t\t( selector ) => selector.trim()\n\t);\n\tconst selectors = splitSelectorList( blockSelector ).filter( ( selector ) =>\n\t\tselector.trim()\n\t);\n\n\tif ( ! selectors.length ) {\n\t\treturn baseSelectors\n\t\t\t.map( ( selector ) => `${ selector.trim() }${ suffix }` )\n\t\t\t.join( ', ' );\n\t}\n\n\treturn selectors\n\t\t.map( ( selector ) => {\n\t\t\tselector = selector.trim();\n\n\t\t\t/*\n\t\t\t * Replace only the leading block selector part (e.g. class name,\n\t\t\t * attribute selector, ID, or tag name) with the block instance selector.\n\t\t\t * Preserve anything after that prefix, including modifier classes on the\n\t\t\t * same element and combinators without spaces.\n\t\t\t */\n\t\t\tconst match = selector.match( /^([.#]?[-_a-zA-Z0-9]+|\\[[^\\]]+\\])/ );\n\t\t\tif ( match ) {\n\t\t\t\treturn baseSelectors\n\t\t\t\t\t.map(\n\t\t\t\t\t\t( base ) =>\n\t\t\t\t\t\t\t`${ base.trim() }${ selector.slice(\n\t\t\t\t\t\t\t\tmatch[ 0 ].length\n\t\t\t\t\t\t\t) }${ suffix }`\n\t\t\t\t\t)\n\t\t\t\t\t.join( ', ' );\n\t\t\t}\n\n\t\t\treturn baseSelectors\n\t\t\t\t.map( ( base ) => `${ base.trim() }${ suffix }` )\n\t\t\t\t.join( ', ' );\n\t\t} )\n\t\t.join( ', ' );\n}\n\n/**\n * Builds the scoped selector for root block style state styles.\n *\n * Uses the block's `selectors.root` to determine which element should receive\n * root-level state styles. If `selectors.root` describes a descendant element\n * (e.g. `.wp-block-button .wp-block-button__link`), the relative portion is\n * scoped under `baseSelector`. If no descendant is present, falls back to the\n * base selector.\n *\n * @param {string} baseSelector The block-instance scoping class selector.\n * @param {string} name         The block name, used to look up selectors.\n * @return {string} The fully-scoped CSS selector for root state styles.\n */\nexport function buildRootStyleStateSelector( baseSelector, name ) {\n\tconst rootSelector = getBlockType( name )?.selectors?.root;\n\treturn buildScopedBlockSelector( baseSelector, rootSelector );\n}\n\n/**\n * Builds the scoped CSS selector for a block state (e.g. :hover, :focus).\n *\n * Uses the block's `selectors.root` to determine which element the state\n * pseudo-class should apply to. If `selectors.root` describes a descendant\n * element (e.g. \".wp-block-button .wp-block-button__link\"), the relative\n * portion (\".wp-block-button__link\") is scoped under `baseSelector`. If no\n * descendant is present, falls back to appending the state to `baseSelector`.\n *\n * @param {string} baseSelector The block-instance scoping class selector.\n * @param {string} name         The block name, used to look up selectors.\n * @param {string} state        The pseudo-class string, e.g. \":hover\".\n * @return {string} The fully-scoped CSS selector for this state.\n */\nexport function buildPseudoStyleStateSelector( baseSelector, name, state ) {\n\treturn `${ buildRootStyleStateSelector( baseSelector, name ) }${ state }`;\n}\n\nexport function buildStateSelector( baseSelector, name, state ) {\n\tconst rootSelector = getBlockType( name )?.selectors?.root;\n\treturn buildScopedBlockSelector( baseSelector, rootSelector, state );\n}\n\n/**\n * Builds the CSS selector used to preview a state on the editor canvas,\n * scoped to a specific block instance via its `data-block` attribute.\n *\n * For blocks whose `selectors.root` targets a descendant element\n * (e.g. \".wp-block-button .wp-block-button__link\"), the selector targets\n * that descendant inside the block wrapper. Otherwise it targets the wrapper\n * itself.\n *\n * @param {string} clientId The block's clientId.\n * @param {string} name     The block name, used to look up selectors.\n * @return {string} CSS selector scoped to this block instance.\n */\nexport function buildCanvasStateSelector( clientId, name ) {\n\tconst rootSelector = getBlockType( name )?.selectors?.root;\n\treturn buildScopedBlockSelector(\n\t\t`[data-block=\"${ clientId }\"]`,\n\t\trootSelector\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA6B;AAC7B,kCAAkC;AAe3B,SAAS,wBAAyB,cAAe;AAMvD,QAAM,QAAQ,aAAa,KAAK,EAAE,MAAO,sBAAuB;AAChE,MAAK,CAAE,OAAQ;AACd,WAAO;AAAA,EACR;AACA,QAAM,OAAO,MAAO,CAAE,EAAE,KAAK;AAC7B,SAAO,QAAQ;AAChB;AAaO,SAAS,yBACf,cACA,eACA,SAAS,IACR;AACD,MAAK,OAAO,kBAAkB,YAAY,CAAE,eAAgB;AAC3D,eAAO,+CAAmB,YAAa,EACrC,IAAK,CAAE,aAAc,GAAI,SAAS,KAAK,CAAE,GAAI,MAAO,EAAG,EACvD,KAAM,IAAK;AAAA,EACd;AAEA,QAAM,oBAAgB,+CAAmB,YAAa,EAAE;AAAA,IACvD,CAAE,aAAc,SAAS,KAAK;AAAA,EAC/B;AACA,QAAM,gBAAY,+CAAmB,aAAc,EAAE;AAAA,IAAQ,CAAE,aAC9D,SAAS,KAAK;AAAA,EACf;AAEA,MAAK,CAAE,UAAU,QAAS;AACzB,WAAO,cACL,IAAK,CAAE,aAAc,GAAI,SAAS,KAAK,CAAE,GAAI,MAAO,EAAG,EACvD,KAAM,IAAK;AAAA,EACd;AAEA,SAAO,UACL,IAAK,CAAE,aAAc;AACrB,eAAW,SAAS,KAAK;AAQzB,UAAM,QAAQ,SAAS,MAAO,mCAAoC;AAClE,QAAK,OAAQ;AACZ,aAAO,cACL;AAAA,QACA,CAAE,SACD,GAAI,KAAK,KAAK,CAAE,GAAI,SAAS;AAAA,UAC5B,MAAO,CAAE,EAAE;AAAA,QACZ,CAAE,GAAI,MAAO;AAAA,MACf,EACC,KAAM,IAAK;AAAA,IACd;AAEA,WAAO,cACL,IAAK,CAAE,SAAU,GAAI,KAAK,KAAK,CAAE,GAAI,MAAO,EAAG,EAC/C,KAAM,IAAK;AAAA,EACd,CAAE,EACD,KAAM,IAAK;AACd;AAeO,SAAS,4BAA6B,cAAc,MAAO;AACjE,QAAM,mBAAe,4BAAc,IAAK,GAAG,WAAW;AACtD,SAAO,yBAA0B,cAAc,YAAa;AAC7D;AAgBO,SAAS,8BAA+B,cAAc,MAAM,OAAQ;AAC1E,SAAO,GAAI,4BAA6B,cAAc,IAAK,CAAE,GAAI,KAAM;AACxE;AAEO,SAAS,mBAAoB,cAAc,MAAM,OAAQ;AAC/D,QAAM,mBAAe,4BAAc,IAAK,GAAG,WAAW;AACtD,SAAO,yBAA0B,cAAc,cAAc,KAAM;AACpE;AAeO,SAAS,yBAA0B,UAAU,MAAO;AAC1D,QAAM,mBAAe,4BAAc,IAAK,GAAG,WAAW;AACtD,SAAO;AAAA,IACN,gBAAiB,QAAS;AAAA,IAC1B;AAAA,EACD;AACD;",
+  "names": []
+}

package/build/hooks/states.cjs

@@ -0,0 +1,124 @@
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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);
+
+// packages/block-editor/src/hooks/states.js
+var states_exports = {};
+__export(states_exports, {
+  BlockStateBadges: () => BlockStateBadges,
+  BlockStatesControl: () => BlockStatesControl,
+  PSEUDO_STATE_LABELS: () => PSEUDO_STATE_LABELS,
+  RESPONSIVE_STATE_LABELS: () => RESPONSIVE_STATE_LABELS,
+  VALID_BLOCK_PSEUDO_STATES: () => VALID_BLOCK_PSEUDO_STATES
+});
+module.exports = __toCommonJS(states_exports);
+var import_blocks = require("@wordpress/blocks");
+var import_i18n = require("@wordpress/i18n");
+var import_state_control = __toESM(require("../components/global-styles/state-control.cjs"));
+var import_state_control_badges = __toESM(require("../components/global-styles/state-control-badges.cjs"));
+var import_utils = require("../components/global-styles/utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PSEUDO_STATE_LABELS = {
+  ":hover": (0, import_i18n.__)("Hover"),
+  ":focus": (0, import_i18n.__)("Focus"),
+  ":focus-visible": (0, import_i18n.__)("Focus-visible"),
+  ":active": (0, import_i18n.__)("Active")
+};
+var RESPONSIVE_STATE_LABELS = {
+  tablet: (0, import_i18n.__)("Tablet"),
+  mobile: (0, import_i18n.__)("Mobile")
+};
+var VALID_BLOCK_PSEUDO_STATES = {
+  "core/button": [":hover", ":focus", ":focus-visible", ":active"],
+  "core/navigation-link": [":hover", ":focus", ":focus-visible", ":active"]
+};
+function getPseudoStateOptions(name) {
+  const validStates = VALID_BLOCK_PSEUDO_STATES[name] ?? [];
+  return validStates.filter((state) => PSEUDO_STATE_LABELS[state]).map((state) => ({
+    value: state,
+    label: PSEUDO_STATE_LABELS[state]
+  }));
+}
+var DEFAULT_STATE_VALUE = "default";
+function getViewportStateOptions(name) {
+  if (!(0, import_blocks.getBlockType)(name)?.attributes?.style) {
+    return [];
+  }
+  return Object.entries(RESPONSIVE_STATE_LABELS).map(
+    ([value, label]) => ({
+      value,
+      label
+    })
+  );
+}
+function BlockStatesControl({ name, value, onChange }) {
+  const viewportStateOptions = getViewportStateOptions(name);
+  const pseudoStateOptions = getPseudoStateOptions(name);
+  const dropdownMenuProps = (0, import_utils.useToolsPanelDropdownMenuProps)();
+  if (!viewportStateOptions.length && !pseudoStateOptions.length) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_state_control.default,
+    {
+      viewportStates: viewportStateOptions,
+      pseudoStates: pseudoStateOptions,
+      viewportValue: value?.viewport ?? DEFAULT_STATE_VALUE,
+      pseudoStateValue: value?.pseudo ?? DEFAULT_STATE_VALUE,
+      onChangeViewport: (viewport) => onChange({ viewport }),
+      onChangePseudoState: (pseudo) => onChange({ pseudo }),
+      popoverProps: dropdownMenuProps.popoverProps,
+      showText: false
+    }
+  );
+}
+function BlockStateBadges({ name, value }) {
+  const viewportStateOptions = getViewportStateOptions(name);
+  const pseudoStateOptions = getPseudoStateOptions(name);
+  if (!viewportStateOptions.length && !pseudoStateOptions.length) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_state_control_badges.default,
+    {
+      viewportStates: viewportStateOptions,
+      pseudoStates: pseudoStateOptions,
+      viewportValue: value?.viewport ?? DEFAULT_STATE_VALUE,
+      pseudoStateValue: value?.pseudo ?? DEFAULT_STATE_VALUE
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlockStateBadges,
+  BlockStatesControl,
+  PSEUDO_STATE_LABELS,
+  RESPONSIVE_STATE_LABELS,
+  VALID_BLOCK_PSEUDO_STATES
+});
+//# sourceMappingURL=states.cjs.map

package/build/hooks/states.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/states.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport StateControl from '../components/global-styles/state-control';\nimport StateControlBadges from '../components/global-styles/state-control-badges';\nimport { useToolsPanelDropdownMenuProps } from '../components/global-styles/utils';\n\nexport const PSEUDO_STATE_LABELS = {\n\t':hover': __( 'Hover' ),\n\t':focus': __( 'Focus' ),\n\t':focus-visible': __( 'Focus-visible' ),\n\t':active': __( 'Active' ),\n};\n\nexport const RESPONSIVE_STATE_LABELS = {\n\ttablet: __( 'Tablet' ),\n\tmobile: __( 'Mobile' ),\n};\n\n// Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS\n// and packages/global-styles-engine/src/core/render.tsx.\nexport const VALID_BLOCK_PSEUDO_STATES = {\n\t'core/button': [ ':hover', ':focus', ':focus-visible', ':active' ],\n\t'core/navigation-link': [ ':hover', ':focus', ':focus-visible', ':active' ],\n};\n\nfunction getPseudoStateOptions( name ) {\n\tconst validStates = VALID_BLOCK_PSEUDO_STATES[ name ] ?? [];\n\n\treturn validStates\n\t\t.filter( ( state ) => PSEUDO_STATE_LABELS[ state ] )\n\t\t.map( ( state ) => ( {\n\t\t\tvalue: state,\n\t\t\tlabel: PSEUDO_STATE_LABELS[ state ],\n\t\t} ) );\n}\n\nconst DEFAULT_STATE_VALUE = 'default';\n\nfunction getViewportStateOptions( name ) {\n\tif ( ! getBlockType( name )?.attributes?.style ) {\n\t\treturn [];\n\t}\n\n\treturn Object.entries( RESPONSIVE_STATE_LABELS ).map(\n\t\t( [ value, label ] ) => ( {\n\t\t\tvalue,\n\t\t\tlabel,\n\t\t} )\n\t);\n}\n\n/**\n * Renders a style-state selector in the block card header.\n * Viewport states are shown for blocks with a style attribute, while\n * pseudo-states are shown for blocks with configured pseudo-state support.\n *\n * @param {Object}   props          Component props.\n * @param {string}   props.name     Block name.\n * @param {Object}   props.value    Currently selected style-state value.\n * @param {Function} props.onChange Callback when style-state selection changes.\n * @return {Element|null} State control component, or null if not applicable.\n */\nexport function BlockStatesControl( { name, value, onChange } ) {\n\tconst viewportStateOptions = getViewportStateOptions( name );\n\tconst pseudoStateOptions = getPseudoStateOptions( name );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tif ( ! viewportStateOptions.length && ! pseudoStateOptions.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StateControl\n\t\t\tviewportStates={ viewportStateOptions }\n\t\t\tpseudoStates={ pseudoStateOptions }\n\t\t\tviewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }\n\t\t\tpseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }\n\t\t\tonChangeViewport={ ( viewport ) => onChange( { viewport } ) }\n\t\t\tonChangePseudoState={ ( pseudo ) => onChange( { pseudo } ) }\n\t\t\tpopoverProps={ dropdownMenuProps.popoverProps }\n\t\t\tshowText={ false }\n\t\t/>\n\t);\n}\n\nexport function BlockStateBadges( { name, value } ) {\n\tconst viewportStateOptions = getViewportStateOptions( name );\n\tconst pseudoStateOptions = getPseudoStateOptions( name );\n\n\tif ( ! viewportStateOptions.length && ! pseudoStateOptions.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StateControlBadges\n\t\t\tviewportStates={ viewportStateOptions }\n\t\t\tpseudoStates={ pseudoStateOptions }\n\t\t\tviewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }\n\t\t\tpseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA6B;AAC7B,kBAAmB;AAKnB,2BAAyB;AACzB,kCAA+B;AAC/B,mBAA+C;AAoE7C;AAlEK,IAAM,sBAAsB;AAAA,EAClC,cAAU,gBAAI,OAAQ;AAAA,EACtB,cAAU,gBAAI,OAAQ;AAAA,EACtB,sBAAkB,gBAAI,eAAgB;AAAA,EACtC,eAAW,gBAAI,QAAS;AACzB;AAEO,IAAM,0BAA0B;AAAA,EACtC,YAAQ,gBAAI,QAAS;AAAA,EACrB,YAAQ,gBAAI,QAAS;AACtB;AAIO,IAAM,4BAA4B;AAAA,EACxC,eAAe,CAAE,UAAU,UAAU,kBAAkB,SAAU;AAAA,EACjE,wBAAwB,CAAE,UAAU,UAAU,kBAAkB,SAAU;AAC3E;AAEA,SAAS,sBAAuB,MAAO;AACtC,QAAM,cAAc,0BAA2B,IAAK,KAAK,CAAC;AAE1D,SAAO,YACL,OAAQ,CAAE,UAAW,oBAAqB,KAAM,CAAE,EAClD,IAAK,CAAE,WAAa;AAAA,IACpB,OAAO;AAAA,IACP,OAAO,oBAAqB,KAAM;AAAA,EACnC,EAAI;AACN;AAEA,IAAM,sBAAsB;AAE5B,SAAS,wBAAyB,MAAO;AACxC,MAAK,KAAE,4BAAc,IAAK,GAAG,YAAY,OAAQ;AAChD,WAAO,CAAC;AAAA,EACT;AAEA,SAAO,OAAO,QAAS,uBAAwB,EAAE;AAAA,IAChD,CAAE,CAAE,OAAO,KAAM,OAAS;AAAA,MACzB;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;AAaO,SAAS,mBAAoB,EAAE,MAAM,OAAO,SAAS,GAAI;AAC/D,QAAM,uBAAuB,wBAAyB,IAAK;AAC3D,QAAM,qBAAqB,sBAAuB,IAAK;AACvD,QAAM,wBAAoB,6CAA+B;AAEzD,MAAK,CAAE,qBAAqB,UAAU,CAAE,mBAAmB,QAAS;AACnE,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC,qBAAAA;AAAA,IAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,cAAe;AAAA,MACf,eAAgB,OAAO,YAAY;AAAA,MACnC,kBAAmB,OAAO,UAAU;AAAA,MACpC,kBAAmB,CAAE,aAAc,SAAU,EAAE,SAAS,CAAE;AAAA,MAC1D,qBAAsB,CAAE,WAAY,SAAU,EAAE,OAAO,CAAE;AAAA,MACzD,cAAe,kBAAkB;AAAA,MACjC,UAAW;AAAA;AAAA,EACZ;AAEF;AAEO,SAAS,iBAAkB,EAAE,MAAM,MAAM,GAAI;AACnD,QAAM,uBAAuB,wBAAyB,IAAK;AAC3D,QAAM,qBAAqB,sBAAuB,IAAK;AAEvD,MAAK,CAAE,qBAAqB,UAAU,CAAE,mBAAmB,QAAS;AACnE,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC,4BAAAC;AAAA,IAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,cAAe;AAAA,MACf,eAAgB,OAAO,YAAY;AAAA,MACnC,kBAAmB,OAAO,UAAU;AAAA;AAAA,EACrC;AAEF;",
+  "names": ["StateControl", "StateControlBadges"]
+}

package/build/hooks/style.cjs

@@ -22,12 +22,18 @@ var style_exports = {};
 __export(style_exports, {
   addSaveProps: () => addSaveProps,
   default: () => style_default,
+  getBlockStateStylesCSS: () => getBlockStateStylesCSS,
+  getCanvasStateStyleValue: () => getCanvasStateStyleValue,
   getInlineStyles: () => getInlineStyles,
+  getResponsiveStateCSSRules: () => getResponsiveStateCSSRules,
+  getStateStylesCSS: () => getStateStylesCSS,
   omitStyle: () => omitStyle
 });
 module.exports = __toCommonJS(style_exports);
 var import_element = require("@wordpress/element");
 var import_hooks = require("@wordpress/hooks");
+var import_data = require("@wordpress/data");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_blocks = require("@wordpress/blocks");
 var import_compose = require("@wordpress/compose");
 var import_style_engine = require("@wordpress/style-engine");
@@ -37,9 +43,20 @@ var import_color = require("./color.cjs");
 var import_typography = require("./typography.cjs");
 var import_dimensions = require("./dimensions.cjs");
 var import_utils = require("./utils.cjs");
+var import_block_style_state = require("./block-style-state.cjs");
+var import_states = require("./states.cjs");
+var import_state_utils = require("./state-utils.cjs");
 var import_utils2 = require("../components/global-styles/utils.cjs");
 var import_block_editing_mode = require("../components/block-editing-mode/index.cjs");
+var import_store = require("../store/index.cjs");
+var import_private_keys = require("../store/private-keys.cjs");
+var import_lock_unlock = require("../lock-unlock.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+var BORDER_SIDES = ["Top", "Right", "Bottom", "Left"];
+var RESPONSIVE_BREAKPOINTS = {
+  mobile: "@media (width <= 480px)",
+  tablet: "@media (480px < width <= 782px)"
+};
 var styleSupportKeys = [
   ...import_typography.TYPOGRAPHY_SUPPORT_KEYS,
   import_border.BORDER_SUPPORT_KEY,
@@ -57,6 +74,200 @@ function getInlineStyles(styles = {}) {
   });
   return output;
 }
+function getStateFallbackBorderStyles(stateStyles) {
+  const border = stateStyles?.border;
+  if (!border) {
+    return void 0;
+  }
+  const hasBorderStyle = !!border.style;
+  const hasBorderColor = !!border.color;
+  const hasBorderWidth = !!border.width;
+  const fallbackBorder = {};
+  if (!hasBorderStyle && (hasBorderColor || hasBorderWidth)) {
+    fallbackBorder.style = "solid";
+  }
+  BORDER_SIDES.forEach((side) => {
+    const sideKey = side.toLowerCase();
+    const sideBorder = border[sideKey];
+    const hasSideStyle = !!sideBorder?.style;
+    const hasSideColor = !!sideBorder?.color;
+    const hasSideWidth = !!sideBorder?.width;
+    if (!hasBorderStyle && !hasSideStyle && (hasSideColor || hasSideWidth)) {
+      fallbackBorder[sideKey] = { style: "solid" };
+    }
+  });
+  return (0, import_utils.cleanEmptyObject)({ border: (0, import_utils.cleanEmptyObject)(fallbackBorder) });
+}
+function getStateStylesCSS(stateStyles, selector) {
+  const css = (0, import_style_engine.compileCSS)(stateStyles, { selector });
+  const importantCSS = css ? css.replace(/;/g, " !important;") : void 0;
+  const fallbackBorderStyles = getStateFallbackBorderStyles(stateStyles);
+  const fallbackCSS = fallbackBorderStyles ? (0, import_style_engine.compileCSS)(fallbackBorderStyles, { selector }) : void 0;
+  return [importantCSS, fallbackCSS].filter(Boolean).join("\n");
+}
+function isPlainObject(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function mergeStyleObjects(target = {}, source = {}) {
+  const merged = { ...target };
+  Object.entries(source).forEach(([key, value]) => {
+    merged[key] = isPlainObject(value) && isPlainObject(merged[key]) ? mergeStyleObjects(merged[key], value) : value;
+  });
+  return merged;
+}
+function addStyleGroup(groups, selector, style) {
+  const key = selector || "";
+  const existing = groups.get(key) || { selector, style: {} };
+  groups.set(key, {
+    selector,
+    style: mergeStyleObjects(existing.style, style)
+  });
+}
+function getStateStyleGroups(stateStyles, name) {
+  const blockSelectors = (0, import_blocks.getBlockType)(name)?.selectors || {};
+  const groups = /* @__PURE__ */ new Map();
+  Object.entries(stateStyles || {}).forEach(
+    ([feature, featureStyles]) => {
+      const featureSelectors = blockSelectors[feature];
+      if (typeof featureSelectors === "string") {
+        addStyleGroup(groups, featureSelectors, {
+          [feature]: featureStyles
+        });
+        return;
+      }
+      if (isPlainObject(featureSelectors) && isPlainObject(featureStyles)) {
+        const remainingStyles = { ...featureStyles };
+        Object.entries(featureSelectors).forEach(
+          ([subfeature, subfeatureSelector]) => {
+            if (subfeature === "root" || typeof subfeatureSelector !== "string" || !Object.hasOwn(featureStyles, subfeature)) {
+              return;
+            }
+            addStyleGroup(groups, subfeatureSelector, {
+              [feature]: {
+                [subfeature]: featureStyles[subfeature]
+              }
+            });
+            delete remainingStyles[subfeature];
+          }
+        );
+        if (Object.keys(remainingStyles).length) {
+          addStyleGroup(
+            groups,
+            featureSelectors.root || blockSelectors.root,
+            {
+              [feature]: remainingStyles
+            }
+          );
+        }
+        return;
+      }
+      addStyleGroup(groups, blockSelectors.root, {
+        [feature]: featureStyles
+      });
+    }
+  );
+  return Array.from(groups.values());
+}
+function getBlockStateStylesCSS(stateStyles, options) {
+  const { name, baseSelector, state = "" } = options;
+  const rules = getStateStyleGroups(stateStyles, name).map(
+    ({ selector: blockSelector, style }) => getStateStylesCSS(
+      style,
+      (0, import_state_utils.buildScopedBlockSelector)(baseSelector, blockSelector, state)
+    )
+  ).filter(Boolean);
+  return rules.length ? rules.join("\n") : void 0;
+}
+function getRootStateStyles(stateStyles, nestedKeys) {
+  if (!stateStyles) {
+    return stateStyles;
+  }
+  const rootStyles = { ...stateStyles };
+  nestedKeys.forEach((key) => {
+    delete rootStyles[key];
+  });
+  return rootStyles;
+}
+function getPseudoStateCSSRules(style, name, baseSelector) {
+  const validPseudoStates = import_states.VALID_BLOCK_PSEUDO_STATES[name];
+  if (!validPseudoStates) {
+    return [];
+  }
+  const cssRules = [];
+  validPseudoStates.forEach((pseudoState) => {
+    const stateStyles = style?.[pseudoState];
+    if (stateStyles) {
+      const css = getBlockStateStylesCSS(stateStyles, {
+        name,
+        baseSelector,
+        state: pseudoState
+      });
+      if (css) {
+        cssRules.push(css);
+      }
+    }
+  });
+  return cssRules;
+}
+function getResponsiveStateCSSRules(style, name, baseSelector) {
+  const cssRules = [];
+  const validPseudoStates = import_states.VALID_BLOCK_PSEUDO_STATES[name] ?? [];
+  const nestedStateKeys = ["elements", ...validPseudoStates];
+  Object.entries(RESPONSIVE_BREAKPOINTS).forEach(
+    ([viewport, mediaQuery]) => {
+      const viewportStyles = style?.[viewport];
+      if (!viewportStyles) {
+        return;
+      }
+      const viewportCSSRules = [];
+      const rootCSS = getBlockStateStylesCSS(
+        getRootStateStyles(viewportStyles, nestedStateKeys),
+        {
+          name,
+          baseSelector
+        }
+      );
+      if (rootCSS) {
+        viewportCSSRules.push(rootCSS);
+      }
+      const elementCSS = getElementCSSRules(
+        viewportStyles.elements,
+        name,
+        baseSelector
+      );
+      if (elementCSS) {
+        viewportCSSRules.push(elementCSS);
+      }
+      viewportCSSRules.push(
+        ...getPseudoStateCSSRules(viewportStyles, name, baseSelector)
+      );
+      if (viewportCSSRules.length) {
+        cssRules.push(
+          `${mediaQuery}{${viewportCSSRules.join("")}}`
+        );
+      }
+    }
+  );
+  return cssRules;
+}
+function getCanvasStateStyleValue(style, selectedState) {
+  const stateValue = (0, import_block_style_state.getStyleForState)(style, selectedState);
+  if (!(0, import_block_style_state.hasViewportBlockStyleState)(selectedState)) {
+    return stateValue;
+  }
+  const defaultViewportState = {
+    ...selectedState,
+    viewport: import_block_style_state.DEFAULT_BLOCK_STYLE_STATE.viewport
+  };
+  const defaultViewportStateValue = (0, import_block_style_state.getStyleForState)(
+    style,
+    defaultViewportState
+  );
+  if (defaultViewportStateValue && stateValue) {
+    return (0, import_global_styles_engine.mergeGlobalStyles)(defaultViewportStateValue, stateValue);
+  }
+  return stateValue || defaultViewportStateValue;
+}
 function addAttribute(settings) {
   if (!hasStyleSupport(settings) && !(0, import_blocks.hasBlockSupport)(settings, "customCSS", true)) {
     return settings;
@@ -153,28 +364,86 @@ function BlockStyleControls({
   clientId,
   name,
   setAttributes,
+  style,
   __unstableParentLayout
 }) {
   const settings = (0, import_utils.useBlockSettings)(name, __unstableParentLayout);
   const blockEditingMode = (0, import_block_editing_mode.useBlockEditingMode)();
+  const { globalBlockStyles, selectedState, showStateOnCanvas } = (0, import_data.useSelect)(
+    (select) => {
+      const blockEditorSelect = select(import_store.store);
+      const {
+        getSelectedBlockStyleState,
+        isSelectedBlockStyleStateShownOnCanvas
+      } = (0, import_lock_unlock.unlock)(blockEditorSelect);
+      const editorSettings = blockEditorSelect.getSettings();
+      return {
+        globalBlockStyles: editorSettings?.[import_private_keys.globalStylesDataKey]?.blocks?.[name],
+        selectedState: getSelectedBlockStyleState(clientId),
+        showStateOnCanvas: isSelectedBlockStyleStateShownOnCanvas(clientId)
+      };
+    },
+    [clientId, name]
+  );
+  const isPseudoSelectorState = (0, import_block_style_state.hasPseudoBlockStyleState)(selectedState);
+  const canvasStateCSS = (0, import_element.useMemo)(() => {
+    if (!showStateOnCanvas || !isPseudoSelectorState) {
+      return void 0;
+    }
+    const globalStateValue = getCanvasStateStyleValue(
+      globalBlockStyles,
+      selectedState
+    );
+    const instanceStateValue = getCanvasStateStyleValue(
+      style,
+      selectedState
+    );
+    let stateValue;
+    if (globalStateValue && instanceStateValue) {
+      stateValue = (0, import_global_styles_engine.mergeGlobalStyles)(
+        globalStateValue,
+        instanceStateValue
+      );
+    } else if (instanceStateValue) {
+      stateValue = instanceStateValue;
+    } else if (globalStateValue) {
+      stateValue = globalStateValue;
+    } else {
+      return void 0;
+    }
+    return getBlockStateStylesCSS(stateValue, {
+      name,
+      baseSelector: `[data-block="${clientId}"]`
+    });
+  }, [
+    showStateOnCanvas,
+    isPseudoSelectorState,
+    globalBlockStyles,
+    style,
+    selectedState,
+    clientId,
+    name
+  ]);
+  (0, import_utils.useStyleOverride)({ css: canvasStateCSS });
+  if (blockEditingMode !== "default") {
+    return null;
+  }
+  const panelSettings = {
+    ...settings,
+    typography: {
+      ...settings.typography,
+      // The text alignment UI for individual blocks is rendered in
+      // the block toolbar, so disable it here.
+      textAlign: false
+    }
+  };
   const passedProps = {
     clientId,
     name,
     setAttributes,
-    settings: {
-      ...settings,
-      typography: {
-        ...settings.typography,
-        // The text alignment UI for individual blocks is rendered in
-        // the block toolbar, so disable it here.
-        textAlign: false
-      }
-    }
+    settings: panelSettings
   };
-  if (blockEditingMode !== "default") {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_style_state.BlockStyleStateProvider, { value: selectedState, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color.ColorEdit, { ...passedProps }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_background.BackgroundImagePanel, { ...passedProps }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.TypographyPanel, { ...passedProps }),
@@ -258,10 +527,24 @@ function useBlockProps({ name, style }) {
   );
   const baseElementSelector = `.${blockElementsContainerIdentifier}`;
   const blockElementStyles = style?.elements;
-  const styles = (0, import_element.useMemo)(
-    () => getElementCSSRules(blockElementStyles, name, baseElementSelector),
-    [baseElementSelector, blockElementStyles, name]
-  );
+  const styles = (0, import_element.useMemo)(() => {
+    const cssRules = [];
+    const elementCSS = getElementCSSRules(
+      blockElementStyles,
+      name,
+      baseElementSelector
+    );
+    if (elementCSS) {
+      cssRules.push(elementCSS);
+    }
+    cssRules.push(
+      ...getPseudoStateCSSRules(style, name, baseElementSelector)
+    );
+    cssRules.push(
+      ...getResponsiveStateCSSRules(style, name, baseElementSelector)
+    );
+    return cssRules.length > 0 ? cssRules.join("") : void 0;
+  }, [baseElementSelector, blockElementStyles, name, style]);
   (0, import_utils.useStyleOverride)({ css: styles });
   return addSaveProps(
     { className: blockElementsContainerIdentifier },
@@ -278,7 +561,11 @@ function useBlockProps({ name, style }) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   addSaveProps,
+  getBlockStateStylesCSS,
+  getCanvasStateStyleValue,
   getInlineStyles,
+  getResponsiveStateCSSRules,
+  getStateStylesCSS,
   omitStyle
 });
 //# sourceMappingURL=style.cjs.map