Module Location Reference

I often can’t remember which of these things lives in which package. Note that there are two ways to import these into your block. Either during the build process which looks like:

import {
    Button,
} from '@wordpress/components';

or at run time using the global wp and destructuring which looks like:

const {
    Button,
} = wp.components;

I used to use the global wp method all the time under the impression that importing all the various component dependencies into my block would bloat the code uneccessarily. However, I did some testing to this end, and really couldn’t find any difference in the size of the compiled script or the speed of anything. I don’t understand that, but there it is.

@wordpress/block-editor

• useBlockProps
• InnerBlocks
• InspectorControls
• RichText
• BlockControls
• MediaUpload
• MediaPlaceholder

@wordpress/blocks

• createBlock
• rawHandler
• registerBlockType

@wordpress/components

• Button
• ButtonGroup
• ColorPalette
• PanelBody
• RadioControl
• SelectControl
• Spinner
• TextControl
• TextareaControl
• ToggleControl

@wordpress/compose

• withState

@wordpress/data

• dispatch
• select
• withSelect

@wordpress/element

• Component
• Fragment
• useState
• useEffect

@wordpress/server-side-render

A few notes on this one:

1. if importing from `wp.serverSideRender`, instead of `@wordpress/server-side-render`, you have to rename the import to begin with a capital. So:

const { 
    serverSideRender: ServerSideRender 
} = window.wp.serverSideRender;

2. If importing from @wordpress/server-side-render, the `ServerSideRender is the default export, so should not have the curly brackets around it:

import ServerSideRender from '@wordpress/server-side-render';

• ServerSideRender