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: enqueue block support styles #42452

Merged
merged 30 commits into from
Aug 2, 2022
Merged

Style engine: enqueue block support styles #42452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
0840074
Enqueuing block support styles version 1.
ramonjd Jul 15, 2022
6a42821
Linter, this one's for you.
ramonjd Jul 15, 2022
1f2b4a8
Post trunk merge cleanup and update tests.
ramonjd Jul 15, 2022
5a51073
Removed spacing around curly braces in CSS rules. Updated tests.
ramonjd Jul 18, 2022
55576b9
Splitting `wp_style_engine_enqueue_block_supports_styles` and `wp_sty…
ramonjd Jul 19, 2022
acc6209
Integrate the processor class
ramonjd Jul 24, 2022
7a22c5b
Migrate layout styles to style engine store.
ramonjd Jul 25, 2022
7a6aa60
Update packages/style-engine/class-wp-style-engine.php
ramonjd Jul 27, 2022
49b1433
Tweaks for #42452 (#42691)
aristath Jul 27, 2022
d7893a6
Adding check for the context argument.
ramonjd Jul 28, 2022
bc6e39a
Updating the processor so that it's ignorant of stores. Why? So that …
ramonjd Jul 29, 2022
e8a621d
dump var_dump()
ramonjd Jul 29, 2022
9ba5232
Improve the processor
aristath Jul 29, 2022
b41af7d
remove trailing commas - compatibility with PHP < 7.2
aristath Jul 29, 2022
4ccf650
rename css_declarations to declarations
aristath Jul 29, 2022
e30e4fb
remove unused variable
aristath Jul 29, 2022
062b920
Switch parse_block_styles from public to protected static
ramonjd Aug 1, 2022
5e4164a
Now that all methods are static, there's no need to call `get_instanc…
ramonjd Aug 1, 2022
fcebf93
Revert get_instance() in wp_style_engine_add_to_store because we want…
ramonjd Aug 1, 2022
d0d5fe5
Adding a test for the 'enqueue' flag.
ramonjd Aug 1, 2022
e59eb10
Update lib/block-supports/layout.php
ramonjd Aug 1, 2022
5d7b827
Adding a test for the 'enqueue' flag.
ramonjd Aug 1, 2022
4d9f6c8
Merge branch 'try/style-engine-enqueue-block-supports-styles' of gith…
ramonjd Aug 1, 2022
8d021ee
Add named stores to the processor
aristath Aug 1, 2022
5f60026
avoid setting var for something that only gets used once
aristath Aug 1, 2022
a63f9cb
Only use "else" if absolutely necessary
aristath Aug 1, 2022
0eaef08
Add a set_name method
aristath Aug 1, 2022
e4c791b
combine & simplify conditions
aristath Aug 1, 2022
787f793
use empty() instead of isset() checks here
aristath Aug 1, 2022
7dd5773
shorten it
aristath Aug 1, 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
20 changes: 8 additions & 12 deletions lib/block-supports/elements.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,18 +104,14 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
$class_name = gutenberg_get_elements_class_name( $block );
$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;

if ( $link_block_styles ) {
$styles = gutenberg_style_engine_get_styles(
$link_block_styles,
array(
'selector' => ".$class_name a",
)
);

if ( ! empty( $styles['css'] ) ) {
gutenberg_enqueue_block_support_styles( $styles['css'] );
}
}
gutenberg_style_engine_get_styles(
$link_block_styles,
array(
'selector' => ".$class_name a",
'context' => 'block-supports',
'enqueue' => true,
)
);

return null;
}
Expand Down
120 changes: 86 additions & 34 deletions lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,8 @@ function gutenberg_register_layout_support( $block_type ) {
* @return string CSS style.
*/
function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

$style = '';
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
$layout_styles = array();
if ( 'default' === $layout_type ) {
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
Expand All @@ -55,14 +54,25 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );

if ( $content_size || $wide_size ) {
$style = "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {";
$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
$style .= 'margin-left: auto !important;';
$style .= 'margin-right: auto !important;';
$style .= '}';

$style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
$style .= "$selector .alignfull { max-width: none; }";
array_push(
$layout_styles,
array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array(
'max-width' => $all_max_width_value,
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
),
),
array(
'selector' => "$selector > .alignwide",
'declarations' => array( 'max-width' => $wide_max_width_value ),
),
array(
'selector' => "$selector .alignfull",
'declarations' => array( 'max-width' => 'none' ),
)
);

if ( isset( $block_spacing ) ) {
$block_spacing_values = gutenberg_style_engine_get_styles(
Expand All @@ -74,12 +84,18 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
// Handle negative margins for alignfull children of blocks with custom padding set.
// They're added separately because padding might only be set on one side.
if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
$padding_right = $block_spacing_values['declarations']['padding-right'];
$style .= "$selector > .alignfull { margin-right:calc($padding_right * -1); }";
$padding_right = $block_spacing_values['declarations']['padding-right'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
);
}
if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
$padding_left = $block_spacing_values['declarations']['padding-left'];
$style .= "$selector > .alignfull { margin-left: calc($padding_left * -1); }";
$padding_left = $block_spacing_values['declarations']['padding-left'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
);
}
}
}
Expand All @@ -89,8 +105,23 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
if ( $gap_value && ! $should_skip_gap_serialization ) {
$style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
$style .= "$selector > * + * { margin-block-start: $gap_value; margin-block-end: 0; }";
array_push(
$layout_styles,
array(
'selector' => "$selector > *",
'declarations' => array(
'margin-block-start' => '0',
'margin-block-end' => '0',
),
),
array(
'selector' => "$selector > * + *",
'declarations' => array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
),
)
);
}
}
} elseif ( 'flex' === $layout_type ) {
Expand All @@ -113,7 +144,10 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
}

