Block Supports: Add text columns (column count) to typography block s…

…upports (#33587)

docs/how-to-guides/themes/theme-json.md

@@ -289,6 +289,7 @@ The settings section has the following structure:
 			"fontWeight": true,
 			"letterSpacing": true,
 			"lineHeight": false,
+			"textColumns": false,
 			"textDecoration": true,
 			"textTransform": true
 		},
@@ -825,6 +826,7 @@ Each block declares which style properties it exposes via the [block supports me
 			"fontWeight": "value",
 			"letterSpacing": "value",
 			"lineHeight": "value",
+			"textColumns": "value",
 			"textDecoration": "value",
 			"textTransform": "value"
 		},

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

@@ -134,6 +134,7 @@ Settings related to typography.
 | fluid | undefined | false |  |
 | letterSpacing | boolean | true |  |
 | lineHeight | boolean | false |  |
+| textColumns | boolean | false |  |
 | textDecoration | boolean | true |  |
 | textTransform | boolean | true |  |
 | dropCap | boolean | true |  |
@@ -204,6 +205,7 @@ Typography styles.
 | fontWeight | string, object |  |
 | letterSpacing | string, object |  |
 | lineHeight | string, object |  |
+| textColumns | string |  |
 | textDecoration | string, object |  |
 | textTransform | string, object |  |
 

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

@@ -41,6 +41,7 @@ Additions to settings:
 - `settings.typography.fontStyle`
 - `settings.typography.fontWeight`
 - `settings.typography.letterSpacing`
+- `settings.typography.textColumns`
 - `settings.typography.textDecoration`
 - `settings.typography.textTransform`
 
@@ -55,6 +56,7 @@ Additions to styles:
 - `styles.typography.fontStyle`
 - `styles.typography.fontWeight`
 - `styles.typography.letterSpacing`
+- `styles.typography.textColumns`
 - `styles.typography.textDecoration`
 - `styles.typography.textTransform`
 

lib/block-supports/typography.php

@@ -26,6 +26,7 @@ function gutenberg_register_typography_support( $block_type ) {
 	$has_font_weight_support     = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
 	$has_letter_spacing_support  = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
 	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
+	$has_text_columns_support    = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
 	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
 
@@ -35,6 +36,7 @@ function gutenberg_register_typography_support( $block_type ) {
 		|| $has_font_weight_support
 		|| $has_letter_spacing_support
 		|| $has_line_height_support
+		|| $has_text_columns_support
 		|| $has_text_decoration_support
 		|| $has_text_transform_support;
 
@@ -91,6 +93,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$has_font_weight_support     = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
 	$has_letter_spacing_support  = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
 	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
+	$has_text_columns_support    = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
 	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
 
@@ -100,6 +103,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$should_skip_font_style      = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
 	$should_skip_font_weight     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
 	$should_skip_line_height     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
+	$should_skip_text_columns    = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' );
 	$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' );
@@ -135,6 +139,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 			$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ), null );
 	}
 
+	if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
+		$typography_block_styles['textColumns'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'textColumns' ), null );
+	}
+
 	if ( $has_text_decoration_support && ! $should_skip_text_decoration && isset( $block_attributes['style']['typography']['textDecoration'] ) ) {
 		$typography_block_styles['textDecoration'] =
 			gutenberg_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['textDecoration'], 'text-decoration' );

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

