@wordpress/block-editor 16.0.0 → 16.1.0

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

@@ -55,9 +55,18 @@ var import_object = require("../../utils/object.cjs");
 var import_color_values = require("../../utils/color-values.cjs");
 var import_typography_utils = require("./typography-utils.cjs");
 var import_get_font_styles_and_weights = require("../../utils/get-font-styles-and-weights.cjs");
+var import_inheritance = require("./inheritance/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var MIN_TEXT_COLUMNS = 1;
 var MAX_TEXT_COLUMNS = 6;
+function shouldSyncLinkColor(value, inheritedValue) {
+  const localLinkColor = value?.elements?.link?.color?.text;
+  if (localLinkColor !== void 0) {
+    return localLinkColor === value?.color?.text;
+  }
+  const inheritedLinkColor = inheritedValue?.elements?.link?.color?.text;
+  return inheritedLinkColor === void 0 || inheritedValue?.color?.text === inheritedLinkColor;
+}
 function useHasTypographyPanel(settings) {
   const hasFontFamily = useHasFontFamilyControl(settings);
   const hasLineHeight = useHasLineHeightControl(settings);
@@ -164,6 +173,17 @@ var DEFAULT_CONTROLS = {
   writingMode: true,
   textColumns: true
 };
+var EMPTY_VALUES = [void 0, null, ""];
+function hasValue(value) {
+  return !EMPTY_VALUES.includes(value);
+}
+function getNumericPlaceholder(rawValue) {
+  if (!hasValue(rawValue)) {
+    return void 0;
+  }
+  const [quantity] = (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(rawValue);
+  return quantity;
+}
 function TypographyPanel({
   as: Wrapper = TypographyToolsPanel,
   value,
@@ -173,9 +193,15 @@ function TypographyPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   isGlobalStyles = false,
+  showInheritanceLabelIndicators = (0, import_inheritance.isGlobalStylesInheritanceEnabled)(),
   contrastWarning
 }) {
   const { colors, allColors, areCustomSolidsEnabled, decodeValue } = (0, import_hooks.useColorGradientSettings)(settings);
+  const inheritanceProps = (isInherited, hasLocalOverride, className) => (0, import_inheritance.getInheritanceProps)(
+    showInheritanceLabelIndicators && isInherited,
+    showInheritanceLabelIndicators && hasLocalOverride,
+    className
+  );
   const hasTextColorEnabled = (0, import_color_panel.useHasTextPanel)(settings);
   const textColor = decodeValue(inheritedValue?.color?.text);
   const userTextColor = decodeValue(value?.color?.text);
@@ -187,7 +213,8 @@ function TypographyPanel({
       newSlug
     );
     let changedObject = (0, import_object.setImmutably)(value, ["color", "text"], encoded);
-    if (inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text) {
+    const syncLinkColor = (0, import_inheritance.isGlobalStylesInheritanceEnabled)() ? shouldSyncLinkColor(value, inheritedValue) : inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text;
+    if (syncLinkColor) {
       changedObject = (0, import_object.setImmutably)(
         changedObject,
         ["elements", "link", "color", "text"],
@@ -198,7 +225,11 @@ function TypographyPanel({
   };
   const resetTextColor = () => setTextColor(void 0);
   const hasFontFamilyEnabled = useHasFontFamilyControl(settings);
-  const fontFamily = decodeValue(inheritedValue?.typography?.fontFamily);
+  const inheritedFontFamily = decodeValue(
+    inheritedValue?.typography?.fontFamily
+  );
+  const fontFamily = decodeValue(value?.typography?.fontFamily) ?? inheritedFontFamily;
+  const isFontFamilyPlaceholder = !hasValue(value?.typography?.fontFamily) && hasValue(inheritedFontFamily);
   const { fontFamilies, fontFamilyFaces } = (0, import_element.useMemo)(() => {
     return (0, import_typography_utils.getMergedFontFamiliesAndFontFamilyFaces)(settings, fontFamily);
   }, [settings, fontFamily]);
@@ -206,10 +237,11 @@ function TypographyPanel({
     const slug = fontFamilies?.find(
       ({ fontFamily: f }) => f === newValue
     )?.slug;
+    const nextFontFamily = slug ? `var:preset|font-family|${slug}` : newValue;
     let updatedValue = (0, import_object.setImmutably)(
       value,
       ["typography", "fontFamily"],
-      slug ? `var:preset|font-family|${slug}` : newValue || void 0
+      hasValue(nextFontFamily) ? nextFontFamily : void 0
     );
     const newFontFamilyFaces = fontFamilies?.find(({ fontFamily: f }) => f === newValue)?.fontFace ?? [];
     const { fontStyles, fontWeights } = (0, import_get_font_styles_and_weights.getFontStylesAndWeights)(newFontFamilyFaces);
@@ -230,8 +262,8 @@ function TypographyPanel({
           ...updatedValue,
           typography: {
             ...updatedValue?.typography,
-            fontStyle: nearestFontStyle || void 0,
-            fontWeight: nearestFontWeight || void 0
+            fontStyle: hasValue(nearestFontStyle) ? nearestFontStyle : void 0,
+            fontWeight: hasValue(nearestFontWeight) ? nearestFontWeight : void 0
           }
         };
       } else if (fontStyle || fontWeight) {
@@ -247,14 +279,18 @@ function TypographyPanel({
     }
     onChange(updatedValue);
   };
-  const hasFontFamily = () => !!value?.typography?.fontFamily;
+  const hasFontFamily = () => hasValue(value?.typography?.fontFamily);
   const resetFontFamily = () => setFontFamily(void 0);
   const hasFontSizeEnabled = useHasFontSizeControl(settings);
   const disableCustomFontSizes = !settings?.typography?.customFontSize;
   const mergedFontSizes = getMergedFontSizes(settings);
-  const fontSize = decodeValue(inheritedValue?.typography?.fontSize);
-  const currentFontSizeSlug = (() => {
-    const rawValue = inheritedValue?.typography?.fontSize;
+  const rawLocalFontSize = value?.typography?.fontSize;
+  const rawInheritedFontSize = inheritedValue?.typography?.fontSize;
+  const rawFontSizeForDisplay = rawLocalFontSize ?? rawInheritedFontSize;
+  const fontSize = decodeValue(rawFontSizeForDisplay);
+  const inheritedFontSizeDecoded = decodeValue(rawInheritedFontSize);
+  const isFontSizePlaceholder = !hasValue(rawLocalFontSize) && hasValue(rawInheritedFontSize);
+  const extractSlug = (rawValue) => {
     if (!rawValue || typeof rawValue !== "string") {
       return void 0;
     }
@@ -268,25 +304,45 @@ function TypographyPanel({
       return cssVarMatch[1];
     }
     return void 0;
-  })();
+  };
+  const currentFontSizeSlug = extractSlug(rawFontSizeForDisplay);
+  const inheritedFontSizeSlug = extractSlug(rawInheritedFontSize);
   const setFontSize = (newValue, metadata) => {
     const actualValue = !!metadata?.slug ? `var:preset|font-size|${metadata?.slug}` : newValue;
     onChange(
       (0, import_object.setImmutably)(
         value,
         ["typography", "fontSize"],
-        actualValue || void 0
+        hasValue(actualValue) ? actualValue : void 0
       )
     );
   };
-  const hasFontSize = () => !!value?.typography?.fontSize;
+  const setFontSizeWithInheritedCommit = (newValue, metadata) => {
+    if (isFontSizePlaceholder && newValue === void 0 && !metadata) {
+      if (inheritedFontSizeSlug) {
+        setFontSize(void 0, { slug: inheritedFontSizeSlug });
+      } else {
+        setFontSize(inheritedFontSizeDecoded);
+      }
+      return;
+    }
+    setFontSize(newValue, metadata);
+  };
+  const hasFontSize = () => hasValue(value?.typography?.fontSize);
   const resetFontSize = () => setFontSize(void 0);
   const hasAppearanceControl = useHasAppearanceControl(settings);
   const appearanceControlLabel = useAppearanceControlLabel(settings);
   const hasFontStyles = settings?.typography?.fontStyle;
   const hasFontWeights = settings?.typography?.fontWeight;
-  const fontStyle = decodeValue(inheritedValue?.typography?.fontStyle);
-  const fontWeight = decodeValue(inheritedValue?.typography?.fontWeight);
+  const inheritedFontStyle = decodeValue(
+    inheritedValue?.typography?.fontStyle
+  );
+  const inheritedFontWeight = decodeValue(
+    inheritedValue?.typography?.fontWeight
+  );
+  const fontStyle = decodeValue(value?.typography?.fontStyle) ?? inheritedFontStyle;
+  const fontWeight = decodeValue(value?.typography?.fontWeight) ?? inheritedFontWeight;
+  const isFontAppearancePlaceholder = !hasValue(value?.typography?.fontStyle) && !hasValue(value?.typography?.fontWeight) && (hasValue(inheritedFontStyle) || hasValue(inheritedFontWeight));
   const setFontAppearance = (0, import_element.useCallback)(
     ({ fontStyle: newFontStyle, fontWeight: newFontWeight }) => {
       if (newFontStyle !== fontStyle || newFontWeight !== fontWeight) {
@@ -294,48 +350,82 @@ function TypographyPanel({
           ...value,
           typography: {
             ...value?.typography,
-            fontStyle: newFontStyle || void 0,
-            fontWeight: newFontWeight || void 0
+            fontStyle: hasValue(newFontStyle) ? newFontStyle : void 0,
+            fontWeight: hasValue(newFontWeight) ? newFontWeight : void 0
           }
         });
       }
     },
     [fontStyle, fontWeight, onChange, value]
   );
-  const hasFontAppearance = () => !!value?.typography?.fontStyle || !!value?.typography?.fontWeight;
+  const setFontAppearanceWithInheritedCommit = (0, import_element.useCallback)(
+    (next) => {
+      if (isFontAppearancePlaceholder && next.fontStyle === fontStyle && next.fontWeight === fontWeight) {
+        onChange({
+          ...value,
+          typography: {
+            ...value?.typography,
+            fontStyle: hasValue(fontStyle) ? fontStyle : void 0,
+            fontWeight: hasValue(fontWeight) ? fontWeight : void 0
+          }
+        });
+        return;
+      }
+      setFontAppearance(next);
+    },
+    [
+      isFontAppearancePlaceholder,
+      fontStyle,
+      fontWeight,
+      onChange,
+      value,
+      setFontAppearance
+    ]
+  );
+  const hasFontAppearance = () => hasValue(value?.typography?.fontStyle) || hasValue(value?.typography?.fontWeight);
   const resetFontAppearance = (0, import_element.useCallback)(() => {
     setFontAppearance({});
   }, [setFontAppearance]);
   const hasLineHeightEnabled = useHasLineHeightControl(settings);
-  const lineHeight = decodeValue(inheritedValue?.typography?.lineHeight);
+  const localLineHeight = decodeValue(value?.typography?.lineHeight);
+  const inheritedLineHeight = decodeValue(
+    inheritedValue?.typography?.lineHeight
+  );
+  const isLineHeightPlaceholder = !hasValue(value?.typography?.lineHeight) && hasValue(inheritedLineHeight);
   const setLineHeight = (newValue) => {
     onChange(
       (0, import_object.setImmutably)(
         value,
         ["typography", "lineHeight"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasLineHeight = () => value?.typography?.lineHeight !== void 0;
+  const hasLineHeight = () => hasValue(value?.typography?.lineHeight);
   const resetLineHeight = () => setLineHeight(void 0);
   const hasLetterSpacingControl = useHasLetterSpacingControl(settings);
-  const letterSpacing = decodeValue(
+  const localLetterSpacing = decodeValue(value?.typography?.letterSpacing);
+  const inheritedLetterSpacing = decodeValue(
     inheritedValue?.typography?.letterSpacing
   );
+  const isLetterSpacingPlaceholder = !hasValue(value?.typography?.letterSpacing) && hasValue(inheritedLetterSpacing);
   const setLetterSpacing = (newValue) => {
     onChange(
       (0, import_object.setImmutably)(
         value,
         ["typography", "letterSpacing"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasLetterSpacing = () => !!value?.typography?.letterSpacing;
+  const hasLetterSpacing = () => hasValue(value?.typography?.letterSpacing);
   const resetLetterSpacing = () => setLetterSpacing(void 0);
   const hasTextIndentControl = useHasTextIndentControl(settings);
-  const textIndent = decodeValue(inheritedValue?.typography?.textIndent);
+  const localTextIndent = decodeValue(value?.typography?.textIndent);
+  const inheritedTextIndent = decodeValue(
+    inheritedValue?.typography?.textIndent
+  );
+  const isTextIndentPlaceholder = !hasValue(value?.typography?.textIndent) && hasValue(inheritedTextIndent);
   const textIndentSetting = settings?.typography?.textIndent ?? "subsequent";
   const isTextIndentAll = textIndentSetting === "all";
   const setTextIndentValue = (newValue) => {
@@ -343,7 +433,7 @@ function TypographyPanel({
       (0, import_object.setImmutably)(
         value,
         ["typography", "textIndent"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
@@ -357,7 +447,7 @@ function TypographyPanel({
       }
     });
   };
-  const hasTextIndent = () => !!value?.typography?.textIndent;
+  const hasTextIndent = () => hasValue(value?.typography?.textIndent);
   const resetTextIndent = () => {
     onChange(
       (0, import_object.setImmutably)(value, ["typography", "textIndent"], void 0)
@@ -365,73 +455,117 @@ function TypographyPanel({
   };
   const textIndentHelp = isTextIndentAll ? (0, import_i18n.__)("Indents the first line of all paragraphs.") : (0, import_i18n.__)("Indents the first line of each paragraph after the first one.");
   const hasTextColumnsControl = useHasTextColumnsControl(settings);
-  const textColumns = decodeValue(inheritedValue?.typography?.textColumns);
+  const localTextColumns = decodeValue(value?.typography?.textColumns);
+  const inheritedTextColumns = decodeValue(
+    inheritedValue?.typography?.textColumns
+  );
+  const isTextColumnsPlaceholder = !hasValue(value?.typography?.textColumns) && hasValue(inheritedTextColumns);
   const setTextColumns = (newValue) => {
     onChange(
       (0, import_object.setImmutably)(
         value,
         ["typography", "textColumns"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasTextColumns = () => !!value?.typography?.textColumns;
+  const hasTextColumns = () => hasValue(value?.typography?.textColumns);
   const resetTextColumns = () => setTextColumns(void 0);
   const hasTextTransformControl = useHasTextTransformControl(settings);
-  const textTransform = decodeValue(
+  const inheritedTextTransform = decodeValue(
     inheritedValue?.typography?.textTransform
   );
+  const textTransform = decodeValue(value?.typography?.textTransform) ?? inheritedTextTransform;
+  const isTextTransformPlaceholder = !hasValue(value?.typography?.textTransform) && hasValue(inheritedTextTransform);
   const setTextTransform = (newValue) => {
     onChange(
       (0, import_object.setImmutably)(
         value,
         ["typography", "textTransform"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasTextTransform = () => !!value?.typography?.textTransform;
+  const setTextTransformWithInheritedCommit = (newValue) => {
+    if (isTextTransformPlaceholder && newValue === void 0) {
+      setTextTransform(inheritedTextTransform);
+      return;
+    }
+    setTextTransform(newValue);
+  };
+  const hasTextTransform = () => hasValue(value?.typography?.textTransform);
   const resetTextTransform = () => setTextTransform(void 0);
   const hasTextDecorationControl = useHasTextDecorationControl(settings);
-  const textDecoration = decodeValue(
+  const inheritedTextDecoration = decodeValue(
     inheritedValue?.typography?.textDecoration
   );
+  const textDecoration = decodeValue(value?.typography?.textDecoration) ?? inheritedTextDecoration;
+  const isTextDecorationPlaceholder = !hasValue(value?.typography?.textDecoration) && hasValue(inheritedTextDecoration);
   const setTextDecoration = (newValue) => {
     onChange(
       (0, import_object.setImmutably)(
         value,
         ["typography", "textDecoration"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasTextDecoration = () => !!value?.typography?.textDecoration;
+  const setTextDecorationWithInheritedCommit = (newValue) => {
+    if (isTextDecorationPlaceholder && newValue === void 0) {
+      setTextDecoration(inheritedTextDecoration);
+      return;
+    }
+    setTextDecoration(newValue);
+  };
+  const hasTextDecoration = () => hasValue(value?.typography?.textDecoration);
   const resetTextDecoration = () => setTextDecoration(void 0);
   const hasWritingModeControl = useHasWritingModeControl(settings);
-  const writingMode = decodeValue(inheritedValue?.typography?.writingMode);
+  const inheritedWritingMode = decodeValue(
+    inheritedValue?.typography?.writingMode
+  );
+  const writingMode = decodeValue(value?.typography?.writingMode) ?? inheritedWritingMode;
+  const isWritingModePlaceholder = !hasValue(value?.typography?.writingMode) && hasValue(inheritedWritingMode);
   const setWritingMode = (newValue) => {
     onChange(
       (0, import_object.setImmutably)(
         value,
         ["typography", "writingMode"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasWritingMode = () => !!value?.typography?.writingMode;
+  const setWritingModeWithInheritedCommit = (newValue) => {
+    if (isWritingModePlaceholder && newValue === void 0) {
+      setWritingMode(inheritedWritingMode);
+      return;
+    }
+    setWritingMode(newValue);
+  };
+  const hasWritingMode = () => hasValue(value?.typography?.writingMode);
   const resetWritingMode = () => setWritingMode(void 0);
   const hasTextAlignmentControl = useHasTextAlignmentControl(settings);
-  const textAlign = decodeValue(inheritedValue?.typography?.textAlign);
+  const inheritedTextAlign = decodeValue(
+    inheritedValue?.typography?.textAlign
+  );
+  const textAlign = decodeValue(value?.typography?.textAlign) ?? inheritedTextAlign;
+  const isTextAlignPlaceholder = !hasValue(value?.typography?.textAlign) && hasValue(inheritedTextAlign);
   const setTextAlign = (newValue) => {
     onChange(
       (0, import_object.setImmutably)(
         value,
         ["typography", "textAlign"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
-  const hasTextAlign = () => !!value?.typography?.textAlign;
+  const setTextAlignWithInheritedCommit = (newValue) => {
+    if (isTextAlignPlaceholder && newValue === void 0) {
+      setTextAlign(inheritedTextAlign);
+      return;
+    }
+    setTextAlign(newValue);
+  };
+  const hasTextAlign = () => hasValue(value?.typography?.textAlign);
   const resetTextAlign = () => setTextAlign(void 0);
   const resetAllFilter = (0, import_element.useCallback)(
     (previousValue) => {
@@ -467,8 +601,11 @@ function TypographyPanel({
             hasValue: hasTextColorValue,
             resetValue: resetTextColor,
             isShownByDefault: defaultControls.textColor,
-            indicators: [textColor],
+            indicators: [userTextColor ?? textColor],
             contrastWarning,
+            showInheritanceLabelIndicators,
+            isPlaceholder: userTextColor === void 0 && textColor !== void 0,
+            hasInheritedValue: textColor !== void 0,
             tabs: [
               {
                 key: "text",
@@ -478,8 +615,13 @@ function TypographyPanel({
                   inheritedValue?.color?.text,
                   "color"
                 ),
+                userSlug: (0, import_color_values.extractPresetSlug)(
+                  value?.color?.text,
+                  "color"
+                ),
                 setValue: setTextColor,
-                userValue: userTextColor
+                userValue: userTextColor,
+                isPlaceholder: userTextColor === void 0 && textColor !== void 0
               }
             ],
             colorGradientControlSettings: {
@@ -490,8 +632,12 @@ function TypographyPanel({
           }
         ),
         hasFontFamilyEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isFontFamilyPlaceholder,
+              hasFontFamily() && inheritedFontFamily !== void 0
+            ),
             label: (0, import_i18n.__)("Font"),
             hasValue: hasFontFamily,
             onDeselect: resetFontFamily,
@@ -508,10 +654,15 @@ function TypographyPanel({
           }
         ),
         hasFontSizeEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isFontSizePlaceholder,
+              hasFontSize() && rawInheritedFontSize !== void 0
+            ),
             label: (0, import_i18n.__)("Size"),
             hasValue: hasFontSize,
+            hasInlineEndToggle: true,
             onDeselect: resetFontSize,
             isShownByDefault: defaultControls.fontSize,
             panelId,
@@ -520,7 +671,7 @@ function TypographyPanel({
               {
                 value: currentFontSizeSlug || fontSize,
                 valueMode: currentFontSizeSlug ? "slug" : "literal",
-                onChange: setFontSize,
+                onChange: setFontSizeWithInheritedCommit,
                 fontSizes: mergedFontSizes,
                 disableCustomFontSizes,
                 withReset: false,
@@ -530,8 +681,12 @@ function TypographyPanel({
           }
         ),
         hasAppearanceControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isFontAppearancePlaceholder,
+              hasFontAppearance() && (inheritedFontStyle !== void 0 || inheritedFontWeight !== void 0)
+            ),
             label: appearanceControlLabel,
             hasValue: hasFontAppearance,
             onDeselect: resetFontAppearance,
@@ -544,7 +699,7 @@ function TypographyPanel({
                   fontStyle,
                   fontWeight
                 },
-                onChange: setFontAppearance,
+                onChange: setFontAppearanceWithInheritedCommit,
                 hasFontStyles,
                 hasFontWeights,
                 fontFamilyFaces
@@ -553,9 +708,13 @@ function TypographyPanel({
           }
         ),
         hasLineHeightEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isLineHeightPlaceholder,
+              hasLineHeight() && inheritedLineHeight !== void 0,
+              "single-column"
+            ),
             label: (0, import_i18n.__)("Line height"),
             hasValue: hasLineHeight,
             onDeselect: resetLineHeight,
@@ -565,16 +724,25 @@ function TypographyPanel({
               import_line_height_control.default,
               {
                 __unstableInputWidth: "auto",
-                value: lineHeight,
-                onChange: setLineHeight
+                value: localLineHeight ?? inheritedLineHeight,
+                onChange: setLineHeight,
+                ...isLineHeightPlaceholder ? {
+                  placeholder: getNumericPlaceholder(
+                    inheritedLineHeight
+                  )
+                } : {}
               }
             )
           }
         ),
         hasLetterSpacingControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isLetterSpacingPlaceholder,
+              hasLetterSpacing() && inheritedLetterSpacing !== void 0,
+              "single-column"
+            ),
             label: (0, import_i18n.__)("Letter spacing"),
             hasValue: hasLetterSpacing,
             onDeselect: resetLetterSpacing,
@@ -583,16 +751,23 @@ function TypographyPanel({
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_letter_spacing_control.default,
               {
-                value: letterSpacing,
+                value: localLetterSpacing ?? inheritedLetterSpacing,
                 onChange: setLetterSpacing,
-                __unstableInputWidth: "auto"
+                __unstableInputWidth: "auto",
+                placeholder: isLetterSpacingPlaceholder ? getNumericPlaceholder(
+                  inheritedLetterSpacing
+                ) : void 0
               }
             )
           }
         ),
         hasTextIndentControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isTextIndentPlaceholder,
+              hasTextIndent() && inheritedTextIndent !== void 0
+            ),
             label: (0, import_i18n.__)("Line indent"),
             hasValue: hasTextIndent,
             onDeselect: resetTextIndent,
@@ -602,11 +777,12 @@ function TypographyPanel({
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_text_indent_control.default,
                 {
-                  value: textIndent,
+                  value: localTextIndent ?? inheritedTextIndent,
                   onChange: setTextIndentValue,
                   __unstableInputWidth: "auto",
                   withSlider: true,
-                  hasBottomMargin: isGlobalStyles
+                  hasBottomMargin: isGlobalStyles,
+                  placeholder: isTextIndentPlaceholder ? getNumericPlaceholder(inheritedTextIndent) : void 0
                 }
               ),
               isGlobalStyles && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -622,9 +798,13 @@ function TypographyPanel({
           }
         ),
         hasTextColumnsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isTextColumnsPlaceholder,
+              hasTextColumns() && inheritedTextColumns !== void 0,
+              "single-column"
+            ),
             label: (0, import_i18n.__)("Columns"),
             hasValue: hasTextColumns,
             onDeselect: resetTextColumns,
@@ -637,17 +817,22 @@ function TypographyPanel({
                 max: MAX_TEXT_COLUMNS,
                 min: MIN_TEXT_COLUMNS,
                 onChange: setTextColumns,
+                placeholder: isTextColumnsPlaceholder ? inheritedTextColumns : void 0,
                 spinControls: "custom",
-                value: textColumns,
+                value: localTextColumns,
                 initialPosition: 1
               }
             )
           }
         ),
         hasTextDecorationControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isTextDecorationPlaceholder,
+              hasTextDecoration() && inheritedTextDecoration !== void 0,
+              "single-column"
+            ),
             label: (0, import_i18n.__)("Decoration"),
             hasValue: hasTextDecoration,
             onDeselect: resetTextDecoration,
@@ -657,17 +842,20 @@ function TypographyPanel({
               import_text_decoration_control.default,
               {
                 value: textDecoration,
-                onChange: setTextDecoration,
-                size: "__unstable-large",
+                onChange: setTextDecorationWithInheritedCommit,
                 __unstableInputWidth: "auto"
               }
             )
           }
         ),
         hasWritingModeControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isWritingModePlaceholder,
+              hasWritingMode() && inheritedWritingMode !== void 0,
+              "single-column"
+            ),
             label: (0, import_i18n.__)("Orientation"),
             hasValue: hasWritingMode,
             onDeselect: resetWritingMode,
@@ -677,15 +865,18 @@ function TypographyPanel({
               import_writing_mode_control.default,
               {
                 value: writingMode,
-                onChange: setWritingMode,
-                size: "__unstable-large"
+                onChange: setWritingModeWithInheritedCommit
               }
             )
           }
         ),
         hasTextTransformControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isTextTransformPlaceholder,
+              hasTextTransform() && inheritedTextTransform !== void 0
+            ),
             label: (0, import_i18n.__)("Letter case"),
             hasValue: hasTextTransform,
             onDeselect: resetTextTransform,
@@ -695,17 +886,20 @@ function TypographyPanel({
               import_text_transform_control.default,
               {
                 value: textTransform,
-                onChange: setTextTransform,
+                onChange: setTextTransformWithInheritedCommit,
                 showNone: true,
-                isBlock: true,
-                size: "__unstable-large"
+                isBlock: true
               }
             )
           }
         ),
         hasTextAlignmentControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_components.__experimentalToolsPanelItem,
+          import_inheritance.InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isTextAlignPlaceholder,
+              hasTextAlign() && inheritedTextAlign !== void 0
+            ),
             label: (0, import_i18n.__)("Text alignment"),
             hasValue: hasTextAlign,
             onDeselect: resetTextAlign,
@@ -716,9 +910,8 @@ function TypographyPanel({
                 import_text_alignment_control.default,
                 {
                   value: textAlign,
-                  onChange: setTextAlign,
-                  options: ["left", "center", "right", "justify"],
-                  size: "__unstable-large"
+                  onChange: setTextAlignWithInheritedCommit,
+                  options: ["left", "center", "right", "justify"]
                 }
               ),
               textAlign === "justify" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Notice, { status: "warning", isDismissible: false, children: (0, import_i18n.__)(