Скачать с ютуб Custom Responsive Settings in Gutenberg Blocks в хорошем качестве

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