Skip to content

Instantly share code, notes, and snippets.

@bahiirwa
Created Aug 22, 2018
Embed
What would you like to do?
geblock
/**
* 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>
);
},
},
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment