Welcome to the Gutenberg Editor

Of Mountains & Printing Presses

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.

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.

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.

Beautiful landscape
If your theme supports it, you’ll see the "wide" button on the image toolbar. Give it a try.

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

Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That’s the spirit behind the inserter—the (+) button you’ll see around the editor—which allows you to browse all available content blocks and add them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.

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

A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having fields for editing things like the source of a quote, or the text of a button, you can directly change the content. Try editing the following quote:

The editor will endeavor 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

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.

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:

Accessibility is important — don’t forget image alt attribute

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:

https://vimeo.com/22439234

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

Code is Poetry

The WordPress community


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.


Thanks for testing Gutenberg!

👋

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/37201/

(0)
iouedioued
上一篇 2023-03-03
下一篇 2023-03-03

相关推荐

  • Axure RP入门第五篇——全局变量实现不同窗口加载

    产品经理入门:Axure RP入门第五篇——全局变量实现不同窗口加载

    2018-03-04
  • 猎豹资深交互设计师分享:如何利用数据来支撑设计?

    作者:可风 我最早的时候认为设计就是如何去做出各种新奇的图形、质感和界面,追逐潮流和创意。可是后来发现设计最难的是平衡各方面的因素,在条条框框的限制中找到方案还要推进下去,并被人看到价值。前者很容易满…

    2015-11-15
  • 人工智能时代,给设计师的 3 个建议

    过去一年,和人工智能相关的新闻铺天盖地。身为设计师的你可能会问:人工智能和我的日程工作有关吗?我应该为此做什么准备?Design will be less about delivering on a user’s request, and more about responding to the needs they haven’t expressed yet.
    (未来,设计会更多地去响应用户还没有表达的需求,而不是去为了响应用户主动提出的需求)「Alexa,把客厅灯关了,把我的床头灯开到一半的亮度」
    「Alexa,再买一袋我上个月买过的那款猫粮」
    「Alexa,我今天早上的会议几点开始?」

    2017-05-07
  • 新版MATERIAL DESIGN 官方动效指南(二)

    Material Design的动效设计 是响应式的,自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。

    2017-05-23
  • 在Sketch中做游戏?盘点那些你不知道的奇葩Sketch插件

    静电说:我想你一定是看了这个标题进来的,对,今天静电就要来给大家介绍几款看起来很奇葩的Sketch插件,甚至有些插件可以直接生成游戏!诶哟厉害了我的哥哥!来看看吧。Latex Sketch PluginLatex这款插件可以生成像下边的带有上标的公式,也许这个适合数学老师来用。当然如果各位小伙伴有做这方面设计的话,也许可以给你不少惊喜。嗯,这个插件已经被爱因斯坦点赞。下载地址:http://www.sketchchina.com/rea...

    2018-03-02
  • 交互设计文档怎么写? | 设计基础

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。对于一个设计团队来说,统一的文档规范和设计规范,不仅能够减少合作方的学习成本,提升设计师和设计部门影响力。即使产品不同需求不同设计师不同...

    2018-02-09
  • “想要”之前是“需要”,用户体验设计的需求层次长啥样?【UXRen译#155】

    作者: Interaction Design Foundation |  翻译:代代子,校审:Duke   用户更倾向于选择那些能满足自己“需求”,而非迎合自己“欲望”的产品。美国心理学家亚伯拉罕·马斯洛提出的需求层次理论,详细阐述了人类的心理…

    交互专题 2017-08-07
  • 总结|服务设计的基础概念和案例

    在这里,本文作者和大家分享一些我总结的服务设计的基础概念和案例,希望对大家快速入门服务设计有所帮助。

    2017-05-06
  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08
  • 设计师的必备技能!你需要学会设计有意义的动效

    编者按:关于动效设计,我们探讨过很多次。直到现在,我们越来越清楚地意识到,动效设计已 经无处不在,已经成为了设计师们必须掌控的一个重要技能。参加过今年的Google I/O大会之后,设计师Paul Stamatiou 也充分…

    2014-12-03