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

Full width alignments and root padding combined. #41377

Closed
wants to merge 12 commits into from
Closed

Full width alignments and root padding combined. #41377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8928ace
Cherry pick relevant commits from #36214
Mar 30, 2022
106a06a
Fix attribute location
Mar 30, 2022
d4f03e4
Revert cover style change
tellthemachines Apr 8, 2022
26c2fc2
Only add negative margins is padding set to prevent invalid property …
Apr 10, 2022
3a71567
Fix attributes path
tellthemachines Apr 11, 2022
bf5a9cd
Fix double declaration of left menu
Apr 11, 2022
15bfed0
Fix front end styles
tellthemachines Apr 11, 2022
946eb50
Try fullwidth when block padding is set
tellthemachines Apr 11, 2022
834f6b7
Check layout is actually used
tellthemachines Apr 11, 2022
aebead1
Try using variable for root padding value
tellthemachines Mar 31, 2022
75bf1d7
Allow full width elements in root
scruffian May 26, 2022
c0ce7a2
fix the rebase
scruffian Jul 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
47 changes: 39 additions & 8 deletions lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,15 @@ function gutenberg_register_layout_support( $block_type ) {
*
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked the existence of default block layout.
* @param array|null $padding Padding applied to the current block.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
* @param string $gap_value The block gap value to apply.
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
* @param string $fallback_gap_value The block gap value to apply.
*
* @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' ) {
function gutenberg_get_layout_style( $selector, $layout, $padding, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

$style = '';
Expand All @@ -54,14 +55,37 @@ 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)) {";
// Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level
$style = ".wp-container-default-layout $selector {";
// Using important here to override the inline padding that could be potentially
// applied using the custom padding control before the layout inheritance is applied.
$style .= sprintf(
'padding: %s %s %s %s !important',
isset( $padding['top'] ) ? $padding['top'] : 0,
isset( $padding['right'] ) ? $padding['right'] : 0,
isset( $padding['bottom'] ) ? $padding['bottom'] : 0,
isset( $padding['left'] ) ? $padding['left'] : 0
);
$style .= '}';
$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; }";
// Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level// Add a .wp-container-default-layout so this only applies to lower level default layouts, not the top level.
$style .= ".wp-container-default-layout $selector > .alignfull {";
$style .= 'max-width: none;';
$style .= isset( $padding['left'] ) ? sprintf( 'margin-left: calc( -1 * %s ) !important;', $padding['left'] ) : '';
$style .= isset( $padding['right'] ) ? sprintf( 'margin-right: calc( -1 * %s ) !important;', $padding['right'] ) : '';
$style .= '}';

// Add padding to full wide blocks that inherit default layout, so the content doesn't touch the edges.
$style .= "$selector > .alignfull {";
$style .= isset( $padding['left'] ) ? sprintf( 'padding-left: %s !important;', $padding['left'] ) : '';
$style .= isset( $padding['right'] ) ? sprintf( 'padding-right: %s !important;', $padding['right'] ) : '';
Copy link
Contributor

Choose a reason for hiding this comment

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

$padding['left'] and $padding['right'] are coming from core theme.json, so they'll never not be set. This has the side-effect of adding a --wp--style--block-gap-sized negative margin to any full-width child of a default layout block, whether a root padding is set by the user or not.

Also, do we really need to use !important here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

$padding['left'] and $padding['right'] are coming from core theme.json

Not always. They can be coming from the parent block's padding settings (I think!)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Also, do we really need to use !important here?

Probably not, this is just a PoC to see if the idea is even workable :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh wait I see what you mean, this should be passed default padding...

$style .= '}';
}

$style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
Expand Down Expand Up @@ -159,22 +183,28 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
if ( ! $support_layout ) {
return $block_content;
}

$class_name = wp_unique_id( 'wp-container-' );
$selector = '.' . $class_name;
$block_gap = gutenberg_get_global_settings( array( 'spacing', 'blockGap' ) );
$default_layout = gutenberg_get_global_settings( array( 'layout' ) );
$default_padding = gutenberg_get_global_styles( array( 'spacing', 'padding' ) );
$padding = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'padding' ), null );
$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
if ( ! $default_layout ) {
return $block_content;
}
$used_layout = $default_layout;
$class_name .= ' wp-container-default-layout';
$selector .= '.wp-container-default-layout';
$used_layout = $default_layout;
//TODO - can we allow padding from the block settings?
$padding = isset( $default_padding ) ? $default_padding : null;
}

$class_names = array();
$container_class = wp_unique_id( 'wp-container-' );
$class_names[] = $container_class;
$class_names[] = $class_name;

// The following section was added to reintroduce a small set of layout classnames that were
// removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
Expand All @@ -193,6 +223,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
}

$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );

// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
// because we only want to match against the value, not the CSS attribute.
Expand All @@ -209,7 +240,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
$should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = gutenberg_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
$style = gutenberg_get_layout_style( $selector, $used_layout, $padding, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
Expand Down
Loading