Welcome to the Gutenberg Editor

The goal of this new edi­tor is to make adding rich con­tent to Word­Press sim­ple and enjoy­able. This whole post is com­posed of pieces of con­tent—some­what sim­i­lar to LEGO bricks—that you can move around and inter­act with. Move your cur­sor around and you’ll notice the dif­fer­ent blocks light up with out­lines and arrows. Press the arrows to repo­si­tion blocks quick­ly, with­out fear­ing about los­ing things in the process of copy­ing and pasting.

What you are read­ing now is a text block the most basic block of all. The text block has its own con­trols to be moved freely around the post…

… like this one, which is right aligned.

Head­ings are sep­a­rate blocks as well, which helps with the out­line and orga­ni­za­tion of your content.

A Picture is Worth a Thousand Words

Han­dling images and media with the utmost care is a pri­ma­ry focus of the new edi­tor. Hope­ful­ly, you’ll find aspects of adding cap­tions or going full-width with your pic­tures much eas­i­er and robust than before.

Try select­ing and remov­ing or edit­ing the cap­tion, now you don’t have to be care­ful about select­ing the image or oth­er text by mis­take and ruin­ing the presentation.

The Inserter Tool

Imag­ine every­thing that Word­Press can do is avail­able to you quick­ly and in the same place on the inter­face. No need to fig­ure out HTML tags, class­es, or remem­ber com­pli­cat­ed short­code syn­tax. That’s the spir­it behind the inserter—the (+) but­ton you’ll see around the editor—which allows you to browse all avail­able con­tent blocks and add them into your post. Plu­g­ins and themes are able to reg­is­ter their own, open­ing up all sort of pos­si­bil­i­ties for rich edit­ing and publishing.

Go give it a try, you may dis­cov­er things Word­Press can already add into your posts that you didn’t know about. Here’s a short list of what you can cur­rent­ly find there:

• Text & Headings
• Images & Videos
• Gal­leries
• Embeds, like YouTube, Tweets, or oth­er Word­Press posts.
• Lay­out blocks, like But­tons, Hero Images, Sep­a­ra­tors, etc.
• And Lists like this one of course 🙂

---

Visual Editing

A huge ben­e­fit of blocks is that you can edit them in place and manip­u­late your con­tent direct­ly. Instead of hav­ing fields for edit­ing things like the source of a quote, or the text of a but­ton, you can direct­ly change the con­tent. Try edit­ing the fol­low­ing quote:

The edi­tor will endeav­or to cre­ate a new page and post build­ing expe­ri­ence that makes writ­ing rich posts effort­less, and has “blocks” to make it easy what today might take short­codes, cus­tom HTML, or “mys­tery meat” embed discovery.

Matt Mul­len­weg, 2017

The infor­ma­tion cor­re­spond­ing to the source of the quote is a sep­a­rate text field, sim­i­lar to cap­tions under images, so the struc­ture of the quote is pro­tect­ed even if you select, mod­i­fy, or remove the source. It’s always easy to add it back.

Blocks can be any­thing you need. For instance, you may want to add a sub­dued quote as part of the com­po­si­tion of your text, or you may pre­fer to dis­play a giant styl­ized one. All of these options are avail­able in the inserter.

• 

• 

• 

You can change the amount of columns in your gal­leries by drag­ging a slid­er in the block inspec­tor in the sidebar.

Media Rich

If you com­bine the new wide and full-wide align­ments with gal­leries, you can cre­ate a very media rich lay­out, very quickly:

Sure, the full-wide image can be pret­ty big. But some­times the image is worth it.

• 

• 

The above is a gallery with just two images. It’s an eas­i­er way to cre­ate visu­al­ly appeal­ing lay­outs, with­out hav­ing to deal with floats. You can also eas­i­ly con­vert the gallery back to indi­vid­ual images again, by using the block switcher.

Any block can opt into these align­ments. The embed block has them also, and is respon­sive out of the box:

You can build any block you like, sta­t­ic or dynam­ic, dec­o­ra­tive or plain. Here’s a pul­lquote block:

Code is Poetry

The Word­Press community

If you want to learn more about how to build addi­tion­al blocks, or if you are inter­est­ed in help­ing with the project, head over to the GitHub repos­i­to­ry.

---

Thanks for test­ing Gutenberg!

?