rtCamp notes, day 60 of undefined

Widgets

Before the gutenberg blocks, the widgets used to be the old classic widgets -> created with the extending Widget_API via PHP.

Now after the blocks -> For widgets an instance of block is stored and referred to the widgets and that block is rendered in place of the widget. So simply by registering the block for the posts, we automatically register them for the widgets.

Now when we create a widget a new entry is created in the options table named
widget_{block}-{id}
and then this keyword is used in the options tables -> sidebars_widgets to store the link between the sidebar and the widget.

The widget_{block}-{id} -> Stores the block markup

Slotfills

Slotfills are features provided us to change the things or add our custom things in the default gutenberg editor. For example when we are in the gutenberg editor we have the WordPress icon to go back to the dashboard, we can even change this icon as well

For example

PluginSidebar
This can be used to create a separate new sidebar for our editor panel, we can use that sidebar to add our custom functionalities into it

import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';
import { image } from '@wordpress/icons';

const PluginSidebarTest = () => (
    <PluginSidebar name="plugin-sidebar-test" title="My Plugin" icon={ image }>
        <p>Plugin Sidebar</p>
    </PluginSidebar>
);

registerPlugin( 'my-custom-plugin', { render: PluginSidebarTest } );

This would create a sidebar named My Plugin into our editor and we can also render different textControl or other things into it.