古腾堡块中带有媒体查询的内联样式

Question

我有一个自定义的 Gutenberg 块，它在编辑器中有一个媒体上传器，并在前端呈现一个带有背景图像的 div。我想在桌面上使用完整图像作为背景，在移动设备上使用缩略图作为背景。是否可以使用 useMediaQuery 挂钩来实现此目的？任何指导将不胜感激。下面是我的代码：

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { MediaUploadCheck, MediaUpload } = wp.blockEditor;
const { useMediaQuery } = wp.compose;

registerBlockType( 'blockset/test', {
    title: __( 'test' ),
    attributes: {
       imgUrl: { type: 'string', default: '' },
       imgMoUrl: { type: 'string', default: '' },
    },
    edit: (props) {
        return (
        <div className="content">
          <span>Choose a Hero Image</span>
          <MediaUploadCheck>
            <MediaUpload
              onSelect={ ( img ) => {
                props.setAttributes( {
                  imgUrl: img.url,
                  imgMoUrl: img.sizes.thumbnail.url : '',
                } );
              } }
              render={ ( { open } ) => {
                return props.attributes.imgUrl !== ''? (
                    <div className={ 'hero__preview' }>
                      <figure className={ 'image' }>
                        <img
                          src={ props.attributes.imgUrl }
                        />
                      </figure>
                      <Button
                        className={ 'hero__button' }
                        onClick={ open }
                      >
                        Select a New Image
                      </Button>
                    </div>
                  ) : (
                    <div className={ 'hero__container' }>
                      <p className={ 'hero__description' }>
                        Pick a hero image from the media library.
                      </p>
                      <Button
                        className={ 'hero__button' }
                        onClick={ open }
                      >
                        Open Media Library
                      </Button>
                    </div>
                  );
              } }
            />
          </MediaUploadCheck>
        </div>
        );
    },

    save( props ) {
        const isMobile = useMediaQuery( 'max-width:767px' )
        const imgURL = isMobile ? props.attributes.imgMoUrl : props.attributes.imgUrl
        return (
           <div
              className="background-image"
              style={ { backgroundImage: `url(${ imgURL })` } }
            ></div> 
        );
    },
} );

Answer 1

使用标签解决了这个问题。

<style dangerouslySetInnerHTML={ { __html: `
          .background-image {background-image: url(${ props.attributes.imgUrl });}
          @media (max-width: 767px) {
            .background-image {background-image: url(${ props.attributes.imgMoUrl });}
          }
        ` } }></style>

古腾堡块中带有媒体查询的内联样式

Inline style with Media query in Gutenberg block

wordpress

hook

wordpress-gutenberg