块控件不显示浮动(显示在顶部工具栏中)

时间:2020-10-11 作者:prtksxna

我有一个简单的古腾堡积木,将文本样式设置为post it note. 它使用BlockControls 显示一些基本格式,如对齐方式和文本样式。自从我升级到5.5,到BlockControls 不会浮在小部件上显示。但是,如果我将设置更改为顶部工具栏,它会显示在顶部并正常工作(setting screenshot). 请注意InspectorControls 都表现得很好。这是我的索引。js’:

/* eslint no-unused-vars: 0 */
import { registerBlockType } from \'@wordpress/blocks\';
import {
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
    ColorPalette,
} from \'@wordpress/block-editor\';
import { PanelBody, PanelRow, FontSizePicker } from \'@wordpress/components\';
import { __ } from \'@wordpress/i18n\';

registerBlockType( \'sticky-note/sticky-note\', {
    title: \'Sticky note\',
    icon: \'pressthis\',
    category: \'layout\',
    styles: [
        {
            name: \'paper\',
            label: \'Paper\', // TODO: What to do here? Use _x
            isDefault: true,
        },
        {
            name: \'flat\',
            label: \'Flat\',
        },
    ],
    supports: {
        align: true,
        alignWide: false,
        reusable: false,
        lightBlockWrapper: true,
    },
    attributes: {
        content: {
            type: \'array\',
            source: \'children\',
            selector: \'p\',
        },
        alignment: {
            type: \'string\',
            default: \'none\',
        },
        color: {
            type: \'string\',
            default: \'#f9eeaa\',
        },
        fontSize: {
            type: \'number\',
            default: 16,
        },
    },
    example: {
        attributes: {
            content: \'Type something…\',
            alignment: \'center\',
        },
    },
    edit( props ) {
        const {
            attributes: { content, alignment, color, fontSize },
            setAttributes,
        } = props;

        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };

        const onChangeAlignment = ( newAlignment ) => {
            props.setAttributes( {
                alignment: newAlignment === undefined ? \'none\' : newAlignment,
            } );
        };

        const onChangeColor = ( newColor ) => {
            props.setAttributes( {
                color: newColor === undefined ? \'#f9eeaa\' : newColor,
            } );
        };

        const fontSizes = [
            {
                name: __( \'Normal\' ),
                slug: \'normal\',
                size: 16,
            },
            {
                name: __( \'Medium\' ),
                slug: \'medium\',
                size: 20,
            },
            {
                name: __( \'Large\' ),
                slug: \'large\',
                size: 36,
            },
            {
                name: __( \'Huge\' ),
                slug: \'huge\',
                size: 48,
            },
        ];
        const fallbackFontSize = 20;

        const onFontSizeChange = ( newFontSize ) => {
            props.setAttributes( {
                fontSize:
                    newFontSize === undefined ? fallbackFontSize : newFontSize,
            } );
        };

        return (
            <div>
                {
                    <BlockControls>
                        <AlignmentToolbar
                            value={ alignment }
                            onChange={ onChangeAlignment }
                        />
                    </BlockControls>
                }
                {
                    <InspectorControls>
                        <PanelBody title={ __( \'Color\' ) }>
                            <PanelRow>
                                <ColorPalette
                                    disableCustomColors={ false }
                                    value={ color }
                                    onChange={ onChangeColor }
                                    clearable={ true }
                                />
                            </PanelRow>
                        </PanelBody>
                        <PanelBody title={ __( \'Font size\' ) }>
                            <PanelRow>
                                <FontSizePicker
                                    fontSizes={ fontSizes }
                                    fallbackFontSize={ fallbackFontSize }
                                    value={ fontSize }
                                    onChange={ onFontSizeChange }
                                />
                            </PanelRow>
                        </PanelBody>
                    </InspectorControls>
                }
                <RichText
                    tagName="p"
                    className="wp-block-sticky-note-sticky-note"
                    style={ {
                        textAlign: alignment,
                        backgroundColor: color,
                        fontSize,
                    } }
                    onChange={ onChangeContent }
                    value={ content }
                />
            </div>
        );
    },
    save: ( props ) => {
        return (
            <RichText.Content
                className={ `sticky-note-${ props.attributes.alignment }` }
                style={ {
                    fontSize: props.attributes.fontSize,
                    backgroundColor: props.attributes.color,
                } }
                tagName="p"
                value={ props.attributes.content }
            />
        );
    },
} );
这是块在编辑器中的外观,请参见缺少浮动块控件:block without toolbar

但当选择顶部工具栏设置时,它们会显示良好并起作用:top toolbar working fine

我已经尝试删除所有CSS,但似乎没有任何效果。我已经测试到5.2,在那里它工作得很好。您可以根据Github.

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

所以我测试了你的code, 问题似乎是因为您启用了lightBlockWrapper 支持您的块类型(即。lightBlockWrapper: truesupport 属性),这样就不会将块包装在.wp-block — 检查asample diff here.

要解决此问题,只需禁用lightBlockWrapper 支持-使用lightBlockWrapper: false 或者只是不设定lightBlockWrapper 完全

相关推荐