This document provides an introduction to building custom blocks in Gutenberg, the new WordPress editor. It explains that Gutenberg is a set of JavaScript libraries and packages that power the editor interface. It then demonstrates how to register a basic custom block using the @wordpress/create-block package and React. The document walks through the key components of a block, including the registration, editor interface, attributes, and saved output. It also provides resources for learning more about building blocks in Gutenberg.

1. FIRST STEPS WITHFIRST STEPS WITH
GUTENBERG FOR DEVELOPERSGUTENBERG FOR DEVELOPERS
MAGDALENA PACIOREK

2. FAQ block demo

3. What is Gutenberg?

4. What is Gutenberg?
React app

5. What is Gutenberg?
React app
works in the browser
works in wp-admin

6. What is Gutenberg?
React app
works in the browser
works in wp-admin
a library of JavaScript packages:

7. What is Gutenberg?
React app
works in the browser
works in wp-admin
a library of JavaScript packages:
@wordpress/components
@wordpress/block-editor
and more

8. @wordpress/components
https://developer.wordpress.org/block-editor/components/

9. Components in action
Stackable blocks - Accordion

10. Block design
1. content area, 2. block toolbar, 3. settings sidebar

11. HOW TO REGISTER A CUSTOMHOW TO REGISTER A CUSTOM
BLOCK?BLOCK?

12. What do we need to learn?

13. @wordpress/create-block
$ npm init @wordpress/block faq-block
$ cd faq-block
$ npm start
https://www.npmjs.com/package/@wordpress/create-block

14. Files generated by create-block tool
faq-block
|-- build
|-- node-modules
|-- src
| |-- index.js
|-- editor.css
|-- faq-block.php
|-- package.json
|-- style.css

15. Block code overview
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
registerBlockType( 'create-block/faq-block', {
title: __( 'Faq Block', 'create-block' ),
category: 'widgets',
edit: () => {
},
save: () => {
},
} );

16. LET'S BUILD A FAQ BLOCKLET'S BUILD A FAQ BLOCK

17. FAQ - ACF version

18. FAQ - Gutenberg version

19. registerBlockType

20. Attributes

21. Edit function

22. wp.data.select( 'core/block-editor').getBlocks()

23. Save function

24. So what gets saved to the database?

25. HTML on the frontend

26. FAQ block - the wrapper

27. Let's add the number

28. Let's check it in the console

29. Do we really need to learn all that?
😱

30. How to start?
read the official documentation
learn a little bit about React
learn a little bit about Redux
learn how to build your own custom blocks
https://developer.wordpress.org/block-editor/developers/
https://developer.wordpress.org/block-editor/designers/
https://reactjs.org/docs/getting-started.html
https://www.youtube.com/watch?v=pgAvVxowaYU
https://egghead.io/courses/getting-started-with-redux
https://www.udemy.com/course/gutenberg/

31. THANK YOU!THANK YOU!
Magdalena Paciorek
just another WordPress developer
who tries to keep up with changing technologies
paciorek.magdalena@gmail.com
https://www.linkedin.com/in/paciorekmagdalena/