if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) {
$style .= "$selector { flex-wrap: nowrap; }";
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'flex-wrap' => 'nowrap' ),
);
}

if ( $has_block_gap_support ) {
Expand All @@ -123,9 +157,10 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
}
if ( $gap_value && ! $should_skip_gap_serialization ) {
$style .= "$selector {";
$style .= "gap: $gap_value;";
$style .= '}';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'gap' => $gap_value ),
);
}
}

Expand All @@ -136,29 +171,47 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
* by custom css.
*/
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$style .= "$selector {";
$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
$style .= '}';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ),
);
}

if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
$style .= "$selector {";
$style .= "align-items: {$vertical_alignment_options[ $layout['verticalAlignment'] ]};";
$style .= '}';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
);
}
} else {
$style .= "$selector {";
$style .= 'flex-direction: column;';
$layout_styles[ $selector ] = array(
'flex-direction' => 'column',
'align-items' => 'flex-start',
);
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ),
);
} else {
$style .= 'align-items: flex-start;';
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'align-items' => 'flex-start' ),
);
}
$style .= '}';
}
}

return $style;
if ( ! empty( $layout_styles ) ) {
// Add to the style engine store to enqueue and render layout styles.
gutenberg_style_engine_add_to_store( 'layout-block-supports', $layout_styles );

// Return compiled layout styles to retain backwards compatibility.
// Since https://github.com/WordPress/gutenberg/pull/42452 we no longer call wp_enqueue_block_support_styles in this block supports file.
return gutenberg_style_engine_get_stylesheet_from_css_rules( $layout_styles );
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice one, this looks like a good way to abstract it to me (a clean public function, and that function calls a simple method on the Style Engine class, which in turn calls the Processor class 👍).

Output looks good via logging, each rendered block gets its own string:

image

}

return '';
}

/**
Expand Down Expand Up @@ -253,7 +306,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
// Only add container class and enqueue block support styles if unique styles were generated.
if ( ! empty( $style ) ) {
$class_names[] = $container_class;
wp_enqueue_block_support_styles( $style );
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/style-engine/class-wp-style-engine-css-rule.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ public function __construct( $selector = '', $declarations = array() ) {
*
* @param string $selector The CSS selector.
*
* @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
* @return WP_Style_Engine_CSS_Rule|void Returns the object to allow chaining of methods.
*/
public function set_selector( $selector ) {
if ( empty( $selector ) ) {
Expand Down
49 changes: 49 additions & 0 deletions packages/style-engine/class-wp-style-engine-css-rules-store.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ class WP_Style_Engine_CSS_Rules_Store {
*/
protected static $stores = array();


/**
* The store name.
*
* @var string
*/
protected $name = '';

/**
* An array of CSS Rules objects assigned to the store.
*
Expand All @@ -44,9 +52,50 @@ class WP_Style_Engine_CSS_Rules_Store {
public static function get_store( $store_name = 'default' ) {
if ( ! isset( static::$stores[ $store_name ] ) ) {
static::$stores[ $store_name ] = new static();
// Set the store name.
static::$stores[ $store_name ]->set_name( $store_name );
}
return static::$stores[ $store_name ];
}

/**
* Get an array of all available stores.
*
* @return WP_Style_Engine_CSS_Rules_Store[]
*/
public static function get_stores() {
return static::$stores;
}

/**
* Clears all stores from static::$stores.
*
* @return void
*/
public static function remove_all_stores() {
static::$stores = array();
}

/**
* Set the store name.
*
* @param string $name The store name.
*
* @return void
*/
public function set_name( $name ) {
$this->name = $name;
}

/**
* Get the store name.
*
* @return string
*/
public function get_name() {
return $this->name;
}

/**
* Get an array of all rules.
*
Expand Down
Loading