WordPress
Training & Support at Georgia Southern

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.

Adding Blocks

There are three different ways to add blocks to your page.

  1. 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.
  2. 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.
  3. 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.

Moving Blocks

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.

Available Blocks

  • Title

    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.

Common Blocks

  • Paragraph

    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.

  • Image

    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

  • Heading


    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.
  • Gallery

    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.

  • List

    The list block is used for creating simple lists. You can choose between bullets or numbered lists as well as increased indentations.

  • Quote

    Allows you to add a quote to your page with premade style options.

    Regular style:
    Large style:
  • Audio

    Audio uploads are not supported on our university site. Auto audio play is also disabled. Seek alternative options.

  • Cover

    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.

  • File

    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.

  • Video

    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.

Formatting

  • Code

    The code block allows you to display code on the site for people to copy and paste.

  • Classic

    The classic block allows you to use the classic editor. Could be deprecated in the future.

  • Custom HTML

    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”.

  • Preformatted

    This block keeps your spaces, tabs and line-breaks as they are.

  • Pullquote

    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.

  • Table

    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.

  • Verse

    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.

Layout Elements

  • Button

    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.

  • Columns

    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

    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.

  • Page Break

    Creates a page break, nothing underneath this block will display on the live page.

  • Separator

    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

    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.

Widgets

  • Shortcode

    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.

  • Archives

    Displays a list of archived posts.

  • Categories

    Creates a list of links to the individual category pages in your site.

  • Latest Comments

    Comments are not supported on our university sites.

  • Latest Posts

    Displays a bulleted list of links to your most recent posts.

Embeds

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

Reusable

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

WordPress Training & Support • Georgia Southern University

Contact your Content Owner for further support

Policies and Procedures