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

Block Supports: Add text columns (column count) to typography block supports #33587

Merged
merged 3 commits into from
Mar 6, 2023

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Jul 21, 2021

Related:

What?

Adds a new block support feature to the typography toolset to allow control over CSS column count for blocks displaying multiline text.

Why?

To open up further design possibilities.

Patterns enabled by this

Post Excerpt Paragraph

How?

  • Adds new "text columns" block support that maps to the column-count CSS property.
  • The new block support and design tool is disabled by default (happy to change this if desired)
  • Updates global styles typography panel to include new control if enabled.

Testing Instructions

  1. Run npm run test:unit:php -- --filter WP_Theme_JSON_Gutenberg_Test
  2. Run npm run test:unit packages/block-editor/src/hooks/test/style.js
  3. Enable the text columns UI by setting your theme.json's settings.typography.textColumns to true
  4. Opt into text columns support for a block such as Post Excerpt by setting its supports.typography.textColumns property to true.
  5. Edit a post, add your block with text columns support, add text to it, then select it.
  6. In the typography panel in the sidebar, toggle on the text columns control via the panel's ellipsis menu
  7. Adjust the control and ensure it works.
  8. Save the post and confirm the columns display appropriately on the frontend.
  9. Test text columns in global styles for blocks works.
  10. Make sure the text columns control isn't an option under the Global Stlyes' root typography panel.

Screenshots

Screen.Recording.2022-12-15.at.1.13.05.pm.mp4

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Jul 21, 2021
@aaronrobertshaw aaronrobertshaw self-assigned this Jul 21, 2021
@github-actions
Copy link

github-actions bot commented Jul 21, 2021

Size Change: +210 B (0%)

Total Size: 1.34 MB

Filename Size Change
build/block-editor/index.min.js 197 kB +203 B (0%)
build/block-library/index.min.js 201 kB +20 B (0%)
build/blocks/index.min.js 51 kB +22 B (0%)
build/components/index.min.js 208 kB +58 B (0%)
build/customize-widgets/index.min.js 12.2 kB +6 B (0%)
build/edit-post/index.min.js 34.8 kB +3 B (0%)
build/edit-site/index.min.js 63.5 kB -272 B (0%)
build/edit-site/style-rtl.css 10 kB -21 B (0%)
build/edit-site/style.css 10 kB -22 B (0%)
build/edit-widgets/index.min.js 17.3 kB +4 B (0%)
build/format-library/index.min.js 7.26 kB -9 B (0%)
build/rich-text/index.min.js 11 kB +174 B (+2%)
build/url/index.min.js 3.74 kB +44 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.11 kB
build/block-editor/content.css 4.1 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/style-rtl.css 14.4 kB
build/block-editor/style.css 14.4 kB
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 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 91 B
build/block-library/blocks/avatar/style.css 91 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 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 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 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 265 B
build/block-library/blocks/file/style.css 265 B
build/block-library/blocks/file/view.min.js 353 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 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 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 654 B
build/block-library/blocks/group/editor.css 654 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 76 B
build/block-library/blocks/heading/style.css 76 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 830 B
build/block-library/blocks/image/editor.css 829 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 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 507 B
build/block-library/blocks/media-text/style.css 505 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 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/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
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 401 B
build/block-library/blocks/page-list/editor.css 401 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 501 B
build/block-library/blocks/post-comments-form/style.css 501 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 134 B
build/block-library/blocks/post-excerpt/style.css 134 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 318 B
build/block-library/blocks/post-featured-image/style.css 318 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/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 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 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 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 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 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 463 B
build/block-library/blocks/query/editor.css 463 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 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 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 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 489 B
build/block-library/blocks/site-logo/editor.css 489 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 404 B
build/block-library/blocks/template-part/editor.css 404 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.6 kB
build/block-library/editor.css 11.6 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.7 kB
build/block-library/style.css 12.7 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.4 kB
build/core-data/index.min.js 16.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.58 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.72 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/style-rtl.css 7.53 kB
build/edit-post/style.css 7.52 kB
build/edit-widgets/style-rtl.css 4.55 kB
build/edit-widgets/style.css 4.55 kB
build/editor/index.min.js 45.7 kB
build/editor/style-rtl.css 3.54 kB
build/editor/style.css 3.53 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 937 B
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.53 kB
build/token-list/index.min.js 650 B
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@ramonjd
Copy link
Member

