Wordpress 块上的复制文本工具栏
问题截图： 工具栏不断重复，只有在添加样式部分时才会出现这种情况。如果我删除了块样式选项，则问题将得到修复。我不确定是什么原因造成的，以及如何解决 这个块以前工作得很好，但是在WordPress 5.5.1更新之后，我得到了这个问题 这是我的完整代码-Wordpress 块上的复制文本工具栏,wordpress,wordpress-gutenberg,gutenberg-blocks,create-guten-block,Wordpress,Wordpress Gutenberg,Gutenberg Blocks,Create Guten Block,问题截图： 工具栏不断重复，只有在添加样式部分时才会出现这种情况。如果我删除了块样式选项，则问题将得到修复。我不确定是什么原因造成的，以及如何解决 这个块以前工作得很好，但是在WordPress 5.5.1更新之后，我得到了这个问题 这是我的完整代码- /** * BLOCK: Noir CTA Block One * * Registering a basic block with Gutenberg. * Simple block, renders and saves the sam
/**
* 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', 'textDomain' ) },
{ value: 'large', label: __( 'Large', 'textDomain' ) },
];
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 ', 'textDomain' ),
},
] }
/>
</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', 'textDomain' ),
},
{
value: btnBgColor,
onChange: ( val ) => setAttributes( { btnBgColor: val } ),
label: __( 'Background', 'textDomain' ),
},
] }
/>
</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 ', 'textDomain' ),
},
] }
/>
</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, heroText, heroTextSize, pText, pTextSize,alignment, url, text, backgroundColor, size, cornerButtonRadius, buttonTarget, className, bgColor, blockHeight, borderRadTopLeft, borderRadTopRight, borderRadBotRight, borderRadBotLeft,paddingTop, paddingBottom, paddingRight, paddingLeft, marginTop, marginBottom, heroTextColor, pTextColor, btnBgColor, 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})`, backgroundColor: `${backgroundColor}`,}}>
<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.582,0.582H18.73c0.321,0,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.26-0.582,0.582-0.582h15.133c0.321,0,0.582,0.26,0.582,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',
selector: 'a',
},
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',
default: 0,
},
borderRadBotRight: {
type: 'number',
default: 0,
},
borderRadBotLeft: {
type: 'number',
default: 0,
},
//padding settings
paddingTop: {
type: 'number',
default: 0,
},
paddingBottom: {
type: 'number',
default: 0,
},
paddingLeft: {
type: 'number',
default: 0,
},
paddingRight: {
type: 'number',
default: 0,
},
//margin settings
marginTop: {
type: 'number',
default: 0,
},
marginBottom: {
type: 'number',
default: 0,
},
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
});
/**
*区块：黑色CTA区块一
*
*向Gutenberg注册基本块。
*简单块，渲染和保存相同的内容，无需任何交互。
*/
//导入CSS。
导入“/style.scss”；
导入“/editor.scss”；
//让我们直接从wp.blocks库调用registerBlockType（）
常量{registerBlockType}=wp.blocks；
//让我们使用wp.components库中的withAPIData（）函数来访问Rest API
常数{
小组委员会，
按钮
达希肯，
选择控件，
范围控制，
切换控件，
}=可湿性粉剂组分；
//让我们使用wp.i18n库中的函数_u（）来翻译字符串
常数{{{}=wp.i18n；
常数{
RichText，
区块控制，
检查控制，
对齐工具栏，
MediaUpload，
URL输入，
面板颜色设置，
}=wp.blockEditor；
const ctalayoutuneedit=（道具）=>{
const{isSelected，className，setAttributes}=props；
常数{backgroundImage，heroText，heroTextSize，pText，pTextSize，对齐，url，文本，backgroundColor，大小，cornerButtonRadius，buttonTarget，bgColor，blockHeight，borderRadTopLeft，borderRadTopRight，borderRadBotLeft，paddingTop，PaddingBottop，paddingRight，paddingLeft，marginTop，marginBottom，heroTextColor，pTextColor，btnBgColor，btnTextColor}=props.attributes；
函数onImageSelect（imageObject）{
集合属性({
//获取完整大小的图像
backgroundImage:imageObject.sizes.full.url
})
}
常量按钮大小=[
{value:'small'，label:_u（'small'，'textDomain'）}，
{value:'normal'，标签：{（'normal'，'textDomain'）}，
{value:'medium'，标签：{（'medium'，'textDomain'）}，
{value:'large'，label:_u（'large'，'textDomain'）}，
];
返回[
);
}
registerBlockType（'demo block plugin/demo cta one'{
标题：uu uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu，
图标：，
描述：'调用操作块1'，
类别：“演示块”，
关键词：[
__（“CTA第一区”），
__（“调用第一块行动”），
],
支持：{
对齐：[“中心”、“宽”、“全”]，
主持人：是的
},
例如：{
属性：{
欢迎来到丛林，
//mediaOneURL:“/assets/women cream.jpg”，
pText:“lorem ipsum dolor”，
大小：'正常'，
},
},
风格：[
{
名称：“ctaOnedefault”，
标签：“默认值”），
},
{
名称：“ctaOneOption0”，
标签：“透明”），
isDefault:对，
},
{
名称：“ctaOneOption1”，
标签：“布局1”）
},
{
名称：“ctaOneOption2”，
标签：“布局2”）
},
{
名称：“ctaOneOption3”，
标签：“布局3”）
},
{
名称：“ctaOneOption4”，
标签：“布局4”）
},
{
名称：“ctaOneOption5”，
标签：“布局5”）
},
{
名称：“ctaOneOption6”，
标签：“布局6”）
},
{
名称：“ctaOneOption7”，
标签：“布局7”）
},
{
名称：“ctaOneOption8”，
标签：“布局8”）
},
{
名称：“ctaOneOption9”，
标签：“布局9”）
},
{
名称：“ctaOneOption10”，
标签：“布局10”）
},
{
名称：“ctaOneOption11”，
标签：“布局11”）
},
{
名称：“ctaOneOption12”，
标签：“布局12”）
},
{
名称：“ctaOneOption13”，
标签：“布局13”）
},
{
名称：“ctaOneOption14”，
标签：“布局14”）
},
{
名称：“ctaOneOption15”，
标签：“布局15”）
},
],
属性：{
//英雄形象属性
背景图片：{
键入：“字符串”，
默认值：null，//默认无图像！
},
背景颜色：{
键入：“字符串”，
},
区块高度：{
键入：“编号”，
默认值：80，
},
//英雄文本属性
heroText：{
键入：“字符串”，
选择器：“h2”，
默认设置：“欢迎来到丛林”
},
heroTextColor：{
键入：“字符串”，
},
heroTextSize：{
键入：“编号”，
默认值：40，
},
//pText属性
pText:{
键入：“字符串”，
选择器：“p”，
默认值：“lorem ipsum dolor”
},
pTextColor:{
键入：“字符串”，
},
pTextSize：{
键入：“编号”，
默认值：20，
},
//按钮属性
网址：{
键入：“字符串”，
来源：'属性'，
选择器：“a”，
属性：“href”，
},
正文：{
键入：“字符串”，
选择器：“a”，
},
btnBgColor：{
键入：“字符串”，
},
btnTextColor:{
键入：“字符串”，
},
尺寸：{
键入：“字符串”，
默认值：“正常”，
},
角按钮Radius：{
键入：“编号”，
默认值：4，
},
巴顿