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

Navigation: Force text decoration styles on nav item in editor #35859

Merged
merged 4 commits into from
Oct 25, 2021

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Oct 22, 2021

Related:

Description

This PR removes the inline-block style applied to the RichText field for navigation items in the editor. This allows text decoration styles to be inherited from the main navigation block when applied via block supports.

How has this been tested?

Manually.

To replicate the issue, follow the description of the issue outlined in #33744 (review)

To test this PR fixes that problem.

  1. Apply the changes from this PR branch
  2. Create a new post, add a navigation block including one page item
  3. Select that nav item, then click Edit from the block's toolbar
  4. Select the nav block again, toggle on text decoration from the Typography panel's menu
  5. Select a text-decoration and ensure it is visually applied to the nav item in the editor
  6. Save the post and confirm everything still displays as expected

Screenshots

Before

Screen.Recording.2021-10-22.at.2.57.00.pm.mp4

After

Screen.Recording.2021-10-22.at.2.55.30.pm.mp4

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • 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 (please manually search all *.native.js files for terms that need renaming or removal).

@aaronrobertshaw aaronrobertshaw added [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi CSS Styling Related to editor and front end styles, CSS-specific issues. [Block] Navigation Link Affects the Navigation Link Block labels Oct 22, 2021
@aaronrobertshaw aaronrobertshaw self-assigned this Oct 22, 2021
@github-actions
Copy link

github-actions bot commented Oct 22, 2021

Size Change: +1.12 kB (0%)

Total Size: 1.07 MB

Filename Size Change
build/block-editor/index.min.js 135 kB -336 B (0%)
build/block-editor/style-rtl.css 13.9 kB -1 B (0%)
build/block-editor/style.css 13.9 kB -2 B (0%)
build/block-library/blocks/navigation-link/editor-rtl.css 488 B -80 B (-14%) 👏
build/block-library/blocks/navigation-link/editor.css 489 B -81 B (-14%) 👏
build/block-library/blocks/navigation/editor-rtl.css 1.71 kB -8 B (0%)
build/block-library/blocks/navigation/editor.css 1.71 kB -6 B (0%)
build/block-library/blocks/navigation/style-rtl.css 1.7 kB +10 B (+1%)
build/block-library/blocks/navigation/style.css 1.69 kB +14 B (+1%)
build/block-library/blocks/post-comments-form/style-rtl.css 347 B +207 B (+148%) 🆘
build/block-library/blocks/post-comments-form/style.css 347 B +207 B (+148%) 🆘
build/block-library/blocks/post-comments/style-rtl.css 475 B +115 B (+32%) 🚨
build/block-library/blocks/post-comments/style.css 475 B +116 B (+32%) 🚨
build/block-library/editor-rtl.css 9.61 kB -46 B (0%)
build/block-library/editor.css 9.61 kB -46 B (0%)
build/block-library/style-rtl.css 10.5 kB +165 B (+2%)
build/block-library/style.css 10.5 kB +166 B (+2%)
build/dom/index.min.js 4.44 kB -15 B (0%)
build/edit-post/index.min.js 29.4 kB +51 B (0%)
build/edit-widgets/index.min.js 16.3 kB +592 B (+4%)
build/edit-widgets/style-rtl.css 4.17 kB +51 B (+1%)
build/edit-widgets/style.css 4.18 kB +50 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.2 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 549 B
build/block-library/blocks/button/style.css 549 B
build/block-library/blocks/buttons/editor-rtl.css 309 B
build/block-library/blocks/buttons/editor.css 309 B
build/block-library/blocks/buttons/style-rtl.css 317 B
build/block-library/blocks/buttons/style.css 317 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 131 B
build/block-library/blocks/code/theme.css 131 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 497 B
build/block-library/blocks/columns/style.css 496 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.17 kB
build/block-library/blocks/cover/style.css 1.17 kB
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.6 kB
build/block-library/blocks/gallery/style.css 1.59 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/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 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 502 B
build/block-library/blocks/image/style.css 505 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/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/style-rtl.css 195 B
build/block-library/blocks/navigation-submenu/style.css 195 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
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 198 B
build/block-library/blocks/page-list/style.css 198 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-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 396 B
build/block-library/blocks/post-featured-image/editor.css 397 B
build/block-library/blocks/post-featured-image/style-rtl.css 156 B
build/block-library/blocks/post-featured-image/style.css 156 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 60 B
build/block-library/blocks/post-title/style.css 60 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 250 B
build/block-library/blocks/separator/style.css 250 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/editor-rtl.css 770 B
build/block-library/blocks/site-logo/editor.css 770 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 824 B
build/block-library/blocks/social-links/editor.css 823 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 571 B
build/block-library/blocks/video/editor.css 572 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/index.min.js 149 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/theme-rtl.css 668 B
build/block-library/theme.css 673 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 kB
build/components/index.min.js 212 kB
build/components/style-rtl.css 15.3 kB
build/components/style.css 15.3 kB
build/compose/index.min.js 10.4 kB
build/core-data/index.min.js 12.4 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.1 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/edit-navigation/index.min.js 15.8 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.12 kB
build/edit-post/style.css 7.12 kB
build/edit-site/index.min.js 30.7 kB
build/edit-site/style-rtl.css 5.71 kB
build/edit-site/style.css 5.71 kB
build/editor/index.min.js 37.6 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.21 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 5.99 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.6 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.3 kB
build/list-reusable-blocks/index.min.js 1.85 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 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.19 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.7 kB
build/server-side-render/index.min.js 1.52 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.74 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.11 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

@andrewserong
Copy link
Contributor

Thanks for putting this together @aaronrobertshaw!

Within the editor, when a navigation item is edited a new div is introduced within the item's tag with a display: inline-block style. This style alters the flow for the element and breaks the text-decoration inheritance previously set up in style.scss.

From the comment around where the display: inline-block is set, I was wondering if it's possible for us to switch the editing to be inline? I did a bit of hacking around, and it looks like if I switch the rule at this line to be display: inline and pass tagName={ 'span' } to the RichText component in the Navigation Link block's Edit component, I think that appears to work, and might mean we could avoid having to add separate CSS rules for each text-decoration style? That said, I'm sure it's likely that doing that could introduce other issues, so it might be worth it to go with the styling rules you've introduced here, particularly given that we most likely won't wind up with a large proliferation of text-decoration styles to handle 😀

@aaronrobertshaw
Copy link
Contributor Author

I did a bit of hacking around, and it looks like if I switch the rule at this line to be display: inline and pass tagName={ 'span' } to the RichText component in the Navigation Link block's Edit component

That's a much cleaner approach. ✨

I'll switch to that. It works well for me and I couldn't find any regressions in terms of being able to edit or style each item. Thanks!

particularly given that we most likely won't wind up with a large proliferation of text-decoration styles to handle

If we were to revert to the original approach down the road, there was a decision made when the text-decoration block support was introduced, that it only support underline and line-through styles. So I wouldn't expect it to be any worse than the original version of this PR.

Thanks for your time reviewing this one!

Copy link
Contributor

@andrewserong andrewserong 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 switching that around @aaronrobertshaw! This is testing well for me (tested in FF, Chrome, Safari, and Edge on desktop). Just added a comment about the comment we should probably update with going with this approach. But other than that, LGTM!

packages/block-library/src/navigation/editor.scss Outdated Show resolved Hide resolved
Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
@@ -20,9 +20,9 @@
}
}

