geblock

geblock.js

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

/**
 * Register block
 */
export default registerBlockType(
    'geblock/richtext',
    {
        title: __('Day Schedule', 'geblock'),
        description: __('Day to Day itinerary details.', 'geblock'),
        category: 'common',
        icon: 'clipboard',
        keywords: [
            __('Day', 'geblock'),
            __('Schedule', 'geblock'),
            __('Itinerary', 'geblock'),
        ],
        attributes: {
            daynumber: {
                type: 'array',
                source: 'children',
                selector: '.daynumber',
            },
            location: {
                type: 'array',
                source: 'children',
                selector: '.location',
            }
            // ,
            // daysummary: {
            //     type: 'array',
            //     source: 'children',
            //     selector: '.daysummary',
            // },
            // middlebar: {
            //     type: 'array',
            //     source: 'children',
            //     selector: '.middlebar',
            // },
            // overnight: {
            //     type: 'array',
            //     source: 'children',
            //     selector: '.overnight',
            // },
            // placetext: {
            //     type: 'array',
            //     source: 'children',
            //     selector: '.placetext',
            // },
            // placehoteltext: {
            //     type: 'array',
            //     source: 'children',
            //     selector: '.placehoteltext',
            // },
            // placebbtext: {
            //     type: 'array',
            //     source: 'children',
            //     selector: '.placebbtext',
            // }
        },
        edit: props => {
            //, daysummary, middlebar, overnight, placetext, placehoteltext, placebbtext 
            const { attributes: { daynumber, location }, setAttributes, className } = props
            return (
                <div className={className}>
                    <div class="blockbox">
                        <div class="leftbar">
                            {/* <p className="daynumber">Day 1</p> */}
                            <RichText
                                tagName="p"
                                multiline="span"
                                placeholder={__('Trip day no.', 'jsforwpblocks')}
                                onChange={daynumber => props.setAttributes({ daynumber })}
                                value={daynumber}
                            />
                            {/* <p className="location">Entebbe</p> */}
                            <RichText
                                tagName="p"
                                multiline="span"
                                placeholder={__('Location.', 'jsforwpblocks')}
                                onChange={location => props.setAttributes({ location })}
                                value={location}
                            />
                        </div>
                        <p className="daysummary">Entebbe</p>
                        <div class="middlebar">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque est consequuntur dolore iure iusto fugiat similique
                voluptatem quo a dolores nihil rerum molestiae sed, id voluptates! Eius aliquam debitis dolorem!</p>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque est consequuntur dolore iure iusto fugiat similique
                voluptatem quo a dolores nihil rerum molestiae sed, id voluptates! Eius aliquam debitis dolorem!</p>
                        </div>
                        <div class="rightbar">
                            <p>B Hotel</p>
                            <p>L Hotel</p>
                            <p>D Other</p>
                        </div>
                        <p class="overnight">overnight</p>
                        <p class="placetext">Entebbe</p>
                        <p class="placehoteltext">Laico L.V Hotel</p>
                        <p class="placebbtext">B.B</p>
                    </div>
                </div>
            )
        },
        save: props => {
            const { attributes: { message } } = props;
            return (
                <div class="blockbox">
                    <div class="leftbar">
                        <p className="daynumber">Day 1</p>
                        <p className="location">Entebbe</p>
                    </div>
                    <p className="daysummary">Entebbe</p>
                    <div class="middlebar">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque est consequuntur dolore iure iusto fugiat similique
                voluptatem quo a dolores nihil rerum molestiae sed, id voluptates! Eius aliquam debitis dolorem!</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque est consequuntur dolore iure iusto fugiat similique
                voluptatem quo a dolores nihil rerum molestiae sed, id voluptates! Eius aliquam debitis dolorem!</p>
                    </div>
                    <div class="rightbar">
                        <p>B Hotel</p>
                        <p>L Hotel</p>
                        <p>D Other</p>
                    </div>
                    <p class="overnight">overnight</p>
                    <p class="placetext">Entebbe</p>
                    <p class="placehoteltext">Laico L.V Hotel</p>
                    <p class="placebbtext">B.B</p>
                </div>
            );
        },
    },
);