{"id":2872,"date":"2022-04-12T02:55:20","date_gmt":"2022-04-12T02:55:20","guid":{"rendered":"https:\/\/www.hostinger.com\/blog\/?p=2872"},"modified":"2022-10-12T13:37:28","modified_gmt":"2022-10-12T13:37:28","slug":"wordpress-pattern-creator","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/blog\/wordpress-pattern-creator","title":{"rendered":"WordPress Pattern Creator Is Now Available"},"content":{"rendered":"<p>In 2021, WordPress launched the <a href=\"https:\/\/wordpress.org\/patterns\" target=\"_blank\" rel=\"noopener\">pattern directory<\/a> to make creating a website with the Gutenberg editor even easier.<\/p><p>The directory consisted of pre-made block layouts created by developers that any user could copy and apply to their site.<\/p><p>Now, the pattern creator is available to all WordPress.org users. No coding knowledge is required to use this tool, so all WordPress users can contribute and help expand the pattern directory.<\/p><p>We will explain how to use the pattern creator and show you how easy it is to contribute to WordPress by submitting your patterns.<\/p><h3 class=\"wp-block-heading\" id=\"h-what-is-the-wordpress-pattern-creator\">What Is the WordPress Pattern Creator<\/h3><p>The WordPress pattern creator is a block editor platform accessible from the pattern directory.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"966\" height=\"346\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/create-new-pattern.png\/public\" alt='The WordPress pattern directory, where users can choose to \"Create a new pattern\"' class=\"wp-image-2873\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/create-new-pattern.png\/w=966,fit=scale-down 966w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/create-new-pattern.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/create-new-pattern.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 966px) 100vw, 966px\" \/><\/figure><\/div><p>The pattern creator is similar to the block editor in the WordPress admin panel. The main differences are the pattern setting panel to specify the pattern&rsquo;s title, description, categories, and keywords, and the <strong>Submit <\/strong>button instead of the <strong>Publish<\/strong> button.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1176\" height=\"663\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/pattern-creator-interface.png\/public\" alt=\"The interface of the WordPress pattern creator\" class=\"wp-image-2874\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/pattern-creator-interface.png\/w=1176,fit=scale-down 1176w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/pattern-creator-interface.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/pattern-creator-interface.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/pattern-creator-interface.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1176px) 100vw, 1176px\" \/><\/figure><\/div><p>Use the editor to create a block pattern for a specific website section by combining multiple blocks and customizing their visual design. While you don&rsquo;t have to design a full-page template, the pattern should not be too simple as it won&rsquo;t bring any value to other users.<\/p><p>Here are some great patterns created using the WordPress creator:<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wordpress.org\/patterns\/pattern\/pricing-table\/\" target=\"_blank\" rel=\"noopener\">Pricing table<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/patterns\/pattern\/quote\/\" target=\"_blank\" rel=\"noopener\">Quote section<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/patterns\/pattern\/about-me-cards\/\" target=\"_blank\" rel=\"noopener\">About me cards<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/patterns\/pattern\/contact-and-social-links\/\" target=\"_blank\" rel=\"noopener\">Contact us section<\/a><\/li><\/ul><h3 class=\"wp-block-heading\" id=\"h-how-to-use-the-pattern-creator-to-submit-your-patterns\">How to Use the Pattern Creator to Submit Your Patterns<\/h3><p>Once you&rsquo;ve entered the pattern creator, start designing new patterns by adding and customizing blocks. If you need some guidance, check out our tutorials on using the <a href=\"\/tutorials\/gutenberg-wordpress\">Gutenberg editor<\/a> and <a href=\"\/tutorials\/wordpress-blocks\">WordPress blocks<\/a>.<\/p><p>We recommend creating a pattern suitable for more than one of the available categories &ndash; <strong>buttons<\/strong>, <strong>columns<\/strong>, <strong>gallery<\/strong>, <strong>header<\/strong>, <strong>images<\/strong>, and <strong>text<\/strong>.<\/p><p>For example, let&rsquo;s create a subscription call-to-action section that we can submit under the buttons or text category.<\/p><ol class=\"wp-block-list\"><li>Add a <strong>cover <\/strong>block and write the call-to-action text. You can add a <strong>paragraph <\/strong>block inside the cover<strong> <\/strong>to write additional text.<\/li><li>Insert a <strong>button <\/strong>block inside the cover<strong> <\/strong>block area to create the CTA button.<\/li><li>Use the block toolbar and the <a href=\"\/tutorials\/web-design-tools\">web design tool<\/a> to customize each block&rsquo;s color, typography, or layout.<\/li><\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1409\" height=\"619\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/creating-wordpress-pattern.png\/public\" alt=\"Creating a pattern using the WordPress pattern creator.\" class=\"wp-image-2875\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/creating-wordpress-pattern.png\/w=1409,fit=scale-down 1409w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/creating-wordpress-pattern.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/creating-wordpress-pattern.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/04\/creating-wordpress-pattern.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1409px) 100vw, 1409px\" \/><\/figure><\/div><p>Don&rsquo;t forget to add the pattern&rsquo;s title, description, categories, and keywords. Click the <strong>submit<\/strong> button on the top-right corner of the page once you&rsquo;ve finished designing and follow the instructions on the submission prompt.<\/p><p>The WordPress team reviews all submitted patterns to ensure there are no copyright or trademark issues and that the patterns work as intended. So, it may take a few days to get your pattern approved. You&rsquo;ll get an email notification once it is published in the pattern directory.<\/p><h3 class=\"wp-block-heading\" id=\"h-tips-for-creating-a-good-wordpress-pattern\">Tips for Creating a Good WordPress Pattern<\/h3><p>Since the pattern creator is available for anyone with a WordPress.org account, the WordPress team carefully decides which patterns are worthy of being listed in the pattern directory. Thus, read the <a href=\"https:\/\/wordpress.org\/patterns\/about\/\" target=\"_blank\" rel=\"noopener\">pattern guidelines<\/a> to make sure you comply with the standards.<\/p><p>Here are some tips for creating an excellent WordPress pattern:<\/p><ul class=\"wp-block-list\"><li><strong>Combine various blocks.<\/strong> A great pattern should help users save time, as they won&rsquo;t need to build a complex section from scratch. Design a pattern using multiple blocks to ensure it is a great starting point for content customization.<\/li><li><strong>Put all root-level blocks together inside a group block.<\/strong> It makes moving the pattern around the block editor easier.<\/li><li><strong>Avoid placeholder texts. <\/strong>Don&rsquo;t use too many &ldquo;Lorem ipsum&rdquo; or &ldquo;Put your text here&rdquo; placeholders. Write usable text so that users don&rsquo;t have to create it from scratch.<\/li><\/ul><h3 class=\"wp-block-heading\" id=\"h-what-to-expect-from-the-pattern-creator\">What to Expect From the Pattern Creator<\/h3><p>The pattern directory should grow faster than ever with the WordPress pattern creator. Plus, the pattern directory may become one of the main resources for site creation, as the upcoming <a href=\"\/blog\/wordpress-6-0-what-to-expect-from-the-next-major-release\">WordPress 6.0 release<\/a> will emphasize the use of patterns in site editing.<\/p><p>However, this new feature still has some limitations. There are still some open issues in the pattern directory&rsquo;s <a href=\"https:\/\/github.com\/WordPress\/pattern-directory\/issues\" target=\"_blank\" rel=\"noopener\">GitHub repository<\/a>. For example, there&rsquo;s a bug that prevents the query loop block from working correctly.<\/p><p>As more feedback comes from the users, we expect the developers to continue improving the pattern creator.<\/p><p>Try the pattern creator now, and if you find any issues or have ideas on how to improve it, create an issue on the tool&rsquo;s GitHub repository.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In 2021, WordPress launched the pattern directory to make creating a website with the Gutenberg editor even easier.<\/p>\n<p>The directory consisted of pre-made block layouts created by\u2026<\/p>\n","protected":false},"author":172,"featured_media":2410,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2365],"tags":[],"hashtags":[],"class_list":["post-2872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/posts\/2872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/users\/172"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/comments?post=2872"}],"version-history":[{"count":3,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/posts\/2872\/revisions"}],"predecessor-version":[{"id":3932,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/posts\/2872\/revisions\/3932"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/media\/2410"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/media?parent=2872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/categories?post=2872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/tags?post=2872"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/hashtags?post=2872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}