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

Post Title Block: Add style attributes #24246

Merged
merged 2 commits into from
Jul 28, 2020

Conversation

Copons
Copy link
Contributor

@Copons Copons commented Jul 28, 2020

Fixes #19491
(last PR needed)

Description

  • Add support for text and background colors, line height, font size to the Post Title block.
  • Fix an issue causing the HeadingLevelDropdown to move to the top of the page when changing the heading level.

More on the HeadingLevelDropdown issue

To reproduce, try changing the heading level of a Post Title block from its toolbar.
You'll notice that the block toolbar will disappear, while the heading dropdown remains visible but moved to the top of the screen; since the block is still technically selected, to make the toolbar show up again, you'll need to deselect and reselect it.

I'm not 100% sure about it, but I think it's caused by the re-render upon changing the light block wrapper tag.
I've simply tried copying the approach from another block, and it fixed the issue straight away.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@Copons Copons added [Type] Bug An existing feature does not function as intended [Feature] Full Site Editing [Block] Post Title Affects the Post Title Block labels Jul 28, 2020
@Copons Copons self-assigned this Jul 28, 2020
@github-actions
Copy link

Size Change: +14 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-library/index.js 133 kB +14 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.93 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.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/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.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 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.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.js 17 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.js 9.38 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.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.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.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 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.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.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.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

This works well for me!

That is a very odd issue with the toolbar on the level setting change. I thought I had an idea but tested a bit and proved myself wrong 🤣 ... 🤷‍♀️ . It works well with the way we are now defining the BlockWrapper though! 🎉

@Copons Copons merged commit a260cda into master Jul 28, 2020
@Copons Copons deleted the update/post-title-style-attributes branch July 28, 2020 22:13
@github-actions github-actions bot added this to the Gutenberg 8.7 milestone Jul 28, 2020
@strarsis
Copy link
Contributor

So this feature is planned to be released with a near future Gutenberg release?
(Same/related? #23788)

@noahtallen
Copy link
Member

@strarsis Hey! So, these blocks are part of the full site editing project. With a Gutenberg plugin, you can currently go into the "experiments" settings (under Gutenberg in the wp-admin sidebar). There, you can enable the full site editing (FSE) experiment. With that enabled, you can use these blocks, and also try out the early stages of the site editor. These blocks exist in the current Gutenberg plugin with the FSE experiment enabled.

These will remain experimental blocks for the near future, though, since everything related to full site editing is under active development. (And things can change a lot.) You should not yet rely on them for production use cases

@noahtallen noahtallen mentioned this pull request Jul 28, 2020
6 tasks
@strarsis
Copy link
Contributor

strarsis commented Jul 28, 2020

@noahtallen: Ah, please also notice that posts can have their own headings, too. And for posts having formattable headings (like a subheading) would be also great.

@noahtallen
Copy link
Member

This issue is a helpful overview of FSE blocks: #22724

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Title Affects the Post Title Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add styling attributes to Site Title, Site Description, and Post Title Blocks
4 participants