Search code examples
wordpress-gutenberg

How to enable block styles on admin page in Wordpress?


I saw some examples where block styles successfully applied on custom admin page, but how to implement this. I tried wp_enqueue_style('wp-format-library') but nothing. Using twenty-twenty-one theme. enter image description here

<Panel header="Roles">
        <PanelBody>
          <PanelRow>
            <ToggleControl
              label="enable custom role"
              checked={enable}
              onChange={() => setEnable(!enable)}
            />
          </PanelRow>
        </PanelBody>
        <PanelBody>
          <PanelRow>
            <TabPanel
              tabs={[
                {
                  name: "tab1",
                  title: "Tab 1",
                  className: "tab-one",
                },
                {
                  name: "tab2",
                  title: "Tab 2",
                  className: "tab-two",
                },
              ]}
            >
              {(tab) => <p>{tab.title}</p>}
            </TabPanel>
          </PanelRow>
        </PanelBody>
      </Panel>

This what I got, without styling.


Solution

  • For me it worked when I enqueued wp-edit-blocks via admin_enqueue_scripts hook:

    function enqueue_admin_assets() {
        wp_enqueue_style( 'wp-edit-blocks' );
    }
    
    add_action( 'admin_enqueue_scripts', 'enqueue_admin_assets' );