Step 1: Set the global Content and Wide Size

1. Open the theme.json in the editor.
2. Add a settings key at the root. The value is an object.
3. Add a layout key inside of settings. The value is an object.
4. Add a contentSize key inside of layout, and set the value to 520px.
5. Add a wideSize key inside of layout, and set the value to 750px.
6. Verify that the content and wide size are working in the Content Editor.

Step 2: Use the Content Size for the Content block

1. In the Site Editor look for the Content block in the Index template.
2. Select the block and toggle Inner blocks use content width in the settings sidebar.
3. Verify that the sizes are working on the frontend.

Step 3: Implement the Article Containers

Article wrapper

1. Add the Title, Content, and Date blocks into a Group block.
2. Toggle the content width off.
3. Set the HTML element to <article>.
4. Name the block "Article".

Article Header

1. Inside of the Article Group, add a new Group, and add the Title into it.
2. Toggle the content width off.
3. Set the HTML element to <header>.
4. Name the block "Article Header".

Featured Image

1. Add the Featured Image block after the Article Header block.
2. Move the Content block below the Featured Image.

Article Footer

1. Inside of the Article Group, add a new Group, and add the Date into it.
2. Toggle the content width off.
3. Set the HTML element to <footer>.
4. Name the block "Article Footer".

Template Structure