Design Tools: Add a Position block support (including sticky), decoupled from layout #46142
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| <?php | ||
| /** | ||
| * Position block support flag. | ||
| * | ||
| * @package gutenberg | ||
| */ | ||
|
|
||
| /** | ||
| * Registers the style block attribute for block types that support it. | ||
| * | ||
| * @param WP_Block_Type $block_type Block Type. | ||
| */ | ||
| function gutenberg_register_position_support( $block_type ) { | ||
| $has_position_support = block_has_support( $block_type, array( 'position' ), false ); | ||
|
|
||
| // Set up attributes and styles within that if needed. | ||
| if ( ! $block_type->attributes ) { | ||
| $block_type->attributes = array(); | ||
| } | ||
|
|
||
| if ( $has_position_support && ! array_key_exists( 'style', $block_type->attributes ) ) { | ||
| $block_type->attributes['style'] = array( | ||
| 'type' => 'object', | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Renders position styles to the block wrapper. | ||
| * | ||
| * @param string $block_content Rendered block content. | ||
| * @param array $block Block object. | ||
| * @return string Filtered block content. | ||
| */ | ||
| function gutenberg_render_position_support( $block_content, $block ) { | ||
| $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); | ||
| $has_position_support = block_has_support( $block_type, array( 'position' ), false ); | ||
|
|
||
| if ( | ||
| ! $has_position_support || | ||
| empty( $block['attrs']['style']['position'] ) | ||
| ) { | ||
| return $block_content; | ||
| } | ||
|
|
||
| $style_attribute = _wp_array_get( $block, array( 'attrs', 'style' ), null ); | ||
| $class_name = wp_unique_id( 'wp-container-' ); | ||
| $selector = ".$class_name"; | ||
| $position_styles = array(); | ||
| $position_type = _wp_array_get( $style_attribute, array( 'position', 'type' ), '' ); | ||
|
|
||
| if ( | ||
| in_array( $position_type, array( 'fixed', 'sticky' ), true ) | ||
| ) { | ||
| $sides = array( 'top', 'right', 'bottom', 'left' ); | ||
|
|
||
| foreach ( $sides as $side ) { | ||
| $side_value = _wp_array_get( $style_attribute, array( 'position', $side ) ); | ||
| if ( null !== $side_value ) { | ||
| /* | ||
| * For fixed or sticky top positions, | ||
| * ensure the value includes an offset for the logged in admin bar. | ||
| */ | ||
| if ( | ||
| 'top' === $side && | ||
| ( 'fixed' === $position_type || 'sticky' === $position_type ) | ||
| ) { | ||
| // Ensure 0 values can be used in `calc()` calculations. | ||
| if ( '0' === $side_value || 0 === $side_value ) { | ||
| $side_value = '0px'; | ||
| } | ||
|
|
||
| // Ensure current side value also factors in the height of the logged in admin bar. | ||
| $side_value = "calc($side_value + var(--wp-admin--admin-bar--height, 0px))"; | ||
| } | ||
|
|
||
| $position_styles[] = | ||
| array( | ||
| 'selector' => $selector, | ||
| 'declarations' => array( | ||
| $side => $side_value, | ||
| ), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| $position_styles[] = | ||
| array( | ||
| 'selector' => $selector, | ||
| 'declarations' => array( | ||
| 'position' => $position_type, | ||
| 'z-index' => '10', // TODO: This hard-coded value should live somewhere else. | ||
|
There was a problem hiding this comment. Could we associate this with a static classname so it could be attached to the existing z-index scale? There was a problem hiding this comment. Oh, I like the idea of a classname approach. One thing to note: because the z-index value is output to the site frontend, it needs to exist separately from the existing z-index scale, which is only present in the editor. But I do like the idea of presets for z-index values, a bit like we have for font sizes. There was a problem hiding this comment. Yeah, I think it's fine to leave the z-index refinements for a follow-up 👍 |
||
| ), | ||
| ); | ||
| } | ||
|
|
||
| if ( ! empty( $position_styles ) ) { | ||
| /* | ||
| * Add to the style engine store to enqueue and render position styles. | ||
| */ | ||
| gutenberg_style_engine_get_stylesheet_from_css_rules( | ||
| $position_styles, | ||
| array( | ||
| 'context' => 'block-supports', | ||
| 'prettify' => false, | ||
| ) | ||
| ); | ||
|
|
||
| // Inject class name to block container markup. | ||
| $content = new WP_HTML_Tag_Processor( $block_content ); | ||
| $content->next_tag(); | ||
| $content->add_class( $class_name ); | ||
| return (string) $content; | ||
| } | ||
|
|
||
| return $block_content; | ||
| } | ||
|
|
||
| // Register the block support. (overrides core one). | ||
| WP_Block_Supports::get_instance()->register( | ||
| 'position', | ||
| array( | ||
| 'register_attribute' => 'gutenberg_register_position_support', | ||
| ) | ||
| ); | ||
|
|
||
| if ( function_exists( 'wp_render_position_support' ) ) { | ||
| remove_filter( 'render_block', 'wp_render_position_support' ); | ||
| } | ||
| add_filter( 'render_block', 'gutenberg_render_position_support', 10, 2 ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <?php | ||
| /** | ||
| * Temporary compatibility shims for block APIs present in Gutenberg. | ||
| * | ||
| * @package gutenberg | ||
| */ | ||
|
|
||
| /** | ||
| * Update allowed inline style attributes list. | ||
| * | ||
| * Note: This should be removed when the minimum required WP version is >= 6.2. | ||
| * | ||
| * @param string[] $attrs Array of allowed CSS attributes. | ||
| * @return string[] CSS attributes. | ||
| */ | ||
| function gutenberg_safe_style_attrs_6_2( $attrs ) { | ||
| $attrs[] = 'position'; | ||
| $attrs[] = 'top'; | ||
| $attrs[] = 'right'; | ||
| $attrs[] = 'bottom'; | ||
| $attrs[] = 'left'; | ||
| $attrs[] = 'z-index'; | ||
|
|
||
| return $attrs; | ||
| } | ||
| add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_2' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we anticipate having to target children of positioned blocks with CSS, or are there others reason to use the layout support logic here as opposed to the mix of preset classnames and inline styles used for other block supports?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, good point! The approach I went with here predates the
WP_HTML_Tag_Processor, without which it would have been tricky to append the style rules, but you're right, each of the generated rules should be able to happily exist as an inline value.It's definitely worth a try, and would be a neater approach if it works cleanly 👍