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

Update Line-Height Settings for opt-in (rather than opt-out) #23904

Merged
merged 1 commit into from
Jul 15, 2020

Conversation

ItsJonQ
Copy link

@ItsJonQ ItsJonQ commented Jul 13, 2020

This update adjusts the line-height theme support setting to be opt-in via add_theme_support( 'experimental-line-height' ); rather than enabled by default. This keeps it consistent with the other recently added style theme support settings like padding (spacing).

How has this been tested?

Tested locally in Gutenberg

  • Run npm run dev
  • Add a Paragraph or Heading block
  • Line-height controls should not be there
  • Add add_theme_support( 'experimental-line-height' ); to an applicable theme PHP file (e.g. functions.php)
  • Check a Paragraph or Heading block
  • Line-height controls should be visible

Types of changes

  • Adjusted an add_theme_support value from disable-custom-line-height to experimental-line-height

Checklist:

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

This update adjusts the line-height theme support setting to be opt-in via `add_theme_support( 'experimental-line-height' );` rather than enabled by default. This keeps it consistent with the other recently added style theme support settings like padding (spacing).
@ItsJonQ ItsJonQ added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Jul 13, 2020
@ItsJonQ ItsJonQ self-assigned this Jul 13, 2020
@github-actions
Copy link

Size Change: +3 B (0%)

Total Size: 1.14 MB

Filename Size Change
build/block-editor/index.js 115 kB +3 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.39 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.67 kB 0 B
build/block-directory/style-rtl.css 944 B 0 B
build/block-directory/style.css 945 B 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.6 kB 0 B
build/block-library/editor.css 7.59 kB 0 B
build/block-library/index.js 132 kB 0 B
build/block-library/style-rtl.css 7.77 kB 0 B
build/block-library/style.css 7.77 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 199 kB 0 B
build/components/style-rtl.css 15.9 kB 0 B
build/components/style.css 15.8 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.46 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 569 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.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.js 304 kB 0 B
build/edit-post/style-rtl.css 5.59 kB 0 B
build/edit-post/style.css 5.58 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.03 kB 0 B
build/edit-site/style.css 3.03 kB 0 B
build/edit-widgets/index.js 9.35 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.1 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.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 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 709 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.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.js 5.32 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.4 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.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Member

@ZebulanStanphill ZebulanStanphill left a comment

Choose a reason for hiding this comment

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

Can we get this backported to core for WP 5.5?

@@ -655,7 +655,7 @@ function gutenberg_extend_settings_block_patterns( $settings ) {
* @return array Filtered editor settings.
*/
function gutenberg_extend_settings_custom_line_height( $settings ) {
$settings['__experimentalDisableCustomLineHeight'] = get_theme_support( 'disable-custom-line-height' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Since it was publicly discussed that line-height is shipping in 5.5. I don't think we should be reverting to an experimental theme support flag.

While ideally we'd focus on theme.json for the future. We can use theme support flags for padding and line height for this release.

Copy link
Member

Choose a reason for hiding this comment

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

As pointed out by @afercia in this comment, it's probably a bad idea to be exposing line height controls separately from font size controls in the first place, so I think it definitely should be made experimental so our options for improving it in the future are more open.

Copy link
Contributor

Choose a reason for hiding this comment

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

that's great feedback and we should improve on that. I consider these enhancements though and I don't think it's a valid reason to revert to the experimental stage. It's been used by folks in the plugin for a long time now.

Copy link
Member

@ZebulanStanphill ZebulanStanphill Jul 14, 2020

Choose a reason for hiding this comment

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

So far, the only usage of the line height control I've seen has been very questionable usage. A lot of block patterns use custom line heights for headings and such, when this is almost never something you should do on an actual website. Your line height system ought to be consistent and set from the site-wide level. It's really weird to me that a lot of core block patterns use custom line heights (and font sizes), when these will almost always conflict with the user's theme. Core block patterns ought to adapt to any theme... otherwise they're only useful as tech demos.

Copy link
Member

Choose a reason for hiding this comment

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

Since we're powering a third of the web, we ought to stop promoting anti-patterns like one-off line heights and visual-hierarchy-breaking font-sizes for headings.

Copy link
Contributor

Choose a reason for hiding this comment

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

It is actually already used in different block patterns. Even before FSE and Global Styles, the design possibilities for block patterns were very limited because of the lack of these controls, And sometimes they'd lead to developers/designers using non-semantic blocks to achieve the desired results (using headings instead of paragraphs, paragraphs instead of quotes...). The more control we'd give to blocks, the better block patterns we'd be able to produce.

Copy link
Member

Choose a reason for hiding this comment

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

If the designers are using Paragraph blocks instead of Quotes, perhaps that's just because the Quote block needs to have the same styling controls as a Paragraph. (And also, the Quote block should probably use nested blocks anyway.)

Even back when some patterns were using Heading blocks when they should have been using Paragraph blocks, the Paragraph block already had font size options... even default font size presets provided by core! So I don't see how that's a good example.

Can you name any actual cases where a custom line height was required? I imagine it would have been a lot simpler if the core font size presets also changed the line height simultaneously, rather than providing a separate line height control.

Copy link
Contributor

Choose a reason for hiding this comment

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

Both the current large-header and large-header-paragraph block patterns shipping in Core have custom line height without considering the third-party patterns that exist in the wild.

Your arguments suggest to me that you're arguing against the feature entirely and not the fact of it being experimental. I hope I explained above why this feature is needed but if you're still not convinced, feel free to open an issue to discuss it more.

Copy link
Member

Choose a reason for hiding this comment

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

Hmm... you're right. I guess I am arguing against the feature entirely. I'd rather see line height be explicitly tied to font size global preset controls. I want the only place where a line height control is shown to be the place where you define the font size presets in the Global Styles UI. I see zero reason to provide one-off line height controls; I think that allowing the user to define global defaults and their own set of presets to choose from a drop-down later on is the way to go. Because of this, I think providing a line height control is very premature.

However, that is not directly related to this PR, and with that in mind, I'm okay with this merging with the line height control remaining "stable", since making it opt-in is still an improvement over master and so we ought to get this in sooner rather than later.

(If I have the time, I may make some more PRs in the future to remove custom line height usage from core block patterns to make them fit in better with themes.)

Copy link
Member

Choose a reason for hiding this comment

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

It's worth noting there are several issues already open related to this discussion including #23111, #23893, and #23895.

@ItsJonQ
Copy link
Author

ItsJonQ commented Jul 15, 2020

Thanks for the review + discussion all! I'll merge this up.

@ItsJonQ ItsJonQ merged commit 3e2b49b into master Jul 15, 2020
@ItsJonQ ItsJonQ deleted the update/line-height-control-opt-in-theme-support branch July 15, 2020 14:11
@github-actions github-actions bot added this to the Gutenberg 8.6 milestone Jul 15, 2020
@youknowriad
Copy link
Contributor

@ItsJonQ I still don't think this should be experimental as it's not as of today and it's highlighted on the 5.5 beta1 post https://wordpress.org/news/2020/07/wordpress-5-5-beta-1/ so this PR can't be backported as is.

Let's try to fix that on a follow-up PR.

@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 Jul 15, 2020
ellatrix pushed a commit that referenced this pull request Jul 20, 2020
This update adjusts the line-height theme support setting to be opt-in via `add_theme_support( 'experimental-line-height' );` rather than enabled by default. This keeps it consistent with the other recently added style theme support settings like padding (spacing).
@ellatrix ellatrix mentioned this pull request Jul 20, 2020
6 tasks
@youknowriad youknowriad 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 Jul 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[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.

3 participants