ramonjd commented Jul 22, 2021

This is looking great, and, in my view, satisfies the feature requests in #25459 and #27118, though I'll leave it to @scruffian and @iamtakashi to judge.

I mostly tested with core/paragraph but also the post tags block as well.

  1. Run the above tests and ensure they pass ✅
  2. Enable column count support by opting in via your theme.json ✅
  3. Test a static block such as the paragraph or post excerpt blocks. ✅
  4. Test a dynamic block such as the post-terms block. ✅
  5. Test the columns support via Global Styles ✅
  6. Test theme.json styling of columns ✅

I think it's good to go.

The only question I had was whether we should clear the value in the UI when we reset the column count to make it clearer to the user that no column count is specified (and therefore may be overridden by global styles).

Dragging the column count down to 1 on a paragraph for example, renders the following:

<p style="column-count:1">...</p>

The consequence was that global styles didn't apply to this particular paragraph:

Screen Shot 2021-07-22 at 2 08 49 pm

I would expect this to be the case. I think it makes sense to be able to specify that a block should always have n columns, global styles notwithstanding 👍

Still, since hitting "Reset" changes the UI value to 1 it's not immediately clear that resetting to 1 allows global style overrides, while manually adjusting the value to1 does not.

I could be overthinking it.

@aaronrobertshaw
Copy link
Contributor Author

Thanks for the review @ramonjd 🙇

The only question I had was whether we should clear the value in the UI when we reset the column count to make it clearer to the user that no column count is specified (and therefore may be overridden by global styles).

That's a good question. The current behaviour comes from setting the initial position on the slider control. It might be better to omit that so the input can reflect the "unset" state indicating that it's currently inheriting from the theme or global styles.

Originally, I was thinking along the lines of the columns control for the gallery block that was currently a slider which always displayed a value. There could also be a case to change this to a stepper field.

In the short term, I'll try and improve its behaviour without switching controls. Then wait on further feedback regarding the UX.

I could be overthinking it.

I don't think so. It's definitely a rough edge that could do with smoothing out 🙂

@aaronrobertshaw
Copy link
Contributor Author

aaronrobertshaw commented Jul 22, 2021

The column count's RangeControl has had the initialPosition prop removed. This does make it clearer when the control has been reset and would be inheriting from the theme or global styles. The downside is the position of the slider feels a bit off.

When the new progressive disclosure panel lands and the typography block supports panel is updated to use it, we'll likely want to reduce the control's footprint. It also won't need the reset button. I'm starting to lean more towards changing this to a simple NumberControl.

RangeControl NumberControl
ColumnControlResetBehaviour ColumnControlResetBehaviour2

@ramonjd
Copy link
Member

ramonjd commented Jul 22, 2021

The column count's RangeControl has had the initialPosition prop removed. This does make it clearer when the control has been reset and would be inheriting from the theme or global styles.

Thank you!

When the new progressive disclosure panel lands and the typography block supports panel is updated to use it, we'll likely want to reduce the control's footprint. It also won't need the reset button.

Makes sense to me, particularly after having just taken that PR for a spin.

Speaking for the reset button, it is more explicit in that you know what's going to happen when you click on it.

As we continue to test the panel and controls like this one, maybe we can work out a neat way to communicate that values are reset/won't persist when toggling controls in the progressive disclosure panel.

I'm starting to lean more towards changing this to a simple NumberControl.

Nice idea 👍 More so given the range is 1-5. I'd understand the need for range controls if we were dealing with 0-100 with step values.

@mtias mtias added the Needs Design Needs design efforts. label Jul 22, 2021
@mtias
Copy link
Member

mtias commented Jul 22, 2021

One challenge here is to not confuse users when it comes to Column blocks and this text columns setting. We'd need to be careful with how the UI controls are presented, and probably add further contextual text around what this does (cosmetically and not structurally, meaning a user won't be able to add other blocks to a column). For example, I'm not entirely sure this belongs in the typography panel.

cc @kellychoffman @javierarce @jasmussen

@mtias
Copy link
Member

mtias commented Jul 22, 2021

For example, maybe we can consider this more of a block style rather than a full on setting, and only support two columns.

@aaronrobertshaw
Copy link
Contributor Author

Thanks for the feedback @mtias. 👍

I'm happy to adjust this however needed to avoid any confusion with the existing Columns block.

While creating this PR I had a couple of things in mind:

  1. That multiple blocks with multi-line content might benefit from control over CSS columns and block support appeared the best method in providing that.
  2. Providing control over this in the sidebar would indicate it was cosmetic as well as a point of difference between this and the columns block.
  3. There could be the option in future that block styles are a set of style attributes.

It appears I misunderstood what was initially being proposed regarding block styles. I was under the impression the style attributes might also need to be supported via theme.json and/or block supports.

I don't have any strong opinions on where this should belong. As the discussion around this evolves I'll continue to make any requested updates.

@mtias
Copy link
Member

mtias commented Jul 23, 2021

Yes, I think the result is valuable to have, we just need to explore a bit the UI controls and what makes the most sense.

@javierarce
Copy link
Contributor

I'm not entirely sure this belongs in the typography panel.

A "layout" panel would have more sense, in my opinion. Is there a plan to add more column styles like column-gap, column-rule, etc.?

One challenge here is to not confuse users when it comes to Column blocks and this text columns setting.

I think that the fact that this setting offers fewer functionalities than the block could help users understand that this is the quick way to add columns, while the block is the tool to use if they need more control.

@aaronrobertshaw
Copy link
Contributor Author

A "layout" panel would have more sense, in my opinion.

I'm not certain here. A layout panel is already injected for certain blocks to control content width and full width values etc. If we are trying to keep the delineation clear between columns blocks and other more structural changes, it feels more typographic to me.

Is there a plan to add more column styles like column-gap, column-rule, etc.?

Some additional control over styles is on the horizon. #32571 adds the ability to control gap spacing and this would be included under the new "Dimensions" panel.

@jasmussen
Copy link
Contributor

jasmussen commented Aug 3, 2021

As the group block is getting more flex-features, and is even growing closer to the columns block, it seems like there's an opportunity to share some DNA in the interface, perhaps even in the underlying code. After all, what is the major difference between a 1 column Columns block, and a Group block? (I know there are some exotic alignment based ones).

The thing is, I share Matías concern about the confusion. Moreover, I have bouts of excitement about the built-in column-count features, then I implement them and remember the downsides:

column-count

Specifically, box-shadows and borders, anything that's on the outside of an element, those are broken across columns. There's little to no control of it, and you can even end up in situations where the preceeding element's bottom margin pushes down the next column so it doesn't start at the top. You can tinker with CSS to mitigate things with inline-block and other tweaks, but in my experience I could never get it to a satisfactory place. You can tinker in this codepen if you like.

In other words, I find column-count to be over-promising and under-delivering. If we are to implement it, we should manage the prominence so it doesn't end up just frustrating users with its built-in shortcomings. That could mean, as Matías suggests, making it a somewhat locked-down block style we know to work most of the time, or as Aaron suggests, a control you can add via the Tools menu, but which isn't ever shown by default.

@aaronrobertshaw
Copy link
Contributor Author

Thanks for highlighting the issues with CSS columns @jasmussen .

That could mean, as Matías suggests, making it a somewhat locked-down block style we know to work most of the time, or as Aaron suggests, a control you can add via the Tools menu, but which isn't ever shown by default.

Having column-count supported through block supports or theme.json etc doesn't mean we are obligated to enable it for all blocks. It could be only turned on for the post excerpt and paragraph. The block support approach would mean that we have consistency between those blocks instead of two ad hoc solutions needing to be maintained separately.

It comes down to whether there are enough blocks that would benefit from it, that also don't need borders or shadows, to warrant it being implemented in a shared way such as this PR does.

