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

Elements: Button - Fix element selectors #41822

Merged
merged 10 commits into from
Jun 22, 2022
Merged

Elements: Button - Fix element selectors #41822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7f74df5
Add ui for button elements
scruffian Jun 10, 2022
a714b0e
prettier fixes
draganescu Jun 16, 2022
a0afa3d
attempt to bring background color for button styling
draganescu Jun 16, 2022
f1f0842
set background color for button element
draganescu Jun 17, 2022
531f79e
enables multiple color stack in the color indicator
draganescu Jun 20, 2022
451405e
use zstack for multiple color display, cleanup the UI for multiple co…
draganescu Jun 20, 2022
dd008e3
Elements: Fix button element selectors
scruffian Jun 20, 2022
04a5b42
add missing files
scruffian Jun 21, 2022
af5b0aa
lint fix
scruffian Jun 22, 2022
2615d79
add comment
scruffian Jun 22, 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
7 changes: 6 additions & 1 deletion 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 @@ -91,7 +91,12 @@ protected static function get_blocks_metadata() {
break;
}

$element_selector[] = $selector . ' ' . $el_selector;
// This converts selectors like '.wp-element-button, .wp-block-button__link'
// to an array, so that the block selector is added to both parts of the selector.
$el_selectors = explode( ',', $el_selector );
foreach ( $el_selectors as $el_selector_item ) {
$element_selector[] = $selector . ' ' . $el_selector_item;
}
scruffian marked this conversation as resolved.
Show resolved Hide resolved
}
static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
}
Expand Down
35 changes: 35 additions & 0 deletions lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<?php
/**
* WP_Theme_JSON_Resolver_6_1 class
*
* @package gutenberg
*/

