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

Jump to bottom

Group typographic block supports under a typography key #32252

Merged
merged 1 commit into from
Jun 2, 2021
Merged

Group typographic block supports under a typography key #32252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
52 changes: 32 additions & 20 deletions lib/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,28 @@ function gutenberg_register_typography_support( $block_type ) {
return;
}

$has_font_size_support = _wp_array_get( $block_type->supports, array( 'fontSize' ), false );
$has_font_style_support = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
$has_font_weight_support = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false );
$has_line_height_support = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
$has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
$has_letter_spacing_support = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false );

$has_typography_support = $has_font_size_support
|| $has_font_weight_support
$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
if ( ! $typography_supports ) {
return;
}

$has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
$has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
Copy link
Member

@oandregal oandregal May 27, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we miss here the check for the font family? It's pre-existing to this PR, so fine to add after as well.

$has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
$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_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );

$has_typography_support = $has_font_family_support
|| $has_font_size_support
|| $has_font_style_support
|| $has_font_weight_support
|| $has_letter_spacing_support
|| $has_line_height_support
|| $has_text_transform_support
|| $has_text_decoration_support
|| $has_letter_spacing_support;
|| $has_text_transform_support;

if ( ! $block_type->attributes ) {
$block_type->attributes = array();
Expand Down Expand Up @@ -67,14 +74,19 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
$classes = array();
$styles = array();

$has_font_family_support = _wp_array_get( $block_type->supports, array( '__experimentalFontFamily' ), false );
$has_font_style_support = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
$has_font_weight_support = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false );
$has_font_size_support = _wp_array_get( $block_type->supports, array( 'fontSize' ), false );
$has_line_height_support = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
$has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
$has_letter_spacing_support = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false );
$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
if ( ! $typography_supports ) {
return array();
}

$has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
$has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
$has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
$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_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );

$skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false );
Copy link
Member

@oandregal oandregal May 27, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typography has two flags to skip serialization (__experimentalSkipFontSizeSerialization and __experimentalSkipTypographySerialization). The other properties have only one and are nested within the key itself (color.__experimentalSkipSerialization). As part of this consolidation, I think we'd want typography to behave the same. As long as both changes are part of the same plugin & WordPress release, I'm not opinionated on whether it should be done in this PR or in a quick follow-up.


Expand Down
38 changes: 38 additions & 0 deletions lib/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,3 +430,41 @@ function gutenberg_block_has_support( $block_type, $feature, $default = false )

return true === $block_support || is_array( $block_support );
}

/**
* Updates the shape of supports for declaring fontSize and lineHeight.
*
* @param array $metadata Metadata for registering a block type.
* @return array Metadata for registering a block type with the supports shape updated.
*/
function gutenberg_migrate_old_typography_shape( $metadata ) {
// Temporarily disable migrations from core blocks until core block.json are updated.
if ( isset( $metadata['supports'] ) && false === strpos( $metadata['file'], '/wp-includes/blocks/' ) ) {
$typography_keys = array(
'__experimentalFontFamily',
'__experimentalFontStyle',
'__experimentalFontWeight',
'__experimentalLetterSpacing',
'__experimentalTextDecoration',
'__experimentalTextTransform',
'fontSize',
'lineHeight',
);
foreach ( $typography_keys as $typography_key ) {
$support_for_key = _wp_array_get( $metadata['supports'], array( $typography_key ), null );
if ( null !== $support_for_key ) {
trigger_error(
/* translators: %1$s: Block type, %2$s: typography supports key e.g: fontSize, lineHeight etc... */
sprintf( __( 'Block %1$s is declaring %2$s support on block.json under supports.%2$s. %2$s support is now declared under supports.typography.%2$s.', 'gutenberg' ), $metadata['name'], $typography_key ),
headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE
);
gutenberg_experimental_set( $metadata['supports'], array( 'typography', $typography_key ), $support_for_key );
unset( $metadata['supports'][ $typography_key ] );
}
}
}
return $metadata;
}


add_filter( 'block_type_metadata', 'gutenberg_migrate_old_typography_shape' );
4 changes: 2 additions & 2 deletions packages/block-editor/src/hooks/font-appearance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ import { cleanEmptyObject } from './utils';
/**
* Key within block settings' support array indicating support for font style.
*/
export const FONT_STYLE_SUPPORT_KEY = '__experimentalFontStyle';
export const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';

/**
* Key within block settings' support array indicating support for font weight.
*/
export const FONT_WEIGHT_SUPPORT_KEY = '__experimentalFontWeight';
export const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';

/**
* Inspector control panel containing the font appearance options.
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -15,7 +15,7 @@ import { cleanEmptyObject } from './utils';
import useSetting from '../components/use-setting';
import FontFamilyControl from '../components/font-family';

export const FONT_FAMILY_SUPPORT_KEY = '__experimentalFontFamily';
export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';

const getFontFamilyFromAttributeValue = ( fontFamilies, value ) => {
const attributeParsed = /var:preset\|font-family\|(.+)/.exec( value );
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/font-size.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
import { cleanEmptyObject } from './utils';
import useSetting from '../components/use-setting';

export const FONT_SIZE_SUPPORT_KEY = 'fontSize';
export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';

/**
* Filters registered block settings, extending attributes to include
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/line-height.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import LineHeightControl from '../components/line-height-control';
import { cleanEmptyObject } from './utils';
import useSetting from '../components/use-setting';

export const LINE_HEIGHT_SUPPORT_KEY = 'lineHeight';
export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';

/**
* Inspector control panel containing the line height related configuration
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/hooks/text-decoration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { cleanEmptyObject } from './utils';
* Key within block settings' supports array indicating support for text
* decorations e.g. settings found in `block.json`.
*/
export const TEXT_DECORATION_SUPPORT_KEY = '__experimentalTextDecoration';
export const TEXT_DECORATION_SUPPORT_KEY =
'typography.__experimentalTextDecoration';

