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 ability to toggle bullets on and off for Latest Posts Block via new "Layout" option. #32806

Closed

Conversation

getdave
Copy link
Contributor

@getdave getdave commented Jun 18, 2021

Description

Related #32718.

This PR allows a user to turn bullet points on and off for the block to decide between between the following block layouts:

  • list
  • bullet-list (new!)
  • grid

This is in response to designer guidance from @critterverse in #32806 (comment).

We will need to replicate this for Latest Comments - probably in the separate PR.

See also #32959 for the Latest Comments block.

How has this been tested?

  1. Create Latest Posts Block.
  2. Click on the Layout item in the Block Toolbar.
  3. Select a layout to see different layouts, one of which is now "Bulleted List".

Also check we don't need a deprecation:

  1. Switch to trunk.
  2. Build Plugin.
  3. Create new Post and add Latest Posts Block.
  4. Change some settings - especially the Layout setting in the Block Toolbar.
  5. Save
  6. Switch to this PR.
  7. Build Plugin.
  8. Open DevTools Console and Reload Post.
  9. Select Latest Posts Block.
  10. Check there are no warnings shown in console.

Screenshots

Screen.Capture.on.2021-06-23.at.16-35-23.mov

Types of changes

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.
  • 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).

@github-actions
Copy link

github-actions bot commented Jun 18, 2021

Size Change: +2.02 kB (0%)

Total Size: 1.04 MB

