Editing with Gutenberg

From
Revision as of 20:59, 20 January 2020 by Moonsoarwikiadmin (talk | contribs)
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

Gutenberg-add.jpg

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

Gutenberg-edit.jpg

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
  • Code
  • Classic Block
  • Preformatted Text
  • Pullquote
  • Table
  • Verse

Layout Elements

  • Separator
  • Columns
  • Group
  • Button
  • Media & Text
  • More (Read More Link)
  • Page Break
  • Spacer

Widgets

  • Shortcode
  • Archives
  • Calendar
  • Categories (Blog Post Categories)
  • Latest Comments
  • Latest Posts
  • RSS (Link to RSS Feed)
  • Search
  • Tag Cloud

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

Additional Information

Official WordPress Gutenberg FAQ