�ݺ�ߣ

Guida pratica al primo
approccio con Gutenberg per
programmatori PHP
#WCMIL - 17NOV2018

@dottxado #WCMIL 2018
Erika Gili
Ingegnere energetico
Fullstack web developer
Motociclista
Ex bassista
Ex atleta agonista di karate
Nata a Terni, abitato a
Perugia, Genova, Genzano di
Roma, Roma, ora a Bassano
del Grappa

La tua opinione conta!
bit.ly/wcmil-blocchi-erika
bit.ly/wcmil-blocks-erika

Obiettivi
Avvicinarvi allo sviluppo di estensioni Gutenberg
tramite esempio pratico
+Fornire fonti di documentazione
Portarvi suggerimenti che sono frutto dell’esperienza
maturata su 3 progetti in produzione

Fonti
Codice: https://github.com/WordPress/gutenberg
Changelog: https://make.wordpress.org/core/tag/gutenberg
Documentazione: https://wordpress.org/gutenberg/handbook
Scaffold di codice
https://developer.wordpress.org/cli/commands/scaffold/block
https://github.com/ahmadawais/create-guten-block
Seguire gli sviluppatori su Twitter o sui
loro blog, studiare i plugin nel repo
ufficiale

Ed ora…codice
• WP CLI per lo scaffold
• Plugin
• 4 blocchi:
1 blocco statico (contenuto ﬁsso)
2 blocchi editabili innestati (contenuto modiﬁcabile)
1 blocco dinamico (fornito dal server)
https://github.com/dottxado/wcmil-2018-example

Scaffold
$ wp scaffold plugin wcmil-2018-example
$ wp scaffold block block-01 —-plugin=wcmil-2018-example
Assegno ad ogni blocco un codice numerico

Files
Inserire i necessari require_once nel file
iniziale del plugin

Blocco statico 01 / PHP
add_action( 'init', 'block_01_block_init' );
function block_01_block_init() {
wp_register_script(
'block-01-block-editor',
[...]
);
wp_register_style(
'block-01-block-editor',
[...]
);
wp_register_style(
'block-01-block',
[...]
);
register_block_type(
'wcmil-2018-example/block-01',
array(
'editor_script' => 'block-01-block-editor',
'editor_style' => 'block-01-block-editor',
'style' => 'block-01-block',
)
);
}
Attenzione a dipendenze ed
inclusione nel footer

Blocco statico 01 / JS
var registerBlockType = wp.blocks.registerBlockType;
var el = wp.element.createElement;
registerBlockType('wcmil-2018-example/block-01', {
title: __('Block 01'),
category: 'widgets',
supports: {
html: false,
},
edit: function (props) {},
save: function () {}
});
//wordpress.org/gutenberg/handbook/block-api/

Blocco statico 01 / JS
edit: function (props) {
return el(
'p',
{className: props.className},
__('Hello from the editor!')
);
},
save: function () {
return el(
'p',
{},
__('Hello from the saved content!')
);
}
Durante lo sviluppo, usa console.log
all’inizio di ciascun metodo
Eseguito ad OGNI
modifica del
blocco
Eseguito al
caricamento o al
salvataggio
dell’editor

Editor
Frontend
Database

