Skip to content

Commit

Permalink
Switch background color to text color on block separator (#44943)
Browse files Browse the repository at this point in the history 
* Switch background to text, remove gradients on separator block

* Use theme_json class to fix separator color issue

* Add fix for the editor

* Fix the separator on the editor

* Give the border color more specifity

* Add text color specifity

* Small refactor

* Add unit test for separator background php part

* Use only color instead of border-color

* Refactor to just update declarations

* Update documentation

* Add static to private function

* Update the wording of the comments

* Add missing spread to global styles output

* Rename test to fit the new function

Co-authored-by: Michal Czaplinski <[email protected]>
Co-authored-by: Andrew Serong <[email protected]>
  • Loading branch information
@cbravobernal @michalczaplinski
@andrewserong @Mamaduka
3 people authored and Mamaduka committed Nov 10, 2022
1 parent 6941ad1 commit 67b7b5e
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 2 deletions.
50 changes: 50 additions & 0 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -692,6 +692,51 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
return $stylesheet;
}

/**
* Returns a filtered declarations array if there is a separator block with only a background
* style defined in theme.json by adding a color attribute to reflect the changes in the front.
*
* @param array $declarations List of declarations.
*
* @return array $declarations List of declarations filtered.
*/
private static function update_separator_declarations( $declarations ) {
$background_matches = array_values(
array_filter(
$declarations,
function( $declaration ) {
return 'background-color' === $declaration['name'];
}
)
);
if ( ! empty( $background_matches && isset( $background_matches[0]['value'] ) ) ) {
$border_color_matches = array_values(
array_filter(
$declarations,
function( $declaration ) {
return 'border-color' === $declaration['name'];
}
)
);
$text_color_matches = array_values(
array_filter(
$declarations,
function( $declaration ) {
return 'color' === $declaration['name'];
}
)
);
if ( empty( $border_color_matches ) && empty( $text_color_matches ) ) {
$declarations[] = array(
'name' => 'color',
'value' => $background_matches[0]['value'],
);
}
}

return $declarations;
}

/**
* Gets the CSS rules for a particular block from theme.json.
*
Expand Down Expand Up @@ -780,6 +825,11 @@ function( $pseudo_selector ) use ( $selector ) {
}
}

// Update declarations if there are separators with only background color defined.
if ( '.wp-block-separator' === $selector ) {
$declarations = static::update_separator_declarations( $declarations );
}

// 2. Generate and append the rules that use the general selector.
$block_rules .= static::to_ruleset( $selector, $declarations );

Expand Down
40 changes: 38 additions & 2 deletions packages/edit-site/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -845,8 +845,44 @@ export const getBlockSelectors = ( blockTypes ) => {
return result;
};

/**
* If there is a separator block whose color is defined in theme.json via background,
* update the separator color to the same value by using border color.
*
* @param {Object} config Theme.json configuration file object.
* @return {Object} configTheme.json configuration file object updated.
*/
function updateConfigWithSeparator( config ) {
const needsSeparatorStyleUpdate =
config.styles?.blocks[ 'core/separator' ] &&
config.styles?.blocks[ 'core/separator' ].color?.background &&
! config.styles?.blocks[ 'core/separator' ].color?.text &&
! config.styles?.blocks[ 'core/separator' ].border?.color;
if ( needsSeparatorStyleUpdate ) {
return {
...config,
styles: {
...config.styles,
blocks: {
...config.styles.blocks,
'core/separator': {
...config.styles.blocks[ 'core/separator' ],
color: {
...config.styles.blocks[ 'core/separator' ].color,
text: config.styles?.blocks[ 'core/separator' ]
.color.background,
},
},
},
},
};
}
return config;
}

export function useGlobalStylesOutput() {
const { merged: mergedConfig } = useContext( GlobalStylesContext );
let { merged: mergedConfig } = useContext( GlobalStylesContext );

const [ blockGap ] = useSetting( 'spacing.blockGap' );
const hasBlockGapSupport = blockGap !== null;
const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
Expand All @@ -859,7 +895,7 @@ export function useGlobalStylesOutput() {
if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
return [];
}

mergedConfig = updateConfigWithSeparator( mergedConfig );
const blockSelectors = getBlockSelectors( getBlockTypes() );
const customProperties = toCustomProperties(
mergedConfig,
Expand Down
111 changes: 111 additions & 0 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1339,4 +1339,115 @@ function test_get_styles_for_block_with_content_width() {
$style_rules = $theme_json->get_styles_for_block( $metadata );
$this->assertEquals( $expected, $root_rules . $style_rules );
}

public function test_update_separator_declarations() {
// If only background is defined, test that includes border-color to the style so it is applied on the front end.
$theme_json = new WP_Theme_JSON_Gutenberg(
array(
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
'styles' => array(
'blocks' => array(
'core/separator' => array(
'color' => array(
'background' => 'blue',
),
),
),
),
),
'default'
);
$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;color: blue;}';
$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
$this->assertEquals( $expected, $stylesheet );

// If background and text are defined, do not include border-color, as text color is enough.
$theme_json = new WP_Theme_JSON_Gutenberg(
array(
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
'styles' => array(
'blocks' => array(
'core/separator' => array(
'color' => array(
'background' => 'blue',
'text' => 'red',
),
),
),
),
),
'default'
);
$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;color: red;}';
$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
$this->assertEquals( $expected, $stylesheet );

// If only text is defined, do not include border-color, as by itself is enough.
$theme_json = new WP_Theme_JSON_Gutenberg(
array(
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
'styles' => array(
'blocks' => array(
'core/separator' => array(
'color' => array(
'text' => 'red',
),
),
),
),
),
'default'
);
$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{color: red;}';
$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
$this->assertEquals( $expected, $stylesheet );

// If background, text, and border-color are defined, include everything, CSS specifity will decide which to apply.
$theme_json = new WP_Theme_JSON_Gutenberg(
array(
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
'styles' => array(
'blocks' => array(
'core/separator' => array(
'color' => array(
'background' => 'blue',
'text' => 'red',
),
'border' => array(
'color' => 'pink',
),
),
),
),
),
'default'
);
$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;border-color: pink;color: red;}';
$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
$this->assertEquals( $expected, $stylesheet );

// If background and border color are defined, include everything, CSS specifity will decide which to apply.
$theme_json = new WP_Theme_JSON_Gutenberg(
array(
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
'styles' => array(
'blocks' => array(
'core/separator' => array(
'color' => array(
'background' => 'blue',
),
'border' => array(
'color' => 'pink',
),
),
),
),
),
'default'
);
$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;border-color: pink;}';
$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
$this->assertEquals( $expected, $stylesheet );

}
}

0 comments on commit 67b7b5e

Please sign in to comment.