Filename Size Change
build/a11y/index.min.js 1.12 kB +1 B (0%)
build/block-directory/index.min.js 6.62 kB +5 B (0%)
build/block-editor/index.min.js 119 kB -22 B (0%)
build/block-editor/style-rtl.css 13.5 kB -5 B (0%)
build/block-editor/style.css 13.5 kB -5 B (0%)
build/block-library/blocks/latest-posts/style-rtl.css 562 B +33 B (+6%) 🔍
build/block-library/blocks/latest-posts/style.css 562 B +33 B (+6%) 🔍
build/block-library/blocks/media-text/editor-rtl.css 263 B +87 B (+49%) 🚨
build/block-library/blocks/media-text/editor.css 264 B +88 B (+50%) 🆘
build/block-library/editor-rtl.css 9.72 kB +16 B (0%)
build/block-library/editor.css 9.72 kB +17 B (0%)
build/block-library/index.min.js 145 kB +319 B (0%)
build/block-library/style-rtl.css 10.2 kB +28 B (0%)
build/block-library/style.css 10.2 kB +34 B (0%)
build/block-serialization-default-parser/index.min.js 1.29 kB -1 B (0%)
build/blocks/index.min.js 47.3 kB -6 B (0%)
build/components/index.min.js 182 kB +1.31 kB (+1%)
build/core-data/index.min.js 12.2 kB -1 B (0%)
build/customize-widgets/index.min.js 10 kB +45 B (0%)
build/data-controls/index.min.js 828 B +1 B (0%)
build/data/index.min.js 7.23 kB +2 B (0%)
build/date/index.min.js 31.8 kB +1 B (0%)
build/edit-navigation/index.min.js 14 kB +3 B (0%)
build/edit-post/index.min.js 58.7 kB -48 B (0%)
build/edit-site/index.min.js 26 kB -26 B (0%)
build/edit-widgets/index.min.js 16.1 kB +42 B (0%)
build/editor/index.min.js 38.6 kB +9 B (0%)
build/element/index.min.js 3.44 kB +2 B (0%)
build/format-library/index.min.js 5.68 kB -2 B (0%)
build/hooks/index.min.js 1.76 kB -1 B (0%)
build/html-entities/index.min.js 628 B -1 B (0%)
build/is-shallow-equal/index.min.js 710 B +1 B (0%)
build/keycodes/index.min.js 1.43 kB -1 B (0%)
build/list-reusable-blocks/index.min.js 2.07 kB -1 B (0%)
build/notices/index.min.js 1.07 kB -1 B (0%)
build/nux/index.min.js 2.31 kB -1 B (0%)
build/plugins/index.min.js 1.99 kB +1 B (0%)
build/react-i18n/index.min.js 924 B -1 B (0%)
build/rich-text/index.min.js 10.6 kB +1 B (0%)
build/server-side-render/index.min.js 1.63 kB -1 B (0%)
build/viewport/index.min.js 1.28 kB +1 B (0%)
build/widgets/index.min.js 6.21 kB +1 B (0%)
build/widgets/style-rtl.css 890 B +30 B (+3%)
build/widgets/style.css 890 B +29 B (+3%)
ℹ️ View Unchanged
Filename Size
build/annotations/index.min.js 2.93 kB
build/api-fetch/index.min.js 2.44 kB
build/autop/index.min.js 2.28 kB
build/blob/index.min.js 672 B
build/block-directory/style-rtl.css 989 B
build/block-directory/style.css 990 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 112 B
build/block-library/blocks/audio/style.css 112 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 475 B
build/block-library/blocks/button/editor.css 474 B
build/block-library/blocks/button/style-rtl.css 603 B
build/block-library/blocks/button/style.css 602 B
build/block-library/blocks/buttons/editor-rtl.css 315 B
build/block-library/blocks/buttons/editor.css 315 B
build/block-library/blocks/buttons/style-rtl.css 375 B
build/block-library/blocks/buttons/style.css 375 B
build/block-library/blocks/calendar/style-rtl.css 208 B
build/block-library/blocks/calendar/style.css 208 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 190 B
build/block-library/blocks/columns/editor.css 190 B
build/block-library/blocks/columns/style-rtl.css 422 B
build/block-library/blocks/columns/style.css 422 B
build/block-library/blocks/cover/editor-rtl.css 670 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB
build/block-library/blocks/cover/style.css 1.23 kB
build/block-library/blocks/embed/editor-rtl.css 486 B
build/block-library/blocks/embed/editor.css 486 B
build/block-library/blocks/embed/style-rtl.css 401 B
build/block-library/blocks/embed/style.css 400 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 301 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 780 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 704 B
build/block-library/blocks/gallery/editor.css 705 B
build/block-library/blocks/gallery/style-rtl.css 1.06 kB
build/block-library/blocks/gallery/style.css 1.06 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 160 B
build/block-library/blocks/group/editor.css 160 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 93 B
build/block-library/blocks/group/theme.css 93 B
build/block-library/blocks/heading/editor-rtl.css 152 B
build/block-library/blocks/heading/editor.css 152 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/home-link/style-rtl.css 259 B
build/block-library/blocks/home-link/style.css 259 B
build/block-library/blocks/html/editor-rtl.css 281 B
build/block-library/blocks/html/editor.css 281 B
build/block-library/blocks/image/editor-rtl.css 729 B
build/block-library/blocks/image/editor.css 727 B
build/block-library/blocks/image/style-rtl.css 481 B
build/block-library/blocks/image/style.css 485 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 281 B
build/block-library/blocks/latest-comments/style.css 282 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/list/style-rtl.css 63 B
build/block-library/blocks/list/style.css 63 B
build/block-library/blocks/media-text/style-rtl.css 492 B
build/block-library/blocks/media-text/style.css 489 B
build/block-library/blocks/more/editor-rtl.css 434 B
build/block-library/blocks/more/editor.css 434 B
build/block-library/blocks/navigation-link/editor-rtl.css 633 B
build/block-library/blocks/navigation-link/editor.css 634 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/editor-rtl.css 1.55 kB
build/block-library/blocks/navigation/editor.css 1.55 kB
build/block-library/blocks/navigation/style-rtl.css 1.63 kB
build/block-library/blocks/navigation/style.css 1.63 kB
build/block-library/blocks/navigation/view.min.js 2.87 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 310 B
build/block-library/blocks/page-list/editor.css 311 B
build/block-library/blocks/page-list/style-rtl.css 240 B
build/block-library/blocks/page-list/style.css 240 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 247 B
build/block-library/blocks/paragraph/style.css 248 B
build/block-library/blocks/post-author/editor-rtl.css 209 B
build/block-library/blocks/post-author/editor.css 209 B
build/block-library/blocks/post-author/style-rtl.css 183 B
build/block-library/blocks/post-author/style.css 184 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 B
build/block-library/blocks/post-content/editor-rtl.css 139 B
build/block-library/blocks/post-content/editor.css 139 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 338 B
build/block-library/blocks/post-featured-image/editor.css 338 B
build/block-library/blocks/post-featured-image/style-rtl.css 141 B
build/block-library/blocks/post-featured-image/style.css 141 B
build/block-library/blocks/post-template/editor-rtl.css 100 B
build/block-library/blocks/post-template/editor.css 99 B
build/block-library/blocks/post-template/style-rtl.css 379 B
build/block-library/blocks/post-template/style.css 380 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 183 B
build/block-library/blocks/pullquote/editor.css 183 B
build/block-library/blocks/pullquote/style-rtl.css 318 B
build/block-library/blocks/pullquote/style.css 318 B
build/block-library/blocks/pullquote/theme-rtl.css 169 B
build/block-library/blocks/pullquote/theme.css 169 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 270 B
build/block-library/blocks/query-pagination/editor.css 262 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B
build/block-library/blocks/query-pagination/style.css 168 B
build/block-library/blocks/query-title/editor-rtl.css 86 B
build/block-library/blocks/query-title/editor.css 86 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 169 B
build/block-library/blocks/quote/style.css 169 B
build/block-library/blocks/quote/theme-rtl.css 221 B
build/block-library/blocks/quote/theme.css 221 B
build/block-library/blocks/rss/editor-rtl.css 201 B
build/block-library/blocks/rss/editor.css 202 B
build/block-library/blocks/rss/style-rtl.css 290 B
build/block-library/blocks/rss/style.css 290 B
build/block-library/blocks/search/editor-rtl.css 211 B
build/block-library/blocks/search/editor.css 211 B
build/block-library/blocks/search/style-rtl.css 359 B
build/block-library/blocks/search/style.css 362 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 251 B
build/block-library/blocks/separator/style.css 251 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 512 B
build/block-library/blocks/shortcode/editor.css 512 B
build/block-library/blocks/site-logo/editor-rtl.css 440 B
build/block-library/blocks/site-logo/editor.css 441 B
build/block-library/blocks/site-logo/style-rtl.css 154 B
build/block-library/blocks/site-logo/style.css 154 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/social-link/editor-rtl.css 164 B
build/block-library/blocks/social-link/editor.css 165 B
build/block-library/blocks/social-links/editor-rtl.css 800 B
build/block-library/blocks/social-links/editor.css 799 B
build/block-library/blocks/social-links/style-rtl.css 1.34 kB
build/block-library/blocks/social-links/style.css 1.34 kB
build/block-library/blocks/spacer/editor-rtl.css 308 B
build/block-library/blocks/spacer/editor.css 308 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 478 B
build/block-library/blocks/table/editor.css 478 B
build/block-library/blocks/table/style-rtl.css 480 B
build/block-library/blocks/table/style.css 480 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/editor-rtl.css 118 B
build/block-library/blocks/tag-cloud/editor.css 118 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B
build/block-library/blocks/tag-cloud/style.css 94 B
build/block-library/blocks/template-part/editor-rtl.css 551 B
build/block-library/blocks/template-part/editor.css 550 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/term-description/editor-rtl.css 90 B
build/block-library/blocks/term-description/editor.css 90 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 1.26 kB
build/block-library/common.css 1.26 kB
build/block-library/reset-rtl.css 514 B
build/block-library/reset.css 515 B
build/block-library/theme-rtl.css 692 B
build/block-library/theme.css 693 B
build/block-serialization-spec-parser/index.min.js 3.06 kB
build/components/style-rtl.css 16.2 kB
build/components/style.css 16.2 kB
build/compose/index.min.js 10.2 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/deprecated/index.min.js 738 B
build/dom-ready/index.min.js 577 B
build/dom/index.min.js 4.62 kB
build/edit-navigation/style-rtl.css 3.09 kB
build/edit-navigation/style.css 3.09 kB
build/edit-post/classic-rtl.css 454 B
build/edit-post/classic.css 454 B
build/edit-post/style-rtl.css 7.04 kB
build/edit-post/style.css 7.03 kB
build/edit-site/style-rtl.css 4.76 kB
build/edit-site/style.css 4.75 kB
build/edit-widgets/style-rtl.css 3.57 kB
build/edit-widgets/style.css 3.57 kB
build/editor/style-rtl.css 3.91 kB
build/editor/style.css 3.9 kB
build/escape-html/index.min.js 739 B
build/format-library/style-rtl.css 637 B
build/format-library/style.css 639 B
build/i18n/index.min.js 3.73 kB
build/keyboard-shortcuts/index.min.js 1.74 kB
build/list-reusable-blocks/style-rtl.css 629 B
build/list-reusable-blocks/style.css 628 B
build/media-utils/index.min.js 3.08 kB
build/nux/style-rtl.css 718 B
build/nux/style.css 716 B
build/primitives/index.min.js 1.03 kB
build/priority-queue/index.min.js 791 B
build/redux-routine/index.min.js 2.82 kB
build/reusable-blocks/index.min.js 2.56 kB
build/reusable-blocks/style-rtl.css 225 B
build/reusable-blocks/style.css 225 B
build/shortcode/index.min.js 1.68 kB
build/token-list/index.min.js 848 B
build/url/index.min.js 1.95 kB
build/warning/index.min.js 1.13 kB
build/wordcount/index.min.js 1.24 kB

compressed-size-action

@kevin940726
Copy link
Member

Ok now when we're adding this option, it makes me think that maybe we should make it a dropdown instead, so that users can choose different list styles between none, circle, square, etc 😆. This could also be an option in the List block. Instead of asking users to choose between unordered list and ordered list, just give them different list style options to choose from.

I'm just thinking out loud here 😅, this is way beyond the scope of this PR.

@youknowriad
Copy link
Contributor

Hi there! thanks for the PR. I think we should be careful about adding customizations options in adhoc way for blocks.

It's unclear to me what are we trying to solve here? I think showing the bullets has been considered a theme CSS style historically and not something to tweak manually. So the important thing for me is that for "empty theme" these blocks look the same in the front-end and the editor and when themes provide styles, they adapt.

@getdave
Copy link
Contributor Author

getdave commented Jun 18, 2021

Hi there! thanks for the PR.

That's fine. Should have been a "Draft" really. More a PoC.

It's unclear to me what are we trying to solve here?

In core/latest-posts we take a very opinionated view and removes the bullet points from the lists. For many people this is not what they'd want/expect. To reinstate such bullet points you have to manually add Theme CSS to force overide the defaults provided by the block in order to restore the bullet points. That's an active step by a Theme and requires overhead that IMHO should not be necessary.

