New Season Live Now!

wp:paragraph {"className":"has-drop-cap"}

We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts. Experience the flexibility that blocks will bring, whether you are building your first site, or write code for a living.

/wp:paragraph wp:paragraph

It seems that Gutenberg has been a term of controversy in the world of WordPress lately. Hailed as the most significant change to WordPress 5.0 this year, the Gutenberg editor has received a mixed response from web developers and regular folk alike. All of this chaos is making it difficult.

/wp:paragraph wp:spacer {"height":20} /wp:spacer wp:heading

Wider Galleries

/wp:heading wp:spacer {"height":20} /wp:spacer wp:gallery {"imageCrop":false,"className":"alignwide"} /wp:gallery wp:columns

/wp:columns wp:heading

What does Gutenberg Change

/wp:heading wp:paragraph

The sole purpose of the Gutenberg editor is to provide an alternative to the current open text editor, not to mention the difficult-to-remember shortcodes, with an agile and visual user interface (UI). So, unlike the current WordPress editor, you don’t have to:

/wp:paragraph wp:list
  • import images, multimedia and approved files from the media library or add HTML shortcodes;
  • copy and paste links for embeds;
  • write shortcodes for specialized assets of different plugins;
  • create featured images to be added at the top of a post or page;
  • add excerpts for subheads;
  • add widgets for content on the side of a page.
/wp:list wp:paragraph

Consider a block as the most basic (therefore, smallest) unit of the new editor.

/wp:paragraph wp:columns

Only a quarter of young adults are financially literate. You don’t want to overwhelm them.

Shane Doe, Entrepreneur.

They will be the building blocks of WordPress 5.0. In other words, everything—including content, images, quotes, galleries, cover images, audio, video, headings, embeds, custom codes, paragraphs, separators and buttons—will turn into distinct blocks.

/wp:columns wp:paragraph

Because you can drag and drop each block, identifying these items and placing them on the page becomes a lot easier.

/wp:paragraph wp:paragraph

/wp:paragraph wp:spacer {"height":30} /wp:spacer wp:heading

Gutenberg ❤️ Columns

/wp:heading wp:spacer {"height":30} /wp:spacer wp:separator {"className":"is-style-wide"}
/wp:separator wp:spacer {"height":10} /wp:spacer wp:columns

Built for modern times!

Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.

Designed with Love.

We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths.

/wp:columns wp:separator {"className":"is-style-dots"}
/wp:separator wp:heading {"level":3}

Tables? You got them.

/wp:heading wp:paragraph

Adding a table using custom HTML code was a tedious job. With the table block, however, the task is a lot easier. You are able to add and remove rows and columns of a table without coding.

/wp:paragraph wp:spacer {"height":20} /wp:spacer wp:table
ID First Name Last Name Profession
1. John Doe Entrepreneur
2. Shane Tripp Writer
3. Groot Will Web Designer
4. Jemma Kindle Robot
/wp:table wp:spacer {"height":20} /wp:spacer wp:heading

More for Images

/wp:heading wp:paragraph

As of Gutenberg 0.5.0, you can now drag and drop images directly into an image block, just like you are used to with the visual editor. And there are several new alignments available with ContentBerg.

/wp:paragraph wp:paragraph

Here’s an image set to Align Full Width, that works with our Full Width post style.

/wp:paragraph wp:spacer {"height":20} /wp:spacer wp:gallery {"imageCrop":false,"className":"alignfull"} /wp:gallery wp:paragraph

Besides just having the standard blockquote which we have been using for years, they also have a new pull quote. And yes, pull quotes are different.

/wp:paragraph wp:image {"id":1646,"align":"left","width":252,"height":336}
White Flower
/wp:image wp:paragraph

It is also nice to see some variations on the positioning of the blocks. For years, the standard visual editor has given you the ability to align left, align center, align right, and assign no alignment.

/wp:paragraph wp:paragraph

With the Gutenberg WordPress editor, you can also align wide (as seen below), and align full-width.

/wp:paragraph wp:paragraph

Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge.

/wp:paragraph wp:paragraph

A single block is nice—reliable, clear, distinct. Discover the flexibility to use media and content, side by side, driven by your vision.

/wp:paragraph wp:html
/wp:html wp:heading {"align":"left"}

More Gutenberg Blocks

/wp:heading wp:paragraph

Gutenberg comes with new buttons that work right out of the box with ContentBerg.

/wp:paragraph wp:paragraph {"backgroundColor":"very-light-gray","fontSize":"regular"}

Gutenberg is available as a plugin now, and soon by default in version 5.0 of WordPress. The classic editor will be available as a plugin if needed

/wp:paragraph wp:spacer {"height":20} /wp:spacer wp:button {"backgroundColor":"very-dark-gray","customTextColor":"#ffffff","align":"center","className":"is-style-squared"} /wp:button wp:spacer {"height":10} /wp:spacer wp:separator {"className":"is-style-default"}
/wp:separator wp:quote
Whether you like it or not, Gutenberg is coming to WordPress 5.0. Do try to be a part of it. Smashing Mag
/wp:quote wp:cover-image {"url":"https://4andcostore.com/wp-content/uploads/2018/09/placeholder.png","id":1651}

Beautiful Cover Image!

/wp:cover-image wp:separator {"className":"is-style-dots"}
/wp:separator wp:heading

There’s a lot more…

/wp:heading wp:paragraph

We can only show so many of the blocks without bloating the page to excessive size. There many more Gutenberg blocks that just work. And this is just the beginning. Very exciting times ahead.

/wp:paragraph wp:paragraph

Whether you like it or not, Gutenberg is coming to WordPress 5.0. Do try to be a part of the ongoing discussion about it on the web. It will certainly help.

/wp:paragraph