Skip to content

Omukiguy

  • Plugin Development
  • Videos
  • Support my Work
  • About
  • Contact Me

Settings Sidebar:: Add Block Text, Image and Checkbox Fields – WordPress Gutenberg Block

August 24, 2021 by omukiguy

This is the second video in the series. If you missed the first one, see Native WordPress Gutenberg Blocks – Tooling & Setup of first block or learn how to make blocks using ACF

Part II – Video Settings Sidebar:: Add Block Text, Image and Checkbox Fields – WordPress Gutenberg Block

We add new controls in the WordPress Gutenberg Block Settings Sidebar. We add Block Text, Image and Checkbox Fields using the native Javascript/React Components.

We learn how to handle the Block Editor JSX and build on the first plugin we did in the previous video.

VIDEO CHAPTERS

  • 00:00 Saving Block Settings in Sidebar
  • 01:03 Navigating the WordPress Block Editor Library
  • 02:03 JSX & The Block Editor
  • 04:56 The Blocks Inspector Control
  • 05:49 Add a Block Panel to your custom block
  • 07:11 Using the Blocks Checkbox Control
  • 10:29 Add Block TextArea Controls
  • 12:52 Upload Images with MediaPlaceholder component
  • 13:52 In-depth MediaPlaceholder component
  • 15:07 Next video

Post navigation

Previous Post:

Create ACF Admin menu Options Page & Sub Pages with Advanced Custom Fields

Next Post:

Add Google Maps Pins & Address AutoDetect on WooCommerce Store Billing & Shipping for Free

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Beginner Tools (4)
  • Building Native WordPress Gutenberg Blocks (2)
  • ClassicPress (1)
  • Dev Life (5)
  • Developer Tools (21)
  • Everyday Life (4)
  • Gutenberg Basics (2)
  • Junior Development Course (1)
  • Plugin Reviews (1)
  • Resources (3)

Subscribe to Newsletter

* indicates required




Reliable WordPress Hosting

Recent Writes

  • Add Google Maps Pins & Address AutoDetect on WooCommerce Store Billing & Shipping for Free
  • Settings Sidebar:: Add Block Text, Image and Checkbox Fields – WordPress Gutenberg Block
  • Create ACF Admin menu Options Page & Sub Pages with Advanced Custom Fields
  • Native WordPress Gutenberg Blocks – Tooling & Setup of first block
  • Build Custom Gutenberg Blocks with Advanced Custom Fields (ACF) for WordPress Block Editor
© 2022 Omukiguy | Built using WordPress and SuperbThemes