@wordpress/block-editor 17.1.0 → 17.2.1-next.v.202609171837.0

package/build/components/global-styles/text-shadow-panel.cjs

@@ -0,0 +1,254 @@
+"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/components/global-styles/text-shadow-panel.tsx
+var text_shadow_panel_exports = {};
+__export(text_shadow_panel_exports, {
+  TextShadowPopover: () => TextShadowPopover
+});
+module.exports = __toCommonJS(text_shadow_panel_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_ui = require("@wordpress/ui");
+var import_element = require("@wordpress/element");
+var import_icons = require("@wordpress/icons");
+var import_clsx = __toESM(require("clsx"));
+var import_use_settings = require("../use-settings/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EMPTY_ARRAY = [];
+var PRESETS_SELECT_THRESHOLD = 7;
+function getTextShadowPresetSlug(rawValue) {
+  if (!rawValue || typeof rawValue !== "string") {
+    return void 0;
+  }
+  if (rawValue.startsWith("var:preset|text-shadow|")) {
+    return rawValue.replace("var:preset|text-shadow|", "");
+  }
+  const cssVarMatch = rawValue.match(
+    /^var\(--wp--preset--text-shadow--([^)]+)\)$/
+  );
+  if (cssVarMatch) {
+    return cssVarMatch[1];
+  }
+  return void 0;
+}
+function TextShadowPopover({ textShadow, onChange }) {
+  const popoverProps = {
+    placement: "left-start",
+    offset: 36,
+    shift: true,
+    className: "block-editor-global-styles__text-shadow-popover"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Dropdown,
+    {
+      popoverProps,
+      className: "block-editor-global-styles__text-shadow-dropdown",
+      renderToggle: ({ onToggle, isOpen }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        TextShadowToggle,
+        {
+          textShadow,
+          onChange,
+          onToggle,
+          isOpen
+        }
+      ),
+      renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        TextShadowControl,
+        {
+          textShadow,
+          onChange
+        }
+      )
+    }
+  );
+}
+function TextShadowControl({ textShadow, onChange }) {
+  const [
+    defaultPresetsEnabled,
+    defaultPresets,
+    themePresets,
+    customPresets
+  ] = (0, import_use_settings.useSettings)(
+    "typography.defaultTextShadowPresets",
+    "typography.textShadowPresets.default",
+    "typography.textShadowPresets.theme",
+    "typography.textShadowPresets.custom"
+  );
+  const presets = (0, import_element.useMemo)(
+    () => [
+      ...defaultPresetsEnabled && defaultPresets || EMPTY_ARRAY,
+      ...themePresets || EMPTY_ARRAY,
+      ...customPresets || EMPTY_ARRAY
+    ],
+    [defaultPresetsEnabled, defaultPresets, themePresets, customPresets]
+  );
+  const choices = [
+    { value: "none", label: (0, import_i18n.__)("None") },
+    ...presets.map((preset) => ({
+      value: `var:preset|text-shadow|${preset.slug}`,
+      label: preset.name
+    }))
+  ];
+  const activeSlug = getTextShadowPresetSlug(textShadow);
+  const activeValue = activeSlug ? `var:preset|text-shadow|${activeSlug}` : textShadow ?? "";
+  const previewValue = activeSlug ? presets.find((preset) => preset.slug === activeSlug)?.textShadow : textShadow;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ui.Stack,
+    {
+      className: "block-editor-global-styles__text-shadow",
+      direction: "column",
+      gap: "sm",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Text, { variant: "heading-sm", render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {}), children: (0, import_i18n.__)("Text shadow") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "block-editor-global-styles__text-shadow-preview",
+            style: { textShadow: previewValue },
+            children: (0, import_i18n.__)("Code is poetry")
+          }
+        ),
+        presets.length >= PRESETS_SELECT_THRESHOLD ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.SelectControl,
+          {
+            hideLabelFromVision: true,
+            label: (0, import_i18n.__)("Text shadow preset"),
+            value: activeValue,
+            options: [
+              { value: "", label: (0, import_i18n.__)("Default") },
+              ...choices
+            ],
+            onChange
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Composite,
+          {
+            role: "listbox",
+            "aria-label": (0, import_i18n.__)("Text shadow presets"),
+            render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Stack, { direction: "column" }),
+            children: choices.map(({ value, label }) => {
+              const isActive = value === activeValue;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_components.Composite.Item,
+                {
+                  role: "option",
+                  "aria-selected": isActive,
+                  className: (0, import_clsx.default)(
+                    "block-editor-global-styles__text-shadow-list-item",
+                    { "is-active": isActive }
+                  ),
+                  onClick: () => onChange(value),
+                  render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { __next40pxDefaultSize: true }),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.check })
+                  ]
+                },
+                value
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Stack, { direction: "row", justify: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            __next40pxDefaultSize: true,
+            variant: "tertiary",
+            onClick: () => onChange(void 0),
+            disabled: !textShadow,
+            accessibleWhenDisabled: true,
+            children: (0, import_i18n.__)("Clear")
+          }
+        ) })
+      ]
+    }
+  );
+}
+function TextShadowToggle({
+  textShadow,
+  onChange,
+  onToggle,
+  isOpen
+}) {
+  const buttonRef = (0, import_element.useRef)(void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Button,
+      {
+        __next40pxDefaultSize: true,
+        onClick: onToggle,
+        className: (0, import_clsx.default)(
+          "block-editor-global-styles__text-shadow-dropdown-toggle",
+          { "is-open": isOpen }
+        ),
+        "aria-expanded": isOpen,
+        ref: buttonRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ui.Stack,
+          {
+            direction: "row",
+            justify: "flex-start",
+            align: "center",
+            gap: "sm",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.shadow, size: 24 }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: (0, import_i18n.__)("Text shadow") })
+            ]
+          }
+        )
+      }
+    ),
+    !!textShadow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Button,
+      {
+        __next40pxDefaultSize: true,
+        size: "small",
+        icon: import_icons.reset,
+        onClick: () => {
+          if (isOpen) {
+            onToggle();
+          }
+          onChange(void 0);
+          buttonRef.current?.focus();
+        },
+        className: (0, import_clsx.default)(
+          "block-editor-global-styles__text-shadow-remove-button",
+          { "is-open": isOpen }
+        ),
+        label: (0, import_i18n.__)("Remove text shadow")
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextShadowPopover
+});
+//# sourceMappingURL=text-shadow-panel.cjs.map

package/build/components/global-styles/text-shadow-panel.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/text-shadow-panel.tsx"],
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tComposite,\n\tDropdown,\n\tSelectControl as WCSelectControl,\n} from '@wordpress/components';\nimport { Stack, Text } from '@wordpress/ui';\nimport { useRef, useMemo } from '@wordpress/element';\nimport { shadow as textShadowIcon, Icon, check, reset } from '@wordpress/icons';\nimport type { TextShadowPreset } from '@wordpress/global-styles-engine';\nimport clsx from 'clsx';\nimport { useSettings } from '../use-settings';\n\ntype TextShadowValue = string | undefined;\n\ninterface TextShadowProps {\n\ttextShadow: TextShadowValue;\n\tonChange: ( textShadow: TextShadowValue ) => void;\n}\n\ninterface TextShadowToggleProps extends TextShadowProps {\n\tonToggle: () => void;\n\tisOpen: boolean;\n}\n\n/**\n * Shared reference to an empty array for cases where it is important to avoid\n * returning a new array reference on every invocation.\n */\nconst EMPTY_ARRAY: TextShadowPreset[] = [];\n\n// Above this number of presets, the list is rendered as a compact dropdown\n// rather than a long list of options.\nconst PRESETS_SELECT_THRESHOLD = 7;\n\n/**\n * Extracts the preset slug from a raw text shadow value.\n *\n * @param rawValue The stored text shadow value.\n * @return The preset slug, or undefined for custom values.\n */\nfunction getTextShadowPresetSlug( rawValue: TextShadowValue ) {\n\tif ( ! rawValue || typeof rawValue !== 'string' ) {\n\t\treturn undefined;\n\t}\n\n\t// Block supports use the `var:preset|text-shadow|slug` format.\n\tif ( rawValue.startsWith( 'var:preset|text-shadow|' ) ) {\n\t\treturn rawValue.replace( 'var:preset|text-shadow|', '' );\n\t}\n\n\t// Global styles data uses the `var(--wp--preset--text-shadow--slug)` format.\n\tconst cssVarMatch = rawValue.match(\n\t\t/^var\\(--wp--preset--text-shadow--([^)]+)\\)$/\n\t);\n\tif ( cssVarMatch ) {\n\t\treturn cssVarMatch[ 1 ];\n\t}\n\n\treturn undefined;\n}\n\nexport function TextShadowPopover( { textShadow, onChange }: TextShadowProps ) {\n\tconst popoverProps = {\n\t\tplacement: 'left-start' as const,\n\t\toffset: 36,\n\t\tshift: true,\n\t\tclassName: 'block-editor-global-styles__text-shadow-popover',\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"block-editor-global-styles__text-shadow-dropdown\"\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => (\n\t\t\t\t<TextShadowToggle\n\t\t\t\t\ttextShadow={ textShadow }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonToggle={ onToggle }\n\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<TextShadowControl\n\t\t\t\t\ttextShadow={ textShadow }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction TextShadowControl( { textShadow, onChange }: TextShadowProps ) {\n\tconst [\n\t\tdefaultPresetsEnabled,\n\t\tdefaultPresets,\n\t\tthemePresets,\n\t\tcustomPresets,\n\t] = useSettings(\n\t\t'typography.defaultTextShadowPresets',\n\t\t'typography.textShadowPresets.default',\n\t\t'typography.textShadowPresets.theme',\n\t\t'typography.textShadowPresets.custom'\n\t) as [\n\t\tboolean | undefined,\n\t\tTextShadowPreset[] | undefined,\n\t\tTextShadowPreset[] | undefined,\n\t\tTextShadowPreset[] | undefined,\n\t];\n\n\tconst presets = useMemo(\n\t\t() => [\n\t\t\t...( ( defaultPresetsEnabled && defaultPresets ) || EMPTY_ARRAY ),\n\t\t\t...( themePresets || EMPTY_ARRAY ),\n\t\t\t...( customPresets || EMPTY_ARRAY ),\n\t\t],\n\t\t[ defaultPresetsEnabled, defaultPresets, themePresets, customPresets ]\n\t);\n\n\tconst choices = [\n\t\t{ value: 'none', label: __( 'None' ) },\n\t\t...presets.map( ( preset ) => ( {\n\t\t\tvalue: `var:preset|text-shadow|${ preset.slug }`,\n\t\t\tlabel: preset.name,\n\t\t} ) ),\n\t];\n\n\tconst activeSlug = getTextShadowPresetSlug( textShadow );\n\tconst activeValue = activeSlug\n\t\t? `var:preset|text-shadow|${ activeSlug }`\n\t\t: ( textShadow ?? '' );\n\tconst previewValue = activeSlug\n\t\t? presets.find( ( preset ) => preset.slug === activeSlug )?.textShadow\n\t\t: textShadow;\n\n\treturn (\n\t\t<Stack\n\t\t\tclassName=\"block-editor-global-styles__text-shadow\"\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"sm\"\n\t\t>\n\t\t\t<Text variant=\"heading-sm\" render={ <h2 /> }>\n\t\t\t\t{ __( 'Text shadow' ) }\n\t\t\t</Text>\n\t\t\t<div\n\t\t\t\tclassName=\"block-editor-global-styles__text-shadow-preview\"\n\t\t\t\tstyle={ { textShadow: previewValue } }\n\t\t\t>\n\t\t\t\t{ __( 'Code is poetry' ) }\n\t\t\t</div>\n\t\t\t{ presets.length >= PRESETS_SELECT_THRESHOLD ? (\n\t\t\t\t<WCSelectControl\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tlabel={ __( 'Text shadow preset' ) }\n\t\t\t\t\tvalue={ activeValue }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ value: '', label: __( 'Default' ) },\n\t\t\t\t\t\t...choices,\n\t\t\t\t\t] }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Composite\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-label={ __( 'Text shadow presets' ) }\n\t\t\t\t\trender={ <Stack direction=\"column\" /> }\n\t\t\t\t>\n\t\t\t\t\t{ choices.map( ( { value, label } ) => {\n\t\t\t\t\t\tconst isActive = value === activeValue;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={ isActive }\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'block-editor-global-styles__text-shadow-list-item',\n\t\t\t\t\t\t\t\t\t{ 'is-active': isActive }\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonClick={ () => onChange( value ) }\n\t\t\t\t\t\t\t\trender={ <Button __next40pxDefaultSize /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Composite>\n\t\t\t) }\n\t\t\t<Stack direction=\"row\" justify=\"flex-end\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\tdisabled={ ! textShadow }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nfunction TextShadowToggle( {\n\ttextShadow,\n\tonChange,\n\tonToggle,\n\tisOpen,\n}: TextShadowToggleProps ) {\n\tconst buttonRef = useRef< HTMLButtonElement >( undefined );\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tonClick={ onToggle }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'block-editor-global-styles__text-shadow-dropdown-toggle',\n\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tref={ buttonRef }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ textShadowIcon } size={ 24 } />\n\t\t\t\t\t<span>{ __( 'Text shadow' ) }</span>\n\t\t\t\t</Stack>\n\t\t\t</Button>\n\t\t\t{ !! textShadow && (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ reset }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t// Return focus to parent button.\n\t\t\t\t\t\tbuttonRef.current?.focus();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'block-editor-global-styles__text-shadow-remove-button',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t) }\n\t\t\t\t\tlabel={ __( 'Remove text shadow' ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["WCSelectControl", "clsx", "textShadowIcon"]
+}

package/build/components/global-styles/typography-panel.cjs

@@ -47,6 +47,7 @@ var import_text_transform_control = __toESM(require("../text-transform-control/i
 var import_text_decoration_control = __toESM(require("../text-decoration-control/index.cjs"));
 var import_text_indent_control = __toESM(require("../text-indent-control/index.cjs"));
 var import_writing_mode_control = __toESM(require("../writing-mode-control/index.cjs"));
+var import_text_shadow_panel = require("./text-shadow-panel.cjs");
 var import_color_gradient_dropdown_item = __toESM(require("./color-gradient-dropdown-item.cjs"));
 var import_color_panel = require("./color-panel.cjs");
 var import_hooks = require("./hooks.cjs");
@@ -80,7 +81,8 @@ function useHasTypographyPanel(settings) {
   const hasTextColumns = useHasTextColumnsControl(settings);
   const hasFontSize = useHasFontSizeControl(settings);
   const hasTextColor = (0, import_color_panel.useHasTextPanel)(settings);
-  return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || hasTextIndent || hasWritingMode || hasTextColumns || hasTextColor;
+  const hasTextShadow = useHasTextShadowControl(settings);
+  return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || hasTextIndent || hasWritingMode || hasTextColumns || hasTextColor || hasTextShadow;
 }
 function useHasFontSizeControl(settings) {
   return settings?.typography?.defaultFontSizes !== false && settings?.typography?.fontSizes?.default?.length || settings?.typography?.fontSizes?.theme?.length || settings?.typography?.fontSizes?.custom?.length || settings?.typography?.customFontSize;
@@ -126,6 +128,9 @@ function useHasTextColumnsControl(settings) {
 function useHasTextIndentControl(settings) {
   return settings?.typography?.textIndent;
 }
+function useHasTextShadowControl(settings) {
+  return settings?.typography?.textShadow;
+}
 function getMergedFontSizes(settings) {
   const fontSizes = settings?.typography?.fontSizes;
   const defaultFontSizesEnabled = !!settings?.typography?.defaultFontSizes;
@@ -171,7 +176,8 @@ var DEFAULT_CONTROLS = {
   textDecoration: true,
   textIndent: true,
   writingMode: true,
-  textColumns: true
+  textColumns: true,
+  textShadow: true
 };
 var EMPTY_VALUES = [void 0, null, ""];
 function hasValue(value) {
@@ -193,7 +199,7 @@ function TypographyPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   isGlobalStyles = false,
-  showInheritanceLabelIndicators = (0, import_inheritance.isGlobalStylesInheritanceEnabled)(),
+  showInheritanceLabelIndicators = (0, import_inheritance.isGlobalStylesInheritanceIndicatorUIEnabled)(),
   contrastWarning
 }) {
   const { colors, allColors, areCustomSolidsEnabled, decodeValue } = (0, import_hooks.useColorGradientSettings)(settings);
@@ -213,8 +219,7 @@ function TypographyPanel({
       newSlug
     );
     let changedObject = (0, import_object.setImmutably)(value, ["color", "text"], encoded);
-    const syncLinkColor = (0, import_inheritance.isGlobalStylesInheritanceEnabled)() ? shouldSyncLinkColor(value, inheritedValue) : inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text;
-    if (syncLinkColor) {
+    if (shouldSyncLinkColor(value, inheritedValue)) {
       changedObject = (0, import_object.setImmutably)(
         changedObject,
         ["elements", "link", "color", "text"],
@@ -567,6 +572,21 @@ function TypographyPanel({
   };
   const hasTextAlign = () => hasValue(value?.typography?.textAlign);
   const resetTextAlign = () => setTextAlign(void 0);
+  const hasTextShadowControl = useHasTextShadowControl(settings);
+  const inheritedTextShadow = inheritedValue?.typography?.textShadow;
+  const textShadow = value?.typography?.textShadow ?? inheritedTextShadow;
+  const isTextShadowPlaceholder = !hasValue(value?.typography?.textShadow) && hasValue(inheritedTextShadow);
+  const setTextShadow = (newValue) => {
+    onChange(
+      (0, import_object.setImmutably)(
+        value,
+        ["typography", "textShadow"],
+        newValue || void 0
+      )
+    );
+  };
+  const hasTextShadow = () => hasValue(value?.typography?.textShadow);
+  const resetTextShadow = () => setTextShadow(void 0);
   const resetAllFilter = (0, import_element.useCallback)(
     (previousValue) => {
       if (!hasTextColorEnabled) {
@@ -893,6 +913,27 @@ function TypographyPanel({
             )
           }
         ),
+        hasTextShadowControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_inheritance.InheritanceToolsPanelItem,
+          {
+            ...inheritanceProps(
+              isTextShadowPlaceholder,
+              hasTextShadow() && inheritedTextShadow !== void 0
+            ),
+            label: (0, import_i18n.__)("Text shadow"),
+            hasValue: hasTextShadow,
+            onDeselect: resetTextShadow,
+            isShownByDefault: defaultControls.textShadow,
+            panelId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_text_shadow_panel.TextShadowPopover,
+              {
+                textShadow,
+                onChange: setTextShadow
+              }
+            )
+          }
+        ),
         hasTextAlignmentControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_inheritance.InheritanceToolsPanelItem,
           {