How to transform your WordPress site with Full Site Editing (FSE)

How to change navigation with FSE

1. From your admin dashboard, go to Appearance > Editor > Navigation.
2. Click anywhere on the page preview to open the Gutenberg editor.
3. Click the nav bar to open the customizer on the right, where you can choose a premade header design.

4. If these don’t cut it, you can click on the nav bar to select it then click the Styles icon at the top right.

5. We’re going to make the following adjustments:
– Go to Typography and change the fonts for all elements to IBM Plex Mono.
– Go to Colors and change the Background and Text colors.

6. Save your changes then visit your site to verify that it updated.

How to edit global site styles with FSE

1. From the dashboard, go to Appearance > Editor > Styles.
2. Cycle through the available styles to see if any one of them works for you.

3. If you don’t like these, click the preview to open the full editor, then click the Styles icon at the top right.

4. Make changes here to change global styles. For this walkthrough, here’s what we’ll do:
– Go to Typography and change all heading fonts to IBM Plex Mono and text to DM Sans.
– Go to Colors and change the text, heading, and background colors.
– Go to Layout and change the left and right padding to 4.

5. Save your changes and load a couple of pages on your site, e.g. the homepage and a blog post, to verify that the styles were applied globally.

How to use block patterns with FSE

Block patterns in WordPress are predefined layouts that combine multiple blocks (like text, images, or buttons) into a single reusable unit.

They allow you to quickly create complex designs without having to build each element from scratch. They’re available in the block editor and can be inserted with a few clicks, saving time and ensuring consistency across pages.

You can create custom reusable block patterns to fit specific needs or use ones from the WordPress pattern library.

To use an existing pattern in the FSE, click the + icon at the top left, then switch to the Patterns tab. For instance, here’s how to add one of the premade CTA patterns:

You can also create your own patterns and use them in the Gutenberg editor:

1. Open the editor using any method. Here, we’re going to access it by creating a new page.

2. Add the blocks you want to use, style and arrange them as needed. For this walkthrough, here’s what we’ll do:
– Use a 50/50 column block as the parent container.
– Change the container content to align along the middle.
– Add an image block to the left and a paragraph to the right.
– Apply a duotone filter to the image.
– Add a button below the parent block and center justify it.

3. Drag your cursor to select all the blocks you want to use in the pattern.

4. Click the three vertical dots then click Create pattern.

5. Give it a name and choose whether you want it to be synced or unsynced. A synced pattern will update all instances if you make changes to one, whereas an unsynced pattern behaves like an independent block.

6. Load up the FSE and search up the pattern using the name you gave it.