Creating a Gutenberg block - WCEU 2019

These are the slides displayed on the WCEU 2019 workshop, Creating a Gutenberg block. The companion repository can be found at:

https://github.com/eliorivero/wceu-2019-bloq

Transcript

1. Creating a Gutenberg block By Elio Rivero
2. const ElioRivero = { work: { company: 'Automattic' division: 'Jetpack', role: 'Software Engineer' }, blog: 'elio.blog', instagram: 'eliorivero', twitter: 'eliorivero', indentsWith: 'tabs', likes: [ 'photography', 'chocolate', 'rain' ], }; Elio Rivero
3. Gutenberg General information wordpress.org/gutenberg Documentation wordpress.org/gutenberg/handbook Development github.com/WordPress/gutenberg
4. Parts of the editor
5. Parts of the editor
6. Parts of the editor
7. Content
8. Content
9. Code structure PHP JS CSS Editing Saving Styling Essential files for a block Initialization Load JS & CSS
10. Build workflow Yarn, Babel, and Webpack. ESNext SCSS JS CSS
11. Package manager
12. { "name": "wceu-2019-bloq", "version": "1.0.0", "description": "Block for WCEU workshop", "repository": "https://github.com/eliorivero/wceu-2019-bloq", "author": "Elio Rivero", "license": "GPL-2.0+", "devDependencies": { "@babel/core": "7.4.4", "@babel/plugin-proposal-class-properties": "7.4.4", "@babel/plugin-transform-react-jsx": "7.3.0", "@babel/preset-env": "^7.4.4", "babel-loader": "8.0.5", "cross-env": "^5.0.1", "lodash": "4.17.11", "node-sass": "4.12.0", "optimize-css-assets-webpack-plugin": "5.0.1", "sass-loader": "7.1.0", "webpack": "^4.31.0" }, "scripts": { "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack", "watch": "cross-env BABEL_ENV=default webpack --watch" } } package.json
13. ESNext transformer
14. { "presets": [ [ "@babel/preset-env" ] ], "plugins": [ [ "@babel/plugin-transform-react-jsx", { "pragma": "wp.element.createElement" }, "@babel/plugin-proposal-class-properties" ] ] } .babelrc
15. <p className="some-css-class"> { __( 'Some text' ) } </p> { wp.element.createElement( 'p', { className: 'some-css-class', }, __( 'Some text' ) ) } @babel/plugin-transform-react-jsx ESNext ES5
16. Bundle JS & CSS files
17. const path = require( 'path' ); const webpackConfig = { mode: process.env.NODE_ENV || 'development', entry: { main: './main.js' }, output: { path: path.join( __dirname, 'build' ), filename: '[name].build.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ], plugins: [ '@babel/plugin-proposal-class-properties' ], } } }, ] }, }; module.exports = webpackConfig; webpack.config.js
18. Creating the block github.com/eliorivero/wceu-2019-bloq
19. Creating the block PHP: load scripts and styles in editor • enqueue_block_editor_assets • enqueue_block_assets JS: register block with Gutenberg API • expose data in UI for editing • save data
20. Gutenberg General information wordpress.org/gutenberg Documentation wordpress.org/gutenberg/handbook Development github.com/WordPress/gutenberg
21. You are Gutenberg! You can contribute at github.com/WordPress/gutenberg
22. Thanks! Feel free to reach me at elio.blog twitter.com/eliorivero instagram.com/eliorivero