Skip to content

Use the Style Engine in layout block-supports #42366

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

Closed
aristath wants to merge 10 commits into from
Closed

Use the Style Engine in layout block-supports #42366

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fdf7abf
use WP_Style_Engine_CSS_Declarations_Gutenberg in layout.php
aristath Jul 12, 2022
27ed2c6
say what the array is
aristath Jul 12, 2022
29b4874
cleanup: this is not necessary, moved $selector to the initial array
aristath Jul 12, 2022
96ecea3
$selector is already defined in the array init
aristath Jul 15, 2022
20f45b0
Use the style-engine store
aristath Jul 15, 2022
76fa947
set_declarations was renamed to add_declarations
aristath Jul 19, 2022
4d6f59c
Remove selectors from a store once we generate CSS
aristath Jul 19, 2022
b760d78
Shazam
aristath Jul 19, 2022
7aa60b5
Added a param to the get_css() method
aristath Jul 19, 2022
b67963c
short and sweet
aristath Jul 19, 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
set_declarations was renamed to add_declarations
  • Loading branch information
@aristath
aristath committed Jul 19, 2022
commit 76fa947f48d9ee0b47c55ec3c734ae83db061288
26 changes: 13 additions & 13 deletions lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,16 +57,16 @@ 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 ) {
$store->add_rule( "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))" )->set_declarations(
$store->add_rule( "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))" )->add_declarations(
array(
'max-width' => $all_max_width_value,
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
)
);

$store->add_rule( "$selector > .alignwide" )->set_declarations( array( 'max-width' => $wide_max_width_value ) );
$store->add_rule( "$selector .alignfull" )->set_declarations( array( 'max-width' => 'none' ) );
$store->add_rule( "$selector > .alignwide" )->add_declarations( array( 'max-width' => $wide_max_width_value ) );
$store->add_rule( "$selector .alignfull" )->add_declarations( array( 'max-width' => 'none' ) );

if ( isset( $block_spacing ) ) {
$block_spacing_values = gutenberg_style_engine_get_block_supports_styles(
Expand All @@ -79,11 +79,11 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
// 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'];
$store->add_rule( "$selector > .alignfull" )->set_declarations( array( 'margin-right' => "calc($padding_right * -1)" ) );
$store->add_rule( "$selector > .alignfull" )->add_declarations( array( 'margin-right' => "calc($padding_right * -1)" ) );
}
if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
$padding_left = $block_spacing_values['declarations']['padding-left'];
$store->add_rule( "$selector > .alignfull" )->set_declarations( array( 'margin-left' => "calc($padding_left * -1)" ) );
$store->add_rule( "$selector > .alignfull" )->add_declarations( array( 'margin-left' => "calc($padding_left * -1)" ) );
}
}
}
Expand All @@ -93,13 +93,13 @@ 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 ) {
$store->add_rule( "$selector > *" )->set_declarations(
$store->add_rule( "$selector > *" )->add_declarations(
array(
'margin-block-start' => '0',
'margin-block-end' => '0',
)
);
$store->add_rule( "$selector > * + *" )->set_declarations(
$store->add_rule( "$selector > * + *" )->add_declarations(
array(
'margin-block-start' => $gap_value,
'margin-block-end' => '0',
Expand Down Expand Up @@ -127,7 +127,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
}

if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) {
$store->add_rule( $selector )->set_declarations( array( 'flex-wrap' => 'nowrap' ) );
$store->add_rule( $selector )->add_declarations( array( 'flex-wrap' => 'nowrap' ) );
}

if ( $has_block_gap_support ) {
Expand All @@ -137,7 +137,7 @@ 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 ) {
$store->add_rule( $selector )->set_declarations( array( 'gap' => $gap_value ) );
$store->add_rule( $selector )->add_declarations( array( 'gap' => $gap_value ) );
}
}

Expand All @@ -148,21 +148,21 @@ 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 ) ) {
$store->add_rule( $selector )->set_declarations( array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ) );
$store->add_rule( $selector )->add_declarations( array( 'justify-content' => $justify_content_options[ $layout['justifyContent'] ] ) );
}

if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
$store->add_rule( $selector )->set_declarations( array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ) );
$store->add_rule( $selector )->add_declarations( array( 'align-items' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ) );
}
} else {
$store->add_rule( $selector )->set_declarations(
$store->add_rule( $selector )->add_declarations(
array(
'flex-direction' => 'column',
'align-items' => 'flex-start',
)
);
if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
$store->add_rule( $selector )->set_declarations( array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ) );
$store->add_rule( $selector )->add_declarations( array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ) );
}
}
}
Expand Down