Skip to content

Cherry-pick PRs for the WordPress 6.1.1 RC #45706

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

Merged
Mamaduka merged 18 commits into from
Nov 10, 2022
Merged

Cherry-pick PRs for the WordPress 6.1.1 RC #45706

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
19358d7
Post Featured Image: Fix height/scale overwriting border inline style…
aaronrobertshaw Sep 19, 2022
cfe41d8
Fluid typography: add font size constraints (#44993)
ramonjd Oct 18, 2022
c1d0fb8
Allow direct selection of nested Page List block by avoiding dual ren…
getdave Oct 20, 2022
27fc28f
Fix popover deprecations (#45195)
talldan Oct 26, 2022
d1e989b
Components: Refactor `ColorPalette` tests to `@testing-library/react`…
tyxla Sep 15, 2022
b7c87a9
Fix changelog
Mamaduka Nov 10, 2022
a69ad93
Convert the `ColorPalette` component to TypeScript (#44632)
kienstra Oct 26, 2022
1d6e86f
List v2: fix migration when nested list is invalid (#44822)
ellatrix Oct 28, 2022
5df9d42
Link to homeUrl from site editor view menu. (#45475)
peterwilsoncc Nov 3, 2022
86755ae
Table Block: Apply borders and padding on both front end and editor (…
mikachan Nov 4, 2022
2406bb9
Change the order of the pseudo-states in the pseudo selectors array (…
mikachan Nov 7, 2022
78717bd
Do not look for block variants, if not supporting block-templates (#4…
spacedmonkey Nov 8, 2022
bcff52e
Restore the empty paragraph inserter (#45542)
youknowriad Nov 9, 2022
d6485c6
Cover: Avoid content loss when the templateLock value is all or conte…
Mamaduka Nov 10, 2022
035afba
List: disable nested list drop zone so dropping list items works (#45…
ellatrix Nov 10, 2022
6941ad1
Fix cherry-picking error
Mamaduka Nov 10, 2022
67b7b5e
Switch background color to text color on block separator (#44943)
cbravobernal Nov 2, 2022
3b4797b
Fix performance tests
Mamaduka Nov 10, 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
Prev Previous commit
Next Next commit
Switch background color to text color on block separator (#44943) 
* 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
commit 67b7b5e5db4b74237cf660d4f579c8de86e4edf0
50 changes: 50 additions & 0 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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 );

}
}