Getting Started
Practice makes perfect! Try navigating our Gutenberg clone site.
This is a guide covering how to use Edith Lando’s Gutenberg website and also how, where, and what to put in entries for the site. We know it may seem overwhelming but with this guide, you should have everything you need to make the process a breeze. Whenever possible, be sure to use existing code templates from published pages as opposed to creating a page from scratch.
Please note that this guide assumes familiarity with WordPress’s Classic editor (i.e. same as what Edith Lando has been using in 2022), and serves to highlight navigation differences in WordPress’s Gutenberg.
Required Configurations [Click to expand images]
Same as the Classic version of WordPress we’ve been using, the top navigation bar (‘+ New’) allows us to create a new Post, Page, and everything else in between.
– By pressing on the three dots, you can switch between the visual and code editors.
Setting up your Preferences
– Step 1: Click the three dots and scroll down to ‘Preferences’
– Step 2: Preferences > Blocks
– Step 3: Enable all visible blocks by making sure they are selected
– Step 4: Preferences > Panels
– Step 5: Ensure that everything in the ‘Document settings’ and ‘Additional’ sections are enabled.
Note: A page reload is required. Please click the ‘Enable & Reload’ button.
Pages and Posts
-
Want to see all of the organization’s content? Press on the WordPress icon as shown to go to the dashboard. Just like before, you can upload images and create forms / tables / widgets on the left sidebar. After you click on the WordPress icon — to change a URL (i.e. slug), please hover over the title of the post in question, then press ‘Quick Edit’. From there, the slug can be edited.
-
Custom Fields, CSS, and JavaScript are in similar locations compared to WordPress Classic, which is beneath the post content (so long as the required configurations are set up).
-
Excerpt, Visibility and Featured Image are now located on the right-hand side in the page or post tab.
-
There are no changes in how these selections are used.
-
To preview your changes, please select ‘Preview’ from the top-right. ‘Preview in new tab’ is used.
-
A key difference in this WordPress variation is the use of blocks. Clicking on either ‘+’ sign (as shown) will lead you to the same menu. From making tables, galleries, to drop-down accordions, the Gutenberg editor allows for a quick low-code implementation of key site features. Try experimenting with different blocks to see what best suits your needs!
-
Some helpful resources are as follows:
