add basic block
This commit is contained in:
parent
4abde347a4
commit
0b7021942e
|
@ -5,7 +5,8 @@
|
|||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:ava/recommended"
|
||||
"plugin:ava/recommended",
|
||||
"plugin:@wordpress/eslint-plugin/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 11,
|
||||
|
@ -22,10 +23,21 @@
|
|||
"error",
|
||||
2
|
||||
],
|
||||
"no-console": [
|
||||
"error", {
|
||||
"allow": ["error"]
|
||||
}
|
||||
],
|
||||
"prettier/prettier": [
|
||||
"off"
|
||||
],
|
||||
"quotes": [
|
||||
"error",
|
||||
"single"
|
||||
],
|
||||
"react/jsx-key": [
|
||||
"off"
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"never"
|
||||
|
|
23
gulpfile.js
23
gulpfile.js
|
@ -18,18 +18,38 @@ function clean(cb) {
|
|||
}
|
||||
|
||||
const eventsLoaderOutputPath = PACKAGE.name + '/front/events-loader';
|
||||
const blockEventsLoaderOutputPath = PACKAGE.name + '/front/block-events-loader';
|
||||
const eventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js';
|
||||
const blockEventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/block-events-loader.js';
|
||||
|
||||
function bundleFrontend() {
|
||||
return src(FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js')
|
||||
return src([
|
||||
FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js',
|
||||
FOLDER_SOURCE + '/' + PACKAGE.name + '/front/block-events-loader.js',
|
||||
])
|
||||
.pipe(webpack({
|
||||
mode,
|
||||
entry: {
|
||||
[eventsLoaderOutputPath]: eventsLoaderInputPath,
|
||||
[blockEventsLoaderOutputPath]: blockEventsLoaderInputPath,
|
||||
},
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.m?js$/,
|
||||
exclude: /(node_modules)/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env', '@babel/preset-react']
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}))
|
||||
.pipe(dest(FOLDER_BUILD));
|
||||
}
|
||||
|
@ -45,6 +65,7 @@ function copyBackend() {
|
|||
function injectMetadata() {
|
||||
return src([
|
||||
FOLDER_BUILD + '/' + eventsLoaderOutputPath + '.js',
|
||||
FOLDER_BUILD + '/' + blockEventsLoaderOutputPath + '.js',
|
||||
FOLDER_BUILD + '/' + PACKAGE.name + '/' + PACKAGE.name + '.php',
|
||||
FOLDER_BUILD + '/' + PACKAGE.name + '/includes/constants.php',
|
||||
FOLDER_BUILD + '/' + PACKAGE.name + '/readme.txt'
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -26,10 +26,14 @@
|
|||
"object-hash": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.15.8",
|
||||
"@babel/preset-react": "^7.14.5",
|
||||
"@wordpress/eslint-plugin": "^9.2.0",
|
||||
"ava": "^3.15.0",
|
||||
"babel-loader": "^8.2.3",
|
||||
"c8": "^7.10.0",
|
||||
"del": "^6.0.0",
|
||||
"eslint": "^8.1.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-ava": "^13.1.0",
|
||||
"esm": "^3.2.25",
|
||||
"gulp": "^4.0.2",
|
||||
|
|
|
@ -40,3 +40,16 @@ function mobilizon_connector_register_events_list_widget() {
|
|||
register_widget('MobilizonConnector\EventsListWidget');
|
||||
}
|
||||
add_action('widgets_init', 'mobilizon_connector_register_events_list_widget');
|
||||
|
||||
function mobilizon_connector_initialize_blocks() {
|
||||
wp_register_script(MobilizonConnector\NAME . '-block-starter', plugins_url('front/block-events-loader.js', __FILE__ ), [
|
||||
'wp-blocks',
|
||||
'wp-components',
|
||||
'wp-editor',
|
||||
'wp-i18n'
|
||||
]);
|
||||
register_block_type(MobilizonConnector\NAME . '/events-list', [
|
||||
'editor_script' => MobilizonConnector\NAME . '-block-starter'
|
||||
]);
|
||||
}
|
||||
add_action('init', 'mobilizon_connector_initialize_blocks');
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
import './blocks/events-list'
|
|
@ -0,0 +1,27 @@
|
|||
const { InspectorControls } = wp.blockEditor
|
||||
const { PanelBody } = wp.components
|
||||
const { __ } = wp.i18n
|
||||
|
||||
export default ({ attributes, setAttributes }) => {
|
||||
function updateEventsCount(event) {
|
||||
let newValue = Number(event.target.value)
|
||||
if (newValue < 1) newValue = 1
|
||||
setAttributes({ eventsCount: newValue })
|
||||
}
|
||||
function updateGroupName(event) {
|
||||
setAttributes({ groupName: event.target.value })
|
||||
}
|
||||
return ([
|
||||
<InspectorControls>
|
||||
<PanelBody title={ __('Events List Settings', '<wordpress-name>') }>
|
||||
<label className="components-base-control__label">{ __('Number of events to show', '<wordpress-name>') }</label>
|
||||
<input className="components-text-control__input" type="number" value={ attributes.eventsCount } onChange={ updateEventsCount } />
|
||||
<label className="components-base-control__label">{ __('Group name (optional)', '<wordpress-name>') }</label>
|
||||
<input className="components-text-control__input" type="text" value={ attributes.groupName } onChange={ updateGroupName } />
|
||||
</PanelBody>
|
||||
</InspectorControls>,
|
||||
<ul>
|
||||
{ [...Array(attributes.eventsCount)].map((_, i) => <li className="busterCards" key={ i }>{ __('Event', '<wordpress-name>') } { i }</li>) }
|
||||
</ul>
|
||||
])
|
||||
}
|
|
@ -0,0 +1,28 @@
|
|||
import edit from './edit'
|
||||
import save from './save'
|
||||
|
||||
const { registerBlockType } = wp.blocks
|
||||
const { __ } = wp.i18n
|
||||
|
||||
const NAME = '<wordpress-name>'
|
||||
|
||||
registerBlockType(NAME + '/events-list', {
|
||||
title: __('Events List', '<wordpress-name>'),
|
||||
description: __('A list of the upcoming events of the connected Mobilizon instance.', '<wordpress-name>'),
|
||||
icon: 'list-view',
|
||||
category: 'widgets',
|
||||
attributes: {
|
||||
eventsCount: {
|
||||
type: 'number',
|
||||
default: 3
|
||||
},
|
||||
groupName: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
html: false
|
||||
},
|
||||
edit,
|
||||
save,
|
||||
})
|
|
@ -0,0 +1,21 @@
|
|||
const { __ } = wp.i18n
|
||||
|
||||
const NAME = '<wordpress-name>'
|
||||
|
||||
const URL = 'https://mobilizon.fr' // TODO
|
||||
const LOCALE = 'en-GB' // TODO
|
||||
const TIMEZONE = 'Europe/Rome' // TODO
|
||||
const isShortOffsetNameShown = true // TODO
|
||||
|
||||
export default ({ attributes }) => {
|
||||
return(
|
||||
<ul className={ NAME + '_events-list' }
|
||||
data-url={ URL }
|
||||
data-locale={ LOCALE }
|
||||
data-maximum={ attributes.eventsCount }
|
||||
data-group-name={ attributes.groupName }
|
||||
data-time-zone={ TIMEZONE }>
|
||||
<li style="display: none;">{ __('The events could not be loaded!', '<wordpress-name>') }</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue