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

Make the lists more wysiwyg #29556

Closed
wants to merge 2 commits into from
Closed

Conversation

youknowriad
Copy link
Contributor

Similar to #29517

When using lists in a theme without any stylesheet, the result in the frontend is different than the result in the backend, the problem is that in the backend there are default styles for lists. In order to solve this, we have two options:

  • Remove the lists editor styles (make the editor map the frontend)
  • Normalize the lists (make the frontend look like the editor)

I thought that the editor styles applied were better defaults for lists than what comes with the browser so I went with the second option. That said, it's the most impactful option, but I think most themes already override these styles in their stylesheets so it might not be that impactful.

What do you think?

Testing instructions

  • Test lists, nested and numbered lists in various themes, both frontend and backend.

@youknowriad youknowriad added [Type] Enhancement A suggestion for improvement. Needs Dev Note Requires a developer note for a major WordPress release cycle [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Mar 4, 2021
@youknowriad youknowriad self-assigned this Mar 4, 2021
@youknowriad youknowriad requested a review from ajitbohra as a code owner March 4, 2021 10:34
@youknowriad
Copy link
Contributor Author

Depending how impactful is this PR, we could decide to remove some of the opinionated styles or move them to "theme.scss" instead of "style.scss".

@jasmussen
Copy link
Contributor

I love these PRs, and I love that we're at a place where we can put everything in its right place. Those editor styles you can likely remove once the iframe lands 👌

However, something's off. This is what I see in trunk:

trunk

This is what I see in this branch:

lists

@github-actions
Copy link

github-actions bot commented Mar 4, 2021

Size Change: +6.94 kB (0%)

Total Size: 1.4 MB

Filename Size Change
build/a11y/index.js 1.14 kB -1 B (0%)
build/annotations/index.js 3.78 kB -1 B (0%)
build/api-fetch/index.js 3.4 kB -4 B (0%)
build/autop/index.js 2.82 kB -14 B (0%)
build/blob/index.js 664 B -1 B (0%)
build/block-directory/index.js 8.63 kB +2 B (0%)
build/block-editor/index.js 125 kB -6 B (0%)
build/block-library/blocks/list/editor-rtl.css 91 B +26 B (+40%) 🚨
build/block-library/blocks/list/editor.css 91 B +26 B (+40%) 🚨
build/block-library/blocks/list/style-rtl.css 134 B +71 B (+113%) 🆘
build/block-library/blocks/list/style.css 133 B +70 B (+111%) 🆘
build/block-library/blocks/navigation/editor-rtl.css 1.34 kB +2 B (0%)
build/block-library/blocks/navigation/editor.css 1.34 kB +3 B (0%)
build/block-library/blocks/page-list/editor-rtl.css 215 B +1 B (0%)
build/block-library/blocks/page-list/editor.css 215 B +1 B (0%)
build/block-library/common-rtl.css 1.1 kB +18 B (+2%)
build/block-library/common.css 1.1 kB +20 B (+2%)
build/block-library/editor-rtl.css 9.55 kB +12 B (0%)
build/block-library/editor.css 9.54 kB +13 B (0%)
build/block-library/index.js 148 kB +312 B (0%)
build/block-library/style-rtl.css 8.9 kB +50 B (+1%)
build/block-library/style.css 8.9 kB +50 B (+1%)
build/block-serialization-default-parser/index.js 1.87 kB -6 B (0%)
build/blocks/index.js 48.3 kB -61 B (0%)
build/components/index.js 283 kB +6.82 kB (+2%)
build/components/style-rtl.css 15.6 kB +8 B (0%)
build/components/style.css 15.5 kB +7 B (0%)
build/compose/index.js 11.1 kB -1 B (0%)
build/core-data/index.js 16.7 kB -44 B (0%)
build/customize-widgets/index.js 3.96 kB -20 B (-1%)
build/data-controls/index.js 828 B -2 B (0%)
build/data/index.js 8.88 kB +15 B (0%)
build/date/index.js 31.8 kB -1 B (0%)
build/dom-ready/index.js 577 B +1 B (0%)
build/dom/index.js 4.94 kB -2 B (0%)
build/edit-navigation/index.js 11 kB -17 B (0%)
build/edit-post/index.js 306 kB -80 B (0%)
build/edit-post/style-rtl.css 6.82 kB +6 B (0%)
build/edit-post/style.css 6.81 kB +6 B (0%)
build/edit-site/index.js 27 kB -63 B (0%)
build/edit-site/style-rtl.css 4.47 kB +6 B (0%)
build/edit-site/style.css 4.47 kB +6 B (0%)
build/edit-widgets/index.js 20.1 kB -24 B (0%)
build/editor/editor-styles-rtl.css 490 B -53 B (-10%) 👏
build/editor/editor-styles.css 491 B -54 B (-10%) 👏
build/editor/index.js 42.1 kB -38 B (0%)
build/element/index.js 4.61 kB -8 B (0%)
build/format-library/index.js 6.75 kB -22 B (0%)
build/hooks/index.js 2.28 kB -2 B (0%)
build/html-entities/index.js 623 B +1 B (0%)
build/i18n/index.js 4.01 kB +1 B (0%)
build/keyboard-shortcuts/index.js 2.53 kB -10 B (0%)
build/keycodes/index.js 1.95 kB -2 B (0%)
build/list-reusable-blocks/index.js 3.15 kB +2 B (0%)
build/media-utils/index.js 5.34 kB -7 B (0%)
build/notices/index.js 1.85 kB -2 B (0%)
build/nux/index.js 3.4 kB -9 B (0%)
build/plugins/index.js 2.9 kB +11 B (0%)
build/primitives/index.js 1.42 kB -1 B (0%)
build/react-i18n/index.js 1.45 kB +1 B (0%)
build/redux-routine/index.js 2.83 kB -4 B (0%)
build/reusable-blocks/index.js 3.78 kB -17 B (0%)
build/rich-text/index.js 13.4 kB -59 B (0%)
build/server-side-render/index.js 2.82 kB +5 B (0%)
build/token-list/index.js 1.27 kB +2 B (0%)
build/url/index.js 3.02 kB +1 B (0%)
build/viewport/index.js 1.86 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/block-directory/style-rtl.css 1 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-editor/style-rtl.css 12.1 kB 0 B
build/block-editor/style.css 12.1 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 103 B 0 B
build/block-library/blocks/audio/style.css 103 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 479 B 0 B
build/block-library/blocks/button/style.css 479 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/buttons/style-rtl.css 364 B 0 B
build/block-library/blocks/buttons/style.css 363 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 421 B 0 B
build/block-library/blocks/columns/style.css 421 B 0 B
build/block-library/blocks/cover/editor-rtl.css 390 B 0 B
build/block-library/blocks/cover/editor.css 389 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.25 kB 0 B
build/block-library/blocks/cover/style.css 1.25 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 396 B 0 B
build/block-library/blocks/embed/style.css 395 B 0 B
build/block-library/blocks/file/editor-rtl.css 199 B 0 B
build/block-library/blocks/file/editor.css 198 B 0 B
build/block-library/blocks/file/style-rtl.css 248 B 0 B
build/block-library/blocks/file/style.css 248 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.45 kB 0 B
build/block-library/blocks/freeform/editor.css 2.45 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 689 B 0 B
build/block-library/blocks/gallery/editor.css 690 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.07 kB 0 B
build/block-library/blocks/gallery/style.css 1.06 kB 0 B
build/block-library/blocks/group/editor-rtl.css 318 B 0 B
build/block-library/blocks/group/editor.css 317 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 477 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 159 B 0 B
build/block-library/blocks/latest-comments/editor.css 158 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 269 B 0 B
build/block-library/blocks/latest-comments/style.css 269 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 681 B 0 B
build/block-library/blocks/navigation-link/editor.css 683 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 694 B 0 B
build/block-library/blocks/navigation-link/style.css 692 B 0 B
build/block-library/blocks/navigation/style-rtl.css 213 B 0 B
build/block-library/blocks/navigation/style.css 214 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/style-rtl.css 527 B 0 B
build/block-library/blocks/page-list/style.css 526 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 109 B 0 B
build/block-library/blocks/paragraph/editor.css 109 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 288 B 0 B
build/block-library/blocks/paragraph/style.css 289 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 250 B 0 B
build/block-library/blocks/post-comments-form/style.css 250 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 63 B 0 B
build/block-library/blocks/preformatted/style.css 63 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 316 B 0 B
build/block-library/blocks/pullquote/style.css 316 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 90 B 0 B
build/block-library/blocks/query-loop/editor.css 89 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query/editor-rtl.css 814 B 0 B
build/block-library/blocks/query/editor.css 812 B 0 B
build/block-library/blocks/quote/editor-rtl.css 61 B 0 B
build/block-library/blocks/quote/editor.css 61 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 165 B 0 B
build/block-library/blocks/search/editor.css 165 B 0 B
build/block-library/blocks/search/style-rtl.css 342 B 0 B
build/block-library/blocks/search/style.css 344 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 236 B 0 B
build/block-library/blocks/separator/style.css 236 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 504 B 0 B
build/block-library/blocks/shortcode/editor.css 504 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 201 B 0 B
build/block-library/blocks/site-logo/editor.css 201 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 115 B 0 B
build/block-library/blocks/site-logo/style.css 115 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 696 B 0 B
build/block-library/blocks/social-links/editor.css 696 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB 0 B
build/block-library/blocks/social-links/style.css 1.32 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 317 B 0 B
build/block-library/blocks/spacer/editor.css 317 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 99 B 0 B
build/block-library/blocks/subhead/editor.css 99 B 0 B
build/block-library/blocks/subhead/style-rtl.css 80 B 0 B
build/block-library/blocks/subhead/style.css 80 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 390 B 0 B
build/block-library/blocks/table/style.css 390 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 557 B 0 B
build/block-library/blocks/template-part/editor.css 556 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/editor-rtl.css 62 B 0 B
build/block-library/blocks/verse/editor.css 62 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 504 B 0 B
build/block-library/blocks/video/editor.css 503 B 0 B
build/block-library/blocks/video/style-rtl.css 193 B 0 B
build/block-library/blocks/video/style.css 193 B 0 B
build/block-library/theme-rtl.css 736 B 0 B
build/block-library/theme.css 736 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/customize-widgets/style-rtl.css 168 B 0 B
build/customize-widgets/style.css 168 B 0 B
build/deprecated/index.js 769 B 0 B
build/edit-navigation/style-rtl.css 1.26 kB 0 B
build/edit-navigation/style.css 1.25 kB 0 B
build/edit-widgets/style-rtl.css 3.2 kB 0 B
build/edit-widgets/style.css 3.2 kB 0 B
build/editor/style-rtl.css 3.9 kB 0 B
build/editor/style.css 3.9 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/is-shallow-equal/index.js 699 B 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/priority-queue/index.js 791 B 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/shortcode/index.js 1.7 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@youknowriad
Copy link
Contributor Author

@jasmussen I suspect that your build didn't refresh the blocks stylesheet. I can't reproduce your issue on 2020

@jasmussen
Copy link
Contributor

I'm still seeing it after running rm -rf ./node_modules && npm install && npm run dev, and I'm seeing it with other themes as well. I think it's right, and I think there are two reasons for it:

  1. You zeroed out the margin: https://github.com/WordPress/gutenberg/pull/29556/files#diff-9db2e2e3e31d6cbce1fd2d9155704535fb7a56c2bad13a48e46d2be156f26a90R8

  2. The CSS from common.css now bleeds through:

Screenshot 2021-03-04 at 12 52 44

@scruffian
Copy link
Contributor

scruffian commented Mar 4, 2021

I see the same thing as @jasmussen. Would it be possible to enqueue the block library CSS after the wp-admin CSS?

@jasmussen
Copy link
Contributor

Just discovered this:

Screenshot 2021-03-05 at 09 25 39

Which is an excellent example of why the work you're doing here is so important 💯

(The above is not broken in trunk)

@youknowriad
Copy link
Contributor Author

I fixed that sidebar tabs bug.

I'm still not able to reproduce the issue for the "common.css" style override personally, I think maybe the order of the stylesheet is inconsistent depending on other factors. So for the moment, I restored the editor styles for "ul" which should have a higher specificity, this is something that can be removed once we iframe the post editor.

@youknowriad
Copy link
Contributor Author

I'm closing this in favor or #29590

@youknowriad youknowriad closed this Mar 8, 2021
@scruffian scruffian deleted the normalize/editor-styles-list branch March 8, 2021 11:07
@youknowriad youknowriad removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jun 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants