npm - @wordpress/block-editor - Versions diffs - 16.0.1-next.v.202607070741.0 → 16.2.0 - Mend

@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2167) hide show

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

@@ -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,18 +798,22 @@ function TypographyPanel({
                 max: MAX_TEXT_COLUMNS,
                 min: MIN_TEXT_COLUMNS,
                 onChange: setTextColumns,
-                size: "__unstable-large",
+                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,
@@ -635,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,
@@ -655,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,
@@ -673,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,
@@ -694,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: __(