So I've encountered something I'm not quite sure of, so I thought I'd ask and see if anyone else has had a similar problem.

I've created a new PluginDocumentSettingPanel Instance to include my custom metadata. I'm using <PanelRow> to wrap each newly created <TextControl>.

Everything is working as expected except for a visual quirk, of which I'm not sure if it's intended. Below are some images highlighting the quirk.

See Full See Full

Is there any reason these inputs wouldn't take up 100% of the width inside the PluginDocumentSettingPanel?

HTML Markup With Unwanted Space

<div class="components-panel__row">
    <div class="components-base-control css-1wzzj1a e1puf3u3">
        <div class="components-base-control__field css-1kyqli5 e1puf3u2">
            <label class="components-base-control__label css-4dk55l e1puf3u1" for="inspector-text-control-3">Auto 1hr:</label>
            <input class="components-text-control__input" type="text" id="inspector-text-control-3" value="42">
        </div>
    </div>
</div>

HTML Markup Without Unwanted Space

<div class="components-panel__row">
    <div class="components-base-control css-1wzzj1a e1puf3u3">
        <div class="components-base-control__field css-1kyqli5 e1puf3u2">
            <label class="components-base-control__label css-4dk55l e1puf3u1" for="inspector-text-control-56">Postal Town:</label>
            <input class="components-text-control__input" type="text" id="inspector-text-control-56" value="St Albans">
        </div>
    </div>
</div>

React Code:

import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl, PanelRow } from '@wordpress/components';

const TextController = ({ postType }) => {
    // Unpack meta data; key, value.
    const [meta, setMeta] = useEntityProp('postType', postType, 'meta');

    const updateMetaValue = (key, value) => {
        // Clone the existing meta object.
        const newMeta = { ...meta };

        // Update the specific meta only.
        newMeta[key] = value;

        // Then set the updated meta.
        setMeta(newMeta);
    };

    const controls = Object.entries(meta)
        .filter(([key]) => key.includes('_postcode_pricing_'))
        .map(([key, value]) => ({
            key,
            value,
            label:
                key
                    .replace('_postcode_pricing_', '')
                    .split('_')
                    .map((s) => s[0].toUpperCase() + s.slice(1))
                    .join(' ') + ':',
        }))
        .map(({ key, value, label, index }) => {
            return (
                <PanelRow key={index}>
                    <TextControl
                        label={__(label, 'postcode-pricing')}
                        value={meta[key]}
                        onChange={(value) => updateMetaValue(key, value)}
                    />
                </PanelRow>
            );
        });

    return <>{controls}</>;
};

const PostcodePricingBeDocSidebar = () => {
    const postType = useSelect(
        (select) => select('core/editor').getCurrentPostType(),
        []
    );

    console.log('Post-type:', postType);

    // Check the post-type, if no match (do nothing...)
    if ('postcode_pricing_pt' != postType) {
        return null;
    }

    return (
        <PluginDocumentSettingPanel
            name="postcode-pricing"
            title="Area Pricing"
            className="postcode-pricing"
        >
            <TextController postType={postType} />
        </PluginDocumentSettingPanel>
    );
};

// render the panel
registerPlugin('postcode-pricing-be-doc-sidebar', {
    render: PostcodePricingBeDocSidebar,
});

export default PostcodePricingBeDocSidebar;