@@ -229,6 +229,7 @@ class WP_Theme_JSON_Gutenberg {
 		'border-left-width'                 => array( 'border', 'left', 'width' ),
 		'border-left-style'                 => array( 'border', 'left', 'style' ),
 		'color'                             => array( 'color', 'text' ),
+		'column-count'                      => array( 'typography', 'textColumns' ),
 		'font-family'                       => array( 'typography', 'fontFamily' ),
 		'font-size'                         => array( 'typography', 'fontSize' ),
 		'font-style'                        => array( 'typography', 'fontStyle' ),
@@ -396,6 +397,7 @@ class WP_Theme_JSON_Gutenberg {
 			'fontWeight'     => null,
 			'letterSpacing'  => null,
 			'lineHeight'     => null,
+			'textColumns'    => null,
 			'textDecoration' => null,
 			'textTransform'  => null,
 		),
@@ -456,6 +458,7 @@ class WP_Theme_JSON_Gutenberg {
 			'fontWeight'     => null,
 			'letterSpacing'  => null,
 			'lineHeight'     => null,
+			'textColumns'    => null,
 			'textDecoration' => null,
 			'textTransform'  => null,
 		),

lib/theme.json

@@ -398,6 +398,7 @@
 			"fontWeight": true,
 			"letterSpacing": true,
 			"lineHeight": false,
+			"textColumns": false,
 			"textDecoration": true,
 			"textTransform": true
 		},

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

@@ -65,6 +65,7 @@ const VALID_SETTINGS = [
 	'typography.fontWeight',
 	'typography.letterSpacing',
 	'typography.lineHeight',
+	'typography.textColumns',
 	'typography.textDecoration',
 	'typography.textTransform',
 ];