/**
* Class that abstracts the processing of the different data sources
* for site-level config and offers an API to work with them.
*
* This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
* This is a low-level API that may need to do breaking changes. Please,
* use get_global_settings, get_global_styles, and get_global_stylesheet instead.
*
* @access private
*/
class WP_Theme_JSON_Resolver_6_1 extends WP_Theme_JSON_Resolver_6_0 {
/**
* Return core's origin config.
*
* @return WP_Theme_JSON_Gutenberg Entity that holds core data.
*/
public static function get_core_data() {
Copy link
Contributor

Choose a reason for hiding this comment

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

What changed here? Or is the function new?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is copied from lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php, just so that we get the new version of the core theme.json.

Copy link
Contributor

Choose a reason for hiding this comment

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

This is always annoying 👍🏻

Copy link
Contributor

Choose a reason for hiding this comment

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

Was there a problem and this was needed here? It's identical with 6_0 version..

if ( null !== static::$core ) {
return static::$core;
}

$config = static::read_json_file( __DIR__ . '/theme.json' );
$config = static::translate( $config );
static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );

return static::$core;
}
}
257 changes: 257 additions & 0 deletions lib/compat/wordpress-6.1/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
{
"version": 2,
"settings": {
"appearanceTools": false,
"border": {
"color": false,
"radius": false,
"style": false,
"width": false
},
"color": {
"background": true,
"custom": true,
"customDuotone": true,
"customGradient": true,
"defaultDuotone": true,
"defaultGradients": true,
"defaultPalette": true,
"duotone": [
{
"name": "Dark grayscale",
"colors": [ "#000000", "#7f7f7f" ],
"slug": "dark-grayscale"
},
{
"name": "Grayscale",
"colors": [ "#000000", "#ffffff" ],
"slug": "grayscale"
},
{
"name": "Purple and yellow",
"colors": [ "#8c00b7", "#fcff41" ],
"slug": "purple-yellow"
},
{
"name": "Blue and red",
"colors": [ "#000097", "#ff4747" ],
"slug": "blue-red"
},
{
"name": "Midnight",
"colors": [ "#000000", "#00a5ff" ],
"slug": "midnight"
},
{
"name": "Magenta and yellow",
"colors": [ "#c7005a", "#fff278" ],
"slug": "magenta-yellow"
},
{
"name": "Purple and green",
"colors": [ "#a60072", "#67ff66" ],
"slug": "purple-green"
},
{
"name": "Blue and orange",
"colors": [ "#1900d8", "#ffa96b" ],
"slug": "blue-orange"
}
],
"gradients": [
{
"name": "Vivid cyan blue to vivid purple",
"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
"slug": "vivid-cyan-blue-to-vivid-purple"
},
{
"name": "Light green cyan to vivid green cyan",
"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
"slug": "light-green-cyan-to-vivid-green-cyan"
},
{
"name": "Luminous vivid amber to luminous vivid orange",
"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
},
{
"name": "Luminous vivid orange to vivid red",
"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
"slug": "luminous-vivid-orange-to-vivid-red"
},
{
"name": "Very light gray to cyan bluish gray",
"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
"slug": "very-light-gray-to-cyan-bluish-gray"
},
{
"name": "Cool to warm spectrum",
"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
"slug": "cool-to-warm-spectrum"
},
{
"name": "Blush light purple",
"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
"slug": "blush-light-purple"
},
{
"name": "Blush bordeaux",
"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
"slug": "blush-bordeaux"
},
{
"name": "Luminous dusk",
"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
"slug": "luminous-dusk"
},
{
"name": "Pale ocean",
"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
"slug": "pale-ocean"
},
{
"name": "Electric grass",
"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
"slug": "electric-grass"
},
{
"name": "Midnight",
"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
"slug": "midnight"
}
],
"link": false,
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Cyan bluish gray",
"slug": "cyan-bluish-gray",
"color": "#abb8c3"
},
{
"name": "White",
"slug": "white",
"color": "#ffffff"
},
{
"name": "Pale pink",
"slug": "pale-pink",
"color": "#f78da7"
},
{
"name": "Vivid red",
"slug": "vivid-red",
"color": "#cf2e2e"
},
{
"name": "Luminous vivid orange",
"slug": "luminous-vivid-orange",
"color": "#ff6900"
},
{
"name": "Luminous vivid amber",
"slug": "luminous-vivid-amber",
"color": "#fcb900"
},
{
"name": "Light green cyan",
"slug": "light-green-cyan",
"color": "#7bdcb5"
},
{
"name": "Vivid green cyan",
"slug": "vivid-green-cyan",
"color": "#00d084"
},
{
"name": "Pale cyan blue",
"slug": "pale-cyan-blue",
"color": "#8ed1fc"
},
{
"name": "Vivid cyan blue",
"slug": "vivid-cyan-blue",
"color": "#0693e3"
},
{
"name": "Vivid purple",
"slug": "vivid-purple",
"color": "#9b51e0"
}
],
"text": true
},
"spacing": {
"blockGap": null,
"margin": false,
"padding": false,
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
},
"typography": {
"customFontSize": true,
"dropCap": true,
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
},
{
"name": "Large",
"slug": "large",
"size": "36px"
},
{
"name": "Extra Large",
"slug": "x-large",
"size": "42px"
}
],
"fontStyle": true,
"fontWeight": true,
"letterSpacing": true,
"lineHeight": false,
"textDecoration": true,
"textTransform": true
},
"blocks": {
"core/button": {
"border": {
"radius": true
}
},
"core/pullquote": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
}
}
}
},
"styles": {
"elements": {
"button": {
"color": {
"text": "#fff",
"background": "#32373c"
},
"typography": {
"fontSize": "1.125em",
"textDecoration": "none"
}
}
},
Comment on lines +243 to +254
Copy link
Contributor

Choose a reason for hiding this comment

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

This is what changed in Core theme.json.

"spacing": { "blockGap": "24px" }
}
}
4 changes: 2 additions & 2 deletions lib/experimental/class-wp-theme-json-resolver-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*
* @access private
*/
class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_0 {
class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_1 {
/**
* Returns the theme's data.
*
Expand Down Expand Up @@ -115,7 +115,7 @@ public static function get_block_data() {

// Core here means it's the lower level part of the styles chain.
// It can be a core or a third-party block.
return new WP_Theme_JSON( $config, 'core' );
return new WP_Theme_JSON_Gutenberg( $config, 'core' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Why did this change? Cos we've got our Gutenberg version which overloads the Core one?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah exactly. Without this the element styles are stripped out because its falling back to the core definitions.

}

/**
Expand Down
1 change: 1 addition & 0 deletions lib/load.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ function gutenberg_is_experiment_enabled( $name ) {
require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';
require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php';
require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php';
require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php';
require __DIR__ . '/compat/wordpress-6.1/script-loader.php';
Expand Down
8 changes: 0 additions & 8 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 @@ -95,14 +95,6 @@
"//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
"radius": "9999px"
},
"color": {
"text": "#fff",
"background": "#32373c"
},
"typography": {
"fontSize": "1.125em",
"textDecoration": "none"
},
Comment on lines -98 to -105
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you clarify again why we're moving these styles to Core's theme.json?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, we need these styles to be shared across all elements, so there's nowhere else to put them.

"spacing": {
"padding": {
"//": "The extra 2px are added to size solids the same as the outline versions.",
Expand Down
11 changes: 10 additions & 1 deletion packages/block-library/src/file/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,16 @@
},
"supports": {
"anchor": true,
"align": true
"align": true,
"__experimentalStyle": {
"elements": {
"button": {
"typography": {
"fontSize": "0.8em"
}
}
}
}
},
"viewScript": "file:./view.min.js",
"editorStyle": "wp-block-file-editor",
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/file/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,10 @@

//This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
.wp-block-file__button {
background: #32373c;
border-radius: 2em;
color: $white;
font-size: 0.8em;
padding: 0.5em 1em;

&:is(a) {
text-decoration: none;

&:hover,
&:visited,
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/search/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
.wp-block-search__button {
background: #f7f7f7;
border: 1px solid #ccc;
padding: 0.375em 0.625em;
color: #32373c;
margin-left: 0.625em;
word-break: normal;
font-size: inherit;
Expand Down
Loading