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
1 year
2021-12-11T10:09:22-05:00
2021-12-11T10:09:22-05:00 0 Answers
0 views
0
Leave an answer