6

There exist the following :

  • wp.editor.PanelColorSettings
  • wp.editor.InspectorControls
  • wp.editor.RichText
  • wp.editor.BlockControls
  • etc.

Where is the documentation that shows the full list of available 'components' in wp.editor?

Also, where is the equivelent documentation for wp.element and wp.components?

Yours, frustratedly

  • 2
    I’m afraid we’re all as frustrated as you are, because there’s a lot of documentation missing for Block Editor... – Krzysiek Dróżdż Feb 27 at 16:54
  • Yeah I'm getting that impression. We just need a big list of objects in wp.editor I've managed to get a few of them working, but I'm currently stuck on RangeControl, which seems to exist, but where I don't know, and how to use it is anyone's guess. – Richard Feb 27 at 17:03
2

I have gone through the implementation of all Gutenberg core blocks in start, so now if I have to know how to use something then I first find the closest core component which is implementing that and then looks at the documentation of that particular block via https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src

This process is solving problems for me up until now.

  • That's great stuff. Do you know how i enable JSX im my block .js files? – Richard Mar 5 at 11:08
  • For that we need to configure babel transpiler which is a headache on its own but fortunately there is zero config package available named as create-guten-block. Please go through the docs and I am confident that you will not face any problem because docs of that are pretty good. If my answer solves your problem then please accept it for future references. – Mehmood Ahmad Mar 5 at 11:14
  • i think it parially answers. – Richard Mar 5 at 11:16
  • For your other partial answer you can find packages here like components, editor, blocks etc but you have to go through the source code yourself as no good documentation is available. – Mehmood Ahmad Mar 5 at 11:22
1

You can find documentation for the various packages in the Gutenberg Github repo in the readme for each package.

For example, the "data" module docs are here: https://github.com/WordPress/gutenberg/tree/master/packages/data

I will search a term in the Gutenberg repo, and show just the Markdown files to quickly find any related documentation.

As far as seeing what objects or functions are available for any given package, I use the browser console to explore things. Open an admin page with the Block editor, open your console, and type "wp."

It will show you a list of all the apis. as you select each object, you can then type another "." to see the methods or properties it contains. This is really helpful in understanding how things work and what methods are available.

I'm often looking around in wp.data.select( 'core/block-editor' ) for methods to use when building my blocks. So I type wp.data.select( 'core/block-editor' ). in the console, and it shows a list of everything that's available. If I need to know more about a method, I'll then search the gutenberg repo for it to find more details.

Hope that helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.