Welcome to the Gutenberg Editor

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.

Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with.

What you are reading now is a text block, the most basic block of all. The text block has its own controls to be moved freely around the post…

… like this one, which is right aligned.

Headings are separate blocks as well, which helps with the outline and organization of your content.

This block can be used for
Hero full width section.

A Picture is worth a Thousand Words

Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you’ll find aspects of adding captions or going full-width with your pictures much easier and robust than before.

Try selecting and removing or editing the caption, now you don’t have to be careful about selecting the image or other text by mistake and ruining the presentation.

The Inserter Tool

Go give it a try, you may discover things WordPress can already add into your posts that you didn’t know about. Here’s a short list of what you can currently find there:

  • Text & Headings
  • Images & Videos
  • Galleries
  • Embeds, like YouTube, Tweets, or other WordPress posts.
  • Layout blocks, like Buttons, Hero Images, Separators, etc.
  • And Lists like this one of course 🙂

Visual Editing

The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It’s always easy to add it back.

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. Matt Mullenweg, 2017

TrendyTheme

Blocks can be anything you need. For instance, you may want to add a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.

You can change the amount of columns in your galleries by dragging a slider in the block inspector in the sidebar.

Media Rich

If you combine the new wide and full-wide alignments with galleries, you can create a very media rich layout, very quickly:

Sure, the full-wide image can be pretty big. But sometimes the image is worth it.

The above is a gallery with just two images. It’s an easier way to create visually appealing layouts, without having to deal with floats. You can also easily convert the gallery back to individual images again, by using the block switcher.

Any block can opt into these alignments. The embed block has them also, and is responsive out of the box:

You can build any block you like, static or dynamic, decorative or plain. Here’s a pullquote block:

If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.


«If the plan dosen’t work change

the

plan but never the goal

»

TrendyTehem

Gallery Block

Quote Block (another style)

Take up one idea, make that one idea your life. Think of it, dream of it, Live on that idea let the brain, muscles, nerves, every part of your body be full of that idea, and just leave every other idea alone. This is the way to success.

Swami Vivekananda

Table Block

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
Row 3 Column 1 Row 3 Column 2

Text Column Block

You might be used to pulling up a chair to your computer, but it makes much more sense to pull your computer up to your chair. Laptops can certainly be used at your desk, but you also have the option of bringing them to the spot where you’re most comfortable. Maybe you’d like to surf the Web in the evening out in the living room or catch up on your favorite blogs before bedtime. Notebooks with wireless connectivity can travel with you throughout your home, so you can check your email or do your Internet shopping anywhere. Of course, notebooks also make sense for those who are on the go. Students can take laptops to class and to the library,

You might be used to pulling up a chair to your computer, but it makes much more sense to pull your computer up to your chair. Laptops can certainly be used at your desk, but you also have the option of bringing them to the spot where you’re most comfortable. Maybe you’d like to surf the Web in the evening out in the living room or catch up on your favorite blogs before bedtime. Notebooks with wireless connectivity can travel with you throughout your home, so you can check your email or do your Internet shopping anywhere. Of course, notebooks also make sense for those who are on the go. Students can take laptops to class and to the library,

With the right notebook, it’s easy to take photos with your digital camera, upload them, and email them to friends and family before you even get back home. Or you can use it to write a vacation blog and include those pictures from your digital camera. The size and quality of computer notebook displays has improved so dramatically that there’s little difference between laptops and a computer desktop. For example, you can get Apple’s MacBook with a 13.3-

WordPress Embed Block

Vimeo Embed Block

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *