Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Support both experimental and non-experimental typography supports in JS #63072

Closed
wants to merge 5 commits into from
Closed

[WIP] Support both experimental and non-experimental typography supports in JS #63072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19b455a
Support both experimental and non-experimental typography supports in JS
andrewserong Jul 3, 2024
17eb727
Update supports
andrewserong Jul 3, 2024
95d14e2
Try updating PHP handling
andrewserong Jul 3, 2024
a10d004
Fix linting
andrewserong Jul 3, 2024
c7ad4f8
Another try at tidying the PHP
andrewserong Jul 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 66 additions & 22 deletions lib/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,39 @@ function gutenberg_register_typography_support( $block_type ) {
return;
}

$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? 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_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_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;
$has_font_family_support =
( isset( $typography_supports['fontFamily'] ) && $typography_supports['fontFamily'] ) ||
( isset( $typography_supports['__experimentalFontFamily'] ) && $typography_supports['__experimentalFontFamily'] ) ||
false;
$has_font_style_support =
( isset( $typography_supports['fontStyle'] ) && $typography_supports['fontStyle'] ) ||
( isset( $typography_supports['__experimentalFontStyle'] ) && $typography_supports['__experimentalFontStyle'] ) ||
false;
$has_font_weight_support =
( isset( $typography_supports['fontWeight'] ) && $typography_supports['fontWeight'] ) ||
( isset( $typography_supports['__experimentalFontWeight'] ) && $typography_supports['__experimentalFontWeight'] ) ||
false;
$has_letter_spacing_support =
( isset( $typography_supports['letterSpacing'] ) && $typography_supports['letterSpacing'] ) ||
( isset( $typography_supports['__experimentalLetterSpacing'] ) && $typography_supports['__experimentalLetterSpacing'] ) ||
false;
$has_text_decoration_support =
( isset( $typography_supports['textDecoration'] ) && $typography_supports['textDecoration'] ) ||
( isset( $typography_supports['__experimentalTextDecoration'] ) && $typography_supports['__experimentalTextDecoration'] ) ||
false;
$has_text_transform_support =
( isset( $typography_supports['textTransform'] ) && $typography_supports['textTransform'] ) ||
( isset( $typography_supports['__experimentalTextTransform'] ) && $typography_supports['__experimentalTextTransform'] ) ||
false;
$has_writing_mode_support =
( isset( $typography_supports['writingMode'] ) && $typography_supports['writingMode'] ) ||
( isset( $typography_supports['__experimentalWritingMode'] ) && $typography_supports['__experimentalWritingMode'] ) ||
false;

$has_font_size_support = $typography_supports['fontSize'] ?? 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_typography_support = $has_font_family_support
|| $has_font_size_support
Expand Down Expand Up @@ -91,17 +113,39 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
return array();
}

$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? 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_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_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;
$has_font_family_support =
( isset( $typography_supports['fontFamily'] ) && $typography_supports['fontFamily'] ) ||
( isset( $typography_supports['__experimentalFontFamily'] ) && $typography_supports['__experimentalFontFamily'] ) ||
false;
$has_font_style_support =
( isset( $typography_supports['fontStyle'] ) && $typography_supports['fontStyle'] ) ||
( isset( $typography_supports['__experimentalFontStyle'] ) && $typography_supports['__experimentalFontStyle'] ) ||
false;
$has_font_weight_support =
( isset( $typography_supports['fontWeight'] ) && $typography_supports['fontWeight'] ) ||
( isset( $typography_supports['__experimentalFontWeight'] ) && $typography_supports['__experimentalFontWeight'] ) ||
false;
$has_letter_spacing_support =
( isset( $typography_supports['letterSpacing'] ) && $typography_supports['letterSpacing'] ) ||
( isset( $typography_supports['__experimentalLetterSpacing'] ) && $typography_supports['__experimentalLetterSpacing'] ) ||
false;
$has_text_decoration_support =
( isset( $typography_supports['textDecoration'] ) && $typography_supports['textDecoration'] ) ||
( isset( $typography_supports['__experimentalTextDecoration'] ) && $typography_supports['__experimentalTextDecoration'] ) ||
false;
$has_text_transform_support =
( isset( $typography_supports['textTransform'] ) && $typography_supports['textTransform'] ) ||
( isset( $typography_supports['__experimentalTextTransform'] ) && $typography_supports['__experimentalTextTransform'] ) ||
false;
$has_writing_mode_support =
( isset( $typography_supports['writingMode'] ) && $typography_supports['writingMode'] ) ||
( isset( $typography_supports['__experimentalWritingMode'] ) && $typography_supports['__experimentalWritingMode'] ) ||
false;

