Hice un bloque de Gutenberg y te lo cuento

Presentado en el WordCamp San José de Costa Rica 2018.
Aquí revisamos lo que será Gutenberg y exploramos como crear un bloque, descubriendo algunas propiedades interesantes y creando una clase de JS para la UI del bloque.

Transcript

1. Hice un bloque de Gutenberg y te lo cuento Por Elio Rivero
2. const ElioRivero = { work: { company: 'Automattic' division: ’Jetpack’, position: 'Code Wrangler' }, instagram: 'eliorivero', blog: ‘elio.blog', indentsWith: 'tabs', likes: [ ‘skyrim’, ‘chocolate’, ‘photography’ ], }; Elio Rivero
3. Construir contenido en WordPress
4. Construir contenido y muchos, muchos más.
5. Gutenberg Información general wordpress.org/gutenberg Documentación wordpress.org/gutenberg/handbook Desarrollo github.com/WordPress/gutenberg
6. Gutenberg
7. Gutenberg – Bloques
8. Gutenberg – Bloques
9. Gutenberg – contenido <!-- wp:image --> <figure class="wp-block-image"> <img src="imagen.jpg" alt="" /> </figure> <!-- /wp:image -->
10. Gutenberg – contenido [ { type: 'core/cover-image', attributes: { url: 'imagen.jpg', align: 'full', hasParallax: false, hasBackgroundDim: true }, children: [ “El contenido de Gutenberg no es HTML" ] }, { type: 'core/paragraph', children: [ “El contenido de Gutenberg es un árbol de objetos” ] } ]
11. Gutenberg – estructura PHP JS CSS Inicialización Carga JS/CSS
 del bloque Bloque Estilo del bloque
12. Herramientas Yarn, Babel, Webpack
13. { "name": "gutenblocks-fold", "version": "1.0.0", "description": "Blocks for Gutenberg", "repository": "https://github.com/eliorivero/gutenblocks", "author": "Elio Rivero", "license": "GPL-2.0+", "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-transform-react-jsx": "^6.24.1", "babel-preset-env": "^1.6.0", "cross-env": "^5.0.1", "webpack": "^3.1.0" }, "scripts": { "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack", “watch": "cross-env BABEL_ENV=default webpack --watch" } } package.json
14. babeljs.io/docs/en/babel-plugin-transform-react-jsx
15. { "presets": [ [ "env", { "modules": false, "targets": { "browsers": [ "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions", "last 2 iOS versions", "last 1 Android version", "last 1 ChromeAndroid version", "ie 11" ] } } ] ], "plugins": [ [ "transform-react-jsx", { "pragma": "wp.element.createElement" } ] ] } .babelrc
16. <p className=“alguna-class-css"> { __( 'Algún texto' ) } </p> { wp.element.createElement( 'p', { className: 'alguna-clase-css', }, __( 'Algún texto' ) ) } webpack.config.js ESNext ES5
17. webpack.js.org/concepts
18. var webpack = require( 'webpack' ), NODE_ENV = process.env.NODE_ENV || 'development', path = require( 'path' ), webpackConfig = { entry: { fold: './fold/block.js' }, output: { path: path.join( __dirname, 'build' ), filename: '[name].build.js' }, module: { loaders: [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, plugins: 'production' === NODE_ENV ? [ new webpack.optimize.UglifyJsPlugin() ] : [] }; module.exports = webpackConfig; webpack.config.js
19. Creando el plugin del bloque PHP, JS, CSS, y mucho café
20. <?php add_action( 'enqueue_block_editor_assets', 'gutenblocks_editor_assets_fold' ); add_action( 'enqueue_block_assets', 'gutenblocks_frontend_assets_fold' ); function gutenblocks_editor_assets_fold() { wp_enqueue_style( ‘gutenblocks-fold-editor', plugins_url( 'editor.css', __FILE__ ), array( 'wp-edit-blocks' ) ); wp_enqueue_script( ‘gutenblocks-fold', plugins_url( ‘/build/fold.build.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element', 'underscore' ) ); } function gutenblocks_frontend_assets_fold() { if ( ! is_admin() ) { wp_enqueue_style( 'gutenblocks-fold', plugins_url( 'style.css', __FILE__ ), array( 'wp-blocks' ) ); } } block.php
21. const { __ } = wp.i18n; const { RichText } = wp.editor; const { Button } = wp.components; wp.blocks.registerBlockType( 'gutenblocks/fold', { title: __( 'Fold' ), icon: 'sort', category: ‘layout', keywords: [ __( 'faq' ), __( 'pregunta' ), __( 'quiz' ) ], attributes: { title: { type: 'string', source: 'children', selector: 'label', }, }, edit: props => ( <div> // Editor del bloque. Usa RichText y Button. </div> ), save: props => ( <div> // HTML a guardar del bloque. </div> ) } ); fold.js
22. { id: “4a902c9b-5a7c-4e4c-a48d-c0be5e049931" name: “gutenblocks/fold” attributes: { title: “Pregunta", reveal: Array(3) } className: "wp-block-gutenblocks-fold" isSelected: false isSelectionEnabled: true postType: “post” user: { isLoading: false, data: { … }, path: “/wp/v2/users/me?post_type=post&context=edit”, get: ƒ, create: ƒ, … } createInnerBlockList: ƒ () insertBlocksAfter: ƒ () mergeBlocks: ƒ () onReplace: ƒ () setAttributes: ƒ () toggleSelection: ƒ () } { attributes: { title: "Pregunta", reveal: Array(3) } innerBlocks: [] } edit & save props edit save
23. const { __ } = wp.i18n; const { RichText } = wp.editor; const { Button } = wp.components; wp.blocks.registerBlockType( 'gutenblocks/fold', { title: __( 'Fold' ), icon: 'sort', category: ‘layout', keywords: [ __( 'faq' ), __( 'pregunta' ), __( 'quiz' ) ], attributes: { title: { type: 'string', source: 'children', selector: 'label', }, }, edit: props => ( <div className={ props.className }> // Editor del bloque. Usa RichText y Button. </div> ), save: props => ( <div className={ props.className }> // HTML a guardar del bloque. </div> ) } ); fold.js
24. const { __ } = wp.i18n; const { RichText } = wp.editor; const { Button } = wp.components; wp.blocks.registerBlockType( 'gutenblocks/fold', { title: __( 'Fold' ), icon: 'sort', category: ‘layout', keywords: [ __( 'faq' ), __( 'pregunta' ), __( 'quiz' ) ], supports: { anchor: true }, attributes: { title: { type: 'string', source: 'children', selector: 'label', }, }, edit: props => ( <div className={ props.className }> // Editor del bloque. Usa RichText y Button. </div> ), save: props => ( <div className={ props.className }> // HTML a guardar del bloque. </div> ) } ); fold.js
25. Guardando el bloque
26. const { __ } = wp.i18n; const { RichText } = wp.editor; const { Button } = wp.components; wp.blocks.registerBlockType( 'gutenblocks/fold', { title: __( 'Fold' ), icon: 'sort', category: ‘layout', keywords: [ __( 'faq' ), __( 'pregunta' ), __( 'quiz' ) ], supports: { anchor: true }, attributes: { title: { type: 'string', source: 'children', selector: 'label', }, }, edit: props => ( <div className={ props.className }> // Editor del bloque. Usa RichText y Button. </div> ), save: props => ( <div> // HTML a guardar del bloque. </div> ) } ); fold.js
27. save es lo que vemos en el front end
28. save: ( { attributes: { id, title, reveal } } ) => { return ( <div> <input id={ id } type="checkbox" /> <label htmlFor={ id }> { title } </label> <div className="gutenblocks-fold-reveal"> { reveal } </div> </div> ); } save
29. Haciendo que el bloque sea editable
30. const { __ } = wp.i18n; const { RichText } = wp.editor; const { Button } = wp.components; wp.blocks.registerBlockType( 'gutenblocks/fold', { title: __( 'Fold' ), icon: 'sort', category: ‘layout', keywords: [ __( 'faq' ), __( 'pregunta' ), __( 'quiz' ) ], supports: { anchor: true }, attributes: { title: { type: 'string', source: 'children', selector: 'label', }, }, edit: props => ( <div className={ props.className }> // Editor del bloque. Usa RichText y Button. </div> ), save: props => ( <div> // HTML a guardar del bloque. </div> ) } ); fold.js
31. wp.editor wp.components
32. const { __ } = wp.i18n; const { RichText } = wp.editor; const { Button } = wp.components; const { Component } = wp.element; class FoldEdit extends Component { constructor() { super( ...arguments ); this.props.setAttributes( { id: `gutenblocks-${ this.props.id }` } ); } onChangeTitle ( title ) { this.props.setAttributes( { title } ); } onChangeReveal ( reveal ) { this.props.setAttributes( { reveal } ); } addNew ( e ) { this.props.insertBlocksAfter( [ wp.blocks.createBlock( 'gutenblocks/fold' ) ] ); } render() { /* Formulario del bloque */ } } export default FoldEdit; edit.js
33. render() { const { attributes, className, isSelected } = this.props; return ( <div className={ className }> <RichText tagName="label" multiline={ false } placeholder={ __( ‘Escribe la pregunta…' ) } value={ attributes.title } onChange={ this.onChangeTitle } /> { isSelected && ( <div> <RichText tagName="div" multiline="p" className="gutenblocks-fold-reveal" placeholder={ __( ‘Y el texto a mostrar…' ) } value={ attributes.reveal } onChange={ this.onChangeReveal } /> <Button className=“button” onClick={ this.addNew }> { __( 'Agregar nuevo' ) } </Button> </div> ) } </div> ); } edit.js
34. const { __ } = wp.i18n; import FoldEdit from './edit'; wp.blocks.registerBlockType( 'gutenblocks/fold', { title: __( 'Fold' ), icon: 'sort', category: ‘layout', keywords: [ __( 'faq' ), __( 'pregunta' ), __( 'quiz' ) ], supports: { anchor: true }, attributes: { title: { type: 'string', source: 'children', selector: 'label', }, }, edit: FoldEdit, save: props => ( <div className={ props.className }> // HTML a guardar del bloque. </div> ) } ); fold.js
35. Usando el bloque
36. { "name": "gutenblocks-fold", "version": "1.0.0", "description": "Blocks for Gutenberg", "repository": "https://github.com/eliorivero/gutenblocks", "author": "Elio Rivero", "license": "GPL-2.0+", "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", “babel-plugin-transform-react-jsx“: “^6.24.1", "babel-preset-env": "^1.6.0", "cross-env": "^5.0.1", "webpack": "^3.1.0" }, "scripts": { "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack", “watch": "cross-env BABEL_ENV=default webpack --watch" } } package.json
37. build con yarn
38. usando el bloque
39. Todos somos Gutenberg Podés contribuir en github.com/WordPress/gutenberg