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

Add wide- and full-width support to headings #25655

Closed
melchoyce opened this issue Sep 25, 2020 · 3 comments · Fixed by #25917
Closed

Add wide- and full-width support to headings #25655

melchoyce opened this issue Sep 25, 2020 · 3 comments · Fixed by #25917
Assignees
Labels
[Block] Heading Affects the Headings Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Status] In Progress Tracking issues with work in progress

Comments

@melchoyce
Copy link
Contributor

Is your feature request related to a problem? Please describe.
Using wide-width or full-width container blocks like columns, groups, and covers, you can create some great text layouts. However, there's no way to align headings, for example, to the left-most edge of the container width, without putting it inside a container of it's own (like a columns block). This creates both UI and markup bloat, when all I want to do is adjust the width of a heading, like so:

image

Describe the solution you'd like
Add wide- and full-width support to heading blocks.

Note: this issue came up in relation to WordPress/twentytwentyone#37.

@melchoyce melchoyce added [Block] Heading Affects the Headings Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Sep 25, 2020
@shaunandrews
Copy link
Contributor

shaunandrews commented Sep 28, 2020

I'd expect to be able to use a Group block that contains the Heading and Columns block — and set the Group block to wide width. Here's some psuedo-code for how that'd work:

<!-- wp:group {"align":"full"} -->
    <!-- wp:heading -->

    <!-- wp:columns -->
        <!-- wp:column -->
            <!-- wp:heading {"level":3} -->
            <!-- wp:paragraph -->

        <!-- wp:column -->
            <!-- wp:heading {"level":3} -->
            <!-- wp:paragraph -->

        <!-- wp:column -->
            <!-- wp:heading {"level":3} -->
            <!-- wp:paragraph -->

This, however, doesn't work either. It seems like this could be a better problem to solve; Rather than adding width controls to every block, I expect that child blocks should observe the width of their parent block.

@melchoyce
Copy link
Contributor Author

That gets problematic if you want, for example, to have some regular-width text inside a full-width background container, like a cover or group block 😕

@shaunandrews
Copy link
Contributor

In this imaginary land in my mind, I think you could still do that with a nested group:

<!-- wp:group {"align":"full","backgroundColor":"secondary"} -->
    <!-- wp:paragraph -->

    <!-- wp:group {"align":"default"} -->
        <!-- wp:paragraph -->

The first Group sets it's width to full, and the first Paragraph block observes this and also displays full.

The second, nested Group sets it's width to default (which is imaginary and doesn't exist) and the second, nested Paragraph block observes this and also displays normal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Heading Affects the Headings Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants