Post Title Block: Add style attributes

[Copons]

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.

[github-actions]

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}

[Addison-Stavlo]

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! 🎉

[strarsis]

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

[noahtallen]

@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

[strarsis]

@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]

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