We could argue that bullets should be shown by default and that Themes should enqueue styles to remove the bullets if they want. Maybe that is all around a better option.

However, in this model we fail to consider context. The block has multiple configurations to decide what level of content you want to show:

  • Title only
  • Title and excerpt.
  • Title and full content and featured image.

Therefore a blanket CSS rule to govern display of bullets might not work as users will have varying opinions on when they feel it is appropriate to show bullets or not.

Options

Perhaps adding this attribute is too niche. Fair enough. I see the options available as follows:

  1. Leave as is and we might have further Issues such as Latest Posts and Latest Comments blocks don't look great when editor styles are disabled #32718.
  2. Change the block to allow bullets to appear and ask Theme authors to add rules to remove them as they see fit.
  3. Follow the approach in this PR and allow the user to decide.

Also to be clear, I'm not heavily invested in any of these solutions.

@youknowriad
Copy link
Contributor

Worth noting in this discussion also that this block is kind of considered "deprecated" or at least replaced slowly by a more flexible "Query" block.

@draganescu draganescu marked this pull request as draft June 18, 2021 17:31
@draganescu draganescu added the Needs Design Feedback Needs general design feedback. label Jun 18, 2021
@noisysocks
Copy link
Member

How about we add "List" as one of the options underneath Styles and, when selected, this shows the bullets (by styling .is-list) and shows only post titles. This makes the Recent Posts block behave like the Recent Posts widget of old.

This makes sense to me as, in my mind, there's two distinct kinds of "Recent Posts" that a user could want:

  1. A plain unordered list of links. Useful for inserting into a sidebar or footer.
  2. A more detailed list of posts complete with excerpts and featured images. Useful for the front page of a website.

