184 lines
12 KiB
JavaScript
184 lines
12 KiB
JavaScript
|
/**
|
||
|
|
* BLOCK: mobilizon
|
||
|
|
*
|
||
|
|
* Registering a basic block with Gutenberg.
|
||
|
|
* Simple block, renders and saves the same content without any interactivity.
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Import CSS.
|
||
|
|
import './editor.scss';
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
const { __ } = wp.i18n; // Import __() from wp.i18n
|
||
|
|
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
|
||
|
|
const { RichText, InspectorControls } = wp.blockEditor;
|
||
|
|
const { ToggleControl, PanelBody, PanelRow, CheckboxControl, RangeControl, ColorPicker, TextControl } = wp.components;
|
||
|
|
|
||
|
|
|
||
|
|
// Custom icon for the block
|
||
|
|
const el = wp.element.createElement;
|
||
|
|
const iconEl = el('img', { src: "data:image/png;base64,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
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Register: aa Gutenberg Block.
|
||
|
|
*
|
||
|
|
* Registers a new block provided a unique name and an object defining its
|
||
|
|
* behavior. Once registered, the block is made editor as an option to any
|
||
|
|
* editor interface where blocks are implemented.
|
||
|
|
*
|
||
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
||
|
|
* @param {string} name Block name.
|
||
|
|
* @param {Object} settings Block settings.
|
||
|
|
* @return {?WPBlock} The block, if it has been successfully
|
||
|
|
* registered; otherwise `undefined`.
|
||
|
|
*/
|
||
|
|
registerBlockType( 'cgb/block-mobilizon', {
|
||
|
|
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
||
|
|
title: __( 'Mobilizon' ), // Block title.
|
||
|
|
icon: iconEl, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
|
||
|
|
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
|
||
|
|
keywords: [
|
||
|
|
__( 'mobilizon' ),
|
||
|
|
__( 'events' ),
|
||
|
|
],
|
||
|
|
attributes: {
|
||
|
|
mobilizonBaseURL: {
|
||
|
|
type: 'string'
|
||
|
|
},
|
||
|
|
mobilizonGroupName: {
|
||
|
|
type: 'string',
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
mobilizonEventLimit: {
|
||
|
|
type: 'int',
|
||
|
|
default: 3
|
||
|
|
},
|
||
|
|
mobilizonShowHeaderImage: {
|
||
|
|
type: 'boolean',
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
myRichText: {
|
||
|
|
type: 'string',
|
||
|
|
source: 'html',
|
||
|
|
selector: 'p'
|
||
|
|
},
|
||
|
|
toggle: {
|
||
|
|
type: 'boolean',
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
favoriteAnimal: {
|
||
|
|
type: 'string',
|
||
|
|
default: 'dogs'
|
||
|
|
},
|
||
|
|
favoriteColor: {
|
||
|
|
type: 'string',
|
||
|
|
default: '#DDDDDD'
|
||
|
|
},
|
||
|
|
activateLasers: {
|
||
|
|
type: 'boolean',
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* The edit function describes the structure of your block in the context of the editor.
|
||
|
|
* This represents what the editor will render when the block is used.
|
||
|
|
*
|
||
|
|
* The "edit" property must be a valid function.
|
||
|
|
*
|
||
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
||
|
|
*
|
||
|
|
* @param {Object} props Props.
|
||
|
|
* @returns {Mixed} JSX Component.
|
||
|
|
*/
|
||
|
|
// edit: ( props ) => {
|
||
|
|
// // Creates a <p class='wp-block-cgb-block-mobilizon'></p>.
|
||
|
|
// return (
|
||
|
|
// <div className={ props.className }>
|
||
|
|
// <p>Mobilizon Gutenberg Block</p>
|
||
|
|
// </div>
|
||
|
|
// );
|
||
|
|
// },
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
edit: (props) => {
|
||
|
|
const { attributes, setAttributes } = props;
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<InspectorControls>
|
||
|
|
<PanelBody
|
||
|
|
title="Filter"
|
||
|
|
initialOpen={true}
|
||
|
|
>
|
||
|
|
<PanelRow>
|
||
|
|
<TextControl
|
||
|
|
label="Group Name"
|
||
|
|
value={ attributes.mobilizonGroupName }
|
||
|
|
onChange={(newtext) => setAttributes({ mobilizonGroupName: newtext })}
|
||
|
|
/>
|
||
|
|
</PanelRow>
|
||
|
|
<PanelRow>
|
||
|
|
<RangeControl
|
||
|
|
label="Limit how many events are shown (0 means no limit)"
|
||
|
|
value={ attributes.mobilizonEventLimit }
|
||
|
|
onChange={ ( value ) => setAttributes({ mobilizonEventLimit: value })}
|
||
|
|
min={ 0 }
|
||
|
|
max={ 10 }
|
||
|
|
/>
|
||
|
|
</PanelRow>
|
||
|
|
<PanelRow>
|
||
|
|
<CheckboxControl
|
||
|
|
label="Header Images"
|
||
|
|
help="Set if the header images for each event are shown in the list?"
|
||
|
|
checked={attributes.mobilizonShowHeaderImage}
|
||
|
|
onChange={(newval) => setAttributes({ mobilizonShowHeaderImage: newval })}
|
||
|
|
/>
|
||
|
|
</PanelRow>
|
||
|
|
</PanelBody>
|
||
|
|
</InspectorControls>
|
||
|
|
<TextControl
|
||
|
|
tagName="h2"
|
||
|
|
placeholder="Mobilizon Instance URL"
|
||
|
|
value={ attributes.mobilizonBaseURL }
|
||
|
|
onChange={(newtext) => setAttributes({ mobilizonBaseURL: newtext })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The save function defines the way in which the different attributes should be combined
|
||
|
|
* into the final markup, which is then serialized by Gutenberg into post_content.
|
||
|
|
*
|
||
|
|
* The "save" property must be specified and must be a valid function.
|
||
|
|
*
|
||
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
||
|
|
*
|
||
|
|
* @param {Object} props Props.
|
||
|
|
* @returns {Mixed} JSX Frontend HTML.
|
||
|
|
*/
|
||
|
|
save: ( props ) => {
|
||
|
|
return ( null );
|
||
|
|
},
|
||
|
|
} );
|