Hello All, I have made this slide for WordPress Bhubaneswar Meetup and covered below-listed points: 1) Summary of WordPress meetup. 2) What is Gutenberg 3) History 4) Creating a static Gutenberg block with es5 5) Creating a static Gutenberg block with esNext. Regards Priyanka

1. Bhubaneswar
WordPress Meetup
Priyanka
Behera
priyankab_WP
priyankabehera155

2. WordPress Meetup

3. What is WordPress meetup?

4. Locally-organized groups that get
together for face-to-face events on a
regular basis (commonly once a month).

5. Contribute and share knowledge about
WordPress

6. Meetup
Announcements / News

7. What do we get out of it?

8. Share Knowledge

9. Update with latest trends and technology

10. Contribute to the community

11. Make our global presence

12. Gutenberg
Creation
Let’s Jump

13. What is
Gutenberg ?

14. We call the new editor - Gutenberg.
The entire editing experience has been rebuilt for
media rich pages and posts.
Experience the flexibility that blocks will bring,
whether you are building your first site, or write code for a living.

15. Before Gutenberg : Classic Editor

16. Gutenberg Editor

17. History

18. 1. Gutenberg was introduced to the world by Matt Mullenweg at
WordCamp Europe in 2017
2. Gutenberg has been a term of controversy.
3. First introduced as Plugin.
4. Merge into core functionality a significant change to WordPress 5.0.

19. Blocks

20. Create a static block as a
Plugin with ES5

23. Let check with ESNext

24. What is ES.Next?

25. ES.Next refers to versions of ECMAScript( Standardize JavaScript ) from ES6 and beyond.

26. Build Process

27. Create a new folder in the plugins directory of your WordPress installation
Initialize the NPM package.json file
Command - npm init -y

28. This will create a file - package.json

29. Next we’ll install our dependencies that NPM will track in our newly created package.json file.
Install webpack - Webpack is our module bundler and the core of the build process.
$ npm install --save-dev webpack webpack-cli
Install Babel - compiler core
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
Install utility for using environment variables across platforms.
$ npm install --save-dev cross-env

31. Now create a .babelrc file

32. configure webpack by creating a
webpack.config.js file

33. Now create our plugin files

34. Enqueue block assets like CSS.
Enqueue block editor assets like
CSS and JS.

35. Now let’s create a block.js file
To register a new block we need
to use the registerBlockType
function

36. Last Step for development env : $ npm run dev
For Production environment: $ npm run build

41. More About Gutenberg: https://wordpress.org/gutenberg/
Edit and Save Methods : https://developer.wordpress.org/block-editor/developers/block-api/block-edit-
save/
Static Block using ESNext: https://github.com/priyankabehera/static-block-esnest
Blog: https://getwithgutenberg.com/2019/03/getting-started-with-block-development-in-es-next/
Learn More from...