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.

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

Pattern update: Simple header with dark background #649

Closed
tjcafferkey opened this issue Mar 27, 2024 · 1 comment
Closed

Pattern update: Simple header with dark background #649

tjcafferkey opened this issue Mar 27, 2024 · 1 comment
Labels
[Component] Patterns Issues in the patterns themselves.

Comments

@tjcafferkey
Copy link

tjcafferkey commented Mar 27, 2024

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 -->
@ryelle ryelle added the [Component] Patterns Issues in the patterns themselves. label Mar 27, 2024
@ryelle
Copy link
Contributor

ryelle commented Apr 9, 2024

@tjcafferkey I've just updated the pattern on w.org - sorry for the delay!

@ryelle ryelle closed this as completed Apr 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Patterns Issues in the patterns themselves.
Projects
None yet
Development

No branches or pull requests

2 participants