Create Gutenberg block for shortcode

[helgatheviking]

Create Gutenberg block for shortcode

[jonathanbossenger]

So, create block which renders shortcode content in editor, and then renders same content on the front end? Any other specifics I need to know?

[helgatheviking]

Hi Jonathan! At it's most basic... yes that's exactly what I want. At it's most complex I'd like to support all the parameters that are supported by the shortcode... and some display controls (like columns, hide/show avatars, etc). I started mocking some stuff up here: https://www.figma.com/file/H5U237OsRZ5XPY4LBxSiO6/SUL-block?node-id=0%3A1

I certainly don't expect you to do all that.. just logging it for my own reference and to give you an idea of where I want to go someday. Even a starter block with almost no options would be pretty cool and a step forward for this plugin.

[jonathanbossenger]

Got it. I might start with just the starter block, and then expand on that with options in a different PR.

[jonathanbossenger]

You can follow progress over here. https://github.com/jonathanbossenger/Simple-User-Listing/tree/feature/10-gutenberg-block

Once it's in a testable state, I'll create a PR

[jonathanbossenger]

@helgatheviking I've reached a point in development where I would like to be able to get some feedback from you, to determine the way forward. What will work better for you?
a) I create a PR from my fork/branch into a development branch on this repo, which you can then switch to to test locally
b) You clone my forked repo/branch, in order to test locally

[helgatheviking]

Hi @jonathanbossenger this is so cool! I appreciate your work here. gotta admit that i'm a little underwater so might be a minute before I can look at what you've got. How about you send a PR? and I will look at it when I can (or when I am procrastinating this WooSesh talk)

[jonathanbossenger]

@helgatheviking I created the PR. It's very basic at the moment, it just renders the block in the block editor, and renders the shortcode content on the front end.

It uses Gutenberg's dynamic block functionality, so the block is registered with a PHP callback (which in this case is just the shortcode callback) This means as you update the shortcode functionality, the block will use the same functionality on the front end.

The block itself has no settings, my next step is to add the short code attributes as controls on the block, to allow the same level of control.

If you want to test this out on your local environment, you'll need to checkout and fetch my branch, and then, making sure npm is installed, run npm install and npm run build to install the dependencies and create the build assets.

Hit me up if you have any questions, or get stuck.