Gutenberg Content Blocks
The blocks live in the center of the page, the block settings can be found in the right sidebar. Learn more about navigating the Gutenberg editing environment.
First Time Editing in WordPress
When your site was updated to the new editor in the summer of 2019, all of your content was added into the “classic” block. This classic block functions just like the old editing environment. If you feel more comfortable, feel free to continue using this classic editor. However, be aware that the classic editor could be deprecated in the future.
If you want the classic block to be quickly converted into the new blocks, click the three dots in the far right-hand corner of the classic editor block and select “Convert to Blocks”. Make sure to preview the page to ensure it still looks correct. If you have any issues with this function, you can either recreate the content using the blocks below or reach out to your content owner for assistance.
There are three different ways to add blocks to your page.
- In the top left of the top bar you can click the plus icon to add a new block. View the listing below for a description for each available block. The first section you’ll see is a “Most Used” section which will show the blocks you have used most often. The new block will be added below the block you have selected.
- Mouse over the block and go to the top until a plus icon shows up. Click the plus icon to add a new block above the block you hovered over.
- For an even quicker way to add a block, click below the last block in the page and start typing. This is a paragraph block automatically. For a quick block search, in this new paragraph block, type “ / “ followed by the name of the block you’re looking for and select it from the list of options that appear.
Select the block you want to move. When you mouse over the block you will see two arrows and a square icon with six dots on the left hand side. Click the arrows to move the blocks up and down on the page.
You can also click and drag the block by clicking the rectangle icon with 6 dots and dragging where you want it to be. When clicking and dragging the block, make sure you see the blue line show up where you want the block to be placed. You will have to move your cursor into the middle of the screen to make the blue line show up. See the image below.
If you want to move multiple blocks together, click into the text of the first block and while holding down the mouse button, drag down to the last block you want to move. Your selection should be highlighted blue. Then you can move those blocks together as explained above. If you are having issues keeping blocks selected together, or want to move a number of blocks into a column, group the blocks first.
More Block Options
- Hide Block Settings – toggles the display of the right sidebar.
- Duplicate – duplicates the block exactly as is.
- Insert Before and After – enables you to insert a block before or after the selected block.
- Edit as HTML – switches your view to HTML for the selected block only.
- Add to Reusable Blocks – creates a reusable block out of the block you have selected. See more about reusable blocks below.
- Remove Block – deletes the block. You can click undo to get the block back after deletion.
You can see the permalink (URL) of your page when you click into the block. Click “Edit” on the right to edit the permalink of the page. You can also go to the right sidebar, select Permalink and edit the URL there.
Used for normal paragraph content. You can change the alignment of the text, bold, italicize, add links, and strikethrough the text.
In the right sidebar you can see further settings for text size, drop cap, and color options.
When you add a new image block you have the choices of uploading a new image to the library, selecting from the current media library or uploading an image from a URL.
When you have uploaded or selected an image, you will see a preview of the image as well as two blue dots. You can click and drag those dots to resize the image on the page. The toolbar at the top allows you to change the alignment of the image.
The right sidebar allows you to change the size and alignment. You can now quickly add alternative text in the right sidebar. You can add a link by going to link settings and selecting the type of link you want to add. If you add a link to an image, be sure to change the alt text to explain where the link will take the user.
To make sure that the image is responsive on all devices and screens, for all images, go to the Advanced section and type in: img-responsive
The heading block is used for headings. Remember to utilize headings in outline order. Do not choose headings by size, this will make it confusing for users utilizing screen readers. You can choose the heading order by using the pop up over the block or in the right sidebar. You can also change the alignment in the right sidebar.
Creates an image gallery. After inserting the block, select either upload images or upload from media gallery. Select all of the images you want to add to your gallery then select “Create a new gallery”.
Before it creates the gallery you have one more opportunity to decide which images you want to include. You can drag and drop and add captions to the images here. You can’t move the images once you create the gallery on the page so make sure you organize them as you want them before inserting the gallery.
Once the gallery is inserted into the page, you can’t move the images but you can delete images, add captions, and upload a new image to the gallery.
Depending on the amount of images you selected, it will automatically create a layout for you. In the right sidebar you can further customize it by selecting how many columns you would like, if you want to crop the images or not, and where you want the images to link to, if anywhere. What you see in the gutenberg editor will be what you see on the page.
The list block is used for creating simple lists. You can choose between bullets or numbered lists as well as increased indentations.
You can build basic outlines with numbered lists by applying the following styles under the Advanced option in the right sidebar.
- outline-decimal-alpha – produces an outline like “1-a-i-1-a-i”
- outline-roman-alpha – produces an outline like “I-A-1-a-i-01”
Only six levels have been defined for each outline list. We recommend using appropriate headings for the first few levels of a very large outline and switching to one of these outline styles for the remainder of the list. This will make it easier for the reader to navigate and also easier for you to maintain.
Audio uploads are not supported on our university site. Auto audio play is also disabled. Seek alternative options.
The cover block allows you to insert an image with a text and color overlay. What you see displayed in the editor is what will show on your page.
Resizing the Cover Block
The Cover block has a fixed height and the default may not be the best fit for your image or your page. You can apply one of the following styles under the Advanced tab to change the height of the block: cover-100, cover-200, cover-300, cover-400, cover-500, cover-600.
The file block allows you to link to and create a download button for a file on your site. You can link to any file, including images. In the right sidebar you can turn the button on and off.
See the button block type for more options such as creating a button for downloading a file from a google drive link.
The video block allows you to embed a video from a video link. Much like how the classic editor used to embed videos, use a YouTube or Vimeo link with this block to embed a video into your page.
Insert the block, select “Insert from URL” and paste in the URL of the video you want to play on your page. This will automatically transform the video block to a youtube, vimeo, etc. block.
The Custom HTML block allows you to utilize HTML to display special elements. You can also edit the HTML of all the blocks available by clicking the three dots in the corner of the block and selecting “Edit as HTML”.
This block keeps your spaces, tabs and line-breaks as they are.
Any text you paste or type in this block will be formatted differently from the rest of the text to call attention to it. You can change the background and text colors to further enhance the quote.
The table block is intended for use with simple tables. If you have a complicated table, it is suggested you use TablePress.
When the block is inserted, you will have to select how many columns and rows you’ll need. You can change this later.
You can edit the table through the pop up over the block and change the styles in the right sidebar. Make sure fixed width cells is on to ensure your table is usable on mobile devices as well. You can not use span columns.
Are your existing on-page tables hard to edit in the new editor?
View our suggestions on how to fix this issue.
This block is intended for writing poetry and other literary expressions. Unlike paragraph text, it leaves all spaces & line-breaks untouched, displaying them exactly as you enter them.
The button block allows you to add a button linking to wherever you’d like. After inserting the button block, input the URL you want to link to then hit enter.
There are color, text and styling options for you to create a personalized button.
The columns block allows you to create a column layout. After you’ve inserted a column layout you can insert any other block into the column sections. To create varied columns, insert a column block into a larger column block. Before going live, be sure this looks the way you want on desktop as well as mobile sizing.
Media & Text
More is for use in news posts. It sets a point in which the read more button will display on the news page. Like the old “read more” tag.
Creates a page break, nothing underneath this block will display on the live page.
Separator creates a horizontal line where you place it. Used for separating content visually. Exactly like the horizontal line element in the classic editor but with more style options.
Spacer creates spacing where you place the block. You can change the amount of space by clicking and dragging the blue dot at the bottom of the spacer or changing the height in pixels in the right sidebar settings.
Places the page’s breadcrumb anywhere on the page. This is not necessary as all of our pages have an automatic breadcrumb at the top of the page.
Allows you to utilize shortcodes in your page, for contact forms, tablepress, etc. If you paste a shortcode into an empty paragraph block, the paragraph block will automatically convert to a shortcode block.
Displays a list of archived posts.
Creates a list of links to the individual category pages in your site.
Comments are not supported on our university sites.
Displays a bulleted list of links to your most recent posts.
Allows you to embed posts and pages from many different sources. Only allows for individual post embeds, not feeds.
Social Media Embeds
All social media embeds are only embeds of a single post.
Facebook has changed how you receive the post URL for the single facebook post, the embed option in Gutenberg will most likely not work. Use the “embed post” option from the facebook post options and paste the HTML into a custom HTML block:
Hulu is not functioning as of 6/7/19
Audio Embed Options
Spotify Single Song Embed URL
Spotify Single Artist Link
Spotify Playlist Link
Spotify Podcast Show Link
shows most recent episode
Spotify Podcast Episode Link
Spotify Video Show Link
shows most recent video
Spotify Video Link
Photo Embed Options
As of 7/11/2019, Imgur URL embeds are not functioning.
As of 7/11/2019, SmugMug URL embeds are not functioning.
Educational/Publication Embed Options
Speaker Deck URL
Amazon Kindle URL
As of 7/11/2019, Scribd URL embeds are not functioning.
Other Embed Options
The URL cannot be a news post, category or tag link. Some links are not working. Will most likely be fixed in future updates.
Unable to test without purchasing the product. If you utilize this service, please reach out to us.
Displays your saved reusable blocks.
Reusable blocks are blocks that you’ve saved for multiple page usage. When updated on one page, it is updated across all other pages where you have placed that reusable block.
Last updated: 12/4/2019