Dri­ving Habits That Wreck Your Car

Of Moun­tains & Prin­ting Presses

The goal of this new edi­tor is to make adding rich con­tent to Wor­d­Press simp­le and enjoya­ble. This who­le post is com­po­sed of pie­ces of con­tent—some­what simi­lar to LEGO bricks—that you can move around and inter­act with. Move your cur­sor around and you’ll noti­ce the dif­fe­rent blocks light up with out­lines and arrows. Press the arrows to repo­si­ti­on blocks quick­ly, without fea­ring about losing things in the pro­cess of copy­ing and pasting.

What you are rea­ding now is a text block the most basic block of all. The text block has its own con­trols to be moved free­ly around the post…

… like this one, which is right aligned.

Hea­dings are sepa­ra­te blocks as well, which hel­ps with the out­line and orga­niz­a­ti­on of your content.

A Pic­tu­re is Worth a Thousand Words

Hand­ling 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­ti­ons or going full-width with your pic­tures much easier and robust than before.

Beautiful landscape
If your the­me sup­ports it, you’ll see the “wide” but­ton on the image tool­bar. Give it a try.

Try selec­ting and remo­ving or edi­t­ing the cap­ti­on, now you don’t have to be care­ful about selec­ting the image or other text by mista­ke and rui­ning the presentation.

The Inser­ter Tool

Ima­gi­ne ever­ything that Wor­d­Press can do is avail­ab­le to you quick­ly and in the same place on the inter­face. No need to figu­re out HTML tags, clas­ses, or remem­ber com­pli­ca­ted short­code syn­tax. That’s the spi­rit behind the inserter—the (+) but­ton you’ll see around the editor—which allows you to brow­se all avail­ab­le con­tent blocks and add them into your post. Plugins and the­mes are able to regis­ter their own, ope­ning up all sort of pos­si­bi­li­ties for rich edi­t­ing and publishing.

Go give it a try, you may dis­co­ver things Wor­d­Press can alrea­dy add into your posts that you didn’t know about. Here’s a short list of what you can cur­r­ent­ly find there:

  • Text & Headings
  • Images & Videos
  • Gal­le­ries
  • Embeds, like You­Tube, Tweets, or other Wor­d­Press posts.
  • Lay­out blocks, like But­tons, Hero Images, Sepa­ra­tors, etc.
  • And Lists like this one of course 🙂

Visu­al Editing

A huge bene­fit of blocks is that you can edit them in place and mani­pu­la­te your con­tent direct­ly. Ins­tead of having fiel­ds for edi­t­ing things like the source of a quo­te, or the text of a but­ton, you can direct­ly chan­ge the con­tent. Try edi­t­ing the fol­lowing quote:

The edi­tor will endea­vor to crea­te a new page and post buil­ding expe­ri­ence that makes wri­ting rich posts effort­less, and has “blocks” to make it easy what today might take short­codes, cus­tom HTML, or “mys­te­ry meat” embed discovery.

Matt Mul­len­weg, 2017

The infor­ma­ti­on cor­re­spon­ding to the source of the quo­te is a sepa­ra­te text field, simi­lar to cap­ti­ons under images, so the struc­tu­re of the quo­te is pro­tec­ted even if you select, modi­fy, or remo­ve the source. It’s always easy to add it back.

Blocks can be anything you need. For instance, you may want to add a sub­dued quo­te as part of the com­po­si­ti­on of your text, or you may pre­fer to dis­play a giant sty­li­zed one. All of the­se opti­ons are avail­ab­le in the inserter.

You can chan­ge the amount of colum­ns in your gal­le­ries by drag­ging a sli­der in the block inspec­tor in the sidebar.

Media Rich

If you com­bi­ne the new wide and full-wide align­ments with gal­le­ries, you can crea­te a very media rich lay­out, very quickly:

Accessibility is important — don’t forget image alt attribute

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

The abo­ve is a gal­le­ry with just two images. It’s an easier way to crea­te visual­ly appe­aling lay­outs, without having to deal with floats. You can also easi­ly con­vert the gal­le­ry back to indi­vi­du­al images again, by using the block switcher.

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

You can build any block you like, sta­tic or dyna­mic, deco­ra­ti­ve or plain. Here’s a pull­quo­te block:

Code is Poetry

The Wor­d­Press community

If you want to learn more about how to build addi­tio­nal blocks, or if you are inte­res­ted in hel­ping with the pro­ject, head over to the Git­Hub repo­si­to­ry.


Thanks for tes­ting Gutenberg!

👋