Skip to content

Server side block styles - add default value support #24300

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

Closed
Addison-Stavlo wants to merge 13 commits into from
Closed

Server side block styles - add default value support #24300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
96991fd
added default fallbacks
Addison-Stavlo Jul 30, 2020
228273c
handle default background and gradient more gracefully
Addison-Stavlo Jul 30, 2020
5e7ae24
check for explicit no alignment value
Addison-Stavlo Jul 30, 2020
8e62e67
support custom defaults
Addison-Stavlo Jul 30, 2020
7100946
php format
Addison-Stavlo Jul 30, 2020
fb57923
fix gradient default
Addison-Stavlo Jul 30, 2020
ba6ce07
whoopsie, thats just for testing
Addison-Stavlo Jul 30, 2020
881c137
thought i got rid of you...
Addison-Stavlo Jul 30, 2020
d101ae0
update tests
Addison-Stavlo Jul 30, 2020
1e8963a
fix linter errors
Addison-Stavlo Jul 30, 2020
1c332c7
darn php unit linter is a bully
Addison-Stavlo Jul 30, 2020
d1341ea
srsly go home evil linter
Addison-Stavlo Jul 30, 2020
5ae664d
handle merge conflict
Addison-Stavlo Aug 3, 2020
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
110 changes: 88 additions & 22 deletions lib/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,9 +242,9 @@ function gutenberg_experimental_apply_classnames_and_styles( $block_content, $bl
$supports = gutenberg_experimental_global_styles_get_supported_styles( $block_type->supports );

$attributes = array();
$attributes = gutenberg_experimental_build_css_colors( $attributes, $block['attrs'], $supports );
$attributes = gutenberg_experimental_build_css_typography( $attributes, $block['attrs'], $supports );
$attributes = gutenberg_build_css_block_alignment( $attributes, $block['attrs'], $supports );
$attributes = gutenberg_experimental_build_css_colors( $attributes, $block['attrs'], $supports, $block_type );
$attributes = gutenberg_experimental_build_css_typography( $attributes, $block['attrs'], $supports, $block_type );
$attributes = gutenberg_build_css_block_alignment( $attributes, $block['attrs'], $supports, $block_type );

if ( ! count( $attributes ) ) {
return $block_content;
Expand Down Expand Up @@ -295,36 +295,48 @@ function gutenberg_experimental_apply_classnames_and_styles( $block_content, $bl
* Add CSS classes and inline styles for colors to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @param array $attributes comprehensive list of attributes to be applied.
* @param array $block_attributes block attributes.
* @param array $supports style features the block attributes.
* @param array $attributes comprehensive list of attributes to be applied.
* @param array $block_attributes block attributes.
* @param array $supports style features the block attributes.
* @param object $block_type registered block type class.
* @return array Colors CSS classes and inline styles.
*/
function gutenberg_experimental_build_css_colors( $attributes, $block_attributes, $supports ) {
function gutenberg_experimental_build_css_colors( $attributes, $block_attributes, $supports, $block_type ) {
Copy link
Contributor

@apeatling apeatling Aug 4, 2020

Choose a reason for hiding this comment

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

This function is getting really long, and has a lot of conditionals. Not in this PR, but I think it would be good to consider ways to simplify and break out different parts into separate functions. With the number of conditionals it's becoming harder to follow.

// Text Colors.
// Check support for text colors.
if ( in_array( 'color', $supports, true ) ) {
$has_named_text_color = array_key_exists( 'textColor', $block_attributes );
$has_custom_text_color = isset( $block_attributes['style']['color']['text'] );
$has_named_text_color = array_key_exists( 'textColor', $block_attributes );
$has_custom_text_color = isset( $block_attributes['style']['color']['text'] );
$has_named_text_color_default = isset( $block_type->attributes['textColor']['default'] );
$has_custom_text_color_default = isset( $block_type->attributes['style']['default']['color']['text'] );

// Apply required generic class.
if ( $has_custom_text_color || $has_named_text_color ) {
if ( $has_custom_text_color || $has_named_text_color || $has_named_text_color_default || $has_custom_text_color_default ) {
$attributes['css_classes'][] = 'has-text-color';
}
// Apply color class or inline style.
if ( $has_named_text_color ) {
$attributes['css_classes'][] = sprintf( 'has-%s-color', $block_attributes['textColor'] );
} elseif ( $has_custom_text_color ) {
$attributes['inline_styles'][] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] );
// Fallback to default value if defined.
} elseif ( $has_named_text_color_default ) {
$attributes['css_classes'][] = sprintf( 'has-%s-color', $block_type->attributes['textColor']['default'] );
} elseif ( $has_custom_text_color_default ) {
$attributes['inline_styles'][] = sprintf( 'color: %s;', $block_type->attributes['style']['default']['color']['text'] );
}
}

// Link Colors.
if ( in_array( '--wp--style--color--link', $supports, true ) ) {
$has_link_color = isset( $block_attributes['style']['color']['link'] );
$has_link_color = isset( $block_attributes['style']['color']['link'] );
$has_link_color_default = isset( $block_type->attributes['style']['default']['color']['link'] );
// Apply required class and style.
if ( $has_link_color ) {
if ( $has_link_color || $has_link_color_default ) {
$attributes['css_classes'][] = 'has-link-color';
}

if ( $has_link_color ) {
// If link is a named color.
if ( strpos( $block_attributes['style']['color']['link'], 'var:preset|color|' ) !== false ) {
// Get the name from the string and add proper styles.
Expand All @@ -334,6 +346,17 @@ function gutenberg_experimental_build_css_colors( $attributes, $block_attributes
} else {
$attributes['inline_styles'][] = sprintf( '--wp--style--color--link: %s;', $block_attributes['style']['color']['link'] );
}
// Fallback to default value if defined.
} elseif ( $has_link_color_default ) {
// If link is a named color.
if ( strpos( $block_type->attributes['style']['default']['color']['link'], 'var:preset|color|' ) !== false ) {
// Get the name from the string and add proper styles.
$index_to_splice = strrpos( $block_type->attributes['style']['default']['color']['link'], '|' ) + 1;
$link_color_name = substr( $block_type->attributes['style']['default']['color']['link'], $index_to_splice );
$attributes['inline_styles'][] = sprintf( '--wp--style--color--link:var(--wp--preset--color--%s);', $link_color_name );
} else {
$attributes['inline_styles'][] = sprintf( '--wp--style--color--link: %s;', $block_type->attributes['style']['default']['color']['link'] );
}
}
}

Expand Down Expand Up @@ -370,19 +393,46 @@ function gutenberg_experimental_build_css_colors( $attributes, $block_attributes
}
}

// Fallback to default values for background and gradient if neither have been set.
if ( ! isset( $attributes['css_classes'] ) || ! in_array( 'has-background', $attributes['css_classes'], true ) ) {
$has_named_background_default = isset( $block_type->attributes['backgroundColor']['default'] );
$has_custom_background_default = isset( $block_type->attributes['style']['default']['color']['background'] );

// Check backrgound support and apply default background if exists.
if ( in_array( 'background-color', $supports, true ) && ( $has_named_background_default || $has_custom_background_default ) ) {
if ( $has_named_background_default ) {
$attributes['css_classes'][] = 'has-background';
$attributes['css_classes'][] = sprintf( 'has-%s-background-color', $block_type->attributes['backgroundColor']['default'] );
} elseif ( $has_custom_background_default ) {
$attributes['css_classes'][] = 'has-background';
$attributes['inline_styles'][] = sprintf( 'background-color: %s;', $block_type->attributes['style']['default']['color']['background'] );
}
// Check gradient support and apply default background if exists.
} elseif ( in_array( 'background', $supports, true ) ) {
if ( isset( $block_type->attributes['gradient']['default'] ) ) {
$attributes['css_classes'][] = 'has-background';
$attributes['css_classes'][] = sprintf( 'has-%s-gradient-background', $block_type->attributes['gradient']['default'] );
} elseif ( isset( $block_type->attributes['style']['default']['color']['gradient'] ) ) {
$attributes['css_classes'][] = 'has-background';
$attributes['inline_styles'][] = sprintf( 'background: %s;', $block_type->attributes['style']['default']['color']['gradient'] );
}
}
}

return $attributes;
}

/**
* Add CSS classes and inline styles for font sizes to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @param array $attributes comprehensive list of attributes to be applied.
* @param array $block_attributes block attributes.
* @param array $supports style features the block attributes.
* @param array $attributes comprehensive list of attributes to be applied.
* @param array $block_attributes block attributes.
* @param array $supports style features the block attributes.
* @param object $block_type registered block type class.
* @return array Font size CSS classes and inline styles.
*/
function gutenberg_experimental_build_css_typography( $attributes, $block_attributes, $supports ) {
function gutenberg_experimental_build_css_typography( $attributes, $block_attributes, $supports, $block_type ) {
// Font Size.
if ( in_array( 'font-size', $supports, true ) ) {
$has_named_font_size = array_key_exists( 'fontSize', $block_attributes );
Expand All @@ -393,6 +443,11 @@ function gutenberg_experimental_build_css_typography( $attributes, $block_attrib
$attributes['css_classes'][] = sprintf( 'has-%s-font-size', $block_attributes['fontSize'] );
} elseif ( $has_custom_font_size ) {
$attributes['inline_styles'][] = sprintf( 'font-size: %spx;', $block_attributes['style']['typography']['fontSize'] );
// Fallback to default value if defined.
} elseif ( isset( $block_type->attributes['fontSize']['default'] ) ) {
$attributes['css_classes'][] = sprintf( 'has-%s-font-size', $block_type->attributes['fontSize']['default'] );
} elseif ( isset( $block_type->attributes['style']['default']['typography']['fontSize'] ) ) {
$attributes['inline_styles'][] = sprintf( 'font-size: %spx;', $block_type->attributes['style']['default']['typography']['fontSize'] );
}
}

Expand All @@ -402,6 +457,9 @@ function gutenberg_experimental_build_css_typography( $attributes, $block_attrib
// Add the style (no classes for line-height).
if ( $has_line_height ) {
$attributes['inline_styles'][] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
// Fallback to default value if defined.
} elseif ( isset( $block_type->attributes['style']['default']['typography']['lineHeight'] ) ) {
$attributes['inline_styles'][] = sprintf( 'line-height: %s;', $block_type->attributes['style']['default']['typography']['lineHeight'] );
}
}

Expand All @@ -412,17 +470,25 @@ function gutenberg_experimental_build_css_typography( $attributes, $block_attrib
* Add CSS classes for block alignment to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @param array $attributes comprehensive list of attributes to be applied.
* @param array $block_attributes block attributes.
* @param array $supports style features the block attributes.
* @param array $attributes comprehensive list of attributes to be applied.
* @param array $block_attributes block attributes.
* @param array $supports style features the block attributes.
* @param object $block_type registered block type class.
* @return array Block alignment CSS classes and inline styles.
*/
function gutenberg_build_css_block_alignment( $attributes, $block_attributes, $supports ) {
function gutenberg_build_css_block_alignment( $attributes, $block_attributes, $supports, $block_type ) {
if ( in_array( 'block-align', $supports, true ) ) {
$has_block_alignment = array_key_exists( 'align', $block_attributes );

if ( $has_block_alignment ) {
$attributes['css_classes'][] = sprintf( 'align%s', $block_attributes['align'] );
// Don't apply style or default if attribute is saved to be ''.
// This is used as the none option when a default value is defined.
if ( '' !== $block_attributes['align'] ) {
if ( $has_block_alignment ) {
$attributes['css_classes'][] = sprintf( 'align%s', $block_attributes['align'] );
// Fallback to default value if defined.
} elseif ( isset( $block_type->attributes['align']['default'] ) ) {
$attributes['css_classes'][] = sprintf( 'align%s', $block_type->attributes['align']['default'] );
}
}
}

Expand Down
Loading