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

Style Engine: add typography and color to backend #40332

Merged
merged 19 commits into from
Apr 27, 2022
Merged

Style Engine: add typography and color to backend #40332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
3d51183
Initial commit: add typography to style engine
ramonjd Apr 6, 2022
24e9f57
Adding whitespace to inline output
ramonjd Apr 7, 2022
f257752
Introduce spacing to inline styles
ramonjd Apr 7, 2022
70f32de
Removing generating styles based on an options path since we're not u…
ramonjd Apr 7, 2022
9b7b31a
Perform kebab case normalization in the style engine.
ramonjd Apr 13, 2022
75ce88b
Remove unused arg $options
ramonjd Apr 13, 2022
b9d9ba4
Refactor style engine so that `generate()` will return an array of cs…
ramonjd Apr 14, 2022
c4ae1d3
Remove 'inline' as an option until we need something different
ramonjd Apr 14, 2022
510f6bb
Only add the required classnames if there's a valid style value or cl…
ramonjd Apr 14, 2022
86b8880
Removed options arg until we need it. Thanks, linter.
ramonjd Apr 14, 2022
e7affed
Refactor generate to accept string CSS preset property values (for no…
ramonjd Apr 19, 2022
c3d314e
Updated color and typography to use the preset value for the style en…
ramonjd Apr 19, 2022
44ddde4
No short ternaries says the linter. Booooh!
ramonjd Apr 19, 2022
df6077f
Cleaning up. Reinstating deprecated function so we don't forget to de…
ramonjd Apr 20, 2022
e3f4b11
Wherefore art thou, vile linter!
ramonjd Apr 20, 2022
4f9502f
Updating inline docs
ramonjd Apr 22, 2022
65cf61c
Created public interface method gutenberg_style_engine_generate
ramonjd Apr 26, 2022
d328e64
Linter, thy foul stench offends me!
ramonjd Apr 26, 2022
951ea74
Using the correct preset property keys for colors and gradients ensur…
ramonjd Apr 26, 2022
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
62 changes: 18 additions & 44 deletions lib/block-supports/colors.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,66 +76,40 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
$has_text_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'text' ), true ) );
$has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
$has_gradients_support = _wp_array_get( $color_support, array( 'gradients' ), false );
$classes = array();
$styles = array();
$color_block_styles = array();

// Text colors.
// Check support for text colors.
if ( $has_text_colors_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) {
$has_named_text_color = array_key_exists( 'textColor', $block_attributes );
$has_custom_text_color = isset( $block_attributes['style']['color']['text'] );

// Apply required generic class.
if ( $has_custom_text_color || $has_named_text_color ) {
$classes[] = 'has-text-color';
}
// Apply color class or inline style.
if ( $has_named_text_color ) {
$classes[] = sprintf( 'has-%s-color', _wp_to_kebab_case( $block_attributes['textColor'] ) );
} elseif ( $has_custom_text_color ) {
$styles[] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] );
}
$preset_text_color = array_key_exists( 'textColor', $block_attributes ) ? "var:preset|color|{$block_attributes['textColor']}" : null;
$custom_text_color = _wp_array_get( $block_attributes, array( 'style', 'color', 'text' ), null );
$color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
}

// Background colors.
if ( $has_background_colors_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) {
$has_named_background_color = array_key_exists( 'backgroundColor', $block_attributes );
$has_custom_background_color = isset( $block_attributes['style']['color']['background'] );

// Apply required background class.
if ( $has_custom_background_color || $has_named_background_color ) {
$classes[] = 'has-background';
}
// Apply background color classes or styles.
if ( $has_named_background_color ) {
$classes[] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $block_attributes['backgroundColor'] ) );
} elseif ( $has_custom_background_color ) {
$styles[] = sprintf( 'background-color: %s;', $block_attributes['style']['color']['background'] );
}
$preset_background_color = array_key_exists( 'backgroundColor', $block_attributes ) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null;
$custom_background_color = _wp_array_get( $block_attributes, array( 'style', 'color', 'background' ), null );
$color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
}

// Gradients.

