Merge pull request #7 from bcgov/feature/descw-2510-Add-documentation…

…-for-header-template-

added patterns docs

documentation/docs/.vuepress/config.js

@@ -28,9 +28,11 @@ export default defineUserConfig( {
         sidebar: [
             // SidebarItem
             {
-                text: 'Getting Started',
+                text: 'Site Editor',
                 collapsible: true,
-                children: [],
+                children: [
+                     "/guide/SiteEditor/Patterns"
+                ],
             },
         ],
     } ),

documentation/docs/guide/SiteEditor/Patterns.md

@@ -0,0 +1,43 @@
+# Patterns
+
+## Template Parts
+### How to Add a Template Part by Category
+
+To add a template part, create an `.html` file in the `parts` folder that represents your template part. For example, let's create a header template part called `header-site-title.html`.
+
+#### Getting Started with a Template Part
+
+##### Step 1: Create the Look and Layout
+Create the look and layout you want inside a group block.
+
+##### Step 2: Copy the Code
+Switch to code view and copy the code to your clipboard.
+
+##### Step 3: Paste the Code
+Paste the code into your `.html` file.
+
+#### Alternative Source of Starter Template Parts
+
+You can also use the WordPress pattern directory as a source of starter template parts: https://wordpress.org/patterns/
+
+#### Registering the Template Part
+
+Once the code is added to your template part `.html` file, edit the `theme.json` file to register the template part.
+
+### Example: Adding a Header Template Part
+
+Here's an example of how to add multiple headers to the header category of the template parts for the site editor:
+
+```json
+"templateParts": [
+  {
+    "name": "header-no-site-title",
+    "title": "Header No Site Title",
+    "area": "header"
+  },
+  {
+    "name": "header-site-title",
+    "title": "Header Site Title",
+    "area": "header"
+  },
+]