This post is the twentieth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there.
Overview
Building off of the last call for testing, this effort includes both some new and some repeat items that have continued to be iterated upon. In particular, browse mode’s design continues to evolve with a clearer edit button and design of the currently active template. Tied to this, the new UX for the navigation block has received numerous improvements as work is underway to move the option out of experimental. Taken together, this test helps underscore just how much a single theme allows you to do and how the Site Editor tools are evolving to make quick customization increasingly intuitive.
New items to test:
- Push changes to Styles to apply individual block stylings globally.
- Add an option to import widgets from sidebars as a pathway for importing content from Classic themes in the Site Editor.
Repeated from previous times:
- Reorganizing the Site Editor to introduce browse mode, offering an easier way to navigate between content in the site editing experience.
- Introduce a new UX for the navigation block where changes (adding new menu items, creating a new menu, etc) can be made from within the block settings sidebar.
- Split block tools between “settings” and “appearance” to make blocks with numerous controls easier to configure and customize.
- Offer a way to view a document containing all blocks and styles with the Stylebook allowing for changes to Styles to be seen more broadly.
- Color randomizer that allows you to quickly switch between generated palettes.
As with last time, this post will be updated to the latest version of Gutenberg so the latest changes can be tested ahead of the 6.2 release cycle for a faster and more accurate feedback loop.
Framing
To ground this experience a tiny bit more, let’s pretend you’re switching over from a Classic theme to a Block theme. After switching, you will need to import the widgets settings before re-imagining the homepage of the site, including the navigation. You’ll end by exploring various ways to style the site across different templates, both by using the Style Book and by editing blocks individually before pushing those changes globally. Your aim is to make the site look as different as possible a few times over until you find a version you’re happy with. Imagine this is your way of exploring the reaches of what’s possible with the Site Editor, all while using a single theme!
Testing Instructions
To use a prebuilt test site:
- Open this link only once: https://app.instawp.io/launch?t=fse-call-for-testing-20
- Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created.
- This will launch a site for you to use for up to 24 hours. Select “Magic Login” to log in to the wp-admin dashboard.
- Save the link to your site so you can access it again during the test.
To set up your own test site:
- Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
- Install and activate the Twenty Twenty Three One by going to Appearances > Themes.
- Install and activate Gutenberg 15.0. From there, head to Gutenberg > Experiments and turn every experiment except for “Zoomed out view”.
- Head to Tools > Import and import this file to have access to the same content as above. From there, create a simple menu and add a few widgets.
If you have any issues with manual setup, just comment on the post or ping me (@annezazu) in WordPress.org slack.
Switch your site
- Explore your site and feel free to add in more personalized items, whether by adding or customizing menus under Appearance > Menus or more widgets under Appearance > Widgets.
- When you’re ready, head to Appearance > Themes and select “Activate” next to the Twenty Twenty-Three theme.
- Head to Appearance > Editor (beta) to be brought into the browse mode experiment in the Site Editor.
- Click through the different templates and template parts to view the various parts of your site. Eventually, select your Home template and choose the option to “Edit”. Notice that your previously created menu was automatically imported.
Import your widgets and customize your navigation
- Using List View, select your Footer Template Part and delete it.
- Add a new Template Part block, give it a name related to footer, and choose the option to “Start Blank”.
- Open the block settings and expand the Advanced section. Under “IMPORT WIDGET AREA”, select the widgets section you’d like to import and click “Import”.
- After importing, customize this new footer further as you’d like. Explore using design tools, using group/row/stack variations, and more.
- Once done, select the Navigation block and change a few things as you see fit. For example, you can: move some of the sub menu items to top level items, change the names of a few of the menu items, adjust the spacing between items, and customize the mobile display as you see fit.
- Save changes.
Find your style
- Open Styles and select “Browse Styles”.
- Open the Style Book by selecting the icon that looks like an eye from the main Styles interface and switch between various style variations while viewing how it impacts your site. Here’s a screenshot in case it’s helpful. This will open up an interface called the “stylebook” where you can see the styles for every block displayed. You can click that icon to toggle this option on/off as you’d like.
- After selecting a style variation you like, head back to the main Styles interface and select “Colors”. From there, choose the “Randomize colors” option to change the colors further.
- After exploring the “Randomizer colors” option, head back to the main Styles interface and select “Blocks”. From there, choose a block with a style variation, like Button (not Buttons!) or Social Icons or Site Logo. You can then edit that variation to your liking globally.
Switch it up (again and again)
- Now that you have explored browsing Templates and Template Parts, the Style Book, customizing the Navigation block, and using the color randomizer, use this experience to switch up your site further. To do so, open a template, like the Single or Search template, and edit an individual block, like the Post Title or Featured Image.
- After editing the block to your liking, open the Settings tab, expand the “Advanced” section, and choose the option to “Apply globally”.
- Save changes and repeat this process a few times as you have time across templates and different blocks, relying on the Stylebook or Browse mode as needed to get a larger sense of your site. Try to make your site look as different as possible each time.
Bonus: Use patterns as much as you’d like as you customize your site! You can do this by adding patterns directly or by using the “replace” option in blocks like the Query Loop or Template Part.