Easy custom blocks using InnerBlocks in Gutenberg

Ғылым және технология

A great way to start building blocks for WordPress is using InnerBlocks. Group other blocks together and easily add styles and settings.
🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨
👉 briancoords.com/7tools
👉 Full Code github.com/bacoords/example-i...
👉 Create Block Package github.com/WordPress/gutenber...
👉 Transcript & Written Tutorial www.briancoords.com/build-cus...
👉 More Tutorials www.briancoords.com/
00:00:00 Introduction
00:00:59 Our environment and create-block
00:02:22 Block.json
00:03:15 Edit.js and Inner Blocks
00:06:59 Preview of the editor
00:07:43 Save.js
00:08:33 Testing our save.js
00:09:06 Reviewing the frontend HTML
00:09:44 Styling our block
00:11:39 Previewing our frontend styles
00:12:32 Reviewing the editor experience
00:15:29 Adding block supports
00:18:17 Closing

Пікірлер: 11

  • @seiuwatches
    @seiuwatches11 ай бұрын

    Very informative and well explained! Looking forward to each new video! :)

  • @BrianCoords

    @BrianCoords

    11 ай бұрын

    I appreciate that! Hopefully I can get to the next one soon!

  • @Mhmm-sr
    @Mhmm-sr3 ай бұрын

    Thank you so much for the tutorial, it helped me a lot with my Gutenberg Block Problems

  • @BrianCoords

    @BrianCoords

    3 ай бұрын

    Glad it helped!

  • @PaulMcCannWebBuilder
    @PaulMcCannWebBuilder8 ай бұрын

    If Copilot was smart enough to catch trailing commas in JSON, we'd all be done with our projects much sooner :)

  • @zhan883
    @zhan88311 ай бұрын

    Big fan of your courses and the podcast on viewsource. I was just wondering how can we check a plugin for any vulnerabilities. I mean, apart from creating high-quality plugins, is it possible to run automated checks via command line or something like that?

  • @BrianCoords

    @BrianCoords

    11 ай бұрын

    Definitely. Be sure to start with the WPCS (developer.wordpress.org/coding-standards/wordpress-coding-standards/php/) which can be installed and run via the command line. That'll pick up more obvious issues like escapting/sanitizing data correctly. You can also use the same tool that the plugin review team uses for scanning plugins: github.com/WordPress/wporg-code-analysis

  • @zhan883

    @zhan883

    11 ай бұрын

    wow thanks

  • @PaulMcCannWebBuilder

    @PaulMcCannWebBuilder

    8 ай бұрын

    @@BrianCoords This would make a great tutorial, even that obvious stuff is often overlooked.

  • @reyanshxd2043
    @reyanshxd20435 ай бұрын

    Hello, is it possible to add multiple Innerblocks in a single block?

  • @BrianCoords

    @BrianCoords

    5 ай бұрын

    No, sorry - only one set of InnerBlocks per a block. You could have two custom blocks, each with their own InnerBlocks, but that's maybe getting a little complicated.

Келесі