piazza-in-festa-wp/blocks/eventi/index.js

/**
 * Editor script for the Piazza in Festa block.
 *
 * Written against the wp.* globals with createElement instead of JSX: no build
 * step, so what ships in the plugin is exactly the source you are reading.
 * The preview is rendered by PHP (ServerSideRender), so the editor shows the
 * same events the visitors will see.
 */
(function (blocks, element, blockEditor, components, i18n, serverSideRender) {
	'use strict';

	var el = element.createElement;
	var __ = i18n.__;
	var InspectorControls = blockEditor.InspectorControls;
	var useBlockProps = blockEditor.useBlockProps;
	var PanelBody = components.PanelBody;
	var TextControl = components.TextControl;
	var SelectControl = components.SelectControl;
	var ServerSideRender = serverSideRender;

	var CATEGORIE = [
		{ label: __('All categories', 'piazza-in-festa'), value: '' },
		{ label: 'Sagre e enogastronomia', value: 'sagra_enogastronomica' },
		{ label: 'Musica e concerti', value: 'musica_concerto' },
		{ label: 'Cultura e mostre', value: 'culturale_mostra' },
		{ label: 'Religioso e patronali', value: 'religioso' },
		{ label: 'Fiere e mercati', value: 'fiera_mercato' },
		{ label: 'Mercatini', value: 'mercatini' },
		{ label: 'Spettacoli e intrattenimento', value: 'spettacolo' },
		{ label: 'Teatro', value: 'teatro' },
		{ label: 'Cinema', value: 'cinema' },
		{ label: 'Sport', value: 'sportivo' },
		{ label: 'Natura ed escursioni', value: 'natura_escursione' },
		{ label: 'Bambini e famiglie', value: 'bambini_famiglie' },
		{ label: 'Incontri e conferenze', value: 'incontro_conferenza' },
		{ label: 'Istituzionale', value: 'istituzionale' },
		{ label: 'Altro', value: 'altro' }
	];

	var REGIONI = [
		'', 'Abruzzo', 'Basilicata', 'Calabria', 'Campania', 'Emilia-Romagna',
		'Friuli-Venezia Giulia', 'Lazio', 'Liguria', 'Lombardia', 'Marche',
		'Molise', 'Piemonte', 'Puglia', 'Sardegna', 'Sicilia', 'Toscana',
		'Trentino-Alto Adige/Südtirol', 'Umbria', "Valle d'Aosta/Vallée d'Aoste",
		'Veneto'
	].map(function (nome) {
		return { label: nome === '' ? __('No region', 'piazza-in-festa') : nome, value: nome };
	});

	blocks.registerBlockType('piazza-in-festa/eventi', {
		edit: function (props) {
			var a = props.attributes;
			var set = props.setAttributes;

			function campo(chiave, etichetta, aiuto) {
				return el(TextControl, {
					label: etichetta,
					help: aiuto,
					value: a[chiave],
					__next40pxDefaultSize: true,
					__nextHasNoMarginBottom: true,
					onChange: function (v) {
						var patch = {};
						patch[chiave] = v;
						set(patch);
					}
				});
			}

			var pannello = el(
				InspectorControls,
				null,
				el(
					PanelBody,
					{ title: __('Events to show', 'piazza-in-festa'), initialOpen: true },
					campo(
						'comuni',
						__('Towns', 'piazza-in-festa'),
						__('Comma separated identifiers, for instance: alba, barolo, la-morra', 'piazza-in-festa')
					),
					el(SelectControl, {
						label: __('Or a whole region', 'piazza-in-festa'),
						value: a.regione,
						options: REGIONI,
						disabled: a.comuni !== '',
						__next40pxDefaultSize: true,
						__nextHasNoMarginBottom: true,
						onChange: function (v) {
							set({ regione: v });
						}
					}),
					el(SelectControl, {
						label: __('Category', 'piazza-in-festa'),
						value: a.categoria,
						options: CATEGORIE,
						__next40pxDefaultSize: true,
						__nextHasNoMarginBottom: true,
						onChange: function (v) {
							set({ categoria: v });
						}
					}),
					campo('limite', __('How many events', 'piazza-in-festa'), __('From 1 to 20.', 'piazza-in-festa')),
					el(SelectControl, {
						label: __('Layout', 'piazza-in-festa'),
						value: a.formato,
						options: [
							{ label: __('List', 'piazza-in-festa'), value: 'lista' },
							{ label: __('Cards', 'piazza-in-festa'), value: 'schede' },
							{ label: __('Carousel', 'piazza-in-festa'), value: 'carosello' }
						],
						__next40pxDefaultSize: true,
						__nextHasNoMarginBottom: true,
						onChange: function (v) {
							set({ formato: v });
						}
					})
				),
				el(
					PanelBody,
					{ title: __('Look', 'piazza-in-festa'), initialOpen: false },
					el(SelectControl, {
						label: __('Theme', 'piazza-in-festa'),
						value: a.tema,
						options: [
							{ label: __('Light', 'piazza-in-festa'), value: 'chiaro' },
							{ label: __('Dark', 'piazza-in-festa'), value: 'scuro' }
						],
						__next40pxDefaultSize: true,
						__nextHasNoMarginBottom: true,
						onChange: function (v) {
							set({ tema: v });
						}
					}),
					campo('colore', __('Accent colour', 'piazza-in-festa'), __('Hex code, for instance #b4315a.', 'piazza-in-festa')),
					campo('titolo', __('Heading', 'piazza-in-festa'), __('Leave it empty for no heading.', 'piazza-in-festa')),
					campo('altezza', __('Starting height (px)', 'piazza-in-festa'), __('It adapts by itself once loaded.', 'piazza-in-festa'))
				)
			);

			var anteprima =
				a.comuni === '' && a.regione === ''
					? el(
							'p',
							{ className: 'pinfesta-empty' },
							__('Piazza in Festa: set at least one town or a region in the block settings.', 'piazza-in-festa')
					  )
					: el(ServerSideRender, {
							block: 'piazza-in-festa/eventi',
							attributes: a
					  });

			return el('div', useBlockProps(), pannello, anteprima);
		},
		save: function () {
			return null;
		}
	});
})(
	window.wp.blocks,
	window.wp.element,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.i18n,
	window.wp.serverSideRender
);