Exercise: Building out the Articles

Instructions

Styling the Post Title

Using the interface

  1. Center the text.
  2. Styles:
    1. Set the Link color to Contrast, and the Hover to Accent.
    2. Set the font size to Extra Extra Extra Large.
    3. Set the margin bottom to level 3.

Using theme.json

Inside of styles, under blocks:

  1. Duplicate the existing Site Title style.
  2. Rename the selector to core/post-title.
  3. Remove the unneeded typography entry for the Post Title.

Styling the Featured Image

Add level 3 margin bottom.

Styling the Article Footer

Styling the containers

  1. In the block outline, find the Group named Article Footer.
  2. Toggle on Inner blocks use content width.
  3. Add a new Group block inside of Article Footer.
  4. Drag the Post Date into this new Group block.
  5. Add a 1px top border using the Contrast / Three color.
  6. Add a level 1 padding top.
  7. Add a level 2 margin top.

Adding the content blocks

  1. Add a Paragraph with "Posted on" before the Post Date.
  2. Add a Paragraph with "•" after the Post Date.
  3. Add a Paragraph with "by"
  4. Add the Author Name block, and toggle on Link to the author archive.
  5. Select the Post Date, and toggle on Link to post.

Implementing the alignment

  1. Transform the Group block containing the content blocks into a Row.
  2. Set the Block Spacing of this Row to 8 pixels.
  3. Set the Text to Contrast / Two, ensuring that the Links stay with the Highlight color.




Complete and Continue