@@ -178,7 +179,7 @@ export function useGlobalStyle(
 	switch ( source ) {
 		case 'all':
 			rawResult =
-				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				// The styles.css path is allowed to be empty, so don't revert to base if undefined.
 				finalPath === 'styles.css'
 					? get( userConfig, finalPath )
 					: get( mergedConfig, finalPath );
@@ -266,6 +267,16 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		// 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
+		if ( ! supportedStyles.includes( 'columnCount' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				textColumns: false,
+			};
+		}
+
 		[ 'contentSize', 'wideSize' ].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.layout = {

packages/block-editor/src/components/global-styles/typography-panel.js

@@ -3,6 +3,7 @@
  */
 import {
 	FontSizePicker,
+	__experimentalNumberControl as NumberControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -20,13 +21,17 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import { getValueFromVariable } from './utils';
 
+const MIN_TEXT_COLUMNS = 1;
+const MAX_TEXT_COLUMNS = 6;
+
 export function useHasTypographyPanel( settings ) {
 	const hasFontFamily = useHasFontFamilyControl( settings );
 	const hasLineHeight = useHasLineHeightControl( settings );
 	const hasFontAppearance = useHasAppearanceControl( settings );
 	const hasLetterSpacing = useHasLetterSpacingControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
 
 	return (
@@ -36,7 +41,8 @@ export function useHasTypographyPanel( settings ) {
 		hasLetterSpacing ||
 		hasTextTransform ||
 		hasFontSize ||
-		hasTextDecoration
+		hasTextDecoration ||
+		hasTextColumns
 	);
 }
 
@@ -93,6 +99,10 @@ function useHasTextDecorationControl( settings ) {
 	return settings?.typography?.textDecoration;
 }
 
+function useHasTextColumnsControl( settings ) {
+	return settings?.typography?.textColumns;
+}
+
 function TypographyToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -124,6 +134,7 @@ const DEFAULT_CONTROLS = {
 	letterSpacing: true,
 	textTransform: true,
 	textDecoration: true,
+	textColumns: true,
 };
 
 export default function TypographyPanel( {
@@ -246,6 +257,21 @@ export default function TypographyPanel( {
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
 
+	// Text Columns
+	const hasTextColumnsControl = useHasTextColumnsControl( settings );
+	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
+	const setTextColumns = ( newValue ) => {
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				textColumns: newValue,
+			},
+		} );
+	};
+	const hasTextColumns = () => !! value?.typography?.textColumns;
+	const resetTextColumns = () => setTextColumns( undefined );
+
 	// Text Transform
 	const hasTextTransformControl = useHasTextTransformControl( settings );
 	const textTransform = decodeValue(
@@ -388,6 +414,27 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextColumnsControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text columns' ) }
+					hasValue={ hasTextColumns }
+					onDeselect={ resetTextColumns }
+					isShownByDefault={ defaultControls.textColumns }
+					panelId={ panelId }
+				>
+					<NumberControl
+						label={ __( 'Text columns' ) }
+						max={ MAX_TEXT_COLUMNS }
+						min={ MIN_TEXT_COLUMNS }
+						onChange={ setTextColumns }
+						size="__unstable-large"
+						spinControls="custom"
+						value={ textColumns }
+						initialPosition={ 1 }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ hasTextDecorationControl && (
 				<ToolsPanelItem
 					className="single-column"

packages/block-editor/src/hooks/supports.js

@@ -20,6 +20,11 @@ const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
  * Key within block settings' support array indicating support for font weight.
  */
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * columns e.g. settings found in `block.json`.
+ */
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 /**
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
@@ -42,6 +47,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,

packages/block-editor/src/hooks/test/style.js

@@ -21,7 +21,7 @@ describe( 'getInlineStyles', () => {
 		expect(
 			getInlineStyles( {
 				color: { text: 'red', background: 'black' },
-				typography: { lineHeight: 1.5, fontSize: 10 },
+				typography: { lineHeight: 1.5, fontSize: 10, textColumns: 2 },
 				border: {
 					radius: '10px',
 					width: '1em',
@@ -44,6 +44,7 @@ describe( 'getInlineStyles', () => {
 			borderStyle: 'dotted',
 			borderWidth: '1em',
 			color: 'red',
+			columnCount: 2,
 			lineHeight: 1.5,
 			fontSize: 10,
 			marginBottom: '15px',

packages/block-editor/src/hooks/test/use-typography-props.js

@@ -12,13 +12,15 @@ describe( 'getTypographyClassesAndStyles', () => {
 				typography: {
 					letterSpacing: '22px',
 					fontSize: '2rem',
+					textColumns: 3,
 					textTransform: 'uppercase',
 				},
 			},
 		};
 		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
 			className: 'has-tofu-font-family has-large-font-size',
 			style: {
+				columnCount: 3,
 				letterSpacing: '22px',
 				fontSize: '2rem',
 				textTransform: 'uppercase',

packages/block-editor/src/hooks/typography.js

@@ -27,6 +27,7 @@ function omit( object, keys ) {
 const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
 const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
 const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
@@ -36,6 +37,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,

packages/block-editor/src/hooks/utils.js

@@ -202,6 +202,7 @@ export function useBlockSettings( name, parentLayout ) {
 	const fontStyle = useSetting( 'typography.fontStyle' );
 	const fontWeight = useSetting( 'typography.fontWeight' );
 	const lineHeight = useSetting( 'typography.lineHeight' );
+	const textColumns = useSetting( 'typography.textColumns' );
 	const textDecoration = useSetting( 'typography.textDecoration' );
 	const textTransform = useSetting( 'typography.textTransform' );
 	const letterSpacing = useSetting( 'typography.letterSpacing' );
@@ -244,6 +245,7 @@ export function useBlockSettings( name, parentLayout ) {
 				fontStyle,
 				fontWeight,
 				lineHeight,
+				textColumns,
 				textDecoration,
 				textTransform,
 				letterSpacing,
@@ -276,6 +278,7 @@ export function useBlockSettings( name, parentLayout ) {
 		fontStyle,
 		fontWeight,
 		lineHeight,
+		textColumns,
 		textDecoration,
 		textTransform,
 		letterSpacing,

packages/blocks/src/api/constants.js

@@ -123,6 +123,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		requiresOptOut: true,
 		useEngine: true,
 	},
+	columnCount: {
+		value: [ 'typography', 'textColumns' ],
+		support: [ 'typography', 'textColumns' ],
+		useEngine: true,
+	},
 	filter: {
 		value: [ 'filter', 'duotone' ],
 		support: [ 'color', '__experimentalDuotone' ],

packages/blocks/src/store/private-selectors.js

@@ -72,6 +72,11 @@ function filterElementBlockSupports( blockSupports, name, element ) {
 			return false;
 		}
 
+		// Text columns is only available for blocks.
+		if ( support === 'textColumns' && ! name ) {
+			return false;
+		}
+
 		return true;
 	} );
 }