// This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor.
// This element is inline on the frontend but needs to be editable, therefore ensure that the RichText field is inline in the editor.
Copy link
Contributor

Choose a reason for hiding this comment

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

If it's inline on the frontend, and it works as inline in the editor also (I could swear it needed to be inline-block for some reason), then this entire rule can be removed from the editor style, no?

@jasmussen
Copy link
Contributor

I haven't had time to test this one deeply, and I don't mean to block this PR from landing. But there's a challenge described and discussed in #34275, which suggests to me that we might actually want to toggle off the text-decoration feature for navigation entirely, at least until it can be applied correctly.

To summarize the issue: text-decoration has a fairly unique behavior in that it gets inherited all the way down the cascade, and cannot be unset! If an ancestor has text-decoration: underline;, then even applying text-decoration: none; on a child will not work. There are "hacks" that involve applying floats to take the item out of the flow, which then breaks the inheritance, but I've tried and dismissed those.

As it is, this inheritance means that if you add a search block inside navigation, the input field of the search box will also inherit the underline 🙈

So the right fix to that is to apply the text-decoration property not on the navigation block itself, but target only menu items. (Perhaps a small fix is to apply a "has-text-decoration-underline" class instead of the inline style, and then scope it to menu items 🤔 ). Alternately, we should consider turning the feature off entirely.