if ( $has_gradients_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) ) {
$has_named_gradient = array_key_exists( 'gradient', $block_attributes );
$has_custom_gradient = isset( $block_attributes['style']['color']['gradient'] );

if ( $has_named_gradient || $has_custom_gradient ) {
$classes[] = 'has-background';
}
// Apply required background class.
if ( $has_named_gradient ) {
$classes[] = sprintf( 'has-%s-gradient-background', _wp_to_kebab_case( $block_attributes['gradient'] ) );
} elseif ( $has_custom_gradient ) {
$styles[] = sprintf( 'background: %s;', $block_attributes['style']['color']['gradient'] );
}
$preset_gradient_color = array_key_exists( 'gradient', $block_attributes ) ? "var:preset|gradient|{$block_attributes['gradient']}" : null;
$custom_gradient_color = _wp_array_get( $block_attributes, array( 'style', 'color', 'gradient' ), null );
$color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color;
}

$attributes = array();
if ( ! empty( $classes ) ) {
$attributes['class'] = implode( ' ', $classes );
$styles = gutenberg_style_engine_generate( array( 'color' => $color_block_styles ) );

if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
}
if ( ! empty( $styles ) ) {
$attributes['style'] = implode( ' ', $styles );

if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}

return $attributes;
Expand Down
12 changes: 4 additions & 8 deletions lib/block-supports/spacing.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,21 +52,17 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
return $attributes;
}

$style_engine = WP_Style_Engine_Gutenberg::get_instance();
$skip_padding = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' );
$skip_margin = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' );
$spacing_block_styles = array();
$spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
$spacing_block_styles['margin'] = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
$inline_styles = $style_engine->generate(
array( 'spacing' => $spacing_block_styles ),
array(
'inline' => true,
)
$styles = gutenberg_style_engine_generate(
array( 'spacing' => $spacing_block_styles )
);

if ( ! empty( $inline_styles ) ) {
$attributes['style'] = $inline_styles;
if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}

return $attributes;
Expand Down
142 changes: 77 additions & 65 deletions lib/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,6 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
return array();
}

$attributes = array();
$classes = array();
$styles = 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 );
Expand All @@ -92,89 +88,107 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );

if ( $has_font_size_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' ) ) {
$has_named_font_size = array_key_exists( 'fontSize', $block_attributes );
$has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
// Whether to skip individual block support features.
$should_skip_font_size = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' );
$should_skip_font_family = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' );
$should_skip_font_style = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
$should_skip_font_weight = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
$should_skip_line_height = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
$should_skip_text_decoration = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
$should_skip_text_transform = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
$should_skip_letter_spacing = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );

if ( $has_named_font_size ) {
$classes[] = sprintf( 'has-%s-font-size', _wp_to_kebab_case( $block_attributes['fontSize'] ) );
} elseif ( $has_custom_font_size ) {
$styles[] = sprintf( 'font-size: %s;', $block_attributes['style']['typography']['fontSize'] );
}
$typography_block_styles = array();
if ( $has_font_size_support && ! $should_skip_font_size ) {
$preset_font_size = array_key_exists( 'fontSize', $block_attributes ) ? "var:preset|font-size|{$block_attributes['fontSize']}" : null;
$custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] ) ? $block_attributes['style']['typography']['fontSize'] : null;
$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
}

if ( $has_font_family_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' ) ) {
$has_named_font_family = array_key_exists( 'fontFamily', $block_attributes );
$has_custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] );

if ( $has_named_font_family ) {
$classes[] = sprintf( 'has-%s-font-family', _wp_to_kebab_case( $block_attributes['fontFamily'] ) );
} elseif ( $has_custom_font_family ) {
// Before using classes, the value was serialized as a CSS Custom Property.
// We don't need this code path when it lands in core.
$font_family_custom = $block_attributes['style']['typography']['fontFamily'];
if ( strpos( $font_family_custom, 'var:preset|font-family' ) !== false ) {
$index_to_splice = strrpos( $font_family_custom, '|' ) + 1;
$font_family_slug = _wp_to_kebab_case( substr( $font_family_custom, $index_to_splice ) );
$font_family_custom = sprintf( 'var(--wp--preset--font-family--%s)', $font_family_slug );
}
$styles[] = sprintf( 'font-family: %s;', $font_family_custom );
}
if ( $has_font_family_support && ! $should_skip_font_family ) {
$preset_font_family = array_key_exists( 'fontFamily', $block_attributes ) ? "var:preset|font-family|{$block_attributes['fontFamily']}" : null;
$custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] ) ? gutenberg_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontFamily'], 'font-family' ) : null;
$typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
}

if ( $has_font_style_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ) ) {
$font_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' );
if ( $font_style ) {
$styles[] = $font_style;
}
if ( $has_font_style_support && ! $should_skip_font_style && isset( $block_attributes['style']['typography']['fontStyle'] ) ) {
$typography_block_styles['fontStyle'] =
gutenberg_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontStyle'], 'font-style' );
}

if ( $has_font_weight_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ) ) {
$font_weight = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' );
if ( $font_weight ) {
$styles[] = $font_weight;
}
if ( $has_font_weight_support && ! $should_skip_font_weight && isset( $block_attributes['style']['typography']['fontWeight'] ) ) {
$typography_block_styles['fontWeight'] =
gutenberg_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontWeight'], 'font-weight' );
}

if ( $has_line_height_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ) ) {
$has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] );
if ( $has_line_height ) {
$styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
}
if ( $has_line_height_support && ! $should_skip_line_height ) {
$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ), null );
}

if ( $has_text_decoration_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' ) ) {
$text_decoration_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' );
if ( $text_decoration_style ) {
$styles[] = $text_decoration_style;
}
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' );
}

if ( $has_text_transform_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' ) ) {
$text_transform_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' );
if ( $text_transform_style ) {
$styles[] = $text_transform_style;
}
if ( $has_text_transform_support && ! $should_skip_text_transform && isset( $block_attributes['style']['typography']['textTransform'] ) ) {
$typography_block_styles['textTransform'] =
gutenberg_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['textTransform'], 'text-transform' );
}

if ( $has_letter_spacing_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' ) ) {
$letter_spacing_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'letterSpacing', 'letter-spacing' );
if ( $letter_spacing_style ) {
$styles[] = $letter_spacing_style;
}
if ( $has_letter_spacing_support && ! $should_skip_letter_spacing && isset( $block_attributes['style']['typography']['letterSpacing'] ) ) {
$typography_block_styles['letterSpacing'] =
gutenberg_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['letterSpacing'], 'letter-spacing' );
}

if ( ! empty( $classes ) ) {
$attributes['class'] = implode( ' ', $classes );
$attributes = array();
$styles = gutenberg_style_engine_generate( array( 'typography' => $typography_block_styles ) );

if ( ! empty( $styles['classnames'] ) ) {
$attributes['class'] = $styles['classnames'];
}
if ( ! empty( $styles ) ) {
$attributes['style'] = implode( ' ', $styles );

if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}

return $attributes;
}

/**
* Note: this method is for backwards compatibility.
* It mostly replaces `gutenberg_typography_get_css_variable_inline_style()`.
*
* Generates an inline style value for a typography feature e.g. text decoration,
* text transform, and font style.
*
* @param string $style_value A raw style value for a single typography feature from a block's style attribute.
* @param string $css_property Slug for the CSS property the inline style sets.
*
* @return string? A CSS inline style value.
*/
function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_property ) {
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
// If the style value is not a preset CSS variable go no further.
if ( empty( $style_value ) || strpos( $style_value, "var:preset|{$css_property}|" ) === false ) {
return $style_value;
}

// For backwards compatibility.
// Presets were removed in https://github.com/WordPress/gutenberg/pull/27555.
// We have a preset CSS variable as the style.
// Get the style value from the string and return CSS style.
$index_to_splice = strrpos( $style_value, '|' ) + 1;
$slug = _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );

// Return the actual CSS inline style value e.g. `var(--wp--preset--text-decoration--underline);`.
return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug );
}

/**
* Deprecated.
* This method is no longer used and will have to be deprecated in Core.
*
* It can be deleted once migrated to the next WordPress version.
*
* Generates an inline style for a typography feature e.g. text decoration,
* text transform, and font style.
*
Expand Down Expand Up @@ -213,5 +227,3 @@ function gutenberg_typography_get_css_variable_inline_style( $attributes, $featu
'apply' => 'gutenberg_apply_typography_support',
)
);


Loading