Blocco editabile 03 / JS
registerBlockType( 'wcmil-2018-example/block-03', {
[…]
attributes: {
id: {
type: 'number',
},
url: {
type: 'url',
},
description: {
source: 'children',
selector: 'p',
}
},
[…]
}
//wordpress.org/gutenberg/handbook/block-api/
attributes/

edit: function( props ) {
var url = props.attributes.url;
var id = props.attributes.id;
var description = props.attributes.description;
return el(
'div',
{
className: [props.className, 'column'].join(' ')
},
el(
MediaUpload, {[...options...]}
),
el(
RichText, {
tagName: 'p',
value: description,
onChange: function (newValue) {
props.setAttributes({description: newValue});
},
placeholder: __('Inserisci la descrizione'),
keepPlaceholderOnFocus: true,
}
),
);
},
Accedo agli
attributi
Componenti
//github.com/WordPress/gutenberg/tree/master/
packages/editor/src/components

save: function(props) {
return el(
'div',
{
className: 'column'
},
el(
'img', {
src: props.attributes.url,
}
),
props.attributes.description.length > 0 && el(
RichText.Content, {
tagName: 'p',
value: props.attributes.description,
}
),
);
}
Sempre controllare la presenza del contenuto
al momento del salvataggio

parent: ['wcmil-2018-example/block-02'],
Non è possibile trovarlo nell’inserter perché è disponibile solo
per il blocco parent “block-02”, il quale deve essere in grado di
includerlo tramite il componente InnerBlocks

registerBlockType('wcmil-2018-example/block-02', {
[…]
attributes: {
title: {
source: 'children',
selector: 'h2',
},
hasSeparator: {
type: 'bool',
default: false,
},
numberOfColumns: {
type: 'number',
default: 2,
},
},
[…]
}

Blocco editabile 02 / JSedit: function (props) {
return [
el(
InspectorControls, {key: 'inspector'},
el(
PanelBody, {
title: __('Informazioni Aggiuntive'),
initialOpen: true
},
el(
ToggleControl, {
label: __('Aggiungi linea di separazione tra titolo e contenuto'),
checked: props.attributes.hasSeparator,
onChange: function () {
props.setAttributes({hasSeparator: !props.attributes.hasSeparator});
}
}
),
el(
RangeControl, {
label: __('Quante colonne vuoi mostrare?'),
initialPosition: props.attributes.numberOfColumns.default,
value: props.attributes.numberOfColumns,
min: 1,
max: 6,
props.setAttributes({numberOfColumns: newValue});
}
}
),
),
),
Array con due
elementi:
Inspector e
corpo del blocco

Blocco editabile 02 / JSel(
'div',
el(
RichText, {
tagName: 'h2',
value: props.attributes.title,
props.setAttributes({title: newValue});
},
placeholder: __('Inserisci il titolo'),
keepPlaceholderOnFocus: true,
formattingControls: [],
}
),
props.attributes.hasSeparator && el(
'hr', {}
),
el(
'div', {
className: ['container', 'columns-' + props.attributes.numberOfColumns].join(' '),
},
el(
InnerBlocks,
{
template: getEditTemplate(props.attributes.numberOfColumns),
templateLock: "all",
allowedBlocks: ['wcmil-2018-example/block-03']
}
),
),
)
Inserimento
dell’elemento tramite
condizione

save: function (props) {
return el(
'div',
el(
RichText.Content, {
tagName: 'h2',
value: props.attributes.title,
}
),
props.attributes.hasSeparator && el(
'hr', {}
),
el(
'div', {
className: ['container', 'columns-' + props.attributes.numberOfColumns].join(' '),
},
el(
InnerBlocks.Content,
{}
),
),
);
}

Frontend
Database

Blocco dinamico 04 / PHP
register_block_type(
'wcmil-2018-example/block-04',
array(
'editor_script' => 'block-04-block-editor',
'editor_style' => 'block-04-block-editor',
'style' => 'block-04-block',
'render_callback' => 'block_04_render',
)
);
function block_04_render( $attrs ) {
if ( ! isset( $attrs['min'] ) ) {
$attrs['min'] = 2;
}
if ( ! isset( $attrs['max'] ) ) {
$attrs['max'] = 100;
}
$html = '<div class="wp-block-wcmil-2018-example-block-04">';
$html .= '<p>Ora ci sono</p>';
$html .= '<p class="bigger">' . wp_rand( $attrs['min'], $attrs['max'] ) . '</p>';
$html .= '<p>utenti attivi</p>';
$html .= '</div>';
return $html;
}
Uso la classe css
standard

Blocco dinamico 04 / JS
registerBlockType( 'wcmil-2018-example/block-04', {
attributes: {
min: {
type: 'number',
default: 2,
},
max: {
type: 'number',
default: 100,
}
},
}

edit: function( props ) {
return [
el(
InspectorControls, {key: 'inspector'},
el(
PanelBody, {
title: __('Informazioni Aggiuntive'),
initialOpen: true
},
el(
RangeControl, {
label: __('Numero minimo di utenti'),
initialPosition: props.attributes.min.default,
value: props.attributes.min,
min: 2,
max: 100,
props.setAttributes({min: newValue});
}
}
),
el(
RangeControl, {
label: __('Numero massimo di utenti'),
[…] }
),
),
),
el(
'p',
{ className: props.className },
__( 'Questo blocco mostrerà il numero di utenti attivi sul sito.' )
)];
},
Vedi ServerSideRender

save: function() {
return null;
}
Non c’è HTML da salvare!

Editor
Frontend
Nell’editor evidenzio i blocchi
dinamici con CSS ad hoc

Database

E cos’altro?
Post Meta
State & Components
Modifica dei blocchi core
Transforms
Deprecated
Styles
Rest
Categorie custom
Nuovi hook
Whitelist dei blocchi
Errori di validazione
Template
Blocchi assegnati ai post type

Grazie!
…domande?
https://github.com/dottxado/wcmil-2018-example
bit.ly/wcmil-blocchi-erika
bit.ly/wcmil-blocks-erika

�ݺ�ߣ

Wcmil2018

Recommended

More Related Content

Similar to Wcmil2018 (20)

Wcmil2018