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: Option to pick a pattern on page creation. #40034

Merged
merged 3 commits into from
Apr 11, 2022

Conversation

jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented Apr 4, 2022

Iterates on #39147. In order to streamline the user experience, the team has decided only to include a pattern picker on page start and not a template picker. This decision is in line with our goal to simplify the user interface and avoid overwhelming users with too many options. We considered adding a new flag to mark patterns as being for the full post content but decided that using the existing 'blockTypes' => array( 'core/post-content' ) option was a simpler solution.

This is done by adding 'blockTypes' => array( 'core/post-content' ).

Testing Instructions

I tested the pattern picker by creating a new page and selecting a pattern for the page. I confirmed that the pattern was applied correctly to the page, as expected.

Screenshots or screencast

image

@jameskoster, @jasmussen could you provide some design insights to make the modal look better? thank you in advance!

@jorgefilipecosta jorgefilipecosta added Needs Design Needs design efforts. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Apr 4, 2022
@jorgefilipecosta jorgefilipecosta force-pushed the add/option-to-pick-a-pattern-on-page-start branch from 957816c to fa5587c Compare April 4, 2022 23:03
@jorgefilipecosta jorgefilipecosta force-pushed the add/option-to-pick-a-pattern-on-page-start branch 2 times, most recently from c04eed4 to c19587f Compare April 4, 2022 23:07
@jorgefilipecosta jorgefilipecosta changed the title Update query block creation and replacement flows Add: Option to pick a pattern on page creation. Apr 4, 2022
@github-actions
Copy link

github-actions bot commented Apr 4, 2022

Size Change: +608 B (0%)

Total Size: 1.22 MB

Filename Size Change
build/edit-post/index.min.js 30 kB +363 B (+1%)
build/edit-post/style-rtl.css 7.18 kB +123 B (+2%)
build/edit-post/style.css 7.18 kB +122 B (+2%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/admin-manifest/index.min.js 1.24 kB
build/annotations/index.min.js 2.77 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.49 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-editor/index.min.js 149 kB
build/block-editor/style-rtl.css 15.5 kB
build/block-editor/style.css 15.5 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 65 B
build/block-library/blocks/archives/style.css 65 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 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/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 59 B
build/block-library/blocks/avatar/style.css 59 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 445 B
build/block-library/blocks/button/editor.css 445 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 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 103 B
build/block-library/blocks/code/style.css 103 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-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 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-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/editor.css 95 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.56 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 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 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 961 B
build/block-library/blocks/gallery/editor.css 964 B
build/block-library/blocks/gallery/style-rtl.css 1.51 kB
build/block-library/blocks/gallery/style.css 1.51 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 333 B
build/block-library/blocks/group/editor.css 333 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 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 529 B
build/block-library/blocks/image/style.css 535 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 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 447 B
build/block-library/blocks/latest-posts/style.css 446 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 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/editor-rtl.css 708 B
build/block-library/blocks/navigation-link/editor.css 706 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-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.93 kB
build/block-library/blocks/navigation/style.css 1.92 kB
build/block-library/blocks/navigation/view.min.js 2.85 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 363 B
build/block-library/blocks/page-list/editor.css 363 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 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 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/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 521 B
build/block-library/blocks/post-comments/style.css 521 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 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/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 323 B
build/block-library/blocks/post-template/style.css 323 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 80 B
build/block-library/blocks/post-title/style.css 80 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 370 B
build/block-library/blocks/pullquote/style.css 370 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 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 213 B
build/block-library/blocks/quote/style.css 213 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 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 140 B
build/block-library/blocks/separator/editor.css 140 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 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 759 B
build/block-library/blocks/site-logo/editor.css 759 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 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 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB
build/block-library/blocks/social-links/style.css 1.36 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 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 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 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 934 B
build/block-library/common.css 932 B
build/block-library/editor-rtl.css 10.1 kB
build/block-library/editor.css 10.1 kB
build/block-library/index.min.js 174 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 11.3 kB
build/block-library/style.css 11.3 kB
build/block-library/theme-rtl.css 689 B
build/block-library/theme.css 694 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 46.9 kB
build/components/index.min.js 223 kB
build/components/style-rtl.css 14.9 kB
build/components/style.css 14.9 kB
build/compose/index.min.js 11.2 kB
build/core-data/index.min.js 14.5 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.39 kB
build/customize-widgets/style.css 1.39 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.64 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.58 kB
build/edit-navigation/index.min.js 15.8 kB
build/edit-navigation/style-rtl.css 4.04 kB
build/edit-navigation/style.css 4.05 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-site/index.min.js 46.8 kB
build/edit-site/style-rtl.css 7.77 kB
build/edit-site/style.css 7.75 kB
build/edit-widgets/index.min.js 16.3 kB
build/edit-widgets/style-rtl.css 4.4 kB
build/edit-widgets/style.css 4.39 kB
build/editor/index.min.js 38.4 kB
build/editor/style-rtl.css 3.71 kB
build/editor/style.css 3.71 kB
build/element/index.min.js 4.29 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 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.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 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.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.12 kB
build/nux/style-rtl.css 751 B
build/nux/style.css 749 B
build/plugins/index.min.js 1.98 kB
build/preferences/index.min.js 1.2 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 611 B
build/react-i18n/index.min.js 704 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.69 kB
build/reusable-blocks/index.min.js 2.24 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.2 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/url/index.min.js 1.99 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Thanks for the PR, it works as intended:
page

The modal display of patterns doesn't look super great:

Screenshot 2022-04-05 at 08 58 54

So I took the liberty of trying to push a column-count-based masonry layout and a more minimal modal treatment:

Screenshot 2022-04-05 at 08 57 33

I forgot to enable scrollbars in the above, don't worry they're there. What do you think?

CC: @jameskoster in case you can sanity check my code. It'd be good to test this at least in the major browsers.

@jameskoster
Copy link
Contributor

Should we use the same modal as #38997, IE include the carousel?

This is testing well for me, and the code looks good. The only minor quirk I noticed was a big gap at the bottom of the modal:

Screenshot 2022-04-05 at 10 37 35

I wasn't able to determine why this is happening though 🤔

@jasmussen
Copy link
Contributor

jasmussen commented Apr 5, 2022

That gap is the min-height of the modal, which is there to prevent it from jumping as the patterns load.

Oh, and thank you for looking 🎖️

@carolinan
Copy link
Contributor

Can someone clarify for me if this is intended to be the default mode whenever a new page is created? To show a modal instead of going directly to editing the page content?

@carolinan
Copy link
Contributor

On my test install (Windows, local, WP 5.9.3 rc1, Chrome), it took between 12 to 8 seconds for the modal to show up in the editor (time varied in the different attempts).
If had not been waiting for the modal to show up, this time would have been enough for me to start adding a page title and content.

If I do start to type immediately, the modal does not show at all, and I believe that is intended?


Are these patterns only added for testing? -I do not think we should recommend placing a query block on a page post type.

@paaljoachim
Copy link
Contributor

paaljoachim commented Apr 5, 2022

I would like to test out the PR but the Guenberg build is not working. Can you fix this @jorgefilipecosta ?

Screenshot 2022-04-05 at 22 22 26

I believe it would also be helpful to add a blank pattern one can quickly select in the page pattern modal when creating a new page.

I am though very hesitant in having the pattern modal show up by default when creating a new page. As I usually like to start with a blank page. I would have to every time I create a page to click the x to remove the pattern modal.
It would be better to have an option to where one can easily add the page pattern if one chooses to do so.

A few users flows.

User creates a page.
Add page pattern modal shows up the user selects to start blank or with a pattern.

User creates a page.
Initially a welcome modal shows up saying that one can now add a page pattern by going to the sidebar and clicking expand icon to open the pattern modal select a page pattern.

User creates a page.
Creates the blank page and in the sidebar is able to through the expand icon open the patterns and add a page pattern.

I believe there are additional flows in creating a page that I am currently not seeing.

@jorgefilipecosta jorgefilipecosta force-pushed the add/option-to-pick-a-pattern-on-page-start branch from c61ba78 to ea99480 Compare April 6, 2022 10:00
@jorgefilipecosta
Copy link
Member Author

Can someone clarify for me if this is intended to be the default mode whenever a new page is created? To show a modal instead of going directly to editing the page content?

Hi @carolinan, yes this is intended to be the default mode when a new page is created.

@jorgefilipecosta
Copy link
Member Author

jorgefilipecosta commented Apr 6, 2022

On my test install (Windows, local, WP 5.9.3 rc1, Chrome), it took between 12 to 8 seconds for the modal to show up in the editor (time varied in the different attempts). If had not been waiting for the modal to show up, this time would have been enough for me to start adding a page title and content.

There are some issues with pattern preview loading, this is not directly related to this PR. @youknowriad was looking into this issues.

If I do start to type immediately, the modal does not show at all, and I believe that is intended?

Yes if there is already some content on the page we don't show the modal.

Are these patterns only added for testing? -I do not think we should recommend placing a query block on a page post type.

Yes, these patterns are only for testing. They will not be the patterns that show up.

@jasmussen, @jameskoster , @mtias should we include some default content patterns in the core? If so which patterns, or should we leave the default content patterns to the plugins and themes, and by default there are no content patterns (e.g: the modal does not appear).

@jorgefilipecosta
Copy link
Member Author

jorgefilipecosta commented Apr 6, 2022

Should we use the same modal as #38997, IE include the carousel?

Good question @jameskoster, I'm also not sure of the UI. We could of course use a similar UI to query. We could keep this simple one, or we if we expect that many patterns will exist in the future we can even go for a more complex UI with categories etc.
I think in order to make this PR part of 6.0 we should choose between this UI and one similar to the query block with the carousel option. I'm fine with either option :)

@paaljoachim
Copy link
Contributor

Hey @jameskoster
I am thinking about your comment here:
#36664 (comment)
"We recently #39973 where you can edit the post excerpt. We should explore aligning with that pattern here."

I am thinking that instead of having the modal show up automatically when creating a new page that we could instead have a way in the sidebar to select to add a page template/pattern. This gives the option for the user to add a page pattern if they choose to do so.

@jorgefilipecosta
Copy link
Member Author

jorgefilipecosta commented Apr 6, 2022

Regarding the way to say a pattern is the full content of a page currently we assign 'core/post-content' as a block type of a pattern.

'blockTypes' => array( ..., 'core/post-content' ),

This seems like a good solution and avoids the addition of new APIs like an alternative where we would use a specific flag to mark that a pattern is for the full content of a page. Any thoughts on that? @mtias, @youknowriad would you prefer an alternative?

I guess this modal may not be a good fit for all websites. So we need a way to disable it on plugins and themes. Currently a possible way to disable this modal is to unregister the patterns with 'core/post-content' block type (.e.g WP_Block_Patterns_Registry->get_all_registered() and WP_Block_Patterns_Registry->unregister_block_pattern on the ones with block type 'core/post-content' ) or to update the patterns with 'core/post-content' block type by registering them without 'core/post-content' block type if we still want the patterns to be available but just disable the modal.
This solution does not relies on any new APIs and just uses what we had. Is it ok to document and use this solution even showing the code samples or would it be preferable to create a new API for this like a theme.json setting to disable the modal or something similar? cc: @youknowriad, @mtias

@jorgefilipecosta
Copy link
Member Author

I wonder if a per CPT config (like we have template) is a good thing for this feature.

That seems like a good path. And also provides a simple way to disable the filter, change the CPT to remove this feature.

@jorgefilipecosta
Copy link
Member Author

I just noticed that the modal also triggers if you delete all the blocks in a draft page. Is that intended? 🤔

modal.mp4

It is not intended, I'm checking and not showing the modal if the post is empty but you have undo levels (e.g: it was not empty before) I'm not sure why the logic did not work, I will debug the issue.

@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Apr 13, 2022
@richtabor
Copy link
Member

I wonder if a per CPT config (like we have template) is a good thing for this feature.

Could be cool yea.

@richtabor
Copy link
Member

An interesting observation I found — it seems a theme is required to have more than one pattern with 'blockTypes' => array( 'core/post-content' ) applied, to make the modal fire.

Is that intentional? If not, can anyone confirm?

@ryanwelcher
Copy link
Contributor

Is that intentional? If not, can anyone confirm?

Confirming this with 6.0 beta-2 with TwentyTwentyTwo. Adding 'blockTypes' => array( 'core/post-content' ) to one pattern had no effect. I needed add it to a second one.

@fabiankaegy
Copy link
Member

Is it correct that in 6.0 (beta 3) this is only available for the "Page" post type? :)

@ntsekouras
Copy link
Contributor

Is it correct that in 6.0 (beta 3) this is only available for the "Page" post type? :)

Yes.

@jorgefilipecosta
Copy link
Member Author

I want to +1 a desire for there to be a "simple programatic method to disable this functionality altogether". I have a feeling this will be an immediate piece of feedback.

It is possible to remove the functionality altogether programmatically using the following code sample (it is part of the dev note):

	$patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();
	foreach ( $patterns as $pattern ) {
		if (
			! empty($pattern['blockTypes'] ) &&
			in_array('core/post-content', $pattern['blockTypes'] )
		) {
			unregister_block_pattern( $pattern['name'] );
			$pattern['blockTypes'] = array_diff( $pattern['blockTypes'], array( 'core/post-content') );
			register_block_pattern( $pattern['name'], $pattern );
		}
	}

@paaljoachim
Copy link
Contributor

Testing WP 6.0 RC 1.
Twenty Twenty Two.
Local test site.
Gutenberg plugin is not active.

Currently a new page opens without showing the page pattern modal. I assume that there are no page patterns to choose from so that the new page opens without showing the modal.

I will also assume that at a later stage there will be added page patterns so that we might suddenly see the page pattern modal show up upon creating a new page.

@jorgefilipecosta jorgefilipecosta removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jun 17, 2022
@jameskoster jameskoster mentioned this pull request May 5, 2023
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.