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

相关推荐

  • 4款视频app交互设计浅析

    作者对腾讯视频、爱奇艺、搜狐视频和芒果TV进行界面的整体对比,希望能给各位带来一些收获和启发。

    2017-05-10
  • 一文看懂用户体验五要素

    《用户体验要素》是美国AJAX之父Jesse James Garrett的经典之作,被称为互联网入门必读的书籍,系统介绍了产品用户体验设计的模型。原作第一版完成于2002年,距今已经16年了,本书的最初是针对网页设计写作而成,但在这16年间,从internet到APP再到移动互联网,这个理论都能适用,越来越被称为经典,可见其在当下以及可见的未来,都具有普适性。因此,学习下用户体验的五要素还是很有必要的。用户体验五要素是将产品设计的过程抽...

    2018-03-17
  • 写给初学者:UI、UX、GUI新手科普指南

    这篇文章会跟各位伙伴简单介绍UI、UX跟GUI三者的差异,同时也会根据自身经验说明一些业界实际的需求状况,有任何问题欢迎透过留言一起讨论喔!注:近期的业界趋势就是,不管你是工程师、设计师、BD、PM还是老板,只要会说一句话,「阿,这样设计不够『直觉』啦,使用者OOXX…」,就有种好像很懂UX的感觉呢!(苦笑)为什么使用者会点进「关于我们」注:近期有不少的Landing Page常常都会用无声的影片搭配黑色屏蔽塑造分为,其实营造的感觉真的还不赖。(当然…影片要拍得好)

    2017-05-12
  • 交互设计--需求分析的20条法则

    来源:UI新动态对商业用户来说,他们后面是成百上千个供货商,前面是成千上万个消费顾客。怎样利用软件管理错综复杂的供货商和消费顾客,如何做好精细到一个小小调料包的进、销、调、存的商品流通工作,这些都是商…

    2017-08-02
  • 设计师个人品牌的建立

    个人品牌是人们将自己和事业作为一个品牌推广出去。如今,空有一门好手艺已经不够了,独特和真实可信方可过关,但前提是人们得知道你。正如Michael Simmons所写道,在数字时代,真实才是关键。强有力的个人品牌可以创造大量机会,获得充分认可。

    2016-02-21
  • 【大数据】APP留存率的计算

    留存率,越来越受到大家的关注,从网站用户到客户端产品,游戏产品,无线APP产品,都非常重视这一指标,留存率成为衡量一个产品是否健康成长的重要指标之一。 留存率的“40–20–10”规则 Facebook平台流传出留存率“40–…

    2015-01-14
  • Axure玩出新花样,做个游戏玩转Axure9大常用功能 | 免费直播课

    产品经理会画原型,是入行的基本门槛。一个可用可交互的原型可以帮助开发和设计人员从不同的维度上来了解你的产品设计,降低需求的沟通成本。那么,对于产品经理来说,如何才算是“会画”原型呢?你可能会认为,会画基本的线框图就足以满足日常需求了。但是借助静态的线框图解释你的设计,始终都不会像可交互的原型这么直观有效。原型的工具虽然有很多,但Axure还是最经典的一款画原型工具。虽说Axure用的溜,并不代表你就能成为一个产品经理;但作为产品经理,更...

    2018-03-04
  • 《用户体验可视化指南》视频讲书(6)

    《用户体验可视化指南》书中第2章的第2部分从伦敦地铁地图,看体验地图的元素、范围和根据目标的取舍。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享从这里开始讲绘制共线图前的5个思考点:视角、范围、焦点、结构和用途。蓉姐在这节视频中主要讲解了视角和范围这2点。1、视角有2个决定因素,目标用户和想要绘制的体验类型。a. 每类目标用户,在产品互动的关键触点上,应该是有明显差异的。哪些企业的主目标用户,哪些是次级...

    2018-04-10
  • 如何输出一份合格的交互设计文档?

    做一件事之前一定要先想清楚做这件事的目的,为什么要做这件事,只有这样,才能万变不离其宗,不会变成为了做事而做事,这很可怕。拿交互设计文档来看,为什么要写交互设计文档,这是开始写之前要想清楚的。

    2017-05-15
  • 手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇…

    2017-08-03