如何解决块上有重复的RichText工具栏
问题屏幕截图：https://imgur.com/a/mZ9mUy7
工具栏不断重复，只有在添加样式部分时，才会发生这种情况。如果删除块样式选项，则问题将得到解决。我不确定是什么原因造成的，以及如何解决它。
此代码块以前运行良好，但是在WordPress 5.5.1更新后，我遇到了这个问题。
这是我的完整阻止代码-
/**
* BLOCK: Noir CTA Block One
*
* Registering a basic block with Gutenberg.
* Simple block,renders and saves the same content without any interactivity.
*/
// Import CSS.
import './style.scss';
import './editor.scss';
// let's us call registerBlockType() directly from the wp.blocks library
const { registerBlockType } = wp.blocks;
// let's us use the withAPIData() function from the wp.components library to access the Rest API
const {
PanelBody,Button,Dashicon,SelectControl,RangeControl,ToggleControl,} = wp.components;
// let's us use the __() function from the wp.i18n library to translate strings
const { __ } = wp.i18n;
const {
RichText,BlockControls,InspectorControls,AlignmentToolbar,MediaUpload,URLInput,PanelColorSettings,} = wp.blockEditor;
const ctaLayoutOneEdit = (props) => {
const { isSelected,className,setAttributes } = props;
const { backgroundImage,heroText,heroTextSize,pText,pTextSize,alignment,url,text,backgroundColor,size,cornerButtonRadius,buttonTarget,bgColor,blockHeight,borderRadTopLeft,borderRadTopRight,borderRadBotRight,borderRadBotLeft,paddingTop,paddingBottom,paddingRight,paddingLeft,marginTop,marginBottom,heroTextColor,pTextColor,btnBgColor,btnTextColor } = props.attributes;
function onImageSelect(imageObject) {
setAttributes({
// get image full size
backgroundImage: imageObject.sizes.full.url
})
}
const buttonSize = [
{ value: 'small',label: __( 'Small','textDomain' ) },{ value: 'normal',label: __( 'Normal','textDomain' ) },{ value: 'medium',label: __( 'Medium',{ value: 'large',label: __( 'Large',];
return [
<BlockControls>
<AlignmentToolbar
value={ alignment }
onChange={ ( val ) => {setAttributes( { alignment: val } );} }
/>
</BlockControls>,isSelected && (
<InspectorControls key={ 'inspector' }>
<PanelBody title={ __( 'Image','textDomain' ) } initialOpen={ false }>
<MediaUpload
onSelect={onImageSelect}
type="image"
value={backgroundImage}
render={({ open }) => (
<button className="button button-large" onClick={open}>
{__('Background Image','textDomain') }
</button>
)}
/>
<RangeControl
label={ __( 'Block Height','textDomain' ) }
value={ blockHeight }
min='50'
max='100'
onChange={ ( val ) => setAttributes( { blockHeight: val } ) }
/>
</PanelBody>
<PanelBody title={ __( 'Texts','textDomain' ) } initialOpen={ false }>
<RangeControl
label={ __( 'Title','textDomain' ) }
value={ heroTextSize }
min='30'
max='200'
onChange={ ( val ) => setAttributes( { heroTextSize: val } ) }
/>
<RangeControl
label={ __( 'Text','textDomain' ) }
value={ pTextSize }
min='15'
max='50'
onChange={ ( val ) => setAttributes( { pTextSize: val } ) }
/>
<PanelColorSettings
title={ __( 'Color','textDomain' ) }
initialOpen={ false }
colorSettings={ [
{
value: heroTextColor,onChange: ( val ) => setAttributes( { heroTextColor: val } ),label: __( 'Hero Title ','textDomain' ),},{
value: pTextColor,onChange: ( val ) => setAttributes( { pTextColor: val } ),label: __( 'Text ',] }
/>
</PanelBody>
<PanelBody title={__('Button','textDomain' )} initialOpen={ false }>
<ToggleControl
label={__('Open in new window','textDomain' )}
checked={buttonTarget}
onChange={ () => setAttributes({ buttonTarget: !buttonTarget})}
/>
<SelectControl
label={__('Size','textDomain' )}
value={size}
options={buttonSize.map( ({
value,label}) => ({
value: value,label: label,} ) ) }
onChange={(newSize) => setAttributes({ size: newSize})}
/>
<RangeControl
label={ __( 'Corner Radius','textDomain' ) }
value={ cornerButtonRadius }
min='0'
max='50'
onChange={ ( cornerRad ) => setAttributes( { cornerButtonRadius: cornerRad } ) }
/>
<PanelColorSettings
title={ __( 'Color','textDomain' ) }
initialOpen={ false }
colorSettings={ [
{
value: btnTextColor,onChange: ( val ) => setAttributes( { btnTextColor: val } ),label: __( 'Text',{
value: btnBgColor,onChange: ( val ) => setAttributes( { btnBgColor: val } ),label: __( 'Background',] }
/>
</PanelBody>
<PanelBody title={__('Settings','textDomain')} initialOpen={false}>
<PanelBody title={ 'Padding ' }initialOpen={ false }>
<RangeControl
label= { __('Padding Top','textDomain') }
value= { paddingTop }
min= '0'
max= '50'
onChange={ (val) => setAttributes({ paddingTop : val }) }
/>
<RangeControl
label= { __('Padding Bottom','textDomain') }
value= { paddingBottom }
min= '0'
max= '50'
onChange={ (val) => setAttributes({ paddingBottom : val }) }
/>
<RangeControl
label= { __('Padding Right','textDomain') }
value= { paddingRight }
min= '0'
max= '50'
onChange={ (val) => setAttributes({ paddingRight : val }) }
/>
<RangeControl
label= { __('Padding Left','textDomain') }
value= { paddingLeft }
min= '0'
max= '50'
onChange={ (val) => setAttributes({ paddingLeft : val }) }
/>
</PanelBody>
<PanelBody title={ 'Margin' } initialOpen={ false }>
<RangeControl
label= { __('Margin Top','textDomain') }
value= { marginTop }
min= '0'
max= '50'
onChange={ (val) => setAttributes({ marginTop : val }) }
/>
<RangeControl
label= { __('Margin Bottom','textDomain') }
value= { marginBottom }
min= '0'
max= '50'
onChange={ (val) => setAttributes({ marginBottom : val }) }
/>
</PanelBody>
<PanelBody title={'Border Radius'} initialOpen={ false }>
<RangeControl
label= { __('Top Left','textDomain') }
value= { borderRadTopLeft }
min= '0'
max= '500'
onChange={ (val) => setAttributes({ borderRadTopLeft : val }) }
/>
<RangeControl
label= { __('Top Right','textDomain') }
value= { borderRadTopRight }
min= '0'
max= '500'
onChange={ (val) => setAttributes({ borderRadTopRight : val }) }
/>
<RangeControl
label= { __('Bottom Right','textDomain') }
value= { borderRadBotRight }
min= '0'
max= '500'
onChange={ (val) => setAttributes({ borderRadBotRight : val }) }
/>
<RangeControl
label= { __('Bottom Left','textDomain') }
value= { borderRadBotLeft }
min= '0'
max= '500'
onChange={ (val) => setAttributes({ borderRadBotLeft : val }) }
/>
</PanelBody>
<PanelColorSettings
title={ __( 'Background Color','textDomain' ) }
initialOpen={ false }
colorSettings={ [
{
value: backgroundColor,onChange: ( val ) => setAttributes( { backgroundColor: val } ),label: __( 'Button Background ',] }
/>
</PanelBody>
</InspectorControls>
),<section className={ props.className + ` tar-cta cta-layout-one demo-welcome-text-${alignment} block-height-${blockHeight} ctaOneborTopLeft-${borderRadTopLeft} ctaOneborTopRight-${borderRadTopRight} ctaOneborBotRight-${borderRadBotRight} ctaOneborBotLeft-${borderRadBotLeft} ctaOnemarginTop-${marginTop} ctaOnemarginBottom-${marginBottom}`} style={{ backgroundImage: `url(${backgroundImage})`,backgroundColor: `${backgroundColor}`,}}>
<div className={`ctaOnepaddingTop-${paddingTop} ctaOnepaddingLeft-${paddingLeft} ctaOnepaddingRight-${paddingRight} ctaOnepaddingBottom-${paddingBottom}`}>
<RichText
tagName="h2"
onChange={(val) => setAttributes({ heroText :val })}
value={heroText}
className={`title title-size-${heroTextSize}`}
style={{ color: heroTextColor }}
keepPlaceholderOnFocus={true}
/>
<RichText
tagName="p"
onChange={(val) => setAttributes({ pText :val })}
value={pText}
className={`text text-size-${pTextSize}`}
style={{ color: pTextColor }}
keepPlaceholderOnFocus={true}
/>
<span key={'button'} className={'tar-button'}>
<RichText
tagName={'span'}
placeholder={__('Button Text','textDomain' )}
value={text}
rel={"noopener noreferrer"}
target={ buttonTarget ? '_blank': '_self'}
onChange={(val) => setAttributes({ text :val })}
allowedFormats ={ [ 'bold','italic','strikethrough' ] }
className={`tar-button tar-button-${size} btn-radius-${cornerButtonRadius}`}
style={{ backgroundColor: btnBgColor,color: btnTextColor }}
/>
</span>
<form
key= {'form-link'}
onSubmit={(event) => event.preventDefault()}
>
<Dashicon icon={'admin-links'} />
<URLInput
value={url}
onChange={(changes) => setAttributes({ url: changes })}
/>
<Button
icon={'editor-break'}
label={__('Apply','textDomain' )}
type={'submit'}
/>
</form>
</div>
</section>
];
}
const ctaLayoutOneSave = (props) => {
const { backgroundImage,btnTextColor } = props.attributes;
const buttonStyle= { backgroundColor: btnBgColor,color: btnTextColor }
return (
<section
className={`tar-cta cta-layout-one demo-welcome-text-${alignment} block-height-${blockHeight} ctaOneborTopLeft-${borderRadTopLeft} ctaOneborTopRight-${borderRadTopRight} ctaOneborBotRight-${borderRadBotRight} ctaOneborBotLeft-${borderRadBotLeft} ctaOnemarginTop-${marginTop} ctaOnemarginBottom-${marginBottom}`} style={{ backgroundImage: `url(${backgroundImage})`,}}>
<div className={`ctaOnepaddingTop-${paddingTop} ctaOnepaddingLeft-${paddingLeft} ctaOnepaddingRight-${paddingRight} ctaOnepaddingBottom-${paddingBottom}`}>
<RichText.Content
tagName="h2"
value={ heroText }
style={{ color: heroTextColor }}
className={`title title-size-${heroTextSize}`}
/>
<RichText.Content
tagName="p"
value={ pText }
style={{ color: pTextColor }}
className={`text text-size-${pTextSize}`}
/>
<a target={ buttonTarget ? '_blank' : '_self' } href={url} rel="noopener noreferrer" className={`tar-button tar-button-${size} btn-radius-${cornerButtonRadius}`} style={buttonStyle}>{text}</a>
</div>
</section>
);
}
registerBlockType( 'demo-block-plugin/demo-cta-one',{
title: __( 'CTA Block One' ),icon: <svg class="svg-icon" viewBox="0 0 20 20"><path fill="#2196F3" d="M3.015,4.779h1.164V3.615H3.015V4.779z M18.73,1.869H1.269c-0.322,0-0.582,0.26-0.582,0.582v15.133
c0,0.322,0.26,0.582,0.582H18.73c0.321,0.582-0.26,0.582-0.582V2.451C19.312,2.129,19.052,1.869,18.73,1.869z
M18.148,16.42c0,0.322-0.261,0.582-0.582,0.582H2.433c-0.322,0-0.582-0.26-0.582-0.582V6.525h16.297V16.42z M18.148,5.361H1.851
V3.615c0-0.322,0.582-0.582h15.133c0.321,0.582V5.361z M7.671,4.779h1.165V3.615H7.671V4.779z
M5.344,4.779h1.164V3.615H5.344V4.779z"></path></svg>,description: 'Call To Action Block One',category: 'demo-blocks',keywords: [
__( 'CTA block one' ),__( 'Call to action block one' ),],supports: {
align: [ 'center','wide','full'],anchor: true
},example: {
attributes: {
heroText: 'WELCOME TO THE JUNGLE',//mediaOneURL: '/assets/women-cream.jpg',pText: 'lorem ipsum dolor',size: 'normal',styles: [
{
name: "ctaOnedefault",label: __("default"),{
name: "ctaOneOption0",label: __("Transparent"),isDefault: true,{
name: "ctaOneOption1",label: __("Layout 1")
},{
name: "ctaOneOption2",label: __("Layout 2")
},{
name: "ctaOneOption3",label: __("Layout 3")
},{
name: "ctaOneOption4",label: __("Layout 4")
},{
name: "ctaOneOption5",label: __("Layout 5")
},{
name: "ctaOneOption6",label: __("Layout 6")
},{
name: "ctaOneOption7",label: __("Layout 7")
},{
name: "ctaOneOption8",label: __("Layout 8")
},{
name: "ctaOneOption9",label: __("Layout 9")
},{
name: "ctaOneOption10",label: __("Layout 10")
},{
name: "ctaOneOption11",label: __("Layout 11")
},{
name: "ctaOneOption12",label: __("Layout 12")
},{
name: "ctaOneOption13",label: __("Layout 13")
},{
name: "ctaOneOption14",label: __("Layout 14")
},{
name: "ctaOneOption15",label: __("Layout 15")
},attributes: {
// Hero image attributes
backgroundImage: {
type: 'string',default: null,// no image by default!
},backgroundColor: {
type: 'string',blockHeight: {
type: 'number',default: 80,// Hero Text attributes
heroText: {
type: 'string',selector: 'h2',default: 'WELCOME TO THE JUNGLE'
},heroTextColor: {
type: 'string',heroTextSize: {
type: 'number',default: 40,// pText attributes
pText: {
type: 'string',selector: 'p',default: 'lorem ipsum dolor'
},pTextColor: {
type: 'string',pTextSize: {
type: 'number',default: 20,// button attributes
url: {
type: 'string',source: 'attribute',selector: 'a',attribute: 'href',text: {
type: 'string',btnBgColor: {
type: 'string',btnTextColor: {
type: 'string',size: {
type: 'string',default: 'normal',cornerButtonRadius: {
type: 'number',default: 4,buttonTarget: {
type: 'boolean',default: false
},//section border radius
borderRadTopLeft: {
type: 'number',default: 0,borderRadTopRight: {
type: 'number',borderRadBotRight: {
type: 'number',borderRadBotLeft: {
type: 'number',//padding settings
paddingTop: {
type: 'number',paddingBottom: {
type: 'number',paddingLeft: {
type: 'number',paddingRight: {
type: 'number',//margin settings
marginTop: {
type: 'number',marginBottom: {
type: 'number',alignment: {
type: 'string',default: 'center'
},// The "edit" property must be a valid function.
edit: ctaLayoutOneEdit,// The "save" property must be specified and must be a valid function.
save: ctaLayoutOneSave
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。