/**
* Inspector control panel containing the text decoration options.
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/hooks/text-transform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { cleanEmptyObject } from './utils';
* Key within block settings' supports array indicating support for text
* transforms e.g. settings found in `block.json`.
*/
export const TEXT_TRANSFORM_SUPPORT_KEY = '__experimentalTextTransform';
export const TEXT_TRANSFORM_SUPPORT_KEY =
'typography.__experimentalTextTransform';

/**
* Inspector control panel containing the text transform options.
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/button/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,15 @@
"__experimentalSkipSerialization": true,
"gradients": true
},
"fontSize": true,
"typography": {
"fontSize": true,
"__experimentalFontFamily": true
},
"reusable": false,
"__experimentalBorder": {
"radius": true,
"__experimentalSkipSerialization": true
},
"__experimentalFontFamily": true,
"__experimentalSelector": ".wp-block-button__link"
},
"styles": [
Expand Down
4 changes: 3 additions & 1 deletion packages/block-library/src/code/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
},
"supports": {
"anchor": true,
"fontSize": true
"typography": {
"fontSize": true
}
},
"style": "wp-block-code"
}
8 changes: 5 additions & 3 deletions packages/block-library/src/heading/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,12 @@
"color": {
"link": true
},
"fontSize": true,
"lineHeight": true,
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontWeight": true
},
"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
"__experimentalFontWeight": true,
"__unstablePasteTextInline": true
},
"editorStyle": "wp-block-heading-editor",
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/list/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,13 @@
"supports": {
"anchor": true,
"className": false,
"fontSize": true,
"typography": {
"fontSize": true,
"__experimentalFontFamily": true
},
"color": {
"gradients": true
},
"__experimentalFontFamily": true,
"__unstablePasteTextInline": true,
"__experimentalSelector": "ol,ul"
},
Expand Down
4 changes: 3 additions & 1 deletion packages/block-library/src/loginout/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
},
"supports": {
"className": true,
"fontSize": false
"typography": {
"fontSize": false
}
}
}
18 changes: 10 additions & 8 deletions packages/block-library/src/navigation/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,16 @@
"anchor": true,
"html": false,
"inserter": true,
"fontSize": true,
"lineHeight": true,
"__experimentalFontStyle": true,
"__experimentalFontWeight": true,
"__experimentalTextTransform": true,
"color": true,
"__experimentalFontFamily": true,
"__experimentalTextDecoration": true
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontStyle": true,
"__experimentalFontWeight": true,
"__experimentalTextTransform": true,
"__experimentalFontFamily": true,
"__experimentalTextDecoration": true
},
"color": true
},
"editorStyle": "wp-block-navigation-editor",
"style": "wp-block-navigation"
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/paragraph/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,10 @@
"color": {
"link": true
},
"fontSize": true,
"lineHeight": true,
"typography": {
"fontSize": true,
"lineHeight": true
},
"__experimentalSelector": "p",
"__unstablePasteTextInline": true
},
Expand Down
8 changes: 5 additions & 3 deletions packages/block-library/src/post-author/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,14 @@
"usesContext": [ "postType", "postId" ],
"supports": {
"html": false,
"fontSize": true,
"typography": {
"fontSize": true,
"lineHeight": true
},
"color": {
"gradients": true,
"link": true
},
"lineHeight": true
}
},
"editorStyle": "wp-block-post-author-editor",
"style": "wp-block-post-author"
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/post-comments-count/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@
"color": {
"gradients": true
},
"fontSize": true,
"lineHeight": true
"typography": {
"fontSize": true,
"lineHeight": true
}
}
}
6 changes: 4 additions & 2 deletions packages/block-library/src/post-comments-form/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@
"gradients": true,
"link": true
},
"fontSize": true,
"lineHeight": true
"typography": {
"fontSize": true,
"lineHeight": true
}
},
"style": "wp-block-post-comments-form"
}
6 changes: 4 additions & 2 deletions packages/block-library/src/post-comments-link/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@
},
"supports": {
"html": false,
"fontSize": true,
"color": {
"link": true,
"text": false
},
"lineHeight": true
"typography": {
"fontSize": true,
"lineHeight": true
}
}
}
8 changes: 5 additions & 3 deletions packages/block-library/src/post-comments/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
"supports": {
"html": false,
"align": [ "wide", "full" ],
"fontSize": true,
"typography": {
"fontSize": true,
"lineHeight": true
},
"color": {
"gradients": true,
"link": true
},
"lineHeight": true
}
},
"style": "wp-block-post-comments"
}
6 changes: 4 additions & 2 deletions packages/block-library/src/post-date/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
"gradients": true,
"link": true
},
"fontSize": true,
"lineHeight": true
"typography": {
"fontSize": true,
"lineHeight": true
}
}
}
6 changes: 4 additions & 2 deletions packages/block-library/src/post-excerpt/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,14 @@
"usesContext": [ "postId", "postType" ],
"supports": {
"html": false,
"fontSize": true,
"color": {
"gradients": true,
"link": true
},
"lineHeight": true
"typography": {
"fontSize": true,
"lineHeight": true
}
},
"editorStyle": "wp-block-post-excerpt-editor",
"style": "wp-block-post-excerpt"
Expand Down
Loading