Editing with Gutenberg

From
Jump to: navigation, search

In December 2018, WordPress 5.0 was released with their new page builder interface, Gutenberg. It was created to make it easier for users to create content-rich layouts on pages without any HTML knowledge.

Using Blocks

Blocks are the cornerstone of creating pages in WordPress. You can easily add or edit any type of block.

Adding a Block

Adding a new block

Adding a new block is one of the easiest parts of using Gutenberg. Once you are editing or creating a new page, you click on the plus sign (+) that is to the left side of the page. From there you search for the type of block that you would like to add, click on that block, and it will automatically be added to the page.

Editing a Block

Editing a block

When you select a simple block (such as a paragraph or a heading), you can edit the text directly in the browser window where you clicked on the block.

When you select a more complex block (not a paragraph, heading, etc), any advanced elements that you want to edit will appear in the right side bar of the page. In this area you may be able to add/remove images, change the number of columns an area has, add specific style tags

Default WordPress Blocks

These are the default blocks that come with Gutenberg. You may have ones built or bundled into your website that were custom built for you, or ones that came with plugins that were installed for your website - these blocks will not be included in this list.

Common Blocks

  • Paragraph (general paragraph text)
  • List (general unordered and ordered lists)
  • Heading (general headline)
  • Cover (headline with block of colour or background image)
  • Image (general image)
  • Gallery (group of images)
  • Quote (general quote with citation)
  • Audio (general audio file that you've uploaded to your website)
  • File (general file that you've uploaded to your website)
  • Video (general video file that you've uploaded to your website)

Formatting

  • Custom HTML (block for adding your own custom HTML)
  • Code (preformatted code block)
  • Classic Block (the old WordPress WYSIWYG editor)
  • Preformatted Text (general preformatted text)
  • Pullquote (general quote with citation)
  • Table (HTML table)
  • Verse (block for poetry, song lyrics, or requiring special spacing)

Layout Elements

  • Separator (horizontal line across the page)
  • Columns (2-6 columns across the page)
  • Group (providing the ability to nest elements together)
  • Button (general link with button background)
  • Media & Text (general text associated with image/file/video/etc))
  • More (Read More Link)
  • Page Break (providing ability for page content to be spread over 2 or more pages)
  • Spacer (general empty element used for spacing)

Widgets

  • Shortcode (Small bit of code surrounded by square brackets [])
  • Archives (Blog post archives)
  • Calendar (Calendar of blog posts)
  • Categories (Blog Post Categories)
  • Latest Comments (List of most recent comments)
  • Latest Posts (List of most recent blog posts)
  • RSS (Link to RSS Feed)
  • Search (Search bar to search website)
  • Tag Cloud (Link to all tags for all blog posts)

Embeds

  • Embed (General embed)
  • Twitter
  • YouTube
  • Facebook
  • Instagram
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo
  • Animoto
  • Cloudup
  • Crowdsignal
  • Dailymotion
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Speaker Deck
  • TED
  • Tumlbr
  • VideoPress
  • WordPress.tv
  • Amazon Kindle

Publishing Your Page

Once you've created/edited your page as needed, click the blue "Publish" button in the top right corner of the screen. This will prompt you with a pre-publish check to ensure you're publishing something with the correct date and correct visibility.

You can easily edit the date that this is published by clicking the down arrow beside "Publish". If you select a date in the past, it will be published immediately with that date associated with it. If you select a date in the future, the page will not go live until the time that you select.

If don't want the general public to see your page, click the down arrow beside "Public". In here you can select to make this page Private (where only admins and editors can see it) or Password Protected (where people would need the correct password to view the page).

Additional Information

Official WordPress Gutenberg FAQ