$has_font_size_support = $typography_supports['fontSize'] ?? 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;

// Whether to skip individual block support features.
$should_skip_font_size = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' );
Expand Down
19 changes: 15 additions & 4 deletions packages/block-editor/src/hooks/font-family.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ 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';
export const EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY =
'typography.__experimentalFontFamily';
const { kebabCase } = unlock( componentsPrivateApis );

/**
Expand All @@ -24,7 +26,10 @@ const { kebabCase } = unlock( componentsPrivateApis );
* @return {Object} Filtered block settings
*/
function addAttributes( settings ) {
if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
if (
! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) &&
! hasBlockSupport( settings, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY )
) {
return settings;
}

Expand All @@ -49,7 +54,10 @@ function addAttributes( settings ) {
* @return {Object} Filtered props applied to save element
*/
function addSaveProps( props, blockType, attributes ) {
if ( ! hasBlockSupport( blockType, FONT_FAMILY_SUPPORT_KEY ) ) {
if (
! hasBlockSupport( blockType, FONT_FAMILY_SUPPORT_KEY ) &&
! hasBlockSupport( blockType, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY )
) {
return props;
}

Expand Down Expand Up @@ -85,7 +93,10 @@ export default {
addSaveProps,
attributeKeys: [ 'fontFamily' ],
hasSupport( name ) {
return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY );
return (
hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY ) ||
hasBlockSupport( name, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY )
);
},
};

Expand Down
42 changes: 33 additions & 9 deletions packages/block-editor/src/hooks/supports.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,24 @@ 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 EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY =
'typography.__experimentalFontFamily';
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';
const EXPERIMENTAL_FONT_STYLE_SUPPORT_KEY =
'typography.__experimentalFontStyle';
/**
* 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';
const EXPERIMENTAL_FONT_WEIGHT_SUPPORT_KEY =
'typography.__experimentalFontWeight';

/**
* Key within block settings' supports array indicating support for text
* align e.g. settings found in `block.json`.
Expand All @@ -34,36 +41,51 @@ 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';
const EXPERIMENTAL_TEXT_DECORATION_SUPPORT_KEY =
'typography.__experimentalTextDecoration';
/**
* Key within block settings' supports array indicating support for writing mode
* e.g. settings found in `block.json`.
*/
const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
const WRITING_MODE_SUPPORT_KEY = 'typography.writingMode';
const EXPERIMENTAL_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';
const EXPERIMENTAL_TEXT_TRANSFORM_SUPPORT_KEY =
'typography.__experimentalTextTransform';

/**
* 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 EXPERIMENTAL_LETTER_SPACING_SUPPORT_KEY =
'typography.__experimentalLetterSpacing';
const LAYOUT_SUPPORT_KEY = 'layout';
const TYPOGRAPHY_SUPPORT_KEYS = [
LINE_HEIGHT_SUPPORT_KEY,
FONT_SIZE_SUPPORT_KEY,
FONT_STYLE_SUPPORT_KEY,
EXPERIMENTAL_FONT_STYLE_SUPPORT_KEY,
FONT_WEIGHT_SUPPORT_KEY,
EXPERIMENTAL_FONT_WEIGHT_SUPPORT_KEY,
FONT_FAMILY_SUPPORT_KEY,
EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY,
TEXT_ALIGN_SUPPORT_KEY,
TEXT_COLUMNS_SUPPORT_KEY,
TEXT_DECORATION_SUPPORT_KEY,
EXPERIMENTAL_TEXT_DECORATION_SUPPORT_KEY,
TEXT_TRANSFORM_SUPPORT_KEY,
EXPERIMENTAL_TEXT_TRANSFORM_SUPPORT_KEY,
WRITING_MODE_SUPPORT_KEY,
EXPERIMENTAL_WRITING_MODE_SUPPORT_KEY,
LETTER_SPACING_SUPPORT_KEY,
EXPERIMENTAL_LETTER_SPACING_SUPPORT_KEY,
];
const EFFECTS_SUPPORT_KEYS = [ 'shadow' ];
const SPACING_SUPPORT_KEY = 'spacing';
Expand Down Expand Up @@ -284,7 +306,8 @@ export const getCustomClassNameSupport = ( nameOrType ) =>
* @return {boolean} Whether the block supports the feature.
*/
export const hasFontFamilySupport = ( nameOrType ) =>
hasBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
hasBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY ) ||
hasBlockSupport( nameOrType, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY );

/**
* Returns the block support value for font family, if defined.
Expand All @@ -293,7 +316,8 @@ export const hasFontFamilySupport = ( nameOrType ) =>
* @return {unknown} The block support value.
*/
export const getFontFamilySupport = ( nameOrType ) =>
getBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
getBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY ) ||
getBlockSupport( nameOrType, EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY );

/**
* Returns true if the block defines support for font size.
Expand Down
36 changes: 29 additions & 7 deletions packages/block-editor/src/hooks/typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ import {
} from '../components/global-styles/typography-panel';

import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
import {
FONT_FAMILY_SUPPORT_KEY,
EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY,
} from './font-family';
import { FONT_SIZE_SUPPORT_KEY } from './font-size';
import { TEXT_ALIGN_SUPPORT_KEY } from './text-align';
import { cleanEmptyObject } from './utils';
Expand All @@ -27,13 +30,25 @@ 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 WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
const WRITING_MODE_SUPPORT_KEY = 'typography.writingMode';
const EXPERIMENTAL_LETTER_SPACING_SUPPORT_KEY =
'typography.__experimentalLetterSpacing';
const EXPERIMENTAL_TEXT_TRANSFORM_SUPPORT_KEY =
'typography.__experimentalTextTransform';
const EXPERIMENTAL_TEXT_DECORATION_SUPPORT_KEY =
'typography.__experimentalTextDecoration';
const EXPERIMENTAL_FONT_STYLE_SUPPORT_KEY =
'typography.__experimentalFontStyle';
const EXPERIMENTAL_FONT_WEIGHT_SUPPORT_KEY =
'typography.__experimentalFontWeight';
const EXPERIMENTAL_WRITING_MODE_SUPPORT_KEY =
'typography.__experimentalWritingMode';
export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
export const TYPOGRAPHY_SUPPORT_KEYS = [
LINE_HEIGHT_SUPPORT_KEY,
Expand All @@ -47,6 +62,13 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
WRITING_MODE_SUPPORT_KEY,
TEXT_TRANSFORM_SUPPORT_KEY,
LETTER_SPACING_SUPPORT_KEY,
EXPERIMENTAL_LETTER_SPACING_SUPPORT_KEY,
EXPERIMENTAL_TEXT_TRANSFORM_SUPPORT_KEY,
EXPERIMENTAL_TEXT_DECORATION_SUPPORT_KEY,
EXPERIMENTAL_FONT_STYLE_SUPPORT_KEY,
EXPERIMENTAL_FONT_WEIGHT_SUPPORT_KEY,
EXPERIMENTAL_WRITING_MODE_SUPPORT_KEY,
EXPERIMENTAL_FONT_FAMILY_SUPPORT_KEY,
];

function styleToAttributes( style ) {
Expand Down
Loading
Loading