Instructions

Styling the Header using the interface

Adding the borders

1. Add a Group block inside of the Header template part.
2. Group settings: Toggle the Inner blocks use content width Layout setting off.
3. Drag the Site Title block into this Group.
4. Group Styles:
   1. Set the Block Spacing to 0px.
   2. Add a 5px top border using the Accent color.
   3. Add a 1px bottom border using the Contrast / Three color.

Adding the spacing around the Site Title

Add a level 3 padding top and bottom to the Site Title block.

Implementing the navigation

1. Add a Group inside of the first Group we added to the Header template part.
2. Group settings: Toggle the Inner blocks use content width Layout setting off.
3. Group Styles:
   1. Add a 1px top border using the Contrast / Three color.
   2. Add a level 1 padding top and bottom.
4. Add a Navigation block into this Group.

Styling Navigation blocks

1. Open the Styles panel.
2. Go to Blocks.
3. Search for Navigation.
4. Set the following styles:
   1. Letter case: uppercase
   2. Appearance: bold

Aligning navigation items

1. Inspect the Navigation block
2. In the Layout Settings, under Justification, set Justify Items Center.

Implementing Block Type styles in theme.json

In theme.json, under styles, blocks:

1. Add a core/site-title selector.
2. Add an elements section inside of core/site-title.
3. Add a link section inside of elements.
4. Add a typography section inside of link.
5. Set textDecoration to none.
6. A a color section inside of link.
7. Add a text key, and set it to var(--wp--preset--color--accent)

Styling the Footer

Adding the borders

1. Add a Group block inside of the Footer template part.
2. Group settings: Toggle the Inner blocks use content width Layout setting off.
3. Drag the paragraph into this Group.
4. Group Styles:
   1. Set the padding top to level 1.
   2. Add a 1px top border using the Contrast / Three color.
   3. Add a 5px bottom border using the Accent color.