Skip to content

Commit

Permalink
Style engine: enqueue block support styles (#42452)
Browse files Browse the repository at this point in the history 
* Enqueuing block support styles version 1.

* Linter, this one's for you.

* Post trunk merge cleanup and update tests.

* Removed spacing around curly braces in CSS rules. Updated tests.
We could maybe add a prettify option down the road.

Juggling methods around to cater for adding styles to (any) store.
Also making return values consistent.

* Splitting `wp_style_engine_enqueue_block_supports_styles` and `wp_style_engine_get_block_supports_styles` so we can enqueue styles that don't need parsing, e.g., layout

* Integrate the processor class

* Migrate layout styles to style engine store.

* Update packages/style-engine/class-wp-style-engine.php

Co-authored-by: Ari Stathopoulos <aristath@gmail.com>

* Tweaks for #42452 (#42691)

* abstract stores

* "else" not needed

* compile_classnames method not needed

* we have a method to get the store here

* Make the wp_style_engine_add_to_store function always return a store

* wp_style_engine_get_stylesheet - always return string

* Merged with base branch.
Added test for new method.

Co-authored-by: ramonjd <ramonjd@gmail.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

* Adding check for the context argument.
Adding tests.

* Updating the processor so that it's ignorant of stores. Why? So that it can be used to process any CSS and not just stored CSS.
Updating layout for backwards compatibility in gutenberg_get_layout_style (returning the styles that are collected in the function body only)
Created a new mode for incoming $css_rules to be a collection of selector + css_declaration keys.
Removed wp_style_engine_get_stylesheet (from store) since we don't use it yet
Added a new function wp_style_engine_get_stylesheet_from_css_rules() that will process and compile a collection of CSS rules, and not store them.

* dump var_dump()

* Improve the processor

* remove trailing commas - compatibility with PHP < 7.2

* rename css_declarations to declarations

* remove unused variable

Removing unused function wp_style_engine_get_stylesheet_from_store
Updating tests to check for merging and deduping

* Switch parse_block_styles from public to protected static

* Now that all methods are static, there's no need to call `get_instance()`

* Revert get_instance() in wp_style_engine_add_to_store because we want to ensure the hook is enqueued here.

* Adding a test for the 'enqueue' flag.

* Update lib/block-supports/layout.php

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>

* Adding a test for the 'enqueue' flag.

* Add named stores to the processor

* avoid setting var for something that only gets used once

* Only use "else" if absolutely necessary

* Add a set_name method

* combine & simplify conditions

* use empty() instead of isset() checks here

* shorten it

Co-authored-by: Ari Stathopoulos <aristath@gmail.com>
Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
  • Loading branch information
@ramonjd @aristath @andrewserong
3 people authored Aug 2, 2022
1 parent 56a185a commit 3f58ed5
Show file tree
Hide file tree
Showing 9 changed files with 786 additions and 210 deletions.
20 changes: 8 additions & 12 deletions lib/block-supports/elements.php
View file
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
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 );
}

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
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
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

0 comments on commit 3f58ed5

Please sign in to comment.