Блок Гутенберга, многоразовый компонент для нескольких заголовков в одном блоке - PullRequest
Новая
       26

Блок Гутенберга, многоразовый компонент для нескольких заголовков в одном блоке

0 голосов
/ 22 октября 2019

Я недавно начал создавать пользовательские блоки для редактора Гутенберга. У меня есть опыт работы с 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>
        );
    }
});
...