Gutenberg itself already exposes a lot of components ready to be re-used in our custom blocks. Most of these are located in wp.components and wp.blocks, and they include helpful building blocks for every Gutenberg block: Text Controls, Toggles, Tooltips, Icon Buttons, Tabs, and many many others. Gutenberg’s native component library pretty much has us covered on all basic cases, on every kind of basic UI control we might need but still there are cases where we might need to take it a step further on some kind of more specialized custom block. For example, while we were developing the new Icon Box block for our Gutenbee plugin we needed an Autocomplete Select component for our icon library, which Gutenberg does not provide (understandably):
For our Icon Box block we wanted to use the extremely flexible react-select library which covers all our needs.
Thankfully, as everything in Gutenberg is built on top of React, every single component in the vast React ecosystem is compatible and can be used in our custom blocks as well! All we need to do is npm install them and require them inside our codebase. However there’s one problem, if we were to just install any React component
Source: https://managewp.org/articles/17401/how-to-use-external-react-components-in-your-gutenberg-blocks
source https://williechiu40.wordpress.com/2018/05/07/how-to-use-external-react-components-in-your-gutenberg-blocks/
No comments:
Post a Comment