Gutenberg Style
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:paragraphIt 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:headingWider Galleries
/wp:heading wp:spacer {"height":20} /wp:spacer wp:gallery {"imageCrop":false,"className":"alignwide"}
Lonely Bird White Flower
What does Gutenberg Change
/wp:heading wp:paragraphThe 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.
Consider a block as the most basic (therefore, smallest) unit of the new editor.
/wp:paragraph wp:columnsOnly 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.
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:headingGutenberg ❤️ 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:separator wp:heading {"level":3}
Tables? You got them.
/wp:heading wp:paragraphAdding 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 |
More for Images
/wp:heading wp:paragraphAs 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:paragraphHere’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"}Desk Plant
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}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:paragraphWith the Gutenberg WordPress editor, you can also align wide (as seen below), and align full-width.
/wp:paragraph wp:paragraphBlocks 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:paragraphA 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:paragraphGutenberg 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:separator wp:heading
There’s a lot more…
/wp:heading wp:paragraphWe 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:paragraphWhether 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
