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

Adds 'Heading and paragraph' pattern #24143

Merged
merged 3 commits into from Jul 23, 2020

Conversation

enriquesanchez
Copy link
Contributor

Adds a new 'Heading and paragraph' pattern:

Screen Shot 2020-07-22 at 18 54 34

@enriquesanchez enriquesanchez added Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Jul 22, 2020
@enriquesanchez enriquesanchez self-assigned this Jul 22, 2020
@enriquesanchez enriquesanchez added this to In progress in Block Patterns via automation Jul 22, 2020
@kjellr
Copy link
Contributor

kjellr commented Jul 23, 2020

The extra spaces here in between the number and the title seem a little odd to me. Perhaps we can try just a line break instead?

Screen Shot 2020-07-23 at 8 18 04 AM

It would be even better visually if we added some space, but this is a little hard to achieve with the proper spacing right now. That first "2." line, would need a line spacing value of 1 in order to mirror the spacing to the paragraph below it. But in order to achieve that, we'd need to break the number into its own block (since we don't have per-character line height options at this point). Something like this:

Screen Shot 2020-07-23 at 8 20 49 AM

@enriquesanchez enriquesanchez force-pushed the Adds-heading-and-a-paragraph-pattern branch from 21c54de to d6c8977 Compare July 23, 2020 16:32
@github-actions
Copy link

github-actions bot commented Jul 23, 2020

Size Change: 0 B

Total Size: 1.15 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.min.js 1.14 kB 0 B
build/annotations/index.min.js 3.67 kB 0 B
build/api-fetch/index.min.js 3.43 kB 0 B
build/autop/index.min.js 2.82 kB 0 B
build/blob/index.min.js 620 B 0 B
build/block-directory/index.min.js 7.63 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.min.js 125 kB 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 7.63 kB 0 B
build/block-library/editor.css 7.63 kB 0 B
build/block-library/index.min.js 132 kB 0 B
build/block-library/style-rtl.css 7.83 kB 0 B
build/block-library/style.css 7.83 kB 0 B
build/block-library/theme-rtl.css 728 B 0 B
build/block-library/theme.css 729 B 0 B
build/block-serialization-default-parser/index.min.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.min.js 3.1 kB 0 B
build/blocks/index.min.js 48.3 kB 0 B
build/components/index.min.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.6 kB 0 B
build/compose/index.min.js 9.68 kB 0 B
build/core-data/index.min.js 11.5 kB 0 B
build/data-controls/index.min.js 1.29 kB 0 B
build/data/index.min.js 8.45 kB 0 B
build/date/index.min.js 5.38 kB 0 B
build/deprecated/index.min.js 772 B 0 B
build/dom-ready/index.min.js 568 B 0 B
build/dom/index.min.js 3.23 kB 0 B
build/edit-navigation/index.min.js 10.8 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.min.js 304 kB 0 B
build/edit-post/style-rtl.css 5.61 kB 0 B
build/edit-post/style.css 5.61 kB 0 B
build/edit-site/index.min.js 16.9 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.min.js 9.37 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.min.js 45.3 kB 0 B
build/editor/style-rtl.css 3.78 kB 0 B
build/editor/style.css 3.78 kB 0 B
build/element/index.min.js 4.65 kB 0 B
build/escape-html/index.min.js 733 B 0 B
build/format-library/index.min.js 7.72 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.min.js 2.13 kB 0 B
build/html-entities/index.min.js 621 B 0 B
build/i18n/index.min.js 3.56 kB 0 B
build/is-shallow-equal/index.min.js 711 B 0 B
build/keyboard-shortcuts/index.min.js 2.51 kB 0 B
build/keycodes/index.min.js 1.94 kB 0 B
build/list-reusable-blocks/index.min.js 3.12 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.min.js 5.33 kB 0 B
build/notices/index.min.js 1.79 kB 0 B
build/nux/index.min.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.min.js 2.56 kB 0 B
build/primitives/index.min.js 1.4 kB 0 B
build/priority-queue/index.min.js 789 B 0 B
build/redux-routine/index.min.js 2.85 kB 0 B
build/rich-text/index.min.js 13.9 kB 0 B
build/server-side-render/index.min.js 2.71 kB 0 B
build/shortcode/index.min.js 1.7 kB 0 B
build/token-list/index.min.js 1.27 kB 0 B
build/url/index.min.js 4.06 kB 0 B
build/viewport/index.min.js 1.85 kB 0 B
build/warning/index.min.js 1.14 kB 0 B
build/wordcount/index.min.js 1.17 kB 0 B

compressed-size-action

@enriquesanchez
Copy link
Contributor Author

Thanks @kjellr

I've updated it following your suggestion of adding a line break. Not sure why I didn't think of that! ;D

Making the chapter number it's own block introduces a lot of space on some themes, particularly at that big of a size. I found it's less noticeable if we also use a heading block for the chapter number, but having two heading blocks one after the other introduces some semantic issues. So decided to go with your first suggestion.

Screen Shot 2020-07-23 at 12 38 13

Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

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

LGTM!

Block Patterns automation moved this from In progress to Reviewer approved Jul 23, 2020
@enriquesanchez enriquesanchez merged commit 73f3947 into master Jul 23, 2020
Block Patterns automation moved this from Reviewer approved to Done Jul 23, 2020
@enriquesanchez enriquesanchez deleted the Adds-heading-and-a-paragraph-pattern branch July 23, 2020 19:00
@github-actions github-actions bot added this to the Gutenberg 8.7 milestone Jul 23, 2020
@youknowriad youknowriad removed the Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

3 participants