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 elements support to the typography panel in global styles #36718

Merged
merged 6 commits into from
Nov 24, 2021

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Nov 22, 2021

closes #36546

This PR adds an element selector to the typography panel to match the proposed global styles design.
The panel is only enabled in the root of the global styles for the moment. (We don't have a clear way to say which blocks supports which element)

Notes

If we want to add headings there, I think we'd need a row per heading level if I'm not wrong. right @jorgefilipecosta @oandregal ?

@youknowriad youknowriad added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Nov 22, 2021
@youknowriad youknowriad self-assigned this Nov 22, 2021
@github-actions
Copy link

github-actions bot commented Nov 22, 2021

Size Change: +1.33 kB (0%)

Total Size: 1.1 MB

Filename Size Change
build/block-editor/index.min.js 139 kB -237 B (0%)
build/block-editor/style-rtl.css 14.4 kB +16 B (0%)
build/block-editor/style.css 14.4 kB +17 B (0%)
build/block-library/blocks/cover/style-rtl.css 1.22 kB +29 B (+2%)
build/block-library/blocks/cover/style.css 1.22 kB +29 B (+2%)
build/block-library/blocks/navigation/style-rtl.css 1.66 kB +18 B (+1%)
build/block-library/blocks/navigation/style.css 1.65 kB +19 B (+1%)
build/block-library/blocks/site-logo/editor-rtl.css 772 B +2 B (0%)
build/block-library/blocks/site-logo/editor.css 772 B +2 B (0%)
build/block-library/editor-rtl.css 9.85 kB +1 B (0%)
build/block-library/editor.css 9.86 kB +1 B (0%)
build/block-library/index.min.js 162 kB -1 B (0%)
build/block-library/style-rtl.css 10.5 kB +41 B (0%)
build/block-library/style.css 10.5 kB +41 B (0%)
build/components/index.min.js 214 kB +151 B (0%)
build/edit-navigation/index.min.js 16 kB +1 B (0%)
build/edit-post/index.min.js 29.6 kB -11 B (0%)
build/edit-site/index.min.js 31.9 kB +1.11 kB (+4%)
build/edit-site/style-rtl.css 6.35 kB +53 B (+1%)
build/edit-site/style.css 6.34 kB +53 B (+1%)
build/edit-widgets/index.min.js 16.5 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 960 B
build/admin-manifest/index.min.js 1.1 kB
build/annotations/index.min.js 2.75 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.28 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 134 B
build/block-library/blocks/code/theme.css 134 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 503 B
build/block-library/blocks/columns/style.css 502 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 977 B
build/block-library/blocks/gallery/editor.css 982 B
build/block-library/blocks/gallery/style-rtl.css 1.62 kB
build/block-library/blocks/gallery/style.css 1.62 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 507 B
build/block-library/blocks/image/style.css 511 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.89 kB
build/block-library/blocks/navigation/editor.css 1.89 kB
build/block-library/blocks/navigation/view.min.js 2.74 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 172 B
build/block-library/blocks/page-list/style.css 172 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/style-rtl.css 444 B
build/block-library/blocks/post-comments-form/style.css 444 B
build/block-library/blocks/post-comments/style-rtl.css 492 B
build/block-library/blocks/post-comments/style.css 493 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 771 B
build/block-library/blocks/post-featured-image/editor.css 771 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 391 B
build/block-library/blocks/post-template/style.css 392 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 378 B
build/block-library/blocks/pullquote/style.css 378 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 262 B
build/block-library/blocks/query-pagination/editor.css 255 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 670 B
build/block-library/blocks/social-links/editor.css 669 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 569 B
build/block-library/blocks/video/editor.css 570 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 815 B
build/block-library/common.css 812 B
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/theme-rtl.css 672 B
build/block-library/theme.css 677 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46.3 kB
build/components/style-rtl.css 15.3 kB
build/components/style.css 15.3 kB
build/compose/index.min.js 10.9 kB
build/core-data/index.min.js 13.2 kB
build/customize-widgets/index.min.js 11.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 631 B
build/data/index.min.js 7.47 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 485 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.5 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/style-rtl.css 7.1 kB
build/edit-post/style.css 7.09 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 37.8 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.29 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.57 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.63 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.71 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.8 kB
build/keycodes/index.min.js 1.39 kB
build/list-reusable-blocks/index.min.js 1.86 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 925 B
build/nux/index.min.js 2.08 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.84 kB
build/primitives/index.min.js 924 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.65 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11 kB
build/server-side-render/index.min.js 1.57 kB
build/shortcode/index.min.js 1.49 kB
build/token-list/index.min.js 639 B
build/url/index.min.js 1.9 kB
build/viewport/index.min.js 1.05 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.15 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Nice one. Before:
before

After looks excellent, except for the font size being inherited in the tiny little preview:

after

That'd be my only niggle.

CC: @ciampo for the Subtitle subheading used 👌

@youknowriad youknowriad added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 22, 2021
@ciampo
Copy link
Contributor

ciampo commented Nov 22, 2021

CC: @ciampo for the Subtitle subheading used 👌

Thanks for the ping! The Subtitle component is a level 2 Heading with some additional custom CSS applied. I've added this example to the list in #35464

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Thanks for the PR Riad!

I'd echo Joen about the preview text. After reading the issue I'd expect a preview card like this from this comment:

132199312-a3610d4e-3b27-48b2-9e45-843090c9f830

Otherwise this looks good.

packages/block-editor/src/hooks/typography.js Show resolved Hide resolved
title: __( 'Text' ),
},
link: {
description: __( 'Manage the fonts and typography used on the links.' ),
Copy link
Contributor

Choose a reason for hiding this comment

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

I guess these descriptions should be more consistent and change only the part on the site|links, no?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm happy to use any proposed descriptions here :)

Copy link
Contributor

Choose a reason for hiding this comment

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

So I guess we should remove the export here?

@youknowriad
Copy link
Contributor Author

@ntsekouras this PR didn't update the design of the typography panel itself, just the elements part.

@ntsekouras
Copy link
Contributor

@ntsekouras this PR didn't update the design of the typography panel itself, just the elements part.

To clarify the only part I was referring to, was this:
Screenshot 2021-11-22 at 7 51 04 PM

This is not a part of this PR?

@oandregal
Copy link
Member

If we want to add headings there, I think we'd need a row per heading level

Yeah, h1-h6 are different elements, so if we want to expose them all in the UI for the user to change we need to do it individually.

@youknowriad
Copy link
Contributor Author

This is not a part of this PR?

No, it's not but I can add it, it shouldn't be that hard.

@@ -54,8 +54,10 @@ function useHasLetterSpacingControl( name ) {
);
}

export default function TypographyPanel( { name } ) {
export default function TypographyPanel( { name, element } ) {
Copy link
Member

Choose a reason for hiding this comment

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

Hey, I'd like us to revisit this conversation #35264 (comment)

What are your thoughts about passing the underlying functions useSetting, useStyle, and getSupportedGlobalStylesPanels the parameters path and context? The context would contain any extra metadata we need (source, block name, element, etc). I've recently introduced this change for the server-side API to be future-proof in regards to addressing different templates down the road #36610

Not a blocker for this PR, although I'm now more convinced we should do it for 5.9 than I was a few months ago when we first discussed it.

Copy link
Contributor Author

@youknowriad youknowriad Nov 22, 2021

Choose a reason for hiding this comment

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

yep, I'm fine with that change but this is an internal API for the moment, so there's no real urgency yet.

@critterverse
Copy link
Contributor

Nice! Super small note that the original designs indicate underlined text in the inline link preview. Is that something we could add here?

type-elements

@youknowriad
Copy link
Contributor Author

Nice! Super small note that the original designs indicate underlined text in the inline link preview. Is that something we could add here?

I feel like this should be a theme's decision, do we have a block support already to underline things? Maybe we should show it in the typography panel to allow users to enable/disable underline for texts.

@mtias
Copy link
Member

mtias commented Nov 22, 2021

do we have a block support already to underline things?

There should be a text-decoration tool but it was not enabled as a cosmetic one for non-link items.

@carolinan
Copy link
Contributor

Links are underlined by browser default, shouldn't they be underlined until the theme or user removes them,
as opposed to being underlined only when the theme sets an underline style.

@youknowriad
Copy link
Contributor Author

I've added the preview card and also forced links to be "underlined" for now until we add a text decoration control there.

@youknowriad
Copy link
Contributor Author

What's missing here, can we get this iteration in?

@jasmussen
Copy link
Contributor

To me this looks good to land as an iteration, except for one thing. We still have the font size inherited in this tiny little thumbnail:

Screenshot 2021-11-24 at 11 12 09

I think we need to just enforce a font size, say 13 or 14px there. We can still inherit the font and style.

@youknowriad
Copy link
Contributor Author

Works for me, I'll update it.

@mtias
Copy link
Member

mtias commented Nov 24, 2021

Yes, the size is meant to be hard-coded in the small preview.

@youknowriad
Copy link
Contributor Author

Updated and used 14px there.

@mtias
Copy link
Member

mtias commented Nov 24, 2021

Can we bring color as well if it exists for that element's preview?

@youknowriad
Copy link
Contributor Author

@mtias sure 👍

@youknowriad
Copy link
Contributor Author

Colors added (both background and text)

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

LGTM - thanks Riad!

@youknowriad youknowriad merged commit 8d258e5 into trunk Nov 24, 2021
@youknowriad youknowriad deleted the add/elements-typography branch November 24, 2021 13:11
@github-actions github-actions bot added this to the Gutenberg 12.1 milestone Nov 24, 2021
@mtias
Copy link
Member

mtias commented Nov 24, 2021

Thanks! :)

},
link: {
description: __( 'Manage the fonts and typography used on the links.' ),
title: __( 'Link' ),
Copy link
Member

Choose a reason for hiding this comment

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

This should probably be plural

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@briceduclos
Copy link

Will 5.9 also include a way to change the Headings as shown by @critterverse?
I think that changing the heading font properties is more common and useful than adjusting the link fonts.

type-elements

@youknowriad
Copy link
Contributor Author

@briceduclos not at the moment. FSE don't allow to change all headings at the same time, we can potentially have an entry per heading level, I'm waiting for more design input there.

@mtias
Copy link
Member

mtias commented Nov 25, 2021

We need to first establish what "headings" mean since it can span multiple blocks (heading, post title, archive title, comment title, etc). For that we need to first focus on the block API aspects of designating things as headings (which also includes table of contents, outline, etc). Once we have a plan there we can incorporate it as an element. Link and Text are already established and working.

@noisysocks noisysocks removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 29, 2021
@bradhogan
Copy link

Agree that changing headings from body copy is pretty important. Any updates on this feature being included?

@poof86
Copy link

poof86 commented Aug 4, 2023

I see a + sign here to add more elements for custom styling, though i'm missing this in the editor atm. Will this be added? I think it would be a nice thing to have

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Global Styles panel: Add elements support to “Typography” section