Skip to main content
A White Pixel
  • WordPress Gutenberg Developer’s Guide
  • Latest Posts
    • WordPress
    • Gutenberg
    • Themes
    • WooCommerce
    • Gravity Forms
    • Advanced Custom Fields

Tag: javascript - page 2

Add Custom Settings to Existing WordPress Gutenberg Blocks

Ever found yourself in the situation where you want to add your custom settings to WordPress’ Gutenberg blocks? In this post we’ll go into detail in how to do that. You’ll find two example code of real-life use-cases of adding custom settings to WordPress’ blocks. Keep in mind that because Gutenberg blocks are Javascript, modifying […]

How to Add Color Settings to Your Custom Gutenberg Block

This post will go into depth in how to add color settings to your custom WordPress Gutenberg block. We will learn how to add the same color settings component, which features choosing from palette colors and custom color, as many of WordPress’ default blocks use. This is what we will add to our custom block: […]

Add a Custom Inspector Sidebar in WordPress Gutenberg with Post Meta

In this tutorial we’ll look into how to add a custom sidebar to the Inspector (right sidebar) in WordPress Gutenberg. Inside we’ll implement a field connected to a post meta. Everything is implemented with Javascript, inside the Gutenberg editor, and is an alternative to adding metaboxes the traditional way. Heads up! This is a tutorial […]

How to Add an Image Select in Your Custom WordPress Gutenberg Block

This post is for you who’s creating a custom Gutenberg block and need a way to select or upload an image from the Media Library. Most other field types, such as checkboxes, text inputs, or colorpickers, are pretty easy to add but a Media uploader requires a bit more code. We will create a Inspector […]

Create Custom Gutenberg Block – Part 10: Fetching Posts and Higher-Order Components

In this final part of the Gutenberg custom block tutorial series we’ll learn how to use higher-order components to utilize WordPress’ components for performing queries for posts and other core WordPress information. In the previous part we learned about dynamic blocks and we ended up implementing functionality for typing in a post ID and using […]

Create Custom Gutenberg Block – Part 9: Dynamic Blocks and PHP Render

So far we have rendered the block’s output in Javascript. However with dynamic content like recent posts or displaying a post we need to render the block’s output in PHP. In this post we’ll learn how, and why. Why do we need to handle dynamic blocks differently? Some examples are obvious; a block that displays […]

Create Custom Gutenberg Block – Part 8: Translation Support

In this part we’ll focus on how to translate the texts and values in our custom Gutenberg block. We use WP-CLI to generate the necessary files so that Gutenberg is able to load our translations when switching the WordPress language. Before going ahead with this, you need to have WP CLI (command-line interface for WordPress) […]

Create Custom Gutenberg Block – Part 7: Create Your Own Custom Components

So far in this tutorial series we’ve written all code inside registerBlockType()‘s edit function. It’s fully possible, and often recommended to instead assign edit to a separate component. By doing so we can utilize functionality like component state and lifecycle methods. It’s also much cleaner, readable and provides reusable code! If you are not familiar […]

Create Custom Gutenberg Block – Part 6: Toolbars

In this post we’ll learn how to add WordPress’ toolbars to our block, i.e. for alignment and block alignment. We will also learn to add our own toolbars with our own buttons for doing custom actions. Adding toolbars In order to add something to the toolbar for our block we’ll need to wrap what we […]

Create Custom Gutenberg Block – Part 5: Inspector Settings

In the previous steps we learned the basics of how to render components and attributes in a block. In this step we’ll focus on what WordPress (at least in code) calls Inspector: the sidebar on the right hand side in the editor. We’ll touch upon some new components that make sense to place in the […]

Posts navigation

« Previous 1 2 3 Next »

Categories

  • Advanced Custom Fields (7)
  • Gravity Forms (5)
  • Gutenberg (31)
  • Mini Tips (3)
  • Themes (30)
  • WooCommerce (9)
  • WordPress (37)

Newest Posts

  • How to Translate custom Gutenberg Blocks with block.json
  • Creating Custom Gutenberg Blocks with block.json
  • Gutenberg: Updating withSelect and withDispatch into React Hooks (useSelect and useDispatch)
  • How to Add Post Meta Fields to Gutenberg Document Sidebar
  • In-Depth Guide in Creating and Fetching Custom WP REST API Endpoints
  • How to Deprecate Gutenberg Blocks

Tags

admin (5) ajax (2) cpt (4) css (4) filters (10) hooks (12) i18n (3) javascript (28) media (1) menus (6) object-oriented (2) plugin customization (20) post query (5) rewrite url (3) scripts and styles (6) seo (3) theme (17) widgets (3) WP REST API (2)