willdelphia

https://www.ads-software.com/plugins/ace-html-block/

Update: I figured out that gutenberg exposes a unique id already in the props object, so that’s cool. But I still have to rely on setTimeout and querySelector to initialize the ace editor.

@shazahm1hotmailcom so after I made this thread I tried to go about enqueuing the ace source on my own, and I came up with a solution that works:

https://github.com/willdelphia/good-html-block

I am still going to try to work out including the react plugin since I think it may handle this more elegantly. Especially because my solution requires assigning each instance of the block a random key as an attribute and then querying the real dom for that key once it has been printed out by react. I use a setTimeout for this and it feels wrong.

• This reply was modified 6 years ago by willdelphia.
• This reply was modified 6 years ago by willdelphia.

@shazahm1hotmailcom Just skimming this article it looks like exactly what I am looking for. They mention the “Module not found: Error: Can’t resolve ‘react'” error that I was getting. Thanks for the link.

I am only looking to load them in the editor, as part of a (formerly) gutenberg block’s edit() output.

So you’re right about the method storage. But it’s actually the state that I am trying to figure out.

In react when you modify the state it triggers a re-render which updates the output HTML (as needed). I am trying to figure out if there is something like this in the WP Gutenberg API other than the attributes.

It turns out that the new ACF beta does something very similar to what I am trying to achieve. I took a look at their code and it turns out they store their version of the myBoolean value in the block’s attributes.

I had had this thought while thinking on the problem but didn’t want to go down that road because it would basically result in extraneous text being added to the html comment markup for the block — it really doesn’t have anything to do with how the block is rendered on the front end of the site so it seems wrong to muck up attribute JSON.

Is there another way to achieve this? Or did the ACF team get it right / find the only solution?

So that particular classname is assigned by the Block API based on the name of the block which is registered…

From the docs:
block-api/block-registration

The name for a block is a unique string that identifies a block. Names have to be structured as namespace/block-name, where namespace is the name of your plugin or theme.

I believe this namespace/block-name convention is so that a given plugin can register many blocks without worrying if they are conflicting with the names of blocks that other plugins might be registering.

In this case, the plugin only registers a single block. Magicblock is both the name of the plugin (namespace) and the name of the block. That’s why it’s getting doubled in the classname.

Hope that makes sense.

• This reply was modified 6 years, 2 months ago by willdelphia.

@bpayton thanks for the reply. Let me know if you succeed in opening an issue.