@wordpress/block-editor 16.0.0 → 16.1.0

package/build-module/components/global-styles/typography-panel.mjs

@@ -3,7 +3,7 @@ import {
   FontSizePicker,
   __experimentalNumberControl as NumberControl,
   __experimentalToolsPanel as ToolsPanel,
-  __experimentalToolsPanelItem as ToolsPanelItem,
+  __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
   Notice,
   ToggleControl
 } from "@wordpress/components";
@@ -32,9 +32,22 @@ import {
   findNearestStyleAndWeight
 } from "./typography-utils.mjs";
 import { getFontStylesAndWeights } from "../../utils/get-font-styles-and-weights.mjs";
+import {
+  getInheritanceProps,
+  InheritanceToolsPanelItem,
+  isGlobalStylesInheritanceEnabled
+} from "./inheritance/index.mjs";
 import { jsx, jsxs } from "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);
@@ -141,6 +154,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] = parseQuantityAndUnitFromRawValue(rawValue);
+  return quantity;
+}
 function TypographyPanel({
   as: Wrapper = TypographyToolsPanel,
   value,
@@ -150,9 +174,15 @@ function TypographyPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   isGlobalStyles = false,
+  showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
   contrastWarning
 }) {
   const { colors, allColors, areCustomSolidsEnabled, decodeValue } = useColorGradientSettings(settings);
+  const inheritanceProps = (isInherited, hasLocalOverride, className) => getInheritanceProps(
+    showInheritanceLabelIndicators && isInherited,
+    showInheritanceLabelIndicators && hasLocalOverride,
+    className
+  );
   const hasTextColorEnabled = useHasTextPanel(settings);
   const textColor = decodeValue(inheritedValue?.color?.text);
   const userTextColor = decodeValue(value?.color?.text);
@@ -164,7 +194,8 @@ function TypographyPanel({
       newSlug
     );
     let changedObject = setImmutably(value, ["color", "text"], encoded);
-    if (inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text) {
+    const syncLinkColor = isGlobalStylesInheritanceEnabled() ? shouldSyncLinkColor(value, inheritedValue) : inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text;
+    if (syncLinkColor) {
       changedObject = setImmutably(
         changedObject,
         ["elements", "link", "color", "text"],
@@ -175,7 +206,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 } = useMemo(() => {
     return getMergedFontFamiliesAndFontFamilyFaces(settings, fontFamily);
   }, [settings, fontFamily]);
@@ -183,10 +218,11 @@ function TypographyPanel({
     const slug = fontFamilies?.find(
       ({ fontFamily: f }) => f === newValue
     )?.slug;
+    const nextFontFamily = slug ? `var:preset|font-family|${slug}` : newValue;
     let updatedValue = 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 } = getFontStylesAndWeights(newFontFamilyFaces);
@@ -207,8 +243,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) {
@@ -224,14 +260,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;
     }
@@ -245,25 +285,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(
       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 = useCallback(
     ({ fontStyle: newFontStyle, fontWeight: newFontWeight }) => {
       if (newFontStyle !== fontStyle || newFontWeight !== fontWeight) {
@@ -271,48 +331,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 = 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 = 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(
       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(
       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) => {
@@ -320,7 +414,7 @@ function TypographyPanel({
       setImmutably(
         value,
         ["typography", "textIndent"],
-        newValue || void 0
+        hasValue(newValue) ? newValue : void 0
       )
     );
   };
@@ -334,7 +428,7 @@ function TypographyPanel({
       }
     });
   };
-  const hasTextIndent = () => !!value?.typography?.textIndent;
+  const hasTextIndent = () => hasValue(value?.typography?.textIndent);
   const resetTextIndent = () => {
     onChange(
       setImmutably(value, ["typography", "textIndent"], void 0)
@@ -342,73 +436,117 @@ function TypographyPanel({
   };
   const textIndentHelp = isTextIndentAll ? __("Indents the first line of all paragraphs.") : __("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(
       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(
       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(
       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(
       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(
       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 = useCallback(
     (previousValue) => {
@@ -444,8 +582,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",
@@ -455,8 +596,13 @@ function TypographyPanel({
                   inheritedValue?.color?.text,
                   "color"
                 ),
+                userSlug: extractPresetSlug(
+                  value?.color?.text,
+                  "color"
+                ),
                 setValue: setTextColor,
-                userValue: userTextColor
+                userValue: userTextColor,
+                isPlaceholder: userTextColor === void 0 && textColor !== void 0
               }
             ],
             colorGradientControlSettings: {
@@ -467,8 +613,12 @@ function TypographyPanel({
           }
         ),
         hasFontFamilyEnabled && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isFontFamilyPlaceholder,
+              hasFontFamily() && inheritedFontFamily !== void 0
+            ),
             label: __("Font"),
             hasValue: hasFontFamily,
             onDeselect: resetFontFamily,
@@ -485,10 +635,15 @@ function TypographyPanel({
           }
         ),
         hasFontSizeEnabled && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isFontSizePlaceholder,
+              hasFontSize() && rawInheritedFontSize !== void 0
+            ),
             label: __("Size"),
             hasValue: hasFontSize,
+            hasInlineEndToggle: true,
             onDeselect: resetFontSize,
             isShownByDefault: defaultControls.fontSize,
             panelId,
@@ -497,7 +652,7 @@ function TypographyPanel({
               {
                 value: currentFontSizeSlug || fontSize,
                 valueMode: currentFontSizeSlug ? "slug" : "literal",
-                onChange: setFontSize,
+                onChange: setFontSizeWithInheritedCommit,
                 fontSizes: mergedFontSizes,
                 disableCustomFontSizes,
                 withReset: false,
@@ -507,8 +662,12 @@ function TypographyPanel({
           }
         ),
         hasAppearanceControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isFontAppearancePlaceholder,
+              hasFontAppearance() && (inheritedFontStyle !== void 0 || inheritedFontWeight !== void 0)
+            ),
             label: appearanceControlLabel,
             hasValue: hasFontAppearance,
             onDeselect: resetFontAppearance,
@@ -521,7 +680,7 @@ function TypographyPanel({
                   fontStyle,
                   fontWeight
                 },
-                onChange: setFontAppearance,
+                onChange: setFontAppearanceWithInheritedCommit,
                 hasFontStyles,
                 hasFontWeights,
                 fontFamilyFaces
@@ -530,9 +689,13 @@ function TypographyPanel({
           }
         ),
         hasLineHeightEnabled && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isLineHeightPlaceholder,
+              hasLineHeight() && inheritedLineHeight !== void 0,
+              "single-column"
+            ),
             label: __("Line height"),
             hasValue: hasLineHeight,
             onDeselect: resetLineHeight,
@@ -542,16 +705,25 @@ function TypographyPanel({
               LineHeightControl,
               {
                 __unstableInputWidth: "auto",
-                value: lineHeight,
-                onChange: setLineHeight
+                value: localLineHeight ?? inheritedLineHeight,
+                onChange: setLineHeight,
+                ...isLineHeightPlaceholder ? {
+                  placeholder: getNumericPlaceholder(
+                    inheritedLineHeight
+                  )
+                } : {}
               }
             )
           }
         ),
         hasLetterSpacingControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isLetterSpacingPlaceholder,
+              hasLetterSpacing() && inheritedLetterSpacing !== void 0,
+              "single-column"
+            ),
             label: __("Letter spacing"),
             hasValue: hasLetterSpacing,
             onDeselect: resetLetterSpacing,
@@ -560,16 +732,23 @@ function TypographyPanel({
             children: /* @__PURE__ */ jsx(
               LetterSpacingControl,
               {
-                value: letterSpacing,
+                value: localLetterSpacing ?? inheritedLetterSpacing,
                 onChange: setLetterSpacing,
-                __unstableInputWidth: "auto"
+                __unstableInputWidth: "auto",
+                placeholder: isLetterSpacingPlaceholder ? getNumericPlaceholder(
+                  inheritedLetterSpacing
+                ) : void 0
               }
             )
           }
         ),
         hasTextIndentControl && /* @__PURE__ */ jsxs(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isTextIndentPlaceholder,
+              hasTextIndent() && inheritedTextIndent !== void 0
+            ),
             label: __("Line indent"),
             hasValue: hasTextIndent,
             onDeselect: resetTextIndent,
@@ -579,11 +758,12 @@ function TypographyPanel({
               /* @__PURE__ */ jsx(
                 TextIndentControl,
                 {
-                  value: textIndent,
+                  value: localTextIndent ?? inheritedTextIndent,
                   onChange: setTextIndentValue,
                   __unstableInputWidth: "auto",
                   withSlider: true,
-                  hasBottomMargin: isGlobalStyles
+                  hasBottomMargin: isGlobalStyles,
+                  placeholder: isTextIndentPlaceholder ? getNumericPlaceholder(inheritedTextIndent) : void 0
                 }
               ),
               isGlobalStyles && /* @__PURE__ */ jsx(
@@ -599,9 +779,13 @@ function TypographyPanel({
           }
         ),
         hasTextColumnsControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isTextColumnsPlaceholder,
+              hasTextColumns() && inheritedTextColumns !== void 0,
+              "single-column"
+            ),
             label: __("Columns"),
             hasValue: hasTextColumns,
             onDeselect: resetTextColumns,
@@ -614,17 +798,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__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isTextDecorationPlaceholder,
+              hasTextDecoration() && inheritedTextDecoration !== void 0,
+              "single-column"
+            ),
             label: __("Decoration"),
             hasValue: hasTextDecoration,
             onDeselect: resetTextDecoration,
@@ -634,17 +823,20 @@ function TypographyPanel({
               TextDecorationControl,
               {
                 value: textDecoration,
-                onChange: setTextDecoration,
-                size: "__unstable-large",
+                onChange: setTextDecorationWithInheritedCommit,
                 __unstableInputWidth: "auto"
               }
             )
           }
         ),
         hasWritingModeControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
-            className: "single-column",
+            ...inheritanceProps(
+              isWritingModePlaceholder,
+              hasWritingMode() && inheritedWritingMode !== void 0,
+              "single-column"
+            ),
             label: __("Orientation"),
             hasValue: hasWritingMode,
             onDeselect: resetWritingMode,
@@ -654,15 +846,18 @@ function TypographyPanel({
               WritingModeControl,
               {
                 value: writingMode,
-                onChange: setWritingMode,
-                size: "__unstable-large"
+                onChange: setWritingModeWithInheritedCommit
               }
             )
           }
         ),
         hasTextTransformControl && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isTextTransformPlaceholder,
+              hasTextTransform() && inheritedTextTransform !== void 0
+            ),
             label: __("Letter case"),
             hasValue: hasTextTransform,
             onDeselect: resetTextTransform,
@@ -672,17 +867,20 @@ function TypographyPanel({
               TextTransformControl,
               {
                 value: textTransform,
-                onChange: setTextTransform,
+                onChange: setTextTransformWithInheritedCommit,
                 showNone: true,
-                isBlock: true,
-                size: "__unstable-large"
+                isBlock: true
               }
             )
           }
         ),
         hasTextAlignmentControl && /* @__PURE__ */ jsxs(
-          ToolsPanelItem,
+          InheritanceToolsPanelItem,
           {
+            ...inheritanceProps(
+              isTextAlignPlaceholder,
+              hasTextAlign() && inheritedTextAlign !== void 0
+            ),
             label: __("Text alignment"),
             hasValue: hasTextAlign,
             onDeselect: resetTextAlign,
@@ -693,9 +891,8 @@ function TypographyPanel({
                 TextAlignmentControl,
                 {
                   value: textAlign,
-                  onChange: setTextAlign,
-                  options: ["left", "center", "right", "justify"],
-                  size: "__unstable-large"
+                  onChange: setTextAlignWithInheritedCommit,
+                  options: ["left", "center", "right", "justify"]
                 }
               ),
               textAlign === "justify" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Notice, { status: "warning", isDismissible: false, children: __(