Working with @wordpress/components for WordPress Admin UIs

Previously in this course, we covered scaffolding the React admin dashboard to establish a mounting point for our application. While a blank <div> is a functional start, it lacks the professional polish users expect from a modern plugin. In this lesson, we will replace raw HTML elements with the @wordpress/components library to ensure our plugin feels like a native part of the WordPress ecosystem.

Why use @wordpress/components?

When building admin UIs, the temptation to write custom CSS for buttons, inputs, and layout containers is high. However, doing so creates a "disconnected" experience. The @wordpress/components package provides a suite of pre-built, accessible, and theme-aware React components.

By using these, you get:

• Consistency: Your plugin inherits WordPress's design language, ensuring it looks at home in the dashboard.
• Accessibility: Components like Button and Panel are built with keyboard navigation and screen-reader support in mind.
• Maintenance: When WordPress updates its admin styles, your plugin updates automatically.

Integrating Core Components

To get started, ensure you have the package installed in your project: npm install @wordpress/components --save

We will focus on three fundamental building blocks: the Card for grouping information, the Panel for organizing settings, and the Button for user actions.

Worked Example: Building a Dashboard Widget

Let’s refine our dashboard container. We’ll replace our basic markup with a Card containing a header and a Button.

JSX
import { Button, Card, CardBody, CardHeader, Panel, PanelBody } from CE9178">'@wordpress/components';
import { useState } from CE9178">'@wordpress/element';

const DashboardWidget = () => {
    const [isPanelOpen, setIsPanelOpen] = useState(true);

    return (
        <div className="kb-dashboard-container">
            <Card>
                <CardHeader>Knowledge Base Overview</CardHeader>
                <CardBody>
                    <p>Manage your plugin settings and content here.</p>
                    <Button 
                        variant="primary" 
                        onClick={() => alert(CE9178">'Action triggered!')}
                    >
                        Sync Data
                    </Button>
                </CardBody>
            </Card>

            <Panel header="Advanced Configuration">
                <PanelBody title="Settings" initialOpen={isPanelOpen}>
                    <p>Toggle your plugin features here.</p>
                </PanelBody>
            </Panel>
        </div>
    );
};

export default DashboardWidget;

Styling with CSS

While components handle the heavy lifting, you still need to scope your styles. Use the wp-components library in conjunction with your own stylesheet. Because the components are wrapped in standard HTML tags, you can target them using standard CSS classes or BEM notation.

In your index.scss file, ensure you import the WordPress component styles to maintain consistency:

SCSS
// Import the base WordPress component styles
@import '@wordpress/components/build-style/style.css';

.kb-dashboard-container {
    max-width: 800px;
    margin-top: 20px;

    .components-card {
        margin-bottom: 20px;
    }
}

Hands-on Exercise

1. Refactor your container: Locate the main AdminApp component you created in our previous lesson.
2. Add a Card: Wrap your primary content area in a <Card> component.
3. Add an Action: Place a <Button> inside the <CardHeader> to act as a "Refresh" button.
4. Style: Add a custom class to the parent container and add some padding in your style.scss file to ensure the UI isn't cramped against the admin sidebar.

Common Pitfalls

• Missing Styles: If your components look unstyled (like plain HTML), ensure you have correctly imported the @wordpress/components/build-style/style.css in your SCSS or CSS entry point.
• Over-nesting: Avoid wrapping every single element in a Card. Use them to group logical sections of data. Overuse leads to a cluttered, "boxy" UI.
• Ignoring variant props: The Button component accepts a variant prop (e.g., primary, secondary, tertiary). Using primary for every single action confuses the user. Reserve primary for the main action of a form or section.

Recap

We’ve moved from raw HTML to professional-grade UI components. By using Card, Panel, and Button from @wordpress/components, your plugin's admin dashboard now aligns with the WordPress design system, providing a superior user experience. These components handle the complexities of accessibility and cross-browser styling, allowing you to focus on the logic of your Knowledge Base plugin.

Up next: We will move beyond static UI and build a React form for submissions, managing state to handle user input effectively.