Stream: Mar 9, 2023 | Wrapping up the OpenAI block | WordPress | Gutenberg | Tutorial
In this video, originally streamed on Mar 9 2023, we wrap up the OpenAI integrated block that can generate images for use in our content by turning it into a plugin that is part of the editor interface and inserted image blocks automatically after uploading the selected image.
0:00 Intro.
08:02 Closing the Modal after we upload an image.
09:29 Making sure we have unique keys for our image previews.
16:16 Updateing the logic in uploadMedia to close the modal after the image has finished uploading.
26:34 Inserting an Image block with the newly uploaded image with useDispatch and insertBlocks.
34:35 Moving the image generation UI into the document sidebar using PluginDocumentSettingPanel slotfill.
59:16 Using the PluginSidebar slotfill to contain the UI.
01:01:22 Updating the CSS for the new UI location.
01:07:09 Selecting an icon for the sidebar using the Storybook instance to preview them and installing the @wordpress/icons package.
Resources:
Twitch Repo: https://kdta.io/Ns2q7
OpenAI : https://openai.com/
Modal component: https://developer.wordpress.org/block...
uploadMedia: https://developer.wordpress.org/block...
useDispatch: https://developer.wordpress.org/block...
insertBlocks: https://developer.wordpress.org/block...
PluginDocumentSettingPanel: https://developer.wordpress.org/block...
PluginSidebar: https://developer.wordpress.org/block...
StoryBook: https://wordpress.github.io/gutenberg...
@wordpress/icons package: https://developer.wordpress.org/block...
Dashicons: https://developer.wordpress.org/resou...
#wordpress #gutenberg #wordpresstutorial #blockvariations #queryloopblock #wordpressplugin #openai