Skip to content

Commit

Permalink
Typography: Stabilize typography block supports within block processi…
Browse files Browse the repository at this point in the history 
…ng (WordPress#63401)

* Try stabilizing typography block supports within block processing

* Update test

* Try PHP equivalent

* Add backport changelog entry

* Update so that writingMode is not stabilized

* Add tests for the PHP implementation

* Alphabetize

* Move the PHP transformation to the compat directory so that it can be removed once 6.7 is the required minimum version

* Update filter priority

* Update phpunit/block-supports/typography-test.php

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update phpunit/block-supports/typography-test.php

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update phpunit/block-supports/typography-test.php

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update phpunit/block-supports/typography-test.php

Co-authored-by: Aaron Robertshaw <[email protected]>

* Perform transformation a second time after applying filters

* Move to 6.8 directory

---------

Co-authored-by: Aaron Robertshaw <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: justintadlock <[email protected]>
Co-authored-by: annezazu <[email protected]>
  • Loading branch information
@andrewserong @aaronrobertshaw
@ramonjd @youknowriad @gziolo @ndiego @justintadlock @annezazu @karthick-murugan
10 people authored and karthick-murugan committed Nov 13, 2024
1 parent 6b1a8be commit cf48486
Show file tree
Hide file tree
Showing 12 changed files with 565 additions and 58 deletions.
3 changes: 3 additions & 0 deletions backport-changelog/6.8/7069.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
https://github.com/WordPress/wordpress-develop/pull/7069

* https://github.com/WordPress/gutenberg/pull/63401
24 changes: 12 additions & 12 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@ function gutenberg_register_typography_support( $block_type ) {
return;
}

$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
$has_font_family_support = $typography_supports['fontFamily'] ?? false;
$has_font_size_support = $typography_supports['fontSize'] ?? false;
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
$has_font_style_support = $typography_supports['fontStyle'] ?? false;
$has_font_weight_support = $typography_supports['fontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['letterSpacing'] ?? false;
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
$has_text_align_support = $typography_supports['textAlign'] ?? false;
$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_decoration_support = $typography_supports['textDecoration'] ?? false;
$has_text_transform_support = $typography_supports['textTransform'] ?? false;
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;

$has_typography_support = $has_font_family_support
Expand Down Expand Up @@ -91,16 +91,16 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
return array();
}

$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
$has_font_family_support = $typography_supports['fontFamily'] ?? false;
$has_font_size_support = $typography_supports['fontSize'] ?? false;
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
$has_font_style_support = $typography_supports['fontStyle'] ?? false;
$has_font_weight_support = $typography_supports['fontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['letterSpacing'] ?? false;
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
$has_text_align_support = $typography_supports['textAlign'] ?? false;
$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_decoration_support = $typography_supports['textDecoration'] ?? false;
$has_text_transform_support = $typography_supports['textTransform'] ?? false;
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;

// Whether to skip individual block support features.
Expand Down
47 changes: 47 additions & 0 deletions lib/compat/wordpress-6.8/blocks.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<?php
/**
* Temporary compatibility shims for block APIs present in Gutenberg.
*
* @package gutenberg
*/

/**
* Filters the block type arguments during registration to stabilize experimental block supports.
*
* This is a temporary compatibility shim as the approach in core is for this to be handled
* within the WP_Block_Type class rather than requiring a filter.
*
* @param array $args Array of arguments for registering a block type.
* @return array Array of arguments for registering a block type.
*/
function gutenberg_stabilize_experimental_block_supports( $args ) {
if ( empty( $args['supports']['typography'] ) ) {
return $args;
}

$experimental_typography_supports_to_stable = array(
'__experimentalFontFamily' => 'fontFamily',
'__experimentalFontStyle' => 'fontStyle',
'__experimentalFontWeight' => 'fontWeight',
'__experimentalLetterSpacing' => 'letterSpacing',
'__experimentalTextDecoration' => 'textDecoration',
'__experimentalTextTransform' => 'textTransform',
);

$current_typography_supports = $args['supports']['typography'];
$stable_typography_supports = array();

foreach ( $current_typography_supports as $key => $value ) {
if ( array_key_exists( $key, $experimental_typography_supports_to_stable ) ) {
$stable_typography_supports[ $experimental_typography_supports_to_stable[ $key ] ] = $value;
} else {
$stable_typography_supports[ $key ] = $value;
}
}

$args['supports']['typography'] = $stable_typography_supports;

return $args;
}

add_filter( 'register_block_type_args', 'gutenberg_stabilize_experimental_block_supports', PHP_INT_MAX, 1 );
1 change: 1 addition & 0 deletions lib/load.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ function gutenberg_is_experiment_enabled( $name ) {

// WordPress 6.8 compat.
require __DIR__ . '/compat/wordpress-6.8/preload.php';
require __DIR__ . '/compat/wordpress-6.8/blocks.php';

// Experimental features.
require __DIR__ . '/experimental/block-editor-settings-mobile.php';
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/font-family.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { shouldSkipSerialization } from './utils';
import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
import { unlock } from '../lock-unlock';

export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
export const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
const { kebabCase } = unlock( componentsPrivateApis );

/**
Expand Down
12 changes: 6 additions & 6 deletions packages/block-editor/src/hooks/supports.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
const BORDER_SUPPORT_KEY = '__experimentalBorder';
const COLOR_SUPPORT_KEY = 'color';
const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
/**
* Key within block settings' support array indicating support for font style.
*/
const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
/**
* Key within block settings' support array indicating support for font weight.
*/
const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
/**
* Key within block settings' supports array indicating support for text
* align e.g. settings found in `block.json`.
Expand All @@ -34,7 +34,7 @@ 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`.
*/
const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
/**
* Key within block settings' supports array indicating support for writing mode
* e.g. settings found in `block.json`.
Expand All @@ -44,13 +44,13 @@ const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
* Key within block settings' supports array indicating support for text
* transforms e.g. settings found in `block.json`.
*/
const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';

/**
* Key within block settings' supports array indicating support for letter-spacing
* e.g. settings found in `block.json`.
*/
const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
const LAYOUT_SUPPORT_KEY = 'layout';
const TYPOGRAPHY_SUPPORT_KEYS = [
LINE_HEIGHT_SUPPORT_KEY,
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/hooks/typography.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ 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 LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
export const TYPOGRAPHY_SUPPORT_KEYS = [
Expand Down
21 changes: 15 additions & 6 deletions packages/blocks/src/api/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
},
fontFamily: {
value: [ 'typography', 'fontFamily' ],
support: [ 'typography', '__experimentalFontFamily' ],
support: [ 'typography', 'fontFamily' ],
useEngine: true,
},
fontSize: {
Expand All @@ -193,12 +193,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
},
fontStyle: {
value: [ 'typography', 'fontStyle' ],
support: [ 'typography', '__experimentalFontStyle' ],
support: [ 'typography', 'fontStyle' ],
useEngine: true,
},
fontWeight: {
value: [ 'typography', 'fontWeight' ],
support: [ 'typography', '__experimentalFontWeight' ],
support: [ 'typography', 'fontWeight' ],
useEngine: true,
},
lineHeight: {
Expand Down Expand Up @@ -240,17 +240,17 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
},
textDecoration: {
value: [ 'typography', 'textDecoration' ],
support: [ 'typography', '__experimentalTextDecoration' ],
support: [ 'typography', 'textDecoration' ],
useEngine: true,
},
textTransform: {
value: [ 'typography', 'textTransform' ],
support: [ 'typography', '__experimentalTextTransform' ],
support: [ 'typography', 'textTransform' ],
useEngine: true,
},
letterSpacing: {
value: [ 'typography', 'letterSpacing' ],
support: [ 'typography', '__experimentalLetterSpacing' ],
support: [ 'typography', 'letterSpacing' ],
useEngine: true,
},
writingMode: {
Expand Down Expand Up @@ -297,3 +297,12 @@ export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = {
'typography.fontSizes': true,
'spacing.spacingSizes': true,
};

export const TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE = {
__experimentalFontFamily: 'fontFamily',
__experimentalFontStyle: 'fontStyle',
__experimentalFontWeight: 'fontWeight',
__experimentalLetterSpacing: 'letterSpacing',
__experimentalTextDecoration: 'textDecoration',
__experimentalTextTransform: 'textTransform',
};
82 changes: 60 additions & 22 deletions packages/blocks/src/store/process-block-type.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ import warning from '@wordpress/warning';
* Internal dependencies
*/
import { isValidIcon, normalizeIconObject, omit } from '../api/utils';
import { BLOCK_ICON_DEFAULT, DEPRECATED_ENTRY_KEYS } from '../api/constants';
import {
BLOCK_ICON_DEFAULT,
DEPRECATED_ENTRY_KEYS,
TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE,
} from '../api/constants';

/** @typedef {import('../api/registration').WPBlockType} WPBlockType */

Expand Down Expand Up @@ -62,6 +66,24 @@ function mergeBlockVariations(
return result;
}

function stabilizeSupports( rawSupports ) {
if ( ! rawSupports ) {
return rawSupports;
}

const supports = { ...rawSupports };
if ( supports?.typography && typeof supports.typography === 'object' ) {
supports.typography = Object.fromEntries(
Object.entries( supports.typography ).map( ( [ key, value ] ) => [
TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE[ key ] || key,
value,
] )
);
}

return supports;
}

/**
* Takes the unprocessed block type settings, merges them with block type metadata
* and applies all the existing filters for the registered block type.
Expand Down Expand Up @@ -102,13 +124,20 @@ export const processBlockType =
),
};

// Stabilize any experimental supports before applying filters.
blockType.supports = stabilizeSupports( blockType.supports );

const settings = applyFilters(
'blocks.registerBlockType',
blockType,
name,
null
);

// Re-stabilize any experimental supports after applying filters.
// This ensures that any supports updated by filters are also stabilized.
blockType.supports = stabilizeSupports( blockType.supports );

if (
settings.description &&
typeof settings.description !== 'string'
Expand All @@ -119,29 +148,38 @@ export const processBlockType =
}

if ( settings.deprecated ) {
settings.deprecated = settings.deprecated.map( ( deprecation ) =>
Object.fromEntries(
Object.entries(
// Only keep valid deprecation keys.
applyFilters(
'blocks.registerBlockType',
// Merge deprecation keys with pre-filter settings
// so that filters that depend on specific keys being
// present don't fail.
{
// Omit deprecation keys here so that deprecations
// can opt out of specific keys like "supports".
...omit( blockType, DEPRECATED_ENTRY_KEYS ),
...deprecation,
},
blockType.name,
deprecation
)
).filter( ( [ key ] ) =>
settings.deprecated = settings.deprecated.map( ( deprecation ) => {
// Stabilize any experimental supports before applying filters.
deprecation.supports = stabilizeSupports(
deprecation.supports
);
const filteredDeprecation = // Only keep valid deprecation keys.
applyFilters(
'blocks.registerBlockType',
// Merge deprecation keys with pre-filter settings
// so that filters that depend on specific keys being
// present don't fail.
{
// Omit deprecation keys here so that deprecations
// can opt out of specific keys like "supports".
...omit( blockType, DEPRECATED_ENTRY_KEYS ),
...deprecation,
},
blockType.name,
deprecation
);
// Re-stabilize any experimental supports after applying filters.
// This ensures that any supports updated by filters are also stabilized.
filteredDeprecation.supports = stabilizeSupports(
filteredDeprecation.supports
);

return Object.fromEntries(
Object.entries( filteredDeprecation ).filter( ( [ key ] ) =>
DEPRECATED_ENTRY_KEYS.includes( key )
)
)
);
);
} );
}

if ( ! isPlainObject( settings ) ) {
Expand Down
12 changes: 6 additions & 6 deletions packages/blocks/src/store/test/private-selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,12 +127,12 @@ describe( 'private selectors', () => {
name: 'core/example-block',
supports: {
typography: {
__experimentalFontFamily: true,
__experimentalFontStyle: true,
__experimentalFontWeight: true,
__experimentalTextDecoration: true,
__experimentalTextTransform: true,
__experimentalLetterSpacing: true,
fontFamily: true,
fontStyle: true,
fontWeight: true,
textDecoration: true,
textTransform: true,
letterSpacing: true,
fontSize: true,
lineHeight: true,
},
Expand Down
Loading

0 comments on commit cf48486

Please sign in to comment.