add basic block

This commit is contained in:
Daniel Waxweiler 2021-11-01 20:55:37 +01:00
parent 4abde347a4
commit 0b7021942e
9 changed files with 6742 additions and 367 deletions

View File

@ -5,7 +5,8 @@
}, },
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:ava/recommended" "plugin:ava/recommended",
"plugin:@wordpress/eslint-plugin/recommended"
], ],
"parserOptions": { "parserOptions": {
"ecmaVersion": 11, "ecmaVersion": 11,
@ -22,10 +23,21 @@
"error", "error",
2 2
], ],
"no-console": [
"error", {
"allow": ["error"]
}
],
"prettier/prettier": [
"off"
],
"quotes": [ "quotes": [
"error", "error",
"single" "single"
], ],
"react/jsx-key": [
"off"
],
"semi": [ "semi": [
"error", "error",
"never" "never"

View File

@ -18,18 +18,38 @@ function clean(cb) {
} }
const eventsLoaderOutputPath = PACKAGE.name + '/front/events-loader'; 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 eventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js';
const blockEventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/block-events-loader.js';
function bundleFrontend() { 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({ .pipe(webpack({
mode, mode,
entry: { entry: {
[eventsLoaderOutputPath]: eventsLoaderInputPath, [eventsLoaderOutputPath]: eventsLoaderInputPath,
[blockEventsLoaderOutputPath]: blockEventsLoaderInputPath,
}, },
output: { output: {
filename: '[name].js', 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)); .pipe(dest(FOLDER_BUILD));
} }
@ -45,6 +65,7 @@ function copyBackend() {
function injectMetadata() { function injectMetadata() {
return src([ return src([
FOLDER_BUILD + '/' + eventsLoaderOutputPath + '.js', FOLDER_BUILD + '/' + eventsLoaderOutputPath + '.js',
FOLDER_BUILD + '/' + blockEventsLoaderOutputPath + '.js',
FOLDER_BUILD + '/' + PACKAGE.name + '/' + PACKAGE.name + '.php', FOLDER_BUILD + '/' + PACKAGE.name + '/' + PACKAGE.name + '.php',
FOLDER_BUILD + '/' + PACKAGE.name + '/includes/constants.php', FOLDER_BUILD + '/' + PACKAGE.name + '/includes/constants.php',
FOLDER_BUILD + '/' + PACKAGE.name + '/readme.txt' FOLDER_BUILD + '/' + PACKAGE.name + '/readme.txt'

6976
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -26,10 +26,14 @@
"object-hash": "^2.2.0" "object-hash": "^2.2.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@wordpress/eslint-plugin": "^9.2.0",
"ava": "^3.15.0", "ava": "^3.15.0",
"babel-loader": "^8.2.3",
"c8": "^7.10.0", "c8": "^7.10.0",
"del": "^6.0.0", "del": "^6.0.0",
"eslint": "^8.1.0", "eslint": "^7.32.0",
"eslint-plugin-ava": "^13.1.0", "eslint-plugin-ava": "^13.1.0",
"esm": "^3.2.25", "esm": "^3.2.25",
"gulp": "^4.0.2", "gulp": "^4.0.2",

View File

@ -40,3 +40,16 @@ function mobilizon_connector_register_events_list_widget() {
register_widget('MobilizonConnector\EventsListWidget'); register_widget('MobilizonConnector\EventsListWidget');
} }
add_action('widgets_init', 'mobilizon_connector_register_events_list_widget'); 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');

View File

@ -0,0 +1 @@
import './blocks/events-list'

View File

@ -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>
])
}

View File

@ -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,
})

View File

@ -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>
)
}