# Notes - Udemy - Gutenberg Blocks for Wordpress and React Developers
## Installing the dev environment
Installing wordpress was pretty easy, but required tweaking wp-config.php so it wouldn't auto update. I use the following docker-compose.yml
```yaml
---
version: '3.3'
services:
db:
container_name: 'local-wordpress-db'
image: 'mysql:5.7'
volumes:
- './data/mysql:/var/lib/mysql'
ports:
- 18766:3306
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress_db
MYSQL_USER: wordpress_user
MYSQL_PASSWORD: wordpress_password
wordpress:
container_name: 'local-wordpress'
depends_on:
- db
image: 'wordpress:5.9.3-php8.1'
ports:
- '80:80'
environment:
WORDPRESS_DB_HOST: 'db:3306'
WORDPRESS_DB_USER: wordpress_user
WORDPRESS_DB_PASSWORD: wordpress_password
WORDPRESS_DB_NAME: wordpress_db
volumes:
- "./wordpress:/var/www/html"
- "./plugins:/var/www/html/wp-content/plugins"
```
When first visiting the site, before starting the install, add this to `wordpress/wp-config.php`:
```php
define( 'WP_AUTO_UPDATE_CORE', false );
```
## Block Editor Interface
- [Block Design | Block Editor Handbook | WordPress Developer Resources](https://developer.wordpress.org/block-editor/explanations/user-interface/block-design/)
- [User Interface | Block Editor Handbook | WordPress Developer Resources](https://developer.wordpress.org/block-editor/explanations/user-interface/)
There are multiple areas used to interact with the block:
- **top boolbar** is used for document wide interaction
- **settings area** slides in through toggle
- has both a document and a block tab
- hidden by default on mobile (keep import block settings in the content area)
- **block toolbar**
- commonly-used actions
- block mover
## Post structure saved in HTML
Each view in the block editor is a react component.
In the static page, we just have HTML, no react is involved.
When we define block:
- **name**
- **category**
- **attributes**, a list of things that can change in a block using the visual editor
- **edit function**, uses the attributes of the block and returns a react component, shown in the editor. The component updates the attributes
- **save function** receives attributes, and returns a much simpler React component that creates the HTML saved in the database.