Pattern update: Simple header with dark background #649
Description
Update markup on pattern: https://wordpress.org/patterns/pattern/simple-header-with-dark-background/
Now that the Block Hooks API has been released as part of WordPress 6.4 3PDs may want to insert their own blocks into the header, specifically after the Navigation block. This currently causes problems because the Navigation block and it's siblings are treated as flex items due to its parent being a Row block.
The below change wraps the Navigation block within a Row block of its own. By default the behaviour of the header should remain the same and introduce no regressions but this now means plugins are able to use the Block Hooks API to automatically insert their own blocks using the Navigation as an anchor block without them being treated as flex items (e.g. Mini Cart or My Account blocks)
<!-- wp:group {"metadata":{"categories":["header","wireframe"],"patternName":"core/simple-header-with-dark-background","name":"Simple header with dark background"},"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"backgroundColor":"black","textColor":"white","className":"has-background-color","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background-color has-white-color has-black-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
<div class="wp-block-group alignwide">
<!-- wp:group {"layout":{"type":"flex"}} -->
<div class="wp-block-group">
<!-- wp:site-logo /-->
<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} /-->
</div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group">
<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
Activity