(It's arguable that 2. should be deprecated entirely in lieu of the Query block.)

@youknowriad
Copy link
Contributor

I like that last proposal because of the small impact and potential changes in the future. Let's get some design input.

@getdave
Copy link
Contributor Author

getdave commented Jun 21, 2021

I agree. I'll leave this as draft until we get some design input (hat tip @draganescu).

@critterverse
Copy link
Contributor

critterverse commented Jun 22, 2021

Hey all, my two cents is that I think it would be confusing to add "list" as a style given that there are already list and grid display options in the toolbar. From a design perspective, it would probably make sense to combine this variation with the existing options.

The existing list icon isn't really doing us any favors here but I imagine it could work something like this:

latest-posts

@paaljoachim
Copy link
Contributor

In general it would be nice to have an approach that can also be used here:
Improving the List block
#17738

I suggested a similar design method as @critterverse suggested above. By adding options directly into the toolbar.
Thanks!

@getdave getdave force-pushed the add/bullet-point-toggle-to-latest-posts-and-comments branch 3 times, most recently from e2e9642 to f606f7a Compare June 23, 2021 15:34
@getdave getdave changed the title Add ability to toggle bullets on and off for Latest Posts Block Add ability to toggle bullets on and off for Latest Posts Block via new "Layout" option. Jun 23, 2021
@getdave
Copy link
Contributor Author

getdave commented Jun 23, 2021

Hey all, my two cents is that I think it would be confusing to add "list" as a style given that there are already list and grid display options in the toolbar. From a design perspective, it would probably make sense to combine this variation with the existing options.

The existing list icon isn't really doing us any favors here but I imagine it could work something like this:

latest-posts

@critterverse I've updated the implementation as you suggested. Would you be able to review? 🙇‍♂️

@getdave getdave marked this pull request as ready for review June 23, 2021 16:02
@critterverse
Copy link
Contributor

This works great! One thing I spotted that's a bit weird is when you enable the "Display featured image" option with the new bullet layout option:

bullet-points

Can we adjust this so that the bullet point stays aligned with the title whether or not there's an image?

Much more minor note but I also noticed that the bullet point is not visible in the editor when the block is set to full width or wide width (testing with Twenty Twenty-One), althought it does display on the front end. This could be slightly confusing to users if they aren't seeing any visual difference between the 2 options:

bullets-twenty-twenty-one.mov

^ Not sure what to suggest there because the treatment of the bullet point as "hanging punctuation" is really nice and I wouldn't want to lose that!

@getdave getdave force-pushed the add/bullet-point-toggle-to-latest-posts-and-comments branch from fd780d8 to b9850a5 Compare June 24, 2021 08:18
@getdave
Copy link
Contributor Author

getdave commented Jun 24, 2021

Can we adjust this so that the bullet point stays aligned with the title whether or not there's an image?

@critterverse I wasn't able to replicate this. Can you advise under what conditions this occurs? I was using TT1 theme.

Screen.Capture.on.2021-06-24.at.09-22-37.mov

Much more minor note but I also noticed that the bullet point is not visible in the editor when the block is set to full width or wide width (testing with Twenty Twenty-One), althought it does display on the front end. This could be slightly confusing to users if they aren't seeing any visual difference between the 2 options:

I've "fixed" this by using revert on the list left padding value if it has bullets. This reverts it back to the default style applied by Gutenberg to all list elements which is "indented". That's also the browser default.

Not sure what to suggest there because the treatment of the bullet point as "hanging punctuation" is really nice and I wouldn't want to lose that!

I understand. I also agree it looked nice. However, to have no bullet points show up at wide alignments would be confusing.

We have 3 options:

  1. Use revert to force indented bullets across all block alignments thus ensuring bullets are always visible - this is what (the updated version of) this PR currently does.
  2. Use indented list style only when the block alignment is "wide" or "full-width". This might add additional overhead for Theme authors in terms of styling and there would be an element of inconsistency. It could be a editor-specific style however.
  3. We leave it so that bullets aren't visible (in the editor only) at "wide" or "full-width". I don't think this is a good idea however.

Would you be ok to give the PR a spin as it is currently (ie: #1 above) and then let me know which option you'd prefer? 🙇

@getdave
Copy link
Contributor Author

getdave commented Jun 24, 2021

See also #32959 for the Latest Comments block.

@critterverse
Copy link
Contributor

I wasn't able to replicate this. Can you advise under what conditions this occurs? I was using TT1 theme.

Same. I just mean like this:

bullet-point

We have 3 options

Got it, this makes sense. Option number one works well, I was mostly concerned about the way the text would wrap but it's still behaving like hanging punctuation here so that works:

Screen Shot 2021-06-24 at 7 20 47 PM

^ On a similar note as the featured images, can we make sure that the bullet stays aligned with the first row of the title if the text wraps?

I can take a look at the Latest Comments block tomorrow!

@noisysocks noisysocks 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 Jun 25, 2021
@talldan
Copy link
Contributor

talldan commented Jun 25, 2021

I just tested, and I can't see the bullet styles in the customizer.

Twenty Twenty also seems to override them in the standalone editor, but that can possibly be considered a theme issue.

@getdave
Copy link
Contributor Author

getdave commented Jun 25, 2021

We're not going to try and use this route for solving the Widgets Editor styles for 5.8 as #32983 is a simpler route.

Let's still pursue to see if it's helpful for users.

@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 15, 2021
@getdave
Copy link
Contributor Author

getdave commented Jul 28, 2021

I won't be pursuing this so closing unless anyone else wants to take over.

@getdave getdave closed this Jul 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Latest Posts Affects the Latest Posts Block Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants