Question

我不久前就开始为古腾堡（Gutenberg）编辑器构建自定义块。我有使用PHP和JS的经验，但没有使用JSX的经验。我试图在自己的范围内实现下一件事。我想要标题的三个文本输入。我做了一个，它完美地工作了，但是我还没有弄清楚如何在接下来的两个中重用该组件。现在，当为第一个标题键入文本时，其他两个标题具有相同的文本。

//This is my attribute 
export const BlockTitleAttributes = {
    blockTitle: {
        type: 'string',
    },
};

export const BlockTitleOutPut = ( props ) => {
    if(! props.attributes.blockTitle){
        return null;
    }
    return (


                <h2 className={'heading--title'}>{props.attributes.blockTitle}</h2>


    );
};

import { BlockTitleAttributes } from './attributes';
import { BlockTitleOutPut} from './title';


export {
    BlockTitleAttributes,
    BlockTitleOutPut,

}

const { __ } = wp.i18n;
const { Component } = wp.element;
const { PlainText } = wp.editor;

export default class BlockTitle extends Component {
    onChangeBlockTitle = value => {
        const { setAttributes } = this.props;
        setAttributes( { blockTitle: value});
    };


    render(){
        return(

                    <h2>
                    <PlainText
                    value ={ ! this.props.attributes.blockTitle ? '' : this.props.attributes.blockTitle}
                    onChange = { this.onChangeBlockTitle}
                    placeholder = { this.props.placeholder ? this.props.placeholder : __('Block Title')}
                    />
                  </h2>

        );
    }
}

import BlockTitle, { BlockTitleAttributes, BlockTitleOutPut } from "./components";
    const { RichText, MediaUpload, PlainText } = wp.editor;
    const { registerBlockType } = wp.blocks;
    const { __ } = wp.i18n;


 registerBlockType( 'cgb/block-simple-steps', {
    title: 'Simple Steps',
    icon:  'align-left',
    category: 'common',
    keywords: ['rento', 'simple-steps', 'block'],

    attributes: {
        ...BlockTitleAttributes,
    },

    edit: props => {
        return (
            <section className="container">
                <BlockTitle
                    { ...props}
                />
                <BlockTitle
                    { ...props}
                />
                <BlockTitle
                    { ...props}
                />
            </section>
        );

    },

    save: props => {
        return (
            <section id="feature" className={'feature feature-1 text-center bg-white pb-90'}>
                <div className={'container'}>
                    <div className={'row'}>
                        <div className={'col-xs-12 col-sm-12 col-md-12'}>
                            <div className={'heading heading-2 text-center mb-70'}>
                                <BlockTitleOutPut
                                    {...props}
                                />
                             <BlockTitleOutPut
                                    {...props}
                                />
                              <BlockTitleOutPut
                                    {...props}
                                />
                            </div>

                            </div>
                        </div>
                    </div>
            </section>
        );
    }
});

古腾堡块，可重复使用的组件，用于同一块中的多个标题

0 个答案: