Custom Responsive Settings in Gutenberg Blocks

Add custom settings fields to any Gutenberg block. In this tutorial, we add a responsive display setting to Gutenberg using 10up's Block Extension API, the WordPress Scripts build process, and the WordPress Base Styles Sass library.

🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨
👉 https://briancoords.com/7tools

👉 Full code: https://github.com/bacoords/example-b...
👉 10up Block Extension API - https://github.com/10up/block-compone...
👉 WordPress Scripts - https://github.com/WordPress/gutenber...
👉 WordPress Base Styles https://github.com/WordPress/gutenber...
👉 My WordPress Newsletter - https://www.briancoords.com/newsletter/

00:00:00 What is a block "setting"?
00:01:41 Our plugin's structure
00:02:51 WP Scripts and our build process
00:03:51 Asset PHP File from WP Scripts
00:04:09 Starting with registerBlockExtension
00:05:03 Attributes in blocks and block.ison
00:07:01 Our custom Edit component
00:07:58 Using InspectorControls in our Edit component
00:10:27 WordPress/Components Library
00:11:22 Handling attributes in our component
00:12:33 The Generate Class Names function
00:13:19 Enqueuing Block Editor Assets
00:15:23 Testing our ToggleControl
00:15:59 Adding the SelectControl Component
00:20:00 generating class names
00:22:07 Sass with WordPress Scripts
00:23:55 Enqueueing a block stylesheet
00:26:31 Using WordPress Base Styles
00:29:42 Gutenberg breakpoints and mixins
00:31:04 Testing our responsive styles
00:31:39 Frontend vs Editor Styles
00:35:37 Wrap up and final testing