Speckyboy RSS: Tips to Help You Power Through Projects with the WordPress Gutenberg Block Editor

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

Tips to Help You Power Through Projects with the WordPress Gutenberg Block Editor


By Eric Karkovack on Mar 01, 2021 06:30 pm


When building a website, it’s important to find efficiencies wherever you can. Those little tricks that save you time without sacrificing quality are always welcome.

The WordPress Gutenberg block editor has plenty of hidden productivity gems built-in. Features such as keyboard shortcuts and UI enhancements that can help us get things done faster. They’re especially nice for those menial tasks like duplicating blocks or repositioning them to fit a particular layout. But that’s only the beginning.

Of course, the editor continues to change. New features are being added while usability has also seen significant improvements. The tough part for users is that some of these items are released with little fanfare.

Today, we’ll introduce you to four features that you can use to get your content-crafting projects done in record time.

Take Advantage of Keyboard Shortcuts

Just like your favorite operating system, Gutenberg comes with some handy keyboard shortcuts. That’s a good thing, because using a mouse or trackpad to open up option menus can become tedious on large projects.

There’s even a keyboard short that will show display (you guessed it) the full array of available shortcuts: Shift + Alt + H

WordPress block editor keyboard shortcuts.

Among the highlights:

Duplicate Selected Blocks – Ctrl + Shift + D

Whenever you need to use more than one instance of a particular block on your page, this one will save tons of time. For example, it’s great for adding multiple rows of columns or separators that you want to spread throughout your content.

Insert a New Block Before Ctrl + Alt + T or After Selected Blocks Ctrl + Alt + Y

Sometimes it takes a bit of cursor gymnastics to place a new block just above or below your current position (although we’ll talk about that in more detail below). These shortcuts will help you add blocks without interruption.

Save Your Changes Ctrl + S

Just like your favorite desktop apps, saving changes to a page or post is only a shortcut away.

Undo Your Last Change Ctrl + Z

Another favorite of desktops, this one will erase that last “oops” moment.

Select and Move Multiple Blocks

When crafting the perfect page layout, there might be times when you need to move multiple consecutive blocks to a new spot. Thankfully, you won’t have to waste time moving each block individually. Instead, there’s a way to select the blocks you want to reposition and place them wherever you like.

To do so, click into the first block you want to move and hold down the Shift key. Then, click on the last block you’re looking to move. This will automatically select all blocks within the range.

From there, you can use the up or down arrows within the dialog to move your selection. For big moves, you can also click on the drag blocks button (the six “dots” to the left of the up/down arrows).

Replace Page Content via the Code Editor

There are a lot of WordPress websites out there still utilizing the Classic Editor or a page builder plugin. The process of switching to the block editor often requires rebuilding any custom page layouts. However, working on the “live” version of the page isn’t the safest option.

The Gutenberg code editor allows you to easily move your new layout from a test page to the “live” version. Here’s how it works (be sure to back up your content first):

1. Create a new page that uses the block editor. Then, build the page to suit your needs.

2. Satisfied with the page you’ve built? Now, you can copy its layout and contents.

On your new page, open up the Options panel (a three-dotted icon on the upper right of the screen) and select “Code editor”. You can also use the keyboard shortcut: Ctrl + Shift + Alt + M

Click into the Code editor. From there, select all of its contents (Ctrl + A) and copy them (Ctrl + C). You might want to paste the code into a text editor for safe keeping.

3. Next, open up your existing page (the one you want to replace). Make sure it is using the block editor (if you’re using the Classic Editor plugin, you might have to click the “Switch to block editor” link on the right side of the screen).

4. Just as in step 2 above, open up the Code editor. Remove all the contents on your existing page and paste the contents (Ctrl + P) from the new one you created earlier.

5. Click the Update button and your new page layout will be in place!

Easily Select a Nested Block

Selecting a specific block within a nested group using your mouse can be frustrating. For example, picking just one column in a row or even selecting the entire column block. You have to click in just the right place.

There is a much simpler solution. The block breadcrumbs that are tucked away at the bottom of the screen is all you need. It displays a complete hierarchy of the group’s structure.

To use it, click anywhere into the group of blocks in the editor. Then, find the exact one you want to select within the breadcrumbs below. Click on the desired block in the hierarchy and it’s yours to edit.

Alternatively, you can also use the “List View” (an offset “hamburger” icon on the top left of the screen) to see a complete listing of blocks used on a page. Find the one you want to edit and click on it. Easy!

Becoming More Proficient with the Block Editor

Yes, the block editor is still evolving. But we’re finally at the point where things have stabilized quite a bit. That makes it a viable option for just about any WordPress website. It also means that content creators will need to level up their proficiency.

One of the best ways to do that is to avoid the point-and-click approach to building layouts. It can be both frustrating and a waste of precious time. Through the use of keyboard shortcuts and some handy UI features, there are now more efficient ways to get things done.

The tips above will get your journey off to a great start. Use them to cut down on build time and to accomplish more with less effort.

The post Tips to Help You Power Through Projects with the WordPress Gutenberg Block Editor appeared first on Speckyboy Design Magazine.



Read in browser »

Recent Articles:

Leveraging the Power of Sushi to Improve Your Designs
Weekly News for Designers № 581
20 Beautifully Designed Logo Creator Kits & Templates
Dealing With Sudden Client Designer Syndrome
10 Tutorials for Creating Seamless Patterns in Adobe Illustrator
Share
Tweet
+1
Share
Forward
Copyright © 2021 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Older messages

Speckyboy RSS: Leveraging the Power of Sushi to Improve Your Designs

Monday, March 1, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Leveraging the Power of Sushi to Improve Your Designs By Addison Duvall on Mar 01, 2021 07:39

Speckyboy RSS: Weekly News for Designers № 581

Friday, February 26, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 581 By Speckyboy on Feb 26, 2021 09:54 am Envato Elements Finding

Speckyboy RSS: Dealing With Sudden Client Designer Syndrome

Wednesday, February 24, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Dealing With Sudden Client Designer Syndrome By Addison Duvall on Feb 24, 2021 07:30 am We

Speckyboy RSS: Thoughts on WordPress Achieving 40% Market Share

Tuesday, February 23, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Thoughts on WordPress Achieving 40% Market Share By Eric Karkovack on Feb 23, 2021 09:02 am

Speckyboy RSS: Choosing New Tools and Technology for Your Web Projects

Monday, February 22, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Choosing New Tools and Technology for Your Web Projects By Eric Karkovack on Feb 21, 2021 10:

🤯 Impressive Mobile UI Kits and more

Thursday, June 24, 2021

Fresh UpLabs Freebies? Yes Please 😉 Take a look at some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. Only $9.99 for UpLabs Premium! Seize the opportunity,

✏ Splash Page Vs Landing Page, Frontend Toolbox, 10 JavaScript Keyboards, and more...

Thursday, June 24, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU Frontend Toolbox - A List of Handpicked Resources for Frontend Developers AKSHAY.ROCKS COMMENTS Splash Page Vs Landing

Grandma's Vases Are Causing a Buzz

Thursday, June 24, 2021

Plus, 15 interiors every design lover must see in person (image) Architectural Digest AD PRO Logo For Clients Enjoying the High Life, These Antiques Turned Cannabis Accessories Could Be a Big Hit Read

✏ Issue #492: Best New Fonts, What to Expect from Windows 11, Brave Search, 6 Levels of UX Maturity, and more…

Thursday, June 24, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #492 JUNE 24, 2021 20 Best New Fonts, June 2021 Welcome to the first in a new series of posts in which we take a look at the best new fonts

Universal Pictures, Surviving IDEO, Assassin’s Creed, Tipping Experience, Aspect-ratio

Thursday, June 24, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 24 2021 Universal Pictures Brand Identity Refinement

The Biggest Paint Trend News of 2021 (So Far)

Wednesday, June 23, 2021

Plus, 17 boldly beautiful dining room ideas from the pages of AD (image) Architectural Digest AD PRO Logo wooden drinks cabinet With Its IPO, Will 1stDibs Become the eBay of Luxury Design? Read More →

✏ How Performance Affects SEO, RWD in a Component World, Coded Illustrations, and more…

Wednesday, June 23, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU How your Website Performance Affects your SEO Rankings BOOTSTRAPBAY.COM COMMENTS Soft UI: Making Sense of the Latest

NYC Votes, Coded Illustrations, Motion & Accessibility, Custom Scrollbars, UCD

Wednesday, June 23, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 23 2021 Vela: Identity Design Process mattyow.medium.com

Issue 308

Wednesday, June 23, 2021

Information as more of the new rendering engine for Chromium lands. Explaining interesting CSS Grid examples, CSS masking, and serving sharp images. CSS Layout News Issue 308 By Rachel Andrew – 23 Jun

Vela Identity, Safari 15, Cars Data, New Responsive, Styled-components

Wednesday, June 23, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 23 2021 Vela: Identity Design Process mattyow.medium.com