• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (deprecated)
You are here: Home / Archives for Gutenberg

Gutenberg

How to Close and Re-Open WordPress Gutenberg Sidebar

Last updated on June 30, 2023 by Sal Ferrarello

The sidebar gets a lot of use in the WordPress Block Editor, a.k.a. Gutenberg, but I found myself in a situation where I needed to programmatically close the sidebar and then re-open it later. This is how I did it.

Filed Under: Dev Tips, Programming, Solution Tagged With: Gutenberg, JavaScript, WordPress

Change Render Size of Featured Image in WordPress Gutenberg Block Editor

Last updated on May 7, 2023 by Sal Ferrarello

In the WordPress block editor (a.k.a. Gutenberg) the “Featured Image” is rendered at the WordPress ‘large’ image size by default. By adding a WordPress JavaScript filter to the ‘editor.PostFeaturedImage.imageSize’ hook, we can change this default rendering.

Filed Under: Dev Tips, Programming Tagged With: Gutenberg, JavaScript, WordPress, WordPress Filter

WordPress View Block Attributes

Last updated on February 8, 2023 by Sal Ferrarello

When developing a WordPress plugin that creates a Gutenberg block, it is invaluable to be able to view the attributes on the block. Here are some tricks I use to view this information.

Filed Under: Computing, Dev Tips, Programming, Solution Tagged With: block, Gutenberg, WordPress, WordPress Plugin

WordPress Gutenberg Trigger Autosave

Last updated on April 25, 2022 by Sal Ferrarello

Recently, I was documenting the steps to reproduce a certain bug and the bug required the presence of an autosave (along with the “There is an autosave of this post that is more recent than the version below.” message). Rather than wait for an autosave to occur naturally, I wanted to speed things up and manually trigger one. This is the command I use to do that.

Filed Under: Dev Tips, Solution Tagged With: Gutenberg, JavaScript, WordPress

WordPress Gutenberg Notice in JavaScript

Last updated on February 20, 2022 by Sal Ferrarello

You can display four types of notices in the WordPress Block Editor (a.k.a. Gutenberg) using JavaScript: error, warning, info, and success. This blog post contains an example of each.

Filed Under: Dev Tips, Programming Tagged With: Gutenberg, JavaScript, WordPress

Display Keyboard Shortcut in WordPress Gutenberg

Last updated on October 15, 2021 by Sal Ferrarello

In Gutenberg (a.k.a. the WordPress Block Editor), keyboard shortcuts are displayed differently on Apple devices and other devices, e.g. ^H on an Apple device and Ctrl+H on other devices. This is accomplished with wp.keycodes.displayShortcut.

Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Programming Tagged With: Gutenberg, JavaScript, WordPress

Enable, Read, and Write Post Meta in WordPress Gutenberg

Last updated on January 13, 2021 by Sal Ferrarello

The WordPress block editor (a.k.a. Gutenberg) communicates with the database via the WordPress REST API. We can read and write post meta from within the Gutenberg editor after we enable the specific post meta field in the WordPress REST API.

Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Programming Tagged With: Gutenberg, WordPress, WordPress Post Meta

Add Gutenberg JavaScript Filter

Last updated on May 18, 2020 by Sal Ferrarello

WordPress PHP filters allow you make a value modifiable from outside of your code. With the WordPress Block Editor (a.k.a. Gutenberg), you can now do the same thing in JavaScript.

Filed Under: Dev Tips, Programming, Solution Tagged With: Gutenberg, JavaScript, WordPress, WordPress Filter

WordPress Gutenberg import versus Destructuring Global wp

Last updated on April 24, 2020 by Sal Ferrarello

When creating a block for the WordPress block editor (a.k.a. Gutenberg), you are often using existing components. WordPress makes these components available under the global JavaScript variable ‘wp’ as well as available as npm packages. Which is the better way to make a component available in your code?

Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Draft, Programming Tagged With: Gutenberg, JavaScript, WordPress

WordPress Gutenberg Functional Component useState

Last updated on March 30, 2020 by Sal Ferrarello

When creating a block for the WordPress block editor (a.k.a. Gutenberg), I find that most of the documentation is for class components. However, with React hooks we can use functional components. When you need to import ‘useState’ from React, you can do it as follows in a WordPress block.

Filed Under: Dev Tips, Programming, Solution Tagged With: Gutenberg, WordPress

  • Go to page 1
  • Go to page 2
  • Next Page»

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in