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

相关推荐

  • 真诚的用户体验设计

    不知道身为「用户体验设计师(UX Designer)」的诸位是否也有过和我一样的困惑:初入行时兴冲冲觉得自己就是那个为一切产品用户体验问题负责的「真命天子」,积极主动去搜集反馈访谈用户,可当真正卷起袖子打算为解决这些「体验问题」大干一场的时候,却发现有些无从下手。

    2017-05-26
  • 复杂性和用户体验[译]

    每一个交互设计师应该都怀有一颗追求简单的心——轻盈的操作,简易的流程,干净的界面。每每提及复杂性,必然会想到其对立面——简单。所谓简单,就是要去除不必要的干扰,让用户直达目标。优秀的产品关注简约而非复杂…

    交互设计 2015-07-22
  • 特殊情况下的APP设计(6):交互走查表

    本文作者将用交互走查表的形式,对系列文章“特殊情况下的APP设计”进行一个总结。enjoy~

    2017-04-27
  • 用户体验 | 移动网络音频传播效果研究

    作者:广东外语外贸大学新闻学院教授   郭光华广东外语外贸大学新闻学院硕士生    余思乔来源:《新闻爱好者》【摘要】在传统媒体被集体唱衰的时代背景下,移动网络音频的出现重新定义了广播行业,并在短时间内抢占了大量的音频市场份额。移动网络音频作为互动传播平台,将传统的听众身份转变为用户角色。用户主动使用这一平台,在互动中完成了内容的共构和情感的交流,从而获得了全新的体验与满足。【关键词】移动网络音频;用户体验;传播效果移动网络音频是新媒体...

    2018-04-10
  • 这是我见过的最差的作品集【UXRen译#171】

    作者:Alex Cornell (Facebook设计师)   |  翻译:冬柏,校审:天蛙   这是我见过的最差的作品集。我总结了一下这些糟糕的作品集,都存在以下几点问题:   1、作品集只有一个段落 在你的个人网站我没有看到任何作品…

    交互专题 2017-08-07
  • 产品原型设计之交互体验的思考过程(一)

    我有两种方式 来建立这种认识。
    简单而迅速的方式是用一句话把它写出来,包括我要设计什么,要遵循哪几条设计规则,尽量使用最简单的术语。然后,在面对设计功能对照表而犹豫不决时,我就会暂时停下来,问我自己:“做这个表是为了什么?”这个描述是我判断设计是否简单的基准。在做一些比较小的设计(大型网络中的一个页面)或者在我多多少少了解到设计背景的情况下,这种方式都是很奏效的。
    更好而花费时间更长的方式是描述我希望用户拥有什么样的体验。具体一点说,就是描述用户的使用背景,以及我的设计怎么满足用户在该情下的需求。在设计一些大型啊项目时(比如整个网站或者移动设备),这种方式很适合,因为我这种方式可以让我深入透彻地考虑到每一个细节。

    2017-05-23
  • 预加载:尝试分析这种自动加载的交互方式

    网站运营者的目的是为了增加阅读量,用户停留时间。而大部分用户一般是比较迷茫的,他们不知道自己想要读什么。

    2017-05-01
  • 在做交互设计时,你需要知道这几大定律

    形式是跟随功能的,功能是满足用户需求的。尊重你的用户,让每个产品的细节都是合情合理的,然每一寸体验是“走心”的!

    2017-05-20
  • 聊聊负反馈在交互设计中的应用

    在日常交互行为中,多多少少存在各种各样的反馈行为(feedback),没有反馈的系统是不存在的。有些反馈是积极的,告诉人们完成了什么,有些则是负面的,对人们可能采取的破坏性交互行为进行预警,告知人们如果这样做会有很严重的后果。反馈是人们确认系统在工作的重要依据,试想你明明提交了数据,界面或者系统却没有任何提示,你肯定会越来越疑惑烦躁,还可能连续提交造成系统崩溃。

    2017-05-29
  • 不看枉为互联网人互联网大会PPT精彩集锦

    当APEC峰会灿烂落幕,“双十一”血拼结束,下一个举世瞩目的焦点在哪里?浙江乌镇——首届世界互联网大会19日在这里启幕。 今天小编整理了互联网大会的精品PPT分享给大家,内容涉及与移动医疗最密切相关的三个互联网行…

    2014-11-21