WordPress Block Editor
Instructions for using the WordPress Block Editor
-
The WordPress Dashboard
The WordPress Dashboard is your jump-off point to managing your websites on inside.ewu.edu. It’s where you create and manage content, add form functionality, and create an attractive online presence. Access the Environment Go to https://inside.ewu.edu Click the red A-Z tab on the browser window's right side. Once the off-canvas panel is open, scroll down to click the link Websites(InsideEWU). You will be prompted to Sign In using your EWU NetID credentials. NOTE: If you are already authenticated through another system, this will not apply. Once authenticated, you will be directed to a My Sites page to see what websites you can access. You should see the website's title, a Visit link, and a Dashboard link for each website you can access. Click on the Dashboard link of the website you need to access. Authenticating to the WordPress Environment Access a Dashboard Once you have successfully authenticated, click the Dashboard link of the website you need to manage. Once on the dashboard of a specific website, you should see something similar to the image below. From here, you have access to everything you need to manage your website on inside.ewu.edu. A Typical WordPress Dashboard on inside.ewu.edu
-
Configuring Your WordPress Workspace
Creating a new page or post using the native block editor can feel overwhelming and almost baron compared to the traditional classic editor. But it's not confusing once you dig into it and configure it to your liking. The following configuration recommendations come from our struggles in trying to create the most effective workflow possible using the tools we have. Below is a simple visual illustration of how we work in the block editor. Log into your WordPress dashboard and open an existing page or create a new page to follow along with the steps below. With the block editor open, click the Settings icon to open the Settings panel. Click the Block tab. Click the Document Overview icon to reveal the list view of blocks. Navigate through the block list and observe how each block is highlighted. Review what options each block offers beneath the Block tab. For a larger image, right-click and select Open Image in New Tab
-
The Toolbar
By default, the toolbar in the block editor displays its editing tools near the top of the block you are working on. While helpful, it can sometimes become obtrusive while selecting a block. As you can see in the example below, certain smaller blocks can become challenging to select with your cursor in the content area when the toolbar overlays the block. You click into paragraph content. You can't easily select Headline 2 with your cursor. Rather, you must click the block name to select the Headline 2 block. In the next lesson, you will see how to configure the toolbar to your liking, depending on your needs. For a larger image, right-click and select Open Image in New Tab
-
The Toolbar: More Configurations
While some content managers prefer the default floating editor, others prefer to stick the toolbar to the top of the browser window while working in the editor. To do so, follow the steps and screenshot below. Click the three ellipses in the top right corner of the browser window to review the View panel. Click the Top toolbar option to fix the editor to the top of the editor window. Notice Spotlight mode that offers more focus on block content. Test it to see if it is useful for you. Notice Distraction Free mode as well. Test it to see if it is useful for you. As you can see, there are many configurations that you can use to help you be as effective as possible. For a larger image, right-click and select Open Image in New Tab
-
Document Overview Panel
The Document Overview panel allows you to browse the blocks and their order easily. It also allows you to organize the content exactly how you want. Click the Document Overview icon option to reveal the blocks and their positions. Click the three ellipses to the right of each block to view additional settings. Notice the content arrows. They are a great feature to organize your content easily. Also of note is the Duplicate feature, which can make it easy to lay out a content page. For a larger image, right-click and select Open Image in New Tab
-
The Settings Panel: Block Tab
While the Document Settings panel provides access to the block itself, the Block tab located under the Settings panel provides access to each setting specific to the block you've selected. In the screenshot below, we illustrate our recommended way to work with the block editor, walk you through the Settings panel, and illustrate how each block has different settings. While in the page editor, click on the Settings icon. Click on the Block tab to view its settings. Select one of the blocks under the Document Overview tool. In the example, we highlight a Container block. Note all the settings available to each block on the right side of the browser. For a larger image, right-click and select Open Image in New Tab
-
The Settings Panel: Page Tab
In addition to the Block tab options, specific page settings are available under the Page tab, which is also located under the Settings icon near the top right-hand side of the browser window. While in the page editor, click on the Settings icon. Click on the Page tab to view page settings. In this example, we want to disable the Content Title element by checking that box option. Once saved, the default page title will not be visible, and the banner title will now serve as the page title. For a larger image, right-click and select Open Image in New Tab
-
Working with Page Titles
Page Titles Page titles are essential to guiding visitors in and around your website(s) on inside.ewu.edu. In the following examples, we walk you through some of the most common scenarios you will encounter while managing page titles. Below is an example of a page title in a native default page. See the page title area. Note that the page title and the permalink should match. In the example below, the permalink should be changed to my-page-title. For a larger image, right-click and select Open Image in New Tab Adding a Default Page Title To add a default page title, go to Pages > Add New Page. Enter an appropriate page title. Click the Save draft button to save your work and preview your changes OR Click the Publish button to publish your finished page to the public and view your changes. For a larger image, right-click and select Open Image in New Tab Editing a Default Page Title While in the Edit Page screen, click on the title area and make the appropriate changes. Check the page's permalink to ensure the URL reflects the new page title. Remember: Changing the permalink changes the page URL and could break links directed to the original URL. In this example, we must change the permalink to the-workspace-page to match the new page title. Click the blue Update button and view your changes. For a larger image, right-click and select Open Image in New Tab Edit a Page Title Inside a Banner When a page has taken advantage of our EWU-branded banner patterns, it typically has the default page title hidden while the banner displays the new page title. The image below is a typical banner that is implemented. Steps to Follow While in the Edit Page screen, click on the default page title area and make the appropriate changes. Then click on the title area inside the banner and make the appropriate changes to match the default page title. Edit the permalink to reflect the new page title. Click the blue Update button and view your changes. For a larger image, right-click and select Open Image in New Tab Page Title Tips As you can see, managing page titles is pretty straightforward. But there are some points to remember, specifically when changing a page title or creating a new page with a banner. Check Your Permalinks When Changing Titles Always check the permalink on a page after you have changed its title to ensure consistency and content optimization. After all, you've worked hard to develop content, so you want to ensure search engines can find the information. If you have changed permalinks, double-check that your links still go where they should go and aren't broken. For a larger image, right-click and select Open Image in New Tab Hide/Display Titles When Configuring a Banner on a Page At some point, you may need to work on a page with a banner or want to incorporate a banner on your website. While we will delve deeper into this later in the course, it's important to understand how to hide/display the default page title when working with banners. While in the Edit Page screen, scroll down near the bottom until you see the section titled Layout and then the subsection titled Disable Elements. Check/Uncheck the Content Title checkbox and click the blue Update button. You should now see the results of your choice on a browser refresh. For a larger image, right-click and select Open Image in New Tab
-
Working with Text: Headings
Headings help to introduce new sections and organize the content on the page. They make your website more readable by humans, search engines, and web accessibility devices. You can add headings in several ways, most commonly using the block inserter. Click the Block Inserter icon. Create a new paragraph and click the Heading block. Once the Heading is dropped into place, give it an appropriate title. Keep in Mind Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can be used to provide in-page navigation. While not always possible, try to nest headings by their rank (or level). The most important heading has the rank 1 (), the least important heading rank 6 (). Headings with an equal or higher rank start a new section, and headings with a lower rank start new subsections that are part of the higher-ranked section. NOTE: You can add headings to your content area by clicking into a new paragraph and typing /h2, /h3, /h4, /h5, or /h6 and then Enter. For a larger image, right-click and select Open Image in New Tab References The Heading Block. (wordpress.org) Heading Accessibility. (W3C Initiative on Headings)
-
Working With Text: Paragraph Text
The paragraph block manages paragraph text, the basic building block of all content in WordPress. It allows you to add text content to a post or page and is the default block that appears when you create a new post or page. Besides adding text, the paragraph block offers various formatting options to customize text content. It lets you make the text bold, italics, and strikethrough. Additionally, you can add links, inline images, and highlights to the text content. The easiest way to add paragraph text is to click on the web page's body and start typing. When you press Enter, another paragraph begins. Easy right? If you prefer to use the Block Inserter, you will need to do the following: Click the Block Inserter icon to open the blocks menu. Click or drag the Paragraph block to the web page location. Configure your content in the new paragraph. For a larger image, right-click and select Open Image in New Tab Transforming Paragraph Text In addition to basic format options (bold, italic, hotlinks, etc.), you can transform a paragraph text block into many useful blocks, including headings, lists, quotes, and more. For a larger image, right-click and select Open Image in New Tab References The Paragraph Block (wordpress.org)