We could still switch to offering it as an ad hoc solution for the post excerpt block etc. In that case, it would be good to offer a SlotFill solution in our different inspector control panels. This would allow the ad hoc columns count control to be injected within the typography panel. Not to mention potentially facilitate a more general "Appearance" panel spanning multiple block supports.

Also, for what it's worth, I still think typesetting is different than layout and so the CSS columns fit better in the typography panel than the layout one. Happy to be overruled there, it's a minor issue in the scheme of things.

@jasmussen
Copy link
Contributor

Having column-count supported through block supports or theme.json etc doesn't mean we are obligated to enable it for all blocks. It could be only turned on for the post excerpt and paragraph. The block support approach would mean that we have consistency between those blocks instead of two ad hoc solutions needing to be maintained separately.

The tools menu could offer the choice, that's the benefit of it! Though per the feedback I think we should at the very least start with it not shown by default.

@scruffian scruffian mentioned this pull request May 17, 2022
23 tasks
@ZebulanStanphill
Copy link
Member

@jasmussen I figured I should mention that the issue with borders/shadows being split across columns can be addressed via the break-inside CSS property.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout#fragmented_boxes

@mtias
Copy link
Member

mtias commented Sep 10, 2022

Let's pick this one up and drive it to the end this time :)

@@ -65,6 +65,7 @@ class WP_Theme_JSON_Gutenberg {
'padding' => null,
),
'typography' => array(
'columnCount' => null,
Copy link
Member

Choose a reason for hiding this comment

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

Can we change the attribute to be textColumns instead?

Copy link
Member

Choose a reason for hiding this comment

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

Well, technically, it's not just columns for text: something using this property could have images and other media in its content.

In fact, are we even sure this belongs in the category of typography tools? It technically has use cases outside of bare text, especially once you start using break-inside to preserve the integrity of child containers. A gallery could hypothetically use it to layout its images, for example, as could a series of listing of social media posts. I'd argue it actually belongs with the layout tools.

I think "content columns" is a more strictly accurate term than "text columns".

Copy link
Member

Choose a reason for hiding this comment

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

Well, the original issues are about unlocking a specific effect on textual content. I'm not sure we should design it as a general tool and expose it as one were it'd start to compete with other layout tools. "Content columns" is just very close to regular columns, which are also about showing any content in columns. Here we need to represent the flow and continuity aspect, which seems better captured by "text columns" to me. It might be better placed in "layout" regardless, but with the right context.

There's also a question on which blocks this should be exposed. For example, wouldn't make any sense to have this on the headings block.

Copy link
Member

Choose a reason for hiding this comment

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

The interesting thing about CSS columns versus typical divs-in-divs "columns" is that:

  • Divs-in-divs columns have content explicitly assigned to a column, and the height of each column can vary wildly.
  • CSS columns have content dynamically placed in the columns, often attempting to balance the height of each column (though a minimum content height for a column can be set).

These have big ramifications for when you would want to use one over the other, but I have no clue how to convey these subtle but important differences to users.


Here's the only blocks I can think of where this control would make sense:

  • Buttons
  • Gallery
  • Group
  • List
  • Navigation
  • Paragraph
  • Quote
  • Verse

In other words: most of the container blocks, and maybe a few standard text blocks for the sake of allowing users to avoid extra divs in a few cases. In most cases, though, you'd actually want to avoid using CSS columns on a single Paragraph, since that's less future-proof for adding additional text. So maybe it should only be the container blocks that have the control, to encourage best practices.

mtias
mtias previously requested changes Sep 10, 2022
Copy link
Member

@mtias mtias left a comment

Choose a reason for hiding this comment

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

Left a request to change the attribute and function names to textColumns instead of columnCount.

We could explore a different UI with a segmented control and icons for single column, two-columns, and three columns. I don't think we need to support more than that for text-columns.

@aaronrobertshaw
Copy link
Contributor Author

Thank you for the renewed conversation and interest in this @mtias and @ZebulanStanphill.

I'll dust this off, bring it up-to-date and rename functions/attributes etc, later this week as I'm AFK tomorrow.

@aaronrobertshaw aaronrobertshaw changed the base branch from trunk to add/text-columns-to-style-engine December 15, 2022 04:57
@aaronrobertshaw
Copy link
Contributor Author

My assumption is that 1 means 1 text column, which is the default for any element.

That's my thinking.

Is 0 not to use columns?

As text columns is an optional control that needs to be toggled on from the typography panel's menu. It would be reset via that same menu to opt out of setting any specific column number. The field can also be cleared without resetting via the menu.

@paaljoachim
Copy link
Contributor

Thank you for clearing that up.
1 is the lowest number and default for any element.

@talldan talldan dismissed mtias’s stale review February 28, 2023 01:44

feedback adressed

@aaronrobertshaw
Copy link
Contributor Author

I've reworked this PR in line with the recently extracted typography panel #47356. Given the degree of change required, this PR will need a full review with particular attention on whether the UI control displays appropriately based on theme.json settings or individual block supports.

@glendaviesnz
Copy link
Contributor

Testing well for me. I think that after this PR the theme.json changes are just supposed to go into the lib/theme.json file rather than in the versioned dir, but I am not 100% sure on that.

@andrewserong
Copy link
Contributor

Thanks for the re-review ping, I haven't had a chance to test this properly yet, but just on this comment:

I think that after #46750 the theme.json changes are just supposed to go into the lib/theme.json file rather than in the versioned dir, but I am not 100% sure on that.

I think that's the case, now that the resolver isn't in the versioned directory, it looks like the lib/theme.json file is the one to use 👍

@aaronrobertshaw
Copy link
Contributor Author

Thanks @glendaviesnz and @andrewserong for catching the incorrect theme.json. I'd lost track of this during the multitude of rebases after significant changes to theme.json/global styles panels etc.

I've moved the theme.json tweak into lib/theme.json and re-tested this branch locally. Works for me.

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 all the follow-up here @aaronrobertshaw, this is testing great for me!

✅ Works correctly at the individual block level for both static and dynamic blocks (e.g. post excerpt, paragraph blocks)
✅ Works in global styles / theme.json, and can be overridden at the individual block level
✅ Control doesn't show up where it shouldn't (e.g. root level text elements in global styles)
✅ Switching textColumns to false in theme.json still allows the text columns styles to be displayed in the block editor and site frontend for blocks that already have those values set (e.g. in patterns or existing post content when a user switches themes)

From a re-read, the code's looking solid to me. The only comments I added is that after the rebase now that the Typography panel is consolidated between the block editor and site editors, is that it looks like we might be able to remove the text-columns.js file? I couldn't see it being imported, since typography-panel.js now has the logic in there directly using NumberControl, but apologies if I've missed something there!

LGTM! ✨

@aaronrobertshaw
Copy link
Contributor Author

Appreciate the speedy reviews, thank you 🚀

apologies if I've missed something there!

Nope, the opposite, I missed it along with the lib/theme.json change.

It was kept around for reference when I was rebasing after the typography panel extraction. I then dropped the ball in terms of removing it once it wasn't needed.

With all the feedback addressed, I'll go ahead and merge this one now.

@aaronrobertshaw aaronrobertshaw merged commit e2d97fb into trunk Mar 6, 2023
@aaronrobertshaw aaronrobertshaw deleted the add/typography-columns-support branch March 6, 2023 02:39
@github-actions github-actions bot added this to the Gutenberg 15.4 milestone Mar 6, 2023
@andrewserong
Copy link
Contributor

It was kept around for reference when I was rebasing after the typography panel extraction. I then dropped the ball in terms of removing it once it wasn't needed.

No worries, happy to be another set of 👀, it's tricky to see these things sometimes when you've been with a PR for a while 😄. Nice work landing this feature!

@ramonjd ramonjd added the Needs PHP backport Needs PHP backport to Core label Jun 5, 2023
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jun 14, 2023
@ramonjd
Copy link
Member

ramonjd commented Jun 16, 2023

I'll backport the PHP files for this one 👍

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 Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.