Managing Images in your Custom Gutenberg Block

Let's build a custom WordPress block with a focus on editable image fields. Using the block-components library from 10up and a custom image function I wrote this year, we'll go through every file in our custom block together.
🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨
👉 briancoords.com/7tools
👉 Blog Post - www.briancoords.com/managing-...
👉 All the code - github.com/bacoords/example-i...
👉 Create-block - github.com/WordPress/gutenber...
👉 Block Components - github.com/10up/block-components
👉 WordPress Newsletter - www.briancoords.com/newsletter/
00:00:00 Introduction
00:01:06 Preview of our Block
00:02:06 Create Block Package
00:02:35 10up Block Components
00:03:15 Block.json
00:03:45 The render.php file
00:04:19 Starting our edit.js file
00:04:57 10up's Image Component
00:06:35 BlockControls and MediaToolbar
00:08:12 InspectorControls
00:10:52 Adding a remove Button
00:12:13 Our custom AttachmentImage component
00:13:33 Final Preview and wrap up

[@BrianCoords]

In case the links aren’t working yet:
Links
Blog Post - www.briancoords.com/getting-wordpress-media-library-images-in-javascript/
All the code - github.com/bacoords/example-image-block
Create-block - github.com/WordPress/gutenberg/tree/trunk/packages/create-block
Block Components - github.com/10up/block-components

[@demystifyingdev]

Thanks so much for this video. Just what I need as I start to use WordPress as a full stack javascript platform in its own right, along with headless and other options... Short, concise, to the point, up-to-date completely and extremely creative. Great use of the various component libraries. Thanks!

[@AlexFreixa18]

Thank you so much!

[@hujth6]

Amazing video
Block development is so complicated but your video make it more clear. Thanks

[@megalordification]

Straight to the point and professional - thanks

[@BrianCoords]

Thank you for watching!