@aaronrobertshaw
Copy link
Contributor Author

Thanks for the extra detail @jasmussen 👍

I'm actually in the process of reviewing #34064 which will opt-out of the text-decoration support for the navigation block.

I'm happy to abandon this PR and wait for that to land instead. This was a small follow-up to address an issue uncovered during the testing for #33744. I don't believe there is any hurry to merge this as an interim solution.

@jasmussen
Copy link
Contributor

I don't think this PR needs to necessarily be abandoned. In fact if that inline block rule can be removed (I don't recall why it was necessary), then that alone feels like a nice little cleanup.

@aaronrobertshaw
Copy link
Contributor Author

Ok, sounds like a plan. I'll give the removal of the inline style a test Monday and can proceed from there.

@aaronrobertshaw
Copy link
Contributor Author

After some testing, it looks like simply removing the inline-block style from the edited Navigation Link is a winner. Text decoration styles are correctly inherited. This PR is now even simpler. Thanks everyone.

@jasmussen
Copy link
Contributor

I appreciate the amount of red in this one, and since the PR only fixes a bug that ships in trunk, it seems fine to land this one.

However I still think we need to consider how we are going to solve #34275. If we are confident that we can keep the text-decoration control where it is, and target all navigation items inside instead of the navigation block itself — then we can probably live with this for a bit.

I.e. we want this:

<li style="text-decoration:underline;" class="wp-block-navigation-item wp-block-navigation-link">
	...
</li>

... or this:

<nav class="wp-block-navigation has-text-decoration-underline">
	...
</nav>

But not this, which is currently shipping:

<nav style="text-decoration:underline;" class="wp-block-navigation">
	...
</nav>

If we are not confident in fixing the above as a bugfix for 5.9, we should probably disable the text-decoration control for the time being. What do you think?

@aaronrobertshaw
Copy link
Contributor Author

since the PR only fixes a bug that ships in trunk, it seems fine to land this one

I believe this is fair. The linked issue is outside the scope of what this PR itself aims to address.

However I still think we need to consider how we are going to solve #34275. If we are confident that we can keep the text-decoration control where it is, and target all navigation items inside instead of the navigation block itself — then we can probably live with this for a bit.

I'm not sure we'll get a consensus and fix in place within the period of time we have left before the 5.9 code freeze.

The navigation block opted into the text-decoration support before we had the ability to skip serialization of those styles and apply them to inner blocks or elements. Now we have that, there might be the option to keep the control at the main navigation block level and pass that style down or apply a custom class such as has-text-decoration-underline.

I can explore this further tomorrow.

If we are not confident in fixing the above as a bugfix for 5.9, we should probably disable the text-decoration control for the time being. What do you think?

This is a little more involved than simply opting out of the text-decoration support.

It has been enabled for about a year so we'd have to add a deprecation, then undo that in the future. Disabling the support only, would mean users losing text-decoration selections they'd made previously. We'd also need to test for possible block invalidation but my hope would be because the block support only applies an inline style we'd avoid that.

There is also currently an open PR around which controls display by default under the Typography panel. For what it is worth, text-decoration will not be displayed by default.


Given all of the above, are you still happy for us to land this and at least remove one small bug?

@jasmussen
Copy link
Contributor

From this, it definitely sounds like either a fix, or just an opt-out, is possible in the bug fixing window, so definitely seems good to land! Thanks.

@aaronrobertshaw aaronrobertshaw merged commit 7ce8867 into trunk Oct 25, 2021
@aaronrobertshaw aaronrobertshaw deleted the fix/text-decoration-for-edited-nav-item branch October 25, 2021 07:39
@github-actions github-actions bot added this to the Gutenberg 11.9 milestone Oct 25, 2021
@jasmussen
Copy link
Contributor

My mistake, turns out this rule was needed after all: #36106.

@andrewserong andrewserong added the [Type] Bug An existing feature does not function as intended label Nov 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Link Affects the Navigation Link Block CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants