plugin development – withSelect not returning any data or rather not present at all

Question

I am trying to get a list of image sizes using withSelect but am not getting anything. I assume I am doing it incorrectly. I also tried using compose but the result is the same.

Without compose:

import { withSelect } from "wordpress user/data";
import { compose } from "wordpress user/compose";
import { useBlockProps } from "wordpress user/block-editor";
import { isBlobURL } from "wordpress user/blob";
import {
    RichText,
    MediaPlaceholder,
    BlockControls,
    MediaUpload,
    MediaUploadCheck,
    InspectorControls,
} from "wordpress user/block-editor";
import {
    Spinner,
    Toolbar,
    IconButton,
    PanelBody,
    TextareaControl,
    SelectControl,
} from "wordpress user/components";


export function Edit(props) {

    console.log(props) // NO imageSizes here, only url, id, alt, title
    
    const blockProps = useBlockProps();
    const {
        attributes: { title, info, id, alt, url },
        setAttributes,
    } = props;

    const onSelectImage = ({ id, url, alt }) => {
        setAttributes({ id, url, alt });
    };

    return (
        <>
            <div {...blockProps}>
                <div>
                    {url ? (
                        <>
                            <img src={url} alt={alt} />
                            {isBlobURL(url) && <Spinner />}
                        </>
                    ) : (
                        <MediaPlaceholder
                            icon="format-image"
                            onSelect={onSelectImage}
                            onError={onUploadError}
                            accept="image/*"
                            allowedTypes={["image"]}
                            
                        />
                    )}
                </div>
            </div>
        </>
    );
}


export default withSelect((select, props) => {
    const id = props.attributes.id;
    return {
        image: id ? select("core").getMedia(id) : null,
        imageSizes: select("core/editor").getEditorSettings().imageSizes,
    };
})(Edit);

The export default using compose:

 const applyWithSelect = withSelect((select, props) => {
    const id = props.attributes.id;
    return {
        image: id ? select("core").getMedia(id) : null,
        imageSizes: select("core/editor").getEditorSettings().imageSizes,
    };
 });

 export default compose(applyWithSelect)(Edit);

0
user8463989 8 months 2021-12-11T10:09:22-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse