Difference between revisions of "Editing with Gutenberg"

From
Jump to: navigation, search
Line 32: Line 32:
  
 
===Formatting===
 
===Formatting===
*Custom HTML
+
*Custom HTML (block for adding your own custom HTML)
*Code
+
*Code (preformatted code block)
*Classic Block
+
*Classic Block (the old WordPress WYSIWYG editor)
*Preformatted Text
+
*Preformatted Text (general preformatted text)
*Pullquote
+
*Pullquote (general quote with citation)
*Table
+
*Table (HTML table)
*Verse
+
*Verse (block for poetry, song lyrics, or requiring special spacing)
  
 
===Layout Elements===
 
===Layout Elements===
*Separator
+
*Separator (horizontal line across the page)
*Columns
+
*Columns (2-6 columns across the page)
*Group
+
*Group (providing the ability to nest elements together)
*Button
+
*Button (general link with button background)
*Media & Text
+
*Media & Text (general text associated with image/file/video/etc))
 
*More (Read More Link)
 
*More (Read More Link)
*Page Break
+
*Page Break (providing ability for page content to be spread over 2 or more pages)
*Spacer
+
*Spacer (general empty element used for spacing)
  
 
===Widgets===
 
===Widgets===
*Shortcode (
+
*Shortcode (Small bit of code surrounded by square brackets [])
 
*Archives (Blog post archives)
 
*Archives (Blog post archives)
 
*Calendar (Calendar of blog posts)
 
*Calendar (Calendar of blog posts)
Line 58: Line 58:
 
*Latest Posts (List of most recent blog posts)
 
*Latest Posts (List of most recent blog posts)
 
*RSS (Link to RSS Feed)
 
*RSS (Link to RSS Feed)
*Search
+
*Search (Search bar to search website)
*Tag Cloud
+
*Tag Cloud (Link to all tags for all blog posts)
  
 
===Embeds===
 
===Embeds===

Revision as of 21:08, 20 January 2020

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

Additional Information

Official WordPress Gutenberg FAQ