Dec, 2018 : WordPress 5.0 Comes with Gutenberg Update


todhost.com logo!December 12, 2018 - WordPress 5.0 is here with a major update - Gutenberg, The Gutenberg update is the biggest single update in WordPress history. The WordPress Gutenberg blocks which will be beginning with WordPress 5.0, completely changes the way posts and edits are done in WordPress. In this post, we explain how the new blocks work with the new Gutenberg WordPress Editor.

Before we go any further, you should check out our WordPress Gutenberg Ultimate Guide. That post and ebook covers information that this how-to will assume you already know. The Classic Editor plugin will only be officially supported until December 31, 2021, so you can only delay the inevitable for so long.

What are WordPress Gutenberg Blocks?

Gutenberg blocks allow you to insert a specific type of content into your post and then edit them independently of the other blocks. Using just a click and a drag of a mouse, you can completely reorganize the structure a post or page. Blocks allow you to create rich posts without needing to know any code.

The WordPress Gutenberg Common Blocks

1. Lists

Add a list to your page or post using the List block.

Block Options:

Convert to an unordered list.
Convert to an ordered list.
Outdent list item.
Indent list item.

On a numbered list you can indent and convert a list item to create a mixed list.

2. Paragraph

Use the Paragraph block to add a new paragraph.
Block Options:

Align Left
Align Center
Align Right
Bold
Italic
Link
Strikethrough
Text Settings
Background Color
Text Color

The Gutenberg Editor allows you to easily and quickly make basic text modifications. You can change the font size but using the preconfigured small, normal, medium, large and huge.

You can also set the font size using the pixels.

The Color Settings allow you to make important text standout without leaving the editor or adding your own CSS.

3. Heading

Use the Heading block to add a heading to your post.

Select Heading Size
Text Formatting
Heading Size
Align Text

4. File

Using a FIle block, you can create a link to view the file or create a button to download the file.

Transform Block Type
Align Left
Align Center
Align Right
Wide Width
Full Width
Edit File
Text Link Settings
Download Button Settings

5. Quote

The Quote block allows you to easily add a quote and citation to your page or post.

Quote Alignment
Text Formatting
Quote Styles

The Quote block settings allow you to choose the style and align the block to your liking.

6. Gallery

Create a gallery from a group of images.

Gallery Alignment
Edit Gallery
Set the Number of Columns
Crop Images Toggle

The Gallery block allows you to drag and drop pictures onto your page or post and the Gutenberg editor will auto create a Gallery for you.

The Edit Gallery option lets add captions or new images and rearrange the order of the images.

The Crop Images toggle will attempt to crop the images to make thumbnails the same size, which can have a less than desirable result. When using the Gallery block, you will want to add images that share a similar dimension.

7. Image

Add an image to your post.

Align Image
Edit Image
Alternative Text
Select Image Size
Choose Custom Image Size
Link Settings

Now you can add an image without entering your Medial Libray, drag and drop the image straight into your post.

You can click the Edit Image option if you need to change the image being displayed. You can also set the Alt Text for the image without leaving the editor.

When adding an image, you can choose one of the three auto-formatted sizes, Thumbnail, Medium or Full.

You can also use the Image Dimension settings to set a custom Width and Height for the image.

8. Cover Image

The Cover Image allows you to set the image that will be used for your blog post.

Align Image
Align Text
Change Image Used for Cover block
Toggle Fixed Background On and Off
Overlay Color
Background Opacity

Depending on the theme you are using, a cover image will be displayed along with your post, making it more inviting to potential readers.

You can use the Overlay settings to select the overlay color and choose the overlay’s opacity.

9. Audio

Insert an audio clip into your post.

Align Audio Block
Edit Audio Block
Toggle Autoplay and Loop On and Off
Preload Options

The Preload option allows you to control what is preloaded for people visiting the site.

10. Video

Add a video to your post.

Align Video
Change Video
Toggle Autoplay, Loop, Mute, and Playback Controls On and Off
Choose The Preload Options
Add a Poster Image for the Video

WordPress Gutenberg Formatting Blocks

1. Custom HTML

Are you not finding exactly what you need in a WordPress Gutenberg Block? Use the Custom HTML block to add your HTML to the site.

View the HTML block
Preview your HTML

2. Pull Quote

Add a Pull Quote to draw attention to an excerpt from the post.

Align Pull Quote
Format Text
Choose Pull Quote Style
Select Pull Quote Color
Select Text Color

3. Classic Editor

Use the classic WYSIWYG editor.

4. Table

Add a table to your page or post.

Align Table
Modify Table
Format Text
Choose Table Style
Toggle Fixed Width Cells On and Off
Choose Number of Rows and Columns and Create Table
Created Table

When you add a Table block, you will need to choose the desired number of columns and rows before creating the table.

You will still be able to add and remove columns and rows after the table is created.

5. Verse

Add a verse from a poem or song to your site.

Align Verse Block
Format Text

6. Code

Add a code block to a post or page.

Here is what the code snippet will look like to your visitors.

7. Preformatted

Add Preformatted text to your site.

Here is the Preformatted block on the front end of your site.

WordPress Gutenberg Layout Elements Blocks

1. Spacer

Add some white space between blocks.

Slide the spacer block up and down to get the desired amount of white space between blocks.

2. Column

Organize content using the Column block.

Align Columns Block
Format Text
Adjust Font Size and Enable Drop Cap
Adjust the Text and Background Color

3. More

Create a teaser on your Home or Blog page for a post.

Choose if you want the Tease text to show in the actual post.

This is what you will see on the blog page

And here is what you will see on the post’s page when the Hide Teaser option is toggled on.

4. Button

Add a call to action with a Button block.

Align Button
Format Text
Select Button Style
Choose Text and Background Color

You can add a URL to the button to create a link.

5. Media Text

Toggle Between Wide Width and Full Width
Show Media on Right or Left of Text
Change Image or Video
Toggle Stacking for Mobile and Add Alt Text to Image
Change Background Color

Use the slider to change the amount of real estate that the media or text use. Select the text box to adjust font-size and color.

6. Page Break

Separate a post into pages.

7. Separator

Create a break between ideas or sections with a horizontal separator.

The WordPress Gutenberg Widget Blocks

1. Latest Posts

You can add a widget with links to recent posts using the Latest Post block.

Align Widget
Display Posts Using Lists or Grids
Choose How to Order Posts
Select Post Category to Display
Number of Post to Display
Toggle Post Date On and Off

2. Shortcode

Add an existing plugin’s shortcode using the Shortcode block.

3. Archives.

Add a widget with a link to your site’s archives.

Align Widget
Toggle Dropdown and Post Counts On and Off

4. Categories

Add a widget linking to Post categories.

Align Widget
Display Settings

5. Comments

Display a widget with the most recent comments with the Comments block.

Align Widget
Display Settings

todhost.com Reads: 109 | Category: General | Source: WHTop : www.WHTop.com
URL source: https://www.todhost.com/announcements/66/WordPress-50-Comes-with-Gutenberg-Update.html

Company: Tod Host

Want to add a website news or press release ? Just do it, it's free! Use add web hosting news!

Related news


May 30, 2019 - Google Quality Update Targets E-A-T, Page Quality and Interstitials - Google has just announced a brand new version of its Quality Rater Guidelines, and we shall be looking at all the changes Google has made to the guidelines and why these changes are important. The new version is dated May 16, 2019, and replaces the one released back in 2018.

More news: New Google Algorithm May Update Page Ranking

One major take away is that Google is moving a lot of the documentation in these guidelines away from using the term E-A-T (Expertise, authoritativeness, trustworthiness) and instead changing many of the instances where it was used to the term “page quality”. While they still use the term E-A-T, they are definitely changing the usage of it in the context of ...
May 2, 2019 - Yoast SEO Plugin for WordPress Now Offer Defragmented Schema Markup - Popular WordPress plugin Yoast is releasing an update which offers defragmented implementation of Schema.org markup. Sounds complex? Not worry, we'll define the term for your understanding.

What is Defragmentation?

Here is how Wikipedia puts it: "In the maintenance of file systems, defragmentation is a process that reduces the degree of fragmentation. It does this by physically organizing the contents of the mass storage device used to store files into the smallest number of contiguous regions (fragments). It also attempts to create larger regions of free space using compaction to impede the return of fragmentation. Some defragmentation utilities try to keep smaller files within a single ...
Apr 4, 2019 - New Google Algorithm May Update Page Ranking - Google is up again with a new research paper which describes a dramatically new way to improve how web pages are ranked. This algorithm claims significant improvements to deep neural network algorithms that calculate relevance.

The new algorithm discusses a method of ranking web pages called, Groupwise Scoring Functions.

Without confirmation from Google we cannot know for certain if it is in use. But because significant improvements are claimed by the researchers, it may not be far-fetched to consider that this algorithm may already be in use by Google.

Does Google Use Published Algorithms?

Google has stated in the past that “Google research papers in general shouldn’t be assumed to be ...
Feb 10, 2019 - Preparing for Joomla 4.0 - Great news for Joomla fans: Joomla 4 alpha has been released and the stable Joomla 4 would be released soon. Joomla 4 shows up with both user experience and code quality improvements such as: Framework 2.0, Bootstrap 4 integration, raise minimum supported PHP version to PHP 7, new media manager, back-end UI improvements, remove previously deprecated functionality and more is expected to give Joomla! large functionality improvements with limited backward compatibility breaks.
Joomla 4 new features explained

Joomla 4 - a totally new version: Joomla 4 core is built with modern technologies to become a more powerful and easy-to-use CMS platform. Its goal is to simplify the upgrade process by ...
Aug 15, 2018 - Enable Your Free SSL to Avoid Being Hurt by the Google Chrome Update - Enabling SSL on your website is no longer an option. As Google roles out its Chrome update which mark sites that do not have SSL enabled as "unsecure", enabling SLL is now a must as not doing so could hurt your website reputation and business.

Taking advantage of Todhost's Free SSL is easy. Enabling (or forcing) the SSL will give your domain an "HTTPS://" prefix, which ensures your website will be labeled as "secure" in most web browsers.

The Free SSL will be automatically added to every domain for new and existing cPanel platform customers..

The Free SSL lasts for 90 days from issuance and renews automatically at no cost to you so your site hosted with Todhost should never be without ...