Custom Image Gutenberg Block With Caption

admin管理员组

文章数量:1421176

I have created a block that wraps the <img> in a <div> so that I can style a scrollable image.

It all seems to be working. When I save the caption it appears to be saved on the Frontend and Backend.

However, it doesn't seem to actually update the image->caption in the database. When looking at the media library and selecting the image, the image caption is not updated.

Here's the code for the backend.

edit(props) {
        const { className, setAttributes } = props;
        const { attributes } = props;

        // function that will take the changes from RichText
        // and update the attributes (state)


        function changeCaption(imgCaption) {

            setAttributes({ imgCaption: imgCaption });
        }

        function selectImage(value) {
            // console.log(value);

            setAttributes({
                imgUrl: value.sizes.full.url,
            })

            setAttributes({
                imgCaption: value.caption,
            })


        }

        return [
            <InspectorControls>

                <div style={{padding: '1em 0',}}>
                    Options
                </div>
            </InspectorControls>,
            <div className={className}>

                <figure className="media">
                    <div className="mediaScroll">
                    <MediaUpload 
                        onSelect={selectImage}
                        render={ ({open}) => {
                            return (
                                <button onClick={open}>
                                    <img 
                                        src={attributes.imgUrl}
                                        />
                                </button>
                            );
                        }}
                    />
                    </div>

                        <RichText 
                                className="testing-caption"
                                tagName="figcaption"
                                placeholder="Enter an image caption"
                                value={attributes.imgCaption}
                                onChange={changeCaption}
                                />

                </figure>
            </div>,
        ];
    },

So how would I go about trying to achieve this? As I understand images are saved in the db under wp_posts -> post_excerpt.

post_excerpt is the caption.

Is there an API for updating the database from the edit() ?

本文标签： Custom Image Gutenberg Block With Caption