Using the New 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 new Gutenberg editor.
First Time Editing in Gutenberg
When your site is updated to the new editor, all of your content will be added into the “classic” block. This classic block will function 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 you preview the page to check everything looks correct before publishing your edits.
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. When clicking and dragging the block, make sure you see the blue line show up where you want the block to go. You will have to move your cursor into the middle of the screen to make the blue line show up. See the image below.
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.
Type the title of your page here. This is automatically a heading level 1.
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.
Allows you to add a quote to your page with premade style options.
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.
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 code block allows you to display code on the site for people to copy and paste.
The classic block allows you to use the classic editor. Could be deprecated in the future.
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.
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
Media & Text adds an image with a text column vertically aligned centered next to it.
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.
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.
Embed, Twitter, YouTube, Facebook, Instagram, WordPress, SoundCloud, Spotify, Flickr, Vimeo, Animoto, Cloudup, CollegeHumor, Dailymotion, Funny or Die, Hulu, Imgur, Issuu, Kickstarter, Meetup.com, Mixcloud, Photobucket, Polldaddy, Reddit, ReverbNation, Screencast, Scribd, Slideshare, SmugMug, Speaker Deck, TED, Tumblr, VideoPress and WordPress.tv
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: 4/23/2019