Tag Archives: block editor

Create With Confidence and Better Blocks

The evolution of the block editor is packed full of features and UI improvements.

Date: March 26, 2020

Written by: Ramon

In the last few years, the teams working on the block editor have learned a lot about how people build sites now and how they want to build sites in the future.

The latest version represents the culmination of these discoveries, and the next stage in the editor’s evolution.

With better visuals and more advanced features, it’ll keep designers, developers, writers, and editors productive and happy, and — tension-building drumroll — it’s in your editor right now!

What’s new

With a comprehensive visual refresh, a plethora of new features, and dozens of bug fixes, the new block editor comes with a lot to unpack.

What follows is just a small (but delectable) sample of the many ways we’ve upgraded your editing experience. (You can get the full list of goodies in the release notes.)

We hope you enjoy.

A revamped editor UI

The first thing you’ll notice is the slick UI. Buttons, icons, text, and dropdowns are all sporting a contrast boost, with bolder colors and more whitespace between buttons, text labels, and menu items.

The world is made of blocks
The new block editor’s UI

As you navigate through the editor’s menus, individual items are clearly highlighted, allowing you to quickly identify what you’ve selected.

Active menu items have distinct highlights

The block toolbars are now simpler, displaying the most commonly-used features. For example, paragraph blocks show only bolditalic, and link formatting buttons. You’ll find all the extra options in the dropdown menu.

The block toolbar options are simpler and uncluttered

What’s more, instead of listing blocks within a fixed-height container, the block inserter now spans the height of the window. You’ll now see more blocks and block categories at once with less scrolling.

Block inserter spanning the full height of the window
The block inserter spans the full height of your screen

Introducing block patterns

With the block editor as your canvas you can design almost any layout you can imagine – but building intricate page structures should never get in the way of your creative process.

Here’s where the blocks really shine: along with individual blocks, the editor now includes block patterns, a library of predefined and reusable block layouts, that you use on any page or post.

To check out the list of available patterns, click on the block pattern icon (on the top right) to reveal a collection of pre-built layouts:

Block patterns are groups of individual blocks combined to create elegant layouts

Pick the pattern you want to use, and it will appear in your editor ready for you to customize with your own content.

Right now, you’ll find a few introductory patterns – Two Columns of TextTwo Buttons, Cover, and Two Images Side by Side – but we’ll be adding more and more patterns as they’re available. When the block patterns API opens up to third-party authors, you’ll also be able to develop and share your own.

(Have an idea for a great pattern? The block editor developer community is actively seeking ideas. The more ideas they receive, the better your editor will be!)

Colors, colors everywhere

When it comes to words and columns, websites aren’t newspapers: things don’t have to be black and white.

Use the new Text Color selector tool to change the color of sentences, and even individual words and letters. Highlight the text you’d like to change, then click on the arrow dropdown and select “Text Color.”

Select “Text Color” from the options
Pick the color of your word or character

To change the background colors of your columns, select the column and head to the sidebar, to Color settings.

Columns get background colors too!

The road ahead is paved with blocks

There’s still a long way to go, and the editor’s community of contributors hasn’t given its collective keyboards a moment’s rest. Work on polishing UI elements like the sidebar and dropdowns continues along with advancements to block patterns and other exciting features.

Are there ways we could improve the site editing experience even more? Please let us know! We’re always keen to hear how we can make the web a better place for everyone.

Feel Free to Join The 4K Media Group:
Subscribe and become a member to stay informed about the latest 4k demo videos. Don’t forget to like, share and subscribe to my channel for more spectacular 4k demo videos.

YouTube:
https://www.youtube.com/c/the4kmediagroup1

Facebook:
https://www.facebook.com/the4kmediagroup

WordPress:
https://the4kmediagroup.video.blog
https://4kmediagroup.wordpress.com

A Free Online Event Focused on the Block Editor

Join the WordPress community on April 2 for talks on the block editor, block development, and design in a world of blocks.

Date: March 18, 2020

Written by: Cheri Lucas Rowlands

Ready to explore the possibilities with the block editor? WPBlockTalk is a free and live virtual event that will bring together designers, developers, and other WordPress enthusiasts from across the WordPress community.

Topics to expect:

  • Building the block editor: what it takes to develop the block editor, what features are on the roadmap, and how you can contribute.
  • Developing blocks: inspiration and ideas for developing your own custom blocks.
  • Designing with blocks: learn more about using blocks to make powerful and versatile layouts and templates.

If you’re passionate and curious about the future of WordPress, then this April 2 event is for you!

If you’re busy that day, don’t worry — all the talks will also be published on WordPress.tv for you to watch (and re-watch) whenever you like.

In the meantime, join the WPBlockTalk email list for registration details, speaker and schedule updates, and more. We look forward to seeing you online!

The block editor is now supported on the WordPress native apps.

The block editor allows for a smoother drafting experience – now possible on any screen size.

Date: January 20, 2020

Written by: Karen Attfield

Part of what helps WordPress power 35% of the web is language: WordPress is fully translated into 68 languages. Pair that with the WordPress native apps, which make WordPress available across devices, and you have a globally accessible tool.

Today we’re announcing app updates that bring the new Block editor to mobile devices, so on-the-go publishing is even easier for that 35%.

At Automattic, we speak 88 different languages, so we thought: why not use some of them to tell you about the editor updates? Instead of a few screenshots and bullet points, here are some of the people who build the editor and apps sharing their favorite tools and tricks for the mobile Block editor. To make it more accessible, we’ve also included English translations. 

(And for those who want more detail — yes, there are still screenshots and bullet points!)

Rafael, Brazilian Portuguese

Com o novo editor, a criação de conteúdo é mais intuitiva por que as opções de formatação de texto e inserção de arquivos são exibidas de uma forma bem simples.

Toque no ícone ⊕ enquanto estiver editando um post ou página para ver os blocos disponíveis como Parágrafo, Título, Imagem, Vídeo, Lista, Galeria, Mídia e texto, Espaçador e muitos outros.

Translation

With the new editor, creating content is more intuitive because the options to format text and add media are displayed in a simple way. Tap on the ⊕ icon when editing whether a post or page to see all the available blocks like Paragraph, Heading, Image, Video, List, Gallery, Media & Text, Spacer and more.

Anitaa, Tamil

பயணங்களில் மிகவும் விருப்பமுள்ள எனக்கு, பயண குறிப்புகளை பயண நேரத்திலேயே எழுதுவது வழக்கம். இந்தப் புதிய கைபேசி செயலி என் வேலையே மிகவும் எளிதாக்குகிறது. எனக்குப் பிடித்த சில அம்சவ்கள்:  

  • கி போர்ட்டில் உள்ள நேக்ஸ்ட் பொத்தானை அழுத்துவதன் மூலமே புதிய பத்தியை தொடங்க முடிவது.
  • பட்டியல் தொகுதியைப் பயன்படுத்தி எனது சொந்த பட்டியலை உருவாக்க முடியும்.

பட்டியலின் உள்ளெ பட்டியலை சரிபார்க்கும், அல்லது, துணை பட்டியலை உள்ளடக்கும் பட்டியல் பத்தியை ஆவலுடன் எதிர்பார்க்கிறேன். எனவே அடுத்த புதுப்பிப்பைப் பற்றி நான் மகிழ்ச்சியடைகிறேன்.

Translation

I love travelling and I spend a lot of time on my blog writing travel tips while on the go. My favorite features in the Block editor include:

  • Creating a new paragraph block by pressing the RETURN button on the keypad.
  • Adding a List block to create my own lists.
    • You can even add sub-lists!

I look forward to seeing what’s coming next!

Mario, Spanish

Cuando escribo, doy mil vueltas sobre qué palabras utilizar y me cuesta decidirme. Uso mi móvil porque me da la posibilidad de capturar mis ideas justo en el momento que se me ocurren. Es por eso que de las cosas que más me gustan del Editor es que puedo moverme de un bloque de texto a otro con facilidad y también cambiarlos de lugar. Además, se puede hacer/deshacer muy fácilmente, y siempre se mantiene el historial de edición lo que me da mayor seguridad a la hora de cambiar incluso sólo pequeñas partes del contenido que voy escribiendo.

Translation

When I write, I walk around in circles and can never decide which words to use. So I use my mobile phone, which lets me capture ideas right when they occur to me. That’s why the things I appreciate in the new Editor are the abilities to move from block to block with ease and to change their order and since you can undo/redo quite easily and can see your editing history, I have confidence when I change even small bits of the post I’m writing.

Jaclyn, Chinese

用過 Gutenberg 古騰堡後網誌效率高很多!因為寫旅行文章,很多時候是在旅途中或是平日空擋等候時間紀錄和寫下想法,行動 app 讓我隨時隨地都可以編輯文章。行動古騰堡簡化了移動文章段落重新排序的步驟,讓文章的架構變得很清楚,也更容易管理。

Translation

The new block editor truly makes a difference in my blogging efficiency and experience. Since my blog is about traveling, I often scribble notes and thoughts during my trips. The block editor on mobile simplifies the process of moving paragraphs around and organizing content, so the architecture of the post becomes clearer and easier to reorganize.

To start using the block editor on your app, make sure to update to the latest version, and then opt in to using it! To opt in, navigate to My Site  Settings and toggle on Use Block Editor.

We hope you give the latest release a try; tell us about your favorite part of the mobile block editor once you’ve had a chance to try it.

We’d also love to know your thoughts on the general writing flow and on some of the newer blocks like video, list, and quote blocks. For specific feedback, you can reach out to us from within the app by going to Me  Help and Support, then selecting Contact Us.