Add patterns list

[renatho]

Part of #5130

Changes proposed in this Pull Request

• It adds the patterns list component to the editor wizard.
  • It still doesn't include the steps integration, and the styles for the title and the paragraph before the list.
• Known issue: BlockPreview not loading properly in WP 5.8 #5165
• I'm also adding another issue as low priority to improve the experience with a loading while the thumbnails are mounted.

Testing instructions

• Add the following code to your site to have some Sensei patterns:

  See the code

    add_action(
        'init',
        function() {
            register_block_pattern_category(
                'sensei-lms',
                array( 'label' => __( 'Sensei LMS', 'sensei-lms' ) )
            );
  
            register_block_pattern(
                'sensei-lms/my-awesome-pattern',
                array(
                    'title'         => __( 'Two buttons', 'sensei-lms' ),
                    'blockTypes'    => array( 'core/post-content' ), // TO TEST PAGES EDITOR WITH LAST VERSION OF GUTENBERG
                    'categories'    => [ 'sensei-lms' ],
                    'viewportWidth' => 500,
                    'content'       => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'sensei-lms' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'sensei-lms' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
                )
            );
  
            register_block_pattern(
                'sensei-lms/powered-by-wordpress',
                array(
                    'title'         => __( 'Powered by WordPress', 'sensei-lms' ),
                    'blockTypes'    => array( 'core/post-content' ), // TO TEST PAGES EDITOR WITH LAST VERSION OF GUTENBERG
                    'categories'    => [ 'sensei-lms' ],
                    'viewportWidth' => 500,
                    'content'       => '<!-- wp:group -->
                                    <div class="wp-block-group">
                                    <!-- wp:heading {"fontSize":"large"} -->
                                    <h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color">Hi everyone</span></h2>
                                    <!-- /wp:heading -->
                                    <!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
                                    <p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>
                                    <!-- /wp:paragraph -->
                                    <!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
                                    <p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress2aaaaa</p>
                                    <!-- /wp:paragraph -->
                                    </div><!-- /wp:group -->',
                )
            );
  
            register_block_pattern(
                'sensei-lms/powered-by-wordpress2',
                array(
                    'title'         => __( 'Powered by WordPress2', 'sensei-lms' ),
                    'blockTypes'    => array( 'core/post-content' ), // TO TEST PAGES EDITOR WITH LAST VERSION OF GUTENBERG
                    'categories'    => [ 'sensei-lms' ],
                    'viewportWidth' => 500,
                    'content'       => '<!-- wp:group -->
                                    <div class="wp-block-group">
                                    <!-- wp:heading {"fontSize":"large"} -->
                                    <h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color">Hi everyone</span></h2>
                                    <!-- /wp:heading -->
                                    <!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
                                    <p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>
                                    <!-- /wp:paragraph -->
                                    <!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
                                    <p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress2aaaaa</p>
                                    <!-- /wp:paragraph -->
                                    </div><!-- /wp:group -->',
                )
            );
  
            register_block_pattern(
                'sensei-lms/my-awesome-pattern2',
                array(
                    'title'         => __( 'Two buttons2', 'sensei-lms' ),
                    'blockTypes'    => array( 'core/post-content' ), // TO TEST PAGES EDITOR WITH LAST VERSION OF GUTENBERG
                    'categories'    => [ 'sensei-lms' ],
                    'viewportWidth' => 500,
                    'content'       => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'sensei-lms' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'sensei-lms' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
                )
            );
        }
    );
  

• Create a new course or lesson and see the modal.

• Click in the patterns, and check it being applied to the page (notice that it still doesn't close the wizard process, since we need to tweak the title and description). It's part of another issue.

Screenshot / Video

Screen.Recording.2022-05-19.at.18.46.41.mov

[fjorgemota]

Looks good and works well!

Tested on WordPress 5.9, with the code mentioned in the description added using the Code Snippets plugin.

I'm not 100% sure if this is expected, but when testing it here, if I click to close the modal, the post content is reverted AGAIN to the original content that Sensei uses. Is this a known issue too, @renatho?

By the way, I was really worried because I first tested this PR on WP 5.7, which doesn't support patterns, and the whole WordPress editor crashed out of nowhere. But that was my mistake, in the end. On WP 5.9 it works perfectly. =)

[fjorgemota]

Really nice touch of accessibility here! Wow! :D

[renatho]

I'm not 100% sure if this is expected, but when testing it here, if I click to close the modal, the post content is reverted AGAIN to the original content that Sensei uses. Is this a known issue too, @renatho?

Yeah! It's expected for now because it'll be implemented as part of this issue. When the user click on a pattern, it will replace the texts, and close the modal. I just added that feature while clicking on the patterns for now to illustrate part of the future behavior. 😉

By the way, I was really worried because I first tested this PR on WP 5.7, which doesn't support patterns, and the whole WordPress editor crashed out of nowhere. But that was my mistake, in the end. On WP 5.9 it works perfectly. =)

haha.. Yeah! It will support WP 5.8+