0

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.

Inspected PluginDocumentSettingPanel Elements See Full Visual PluginDocumentSettingPanel Elements, Not Inspected 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;
5
  • 1
    can you edit your question to include the react code that generated these outputs, including one that's working as expected and one that isn't so we can compare?
    – Tom J Nowell
    Feb 10 at 1:27
  • Done, originally didn't want to bloat the post. Created a gist instead. 😄
    – Beaniie
    Feb 10 at 1:33
  • 1
    I'd avoid putting code and resources offsite, it make it impossible to search the contents and isn't best practice. Err on the side of too much information, don't be unhelpfully helpful and ommit things or hide them. Looking at your code I can see no mechanism for debugging this without pulling it up in a browser with dev tools. The only answer I can think of is that the inputs aren't full width because there is no styling telling them to be full width, and so the length of labels and values comes into play.
    – Tom J Nowell
    Feb 10 at 1:40
  • Understood, I'll reflect your request in the original question and then take a closer look at elements themselves, I would have thought there would be a 100% setting somewhere in the original bundled CSS.
    – Beaniie
    Feb 10 at 1:54
  • I would also be wary of using array indexes as keys key={index}, it can lead to... strangeness with clashing non-unique keys, best to prefix with a unique identifier based on the key/name. I'd also give your text control name props
    – Tom J Nowell
    Feb 10 at 9:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.