Add Line Indent support

backport-changelog/7.0/10573.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/10573
+
+* https://github.com/WordPress/gutenberg/pull/73114

docs/how-to-guides/themes/global-settings-and-styles.md

@@ -273,6 +273,7 @@ The settings section has the following structure:
 			"textAlign": true,
 			"textColumns": false,
 			"textDecoration": true,
+			"textIndent": true,
 			"textTransform": true
 		},
 		"blocks": {

docs/reference-guides/core-blocks.md

@@ -598,7 +598,7 @@ Start with the basic building block of all narrative. ([Source](https://github.c
 
 -	**Name:** core/paragraph
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fitText, fontSize, lineHeight, textAlign, textColumns), ~~className~~
+-	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fitText, fontSize, lineHeight, textAlign, textColumns, textIndent), ~~className~~
 -	**Attributes:** content, direction, dropCap, placeholder
 
 ## Pattern Placeholder

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -193,6 +193,8 @@ Settings related to typography.
 | fluid | Enables fluid typography and allows users to set global fluid typography parameters. | `boolean`, `{ minFontSize, maxViewportWidth, minViewportWidth }` | `false` |
 | letterSpacing | Allow users to set custom letter spacing. | `boolean` | `true` |
 | lineHeight | Allow users to set custom line height. | `boolean` | `false` |
+| textIndent | Allow users to set custom line indent for all subsequent paragraphs. | `boolean` | `false` |
+| textIndentAll | Allow users to set custom line indent for all paragraphs. | `boolean` | `false` |
 | textAlign | Allow users to set the text align. | `boolean` | `true` |
 | textColumns | Allow users to set the number of text columns. | `boolean` | `false` |
 | textDecoration | Allow users to set custom text decorations. | `boolean` | `true` |
@@ -329,6 +331,8 @@ Typography styles.
 | fontWeight | Sets the `font-weight` CSS property. | `string`, `{ ref }` |
 | letterSpacing | Sets the `letter-spacing` CSS property. | `string`, `{ ref }` |
 | lineHeight | Sets the `line-height` CSS property. | `string`, `{ ref }` |
+| textIndent | Sets the `text-indent` CSS property for subsequent paragraphs. | `string`, `{ ref }` |
+| textIndentAll | Sets the `text-indent` CSS property for all paragraphs. | `string`, `{ ref }` |
 | textAlign | Sets the `text-align` CSS property. | `string`, `{ ref }` |
 | textColumns | Sets the `column-count` CSS property. | `string`, `{ ref }` |
 | textDecoration | Sets the `text-decoration` CSS property. | `string`, `{ ref }` |

lib/block-supports/typography.php

@@ -30,6 +30,7 @@ function gutenberg_register_typography_support( $block_type ) {
 	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
 	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
 	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
+	$has_text_indent_support     = $typography_supports['textIndent'] ?? false;
 	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
 
 	$has_typography_support = $has_font_family_support
@@ -42,6 +43,7 @@ function gutenberg_register_typography_support( $block_type ) {
 		|| $has_text_columns_support
 		|| $has_text_decoration_support
 		|| $has_text_transform_support
+		|| $has_text_indent_support
 		|| $has_writing_mode_support;
 
 	if ( ! $block_type->attributes ) {
@@ -101,6 +103,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
 	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
 	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
+	$has_text_indent_support     = $typography_supports['textIndent'] ?? false;
 	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
 
 	// Whether to skip individual block support features.
@@ -114,6 +117,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
 	$should_skip_text_transform  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
 	$should_skip_letter_spacing  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );
+	$should_skip_text_indent     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textIndent' );
 	$should_skip_writing_mode    = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'writingMode' );
 
 	$typography_block_styles = array();
@@ -174,6 +178,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		$typography_block_styles['writingMode'] = $block_attributes['style']['typography']['writingMode'] ?? null;
 	}
 
+	if ( $has_text_indent_support && ! $should_skip_text_indent && isset( $block_attributes['style']['typography']['textIndent'] ) ) {
+		$typography_block_styles['textIndent'] = $block_attributes['style']['typography']['textIndent'] ?? null;
+	}
+
 	$attributes = array();
 	$classnames = array();
 	$styles     = gutenberg_style_engine_get_styles(

lib/class-wp-theme-json-gutenberg.php

@@ -243,6 +243,7 @@
 	 * @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
 	 * @since 7.0.0 Added `dimensions.width` and `dimensions.height`.
 	 * @since 7.0.0 Added `gap` property.
+	 * @since 7.0.0 Added `text-indent` property.
 	 *
 	 * @var array
 	 */
@@ -306,6 +307,7 @@
 		'--wp--style--root--padding-left'   => array( 'spacing', 'padding', 'left' ),
 		'text-decoration'                   => array( 'typography', 'textDecoration' ),
 		'text-transform'                    => array( 'typography', 'textTransform' ),
+		'text-indent'                       => array( 'typography', 'textIndent' ),
 		'filter'                            => array( 'filter', 'duotone' ),
 		'box-shadow'                        => array( 'shadow' ),
 		'height'                            => array( 'dimensions', 'height' ),
@@ -386,7 +388,8 @@
 	 * @since 6.4.0 Added `layout.allowEditing`.
 	 * @since 6.4.0 Added `lightbox`.
 	 * @since 7.0.0 Added type markers to the schema for boolean values.
-	 * @since 7.0.0 Added `dimensions.width` and `dimensions.height`.
+	 * @since 7.0.0 Added `dimensions.width`, `dimensions.height`. and
+	 *              `text-indent` properties.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -472,6 +475,8 @@
 			'textAlign'        => null,
 			'textColumns'      => null,
 			'textDecoration'   => null,
+			'textIndent'       => null,
+			'textIndentAll'    => null,
 			'textTransform'    => null,
 			'writingMode'      => null,
 		),
@@ -515,7 +520,8 @@
 	 * @since 6.2.0 Added `outline`, and `minHeight` properties.
 	 * @since 6.6.0 Added `background` sub properties to top-level only.
 	 * @since 6.6.0 Added `dimensions.aspectRatio`.
-	 * @since 7.0.0 Added `dimensions.width` and `dimensions.height`.
+	 * @since 7.0.0 Added `dimensions.width`, `dimensions.height`. and
+	 *              `text-indent` properties.
 	 * @var array
 	 */
 	const VALID_STYLES = array(
@@ -572,6 +578,8 @@
 			'textAlign'      => null,
 			'textColumns'    => null,
 			'textDecoration' => null,
+			'textIndent'     => null,
+			'textIndentAll'  => null,
 			'textTransform'  => null,
 			'writingMode'    => null,
 		),
@@ -1425,7 +1433,8 @@
 		$blocks_metadata = static::get_blocks_metadata();
 		$style_nodes     = static::get_style_nodes( $this->theme_json, $blocks_metadata, $options );
 		$setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
 
+
 		$root_style_key    = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
 		$root_settings_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $setting_nodes, 'selector' ), true );
 
@@ -4486,6 +4495,26 @@
 
 		$settings = $this->theme_json['settings'] ?? null;
 
+		// Handle textIndent/textIndentAll precedence based on setting.
+		// Only process the property that matches the current setting to avoid conflicts.
+		if ( isset( $node['typography'] ) ) {
+			// Check block-level settings first, then fall back to global settings.
+			$block_name              = $metadata['name'] ?? null;
+			$block_settings          = $block_name ? ( $settings['blocks'][ $block_name ] ?? null ) : null;
+			$text_indent_all_setting = $block_settings['typography']['textIndentAll']
+				?? $settings['typography']['textIndentAll']
+				?? false;
+
+			if ( isset( $node['typography']['textIndent'] ) && isset( $node['typography']['textIndentAll'] ) ) {
+				// Both properties are set - remove the inactive one based on setting.
+				if ( $text_indent_all_setting ) {
+					unset( $node['typography']['textIndent'] );
+				} else {
+					unset( $node['typography']['textIndentAll'] );
+				}
+			}
+		}
+
 		foreach ( $metadata['selectors'] as $feature => $feature_selectors ) {
 			// Skip if this is the block's root selector or the block doesn't
 			// have any styles for the feature.
@@ -4507,8 +4536,16 @@
 						),
 					);
 
+					// For textIndentAll, we need to map it to the text-indent CSS property.
+					$properties = null;
+					if ( 'textIndentAll' === $subfeature ) {
+						$properties = array(
+							'text-indent' => array( 'typography', 'textIndentAll' ),
+						);
+					}
+
 					// Generate style declarations.
-					$new_declarations = static::compute_style_properties( $subfeature_node, $settings, null, $this->theme_json );
+					$new_declarations = static::compute_style_properties( $subfeature_node, $settings, $properties, $this->theme_json );
 
 					// Merge subfeature declarations into feature declarations.
 					if ( isset( $declarations[ $subfeature_selector ] ) ) {

lib/global-styles-and-settings.php

@@ -412,3 +412,33 @@ function gutenberg_get_global_styles( $path = array(), $context = array() ) {
 function gutenberg_get_theme_directory_pattern_slugs() {
 	return WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) )->get_patterns();
 }
+
+/**
+ * Sets default value for textIndentAll setting based on RTL direction.
+ *
+ * @since Gutenberg X.X.X
+ *
+ * @param WP_Theme_JSON_Data_Gutenberg $theme_json Class to access and update the underlying data.
+ * @return WP_Theme_JSON_Data_Gutenberg The modified theme JSON data.
+ */
+function gutenberg_set_text_indent_all_default_for_rtl( $theme_json ) {
+	if ( ! is_rtl() ) {
+		return $theme_json;
+	}
+
+	$data = $theme_json->get_data();
+
+	// Set default for RTL if not already defined.
+	if ( ! isset( $data['settings']['typography']['textIndentAll'] ) ) {
+		if ( ! isset( $data['settings'] ) ) {
+			$data['settings'] = array();
+		}
+		if ( ! isset( $data['settings']['typography'] ) ) {
+			$data['settings']['typography'] = array();
+		}
+		$data['settings']['typography']['textIndentAll'] = true;
+	}
+
+	return $theme_json->update_with( $data );
+}
+add_filter( 'wp_theme_json_data_default', 'gutenberg_set_text_indent_all_default_for_rtl' );

lib/theme.json

@@ -308,6 +308,7 @@
 			"textAlign": true,
 			"textColumns": false,
 			"textDecoration": true,
+			"textIndent": true,
 			"textTransform": true,
 			"writingMode": false
 		},

packages/block-editor/src/components/global-styles/hooks.js

@@ -100,6 +100,7 @@ export function useSettingsForBlockElement(
 			'textAlign',
 			'textTransform',
 			'textDecoration',
+			'textIndent',
 			'writingMode',
 		].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
@@ -110,6 +111,14 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		// Text indent needs explicit handling since it may not be in parent settings.
+		if ( supportedStyles.includes( 'textIndent' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				textIndent: updatedSettings.typography?.textIndent ?? true,
+			};
+		}
+
 		// The column-count style is named text column to reduce confusion with
 		// the columns block and manage expectations from the support.
 		// See: https://github.com/WordPress/gutenberg/pull/33587