Exercise: Building out the Articles
Instructions
Styling the Post Title
Using the interface
- Center the text.
- Styles:
- Set the Link color to Contrast, and the Hover to Accent.
- Set the font size to Extra Extra Extra Large.
- Set the margin bottom to level 3.
Using theme.json
Inside of styles
, under blocks
:
- Duplicate the existing Site Title style.
- Rename the selector to
core/post-title
. - 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
- In the block outline, find the Group named Article Footer.
- Toggle on Inner blocks use content width.
- Add a new Group block inside of Article Footer.
- Drag the Post Date into this new Group block.
- Add a 1px top border using the Contrast / Three color.
- Add a level 1 padding top.
- Add a level 2 margin top.
Adding the content blocks
- Add a Paragraph with "Posted on" before the Post Date.
- Add a Paragraph with "•" after the Post Date.
- Add a Paragraph with "by"
- Add the Author Name block, and toggle on Link to the author archive.
- Select the Post Date, and toggle on Link to post.
Implementing the alignment
- Transform the Group block containing the content blocks into a Row.
- Set the Block Spacing of this Row to 8 pixels.
- Set the Text to Contrast / Two, ensuring that the Links stay with the Highlight color.