You can use the List block to create a bulleted or numbered list.  To add a List block, follow the steps below. Click the Block Inserter icon. Click or drag the List block into position. Add content to your new List block. REMEMBER: You can also type /list and hit enter in a new paragraph block to add one quickly. For a larger image, right-click and select Open Image in New Tab References The List Block (wordpress.org)

For simple tables, you can use the Tables block to create simple yet attractive tables on your website.  To do so, follow the steps below. Click the Block Inserter icon. Click or drag the Table block from the block list. Configure your table once you have it in position. NOTE: For more complex tables with search and sorting capabilities, you can use TablePress, which is already freely available on all websites hosted on inside.ewu.edu. For a larger image, right-click and select Open Image in New Tab You can also add a table via a new paragraph by: Click into a new paragraph, type /table, and press Enter. Configure your new table per your requirements. Click the blue Update button. For a larger image, right-click and select Open Image in New Tab References The Table Block (wordpress.org)

Working with images in the block editor substantially differs from what you may have used to in the WYSIWYG classic editor.  The image block can be added to a page by following the instructions below. Click the Block Inserter icon. Click or drag the Image block to its desired position on the web page. Select Upload, Media Library, or Insert from URL.  Upload and Media Library will let you add or choose media from your library and embed it on your page.  If you select the Insert from URL option to add your image, you will see a button with an upward-facing arrow. If you click on it, the image will be imported into your site’s local Media Library, and the URL on the image block will be automatically updated to point to the new file. Alternatively, you can type /image in a new paragraph area, press enter, and be presented with the options illustrated in Step 3 above. Remember - Customizing the image attachment details, such as the Title, Caption, Alt Text, and Description, in the Media Library window can also be helpful for SEO and future navigation of your media library. For a larger image, right-click and select Open Image in New Tab

In the previous lesson, you learned the basics of inserting an image into your website's content area.  This lesson will discuss arranging those images in the content area.  Below, you can see several image alignment options once an image is placed.  In the example below, we have loaded an image and are right-aligning it so the text will wrap naturally around it. For a larger image, right-click and select Open Image in New Tab After setting the alignment, we can: Set the image size to medium to accommodate text wrapping.  Toggle Expand on click for a modal image action. This is a nice effect but optional if the image doesn't merit it.  Experiment with alignments and image sizes to see what works best for your needs. For a larger image, right-click and select Open Image in New Tab References The Image Block (wordpress.org) Inserting Images into Posts and Pages (wordpress.org) Image Accessibility (W3C Initiative on Images)

Replacing an image can give your web page a much-needed facelift without much work.  Thankfully, our block editor makes image replacements straightforward. With the editor open, click the image you want to replace. Click the Replace link in the toolbar. Make sure to edit your alternate text area. Click the blue Update button and preview the change. For a larger image, right-click and select Open Image in New Tab References  The Image Block (wordpress.org)  Inserting Images into Posts and Pages (wordpress.org)  Image Accessibility (W3C Initiative on Images)

The Gallery block allows you to easily add multiple photos and automatically arrange them in a gallery. You can control the number of columns and the size of the images in the gallery.  The Gallery block can be added to a page by clicking on the Block Inserter (+) icon and selecting the Gallery block.  Alternatively, you can type /gallery and press Enter. Click on the Block Inserter. Click or drag the Gallery block into position. Once in position, select the images for your gallery as illustrated in the animation below. For a larger image, right-click and select Open Image in New Tab References The Gallery Block (wordpress.org) Image Accessibility (W3C Initiative on Images)

We've added Patterns to our toolbox to help content managers create consistent page layouts and features.  Patterns are templates or features like banners, buttons, accordions, and tabs.  A big advantage of using patterns is that the padding and space settings are mainly done for you.  This means that your website will be usable on desktops, tablets, and mobiles. Click the Block Inserter. Click the Pattern Library block. You should see Pattern choices in a popup modal window. For a larger image, right-click and select Open Image in New Tab For a larger image, right-click and select Open Image in New Tab On the popup modal window, you should see twelve patterns: banners, page layouts, sections, and basic features, including accordions, tabs, and buttons. Typically, pages are designed from the top down. With this in mind, we can list the order of how the patterns should be used. Banner Patterns prefaced with "Banner -" are usually positioned at the top of the page and used for the page title to replace the default page title.  Listed in order from simple to more complex, our current banners include: Banner - Page Title and Summary Banner - Page Title with Buttons Banner - Page Title with Image and Buttons Banner - Small Page Title with Background Image and Buttons Banner - Large Page Title with Background Image and Buttons Page Layout Patterns prefaced with "Page Layout -" are inserted after you choose the Banner block.   Page Layout - Full-Width Text Page Layout - With Custom Sidebar Sections Section - Team Section - Four Column Misc Accordions Tabs Button

Banners can be accessed through the Patterns block and are typically used to replace the default page title and to give the page a more attractive appearance.  All five of our banners work in the same basic way.  Let's create a fresh new page, title it, and then replace the default title with a banner. Once you've created a new page, give it a title and follow the instructions below: Click the Block Inserter. From the block menu, click Patterns. In this example, we will select the Banner titled "Banner - Page Title with Image and Buttons" from the modal window. This should replace the first paragraph block. Click the blue Update button. For a larger image, right-click and select Open Image in New Tab Your web page should resemble the image below. For a larger image, right-click and select Open Image in New Tab If you preview this web page, you will find that while it is placed correctly, some minor configuration changes will ensure the banner looks good and the content below will suit it. Click the Settings icon.  Click the Page tab.  Select No Sidebars from the Sidebar Layout menu.  Select Full Width from the Content Container menu.  Select the checkbox titled Content Title from the Disable Elements list.  Click the blue Update button and preview your changes. For a larger image, right-click and select Open Image in New Tab Your web page should now resemble the image below.  Notice the background color extends to the menu.  Notice the background color extends to the footer. * This is before adding our content area. For a larger image, right-click and select Open Image in New Tab To add the body content pattern, do the following:  Click the Add Block icon. Click the Pattern Library icon.  From the Pattern modal, click the option Page Layout - Full-Width Text  Click the blue Update button. For a larger image, right-click and select Open Image in New Tab Once saved, you can preview your new page with the banner and some sample body content configured to be viewable on desktop, tablet, and smartphone. For a larger image, right-click and select Open Image in New Tab

The accordion pattern can display collapsible content and present much information with a small amount of screen real estate.  An accordion allows users to toggle between hiding and showing content, and each section can be expanded or collapsed by clicking the accordion title. Using patterns, you can place a ready-made accordion branded with demo content that you can replace with your own in a couple of steps.  Open or create a new page to which you want to add the accordion. Click into the body content area to choose a new block. Click on the Block Inserter icon to expand the block menu. Click the Pattern Library block to position it into the new paragraph. Select the Accordions block. Configure the Accordion and save your changes. For a larger image, right-click and select Open Image in New Tab Once the Accordion block is in place, you must configure the content.  Below, you will find 1) the placed accordion block followed by the structure of each tab example in the demo.  Once you have configured the number of tabs you'll require in the accordion and its contents, make sure to 2) click the blue Update button. For a larger image, right-click and select Open Image in New Tab HINT: If you need more than three tabs for the Accordion block, Click on one of the three ellipses on the right side of one of the items.  (In our example, it is called Accordion Item Three.) Select Duplicate from the pop-out menu.  This should provide you with a copy of Accordion Item Three that you can rename and edit. For a larger image, right-click and select Open Image in New Tab Reference Accordion Overview (GenerateBlocks.com)

A tabbed layout can be another effective way to present a large amount of content in a relatively small space.  Using patterns, you can place a ready-made tab branded with demo content that you can replace with your content in a couple of steps.  Open or create a new page to which you want to add the tabs. Click into the body content area to choose a new block. Click on the Block Inserter icon to expand the block menu. Click the Pattern Library block to position it into the new paragraph. Select the Tabs block. Configure the Tabs and save your changes. For a larger image, right-click and select Open Image in New Tab Again, once the Tabs block is in place, you must configure the content. Below, you will find 1) the placed tab block followed by the structure of each tab example in the demo. Notice that in our example, there is a 2) tab title and a corresponding 3) tab content that combine to make the interface work. For a larger image, right-click and select Open Image in New Tab Reference Tabs Overview (GenerateBlocks.com)