Simple editor button example (no build) about block-development-examples HOT 2 CLOSED

@joho1968 - Greetings!

It took me about an hour to write up this comment, so I sincerely hope the information below inspires you to challenge yourself and push limitations of what you can do with JavaScript and WordPress.

I was curious to see how easy it is to set up a block without a build step. Strangely enough, it was very obvious as to why the build process is set up with wp-scripts to automagically re-compile your code so it can be rendered in the browser.

Check out Getting Started with wp-scripts as a primer...

wp-scripts is a set of tools that does a number of things when you are working on creating custom blocks and working on changes in the Block Editor.

For now, don't get too caught up on what's going on with the scripts package. Please keep reading!

Using wp-scripts

Some of the features offered when building your blocks as not Vanilla JS are...

• When you save your JavaScript and reload the page, your block will re-form, showing your changes
• When you save CSS changes and reload the page, your block will change styles
• You will receive a series of debugging, JavaScript and CSS linting, and code formatting packages included

The benefits of writing a block as Vanilla JavaScript are...
well... there aren't many. Most of the modern web world is going away from this approach and more towards creating rich user interfaces with JS packages such as React, Svelte, and Vue.js, to name a few.

Probably the biggest benefit to being able to write a block in solely JS means that you have enough JavaScript knowledge to level up your ability - read on!

The back-story behind "Learn JavaScript Deeply"

About 8 years ago, WordPress adapted React, so that's what you will mostly find working in the ecosystem.

Pain points of creating a block with Vanilla JS

• You add the block to the page
• When changes are made to the JS or CSS, you will need to remove and re-add the block
• When you change the JS again, you will need to remove and re-add the block
• (it doesn't automatically recompile)

This introduces a number of iterations in order to get your block doing what you want.
Basically, with Vanilla JS - you will have to constantly delete and re-add your block.

Which will more or less end up doubling or tripling your time to produce code that works.

How does this work?

webpack: A JavaScript compilation engine, makes sure your code is ready at runtime- when the page loads it shows your block exactly as it is written in JS, right now.

Every time you press Save in your code editor, and go back to a page where the block lives, it will display as the new block.

There's a number of other features that go on behind the scenes, and helper utilities such as...

• check-licenses - a script to make sure you aren't using code that is incompatible with the software license you want to use
• format - formats source code in a consistent way
• linting - if you ever want to submit your plugin to the WordPress Plugins directory, this is essential
• minification - by default your files will be smaller, improving performance
• plugin-zip - Essentially this script will package up your plugin (block) and make it ready to distribute to the world
• etc

I'm not linking webpack here, because the wp-scripts package removes a lot of the complexities of working with it and WordPress. To that point, I've been doing React + WP development for around four years and I haven't had - until recently - to really look into the scripts package or webpack much at all.

For my use case, I'm looking at creating an actual package for WordPress, that's why I've had to finally go down the road. Guess the point is: I've been able to go this far and build with WP without needing to understand the mechanisms of how it works "Under the hood."

About the sample code

There are a number of other benefits to using the build process when creating blocks for WordPress in 2024 and beyond. But perhaps the biggest is that probably 90% of the code is written for developers who are using a build process. Again - you don't have to know how the build works - studying the code can give you the building blocks (components in Gutenberg) to get where you need to go.

So what gives? This seems like a lot of work...

Introducing create-block

A package that generates a starting point for you, with a very basic functionality that is essentially a Hello World on the front and backend of your website, via a block.

You can take the Edit function of this starting point and plug in the code you need, to get the components you're looking for. Looking for components? Check out the WordPress Storybook reference

A good place to check out components is in Storybook, but you can also find the source code for each Gutenberg component in the Gutenberg repo, in Packages > Components > src

On to, finally, the sample you requested

Regarding the BlockToolbar sample you are requesting, there's one in this very repo!
albeit this does require a build process, or at a minimum some serious code wrangling

create-block

The Create Block Package is the way I believe the Gutenberg authors are hoping that most JS developers will be interacting with WordPress + React, AKA the Block Editor (also known as the "Editor".)

The package is modeled after Create React App, which is a good starting point for a lot of React devs.

So you made it this far, awesome

Expanding on your example, how about we create a button to extra the HTML and CSS from a block.

1. Install the create-block package in your plugins directory
2. Create basic component (Toolbar Button) that logs the extraction to the console or alert()
3. Modify the button to "Download" a HTML file - with <style> and <html> - essentially a web page
4. Implement the download button

I'd be happy to work through the implementation of this with you, if you'd like to see how I would do it with the BlockToolbar

How about a button to Download HTML + CSS for a block?

Sounds like a great way to be able to zip up and send off a feature for review to a client!

Lemme know,

Best/Seth

from block-development-examples.

Hi @joho1968, thanks for opening an issue. As @flexseth mentioned, what you are looking for is unfortunately not possible in the Editor. Since this repo is designed to showcase examples of what is possible in the Editor, I am going to close this issue. But I encourage you to open an issue in the Gutenberg repository around more extensibility for PHP developers.

from block-development-examples.