{"id":2749,"date":"2024-02-06T10:20:54","date_gmt":"2024-02-06T15:20:54","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2749"},"modified":"2024-09-18T20:31:21","modified_gmt":"2024-09-19T00:31:21","slug":"module-6-understanding-patterns","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-6-block-patterns\/module-6-understanding-patterns\/","title":{"rendered":"Understanding Block Patterns"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Understanding Block Patterns\n <\/h1>\n \n \n \n\n\n

Module 6.1 \u2013 Mastery: Patterns: Introduction<\/p>\n\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n\n

\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n What is a Block Pattern?\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Synced vs. Non-synced Patterns\n <\/a>\n <\/div>\n\n
\n \n
\n
\n \n 2.1\n <\/span>\n\n \n Synced Pattern\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.2\n <\/span>\n\n \n Non-Synced Pattern\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 4.\n <\/span>\n\n \n Try it Out!\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

What is a Block Pattern?<\/h2>\n\n\n\n

Patterns refer to pre-designed layouts that allow you to easily create consistent and reusable content on your website. They can include one block or a combination of blocks.<\/p>\n\n\n\n

Patterns help streamline your content creation process by providing you with ready-made designs for common page elements such as headers, and various section layouts.<\/p>\n\n\n\n

Synced vs. Non-synced Patterns<\/h2>\n\n\n\n

There are two different kinds of patterns: synced<\/strong> and non-synced.<\/strong> They both solve a similar problem -providing users with ways to easily add commonly used blocks.<\/p>\n\n\n\n

However, they are quite different from each other.<\/p>\n\n\n\n

The biggest difference is that if you make a change to a synced pattern, it changes the pattern on every page or post you\u2019ve used it on.<\/p>\n\n\n\n

Synced Pattern<\/h3>\n\n\n\n

A synced pattern is useful to lay out content that will be exactly the same everywhere on your site. It likely does not change often and when it does, you want the changes to be sitewide.<\/p>\n\n\n\n

For example, you might use a synced pattern for: <\/p>\n\n\n\n

    \n
  • A newsletter signup<\/li>\n\n\n\n
  • Asking users to follow you on social media at the end of blog posts<\/li>\n\n\n\n
  • Adding calls-to-action at the end of pages or posts (for example – register for a particular event or program)<\/li>\n\n\n\n
  • Forms – such as feedback or contact, that may appear on a few pages<\/li>\n\n\n\n
  • Seasonal page elements or announcements<\/li>\n<\/ul>\n\n\n\n

    Important – Changing a synced pattern<\/strong><\/p>\n\n\n\n

    When you create a synced pattern, any changes that you make to the pattern will cascade <\/em><\/strong>t<\/em><\/strong>h<\/em><\/strong>r<\/em><\/strong>o<\/em><\/strong>u<\/em><\/strong>g<\/em><\/strong>h<\/em><\/strong>o<\/em><\/strong>u<\/em><\/strong>t<\/em><\/strong> your entire site to wherever the pattern is implemented.<\/em><\/strong> This is an important distinction to keep in mind as every change may affect several pages across your website.<\/p>\n\n\n\n

    Non-Synced Pattern<\/h3>\n\n\n\n

    A non-synced pattern provides a foundational set of blocks that you can use as a starting point (or template) to lay out content and then customize as needed. <\/p>\n\n\n\n

    For example, you might use a non-synced pattern for: <\/p>\n\n\n\n

    Module pages on a training site – on this site, we have a pattern that includes blocks for the intro, Step-by-Step, a training video and video transcript, and Try it Out exercises. <\/p>\n\n\n\n

      \n
    • Program pages<\/li>\n\n\n\n
    • Services that your department offers<\/li>\n\n\n\n
    • Research projects<\/li>\n<\/ul>\n\n\n\n

      Important – Changing a Non-Synced Pattern<\/strong><\/p>\n\n\n\n

      Changes that you make to a non-synced pattern or to a page that contains a non-synced pattern are localized. They will not affect any other pages or posts where the pattern is used. <\/p>\n\n\n\n

      Video Tutorial<\/h2>\n\n\n\n