我有一个简单的古腾堡积木,将文本样式设置为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 }
/>
);
},
} );
这是块在编辑器中的外观,请参见缺少浮动块控件:
但当选择顶部工具栏设置时,它们会显示良好并起作用:
我已经尝试删除所有CSS,但似乎没有任何效果。我已经测试到5.2,在那里它工作得很好。您可以根据Github.