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

Heading block: add wide and full width options #25917

Merged
merged 1 commit into from Oct 8, 2020

Conversation

oandregal
Copy link
Member

Fixes #25655

@oandregal oandregal changed the title Add wide and full width to headings Heading block: add wide and full width options Oct 7, 2020
@oandregal oandregal self-assigned this Oct 7, 2020
@oandregal oandregal added the [Block] Heading Affects the Headings Block label Oct 7, 2020
@oandregal oandregal requested a review from a team October 7, 2020 18:13
@oandregal oandregal added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Oct 7, 2020
@github-actions
Copy link

github-actions bot commented Oct 7, 2020

Size Change: +9 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-library/index.js 144 kB +9 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.54 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 668 B 0 B
build/block-directory/index.js 8.55 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 129 kB 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/editor-rtl.css 8.65 kB 0 B
build/block-library/editor.css 8.65 kB 0 B
build/block-library/style-rtl.css 7.66 kB 0 B
build/block-library/style.css 7.65 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.5 kB 0 B
build/components/index.js 169 kB 0 B
build/components/style-rtl.css 15.4 kB 0 B
build/components/style.css 15.4 kB 0 B
build/compose/index.js 9.43 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/data-controls/index.js 685 B 0 B
build/data/index.js 8.61 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.6 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.29 kB 0 B
build/edit-post/style.css 6.27 kB 0 B
build/edit-site/index.js 20.9 kB 0 B
build/edit-site/style-rtl.css 3.73 kB 0 B
build/edit-site/style.css 3.73 kB 0 B
build/edit-widgets/index.js 21.3 kB 0 B
build/edit-widgets/style-rtl.css 3 kB 0 B
build/edit-widgets/style.css 3 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.4 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/index.js 7.49 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@kjellr
Copy link
Contributor

kjellr commented Oct 7, 2020

When testing this PR, I'm not seeing these options available in the toolbar:

Screen Shot 2020-10-07 at 2 24 58 PM

@oandregal
Copy link
Member Author

🤔 it works fine for me

201008-0844-heading-block-alignment

@oandregal
Copy link
Member Author

Rebased and pushed to fix the e2e tests (a fix was recently merged for them).

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

Simple and useful update.

@jasmussen
Copy link
Contributor

A couple of quick thoughts.

First off, this is a good update, as it enables some layouts that are currently arbitrarily limited. Especially if when a fullwide group block creates a centered column inside by default (just like post content), allowing these widths enables designs that were otherwise off-limits.

In fact it begs the question if not all (or the majority) of blocks should enable these width buttons. For starters, perhaps, #25080 and #25147 would be good to address.

However it also brings up the question of where the control should live. For the heading block, it barely fits on small screens:

Screenshot 2020-10-08 at 09 54 21

The separator block will be fine.

But if we are to bring this to all blocks (in future explorations), we can't actually put it in the toolbar for all of them. For a list block, it just won't fit. We could put in the sidebar as we have in the past for some blocks.

So as we add these controls to more blocks, it would be good to think about a basic heuristic for when it goes in the block toolbar, vs. a sidebar. One basic version would be: if it's a primary action, put it in the toolbar. The question then is, whether it's a primary action for the heading block — I'm not sure.

That's not to hold up this PR — just that, maybe we want to move it to the sidebar in the future, as part of expanding these controls to more blocks.

@draganescu draganescu merged commit 4271037 into master Oct 8, 2020
@draganescu draganescu deleted the try/heading-align-support branch October 8, 2020 09:44
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 8, 2020
@briceduclos
Copy link

@nosolosw Great! A useful addition would be to add these options to the paragraph block. As the paragraph supports large font sizes, it can be useful for some layouts. For example, here's a screenshot of a page designed by @melchoyce from the Twenty Twenty One Figma. For the moment, it's not possible to achieve this layout.

wide

@dianeco
Copy link

dianeco commented Oct 18, 2020

@nosolosw The options aren’t in the same order as for all the other blocks: Wide width should be before Full width.

"align": [ "full", "wide" ], should be replaced by "align": [ "wide", "full" ],

@oandregal
Copy link
Member Author

Thanks for reporting, Diane! I wasn't aware that set the order for the controls. Fix at #26260

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add wide- and full-width support to headings
6 participants