I'm Lara, not Laura.
@laras126 on Twitter // notlaura.com
https://www.youtube.com/watch?v=KrZx4IY1IgU&
Did you? I didn't...
But this is very exciting for both us, and WordPress itself. https://twitter.com/rachsmithtweets/status/966081017764196352?ref_src=twsrc%5Etfw&ref_url=https%3A%2F%2Fcss-tricks.com%2F%3Fp%3D267715
And there's still time! Gutenberg won't be released for another couple of months, probably.
- Sometimes I go off on tangents – feel free to correct me.
- This is informal and conversational – ask questions!
- And there are no dumb questions...really! This is a safe space.
- Try to remember concepts not code.
- Local development environment
- Plugin installed
- Relatively simple theme activated
- Make some blocks!
- Blocks can have data from other parts of the site
- Blocks have options in the sidebar "Inspector"
- Blocks can be nested...sort of
- Don't forget to view it on the frontend
-
Now look at the editor...what do you see?
-
Now look at the frontend...what do you see?
-
Blocks are defined by HTML comments in the database, like this:
<!-- wp:paragraph --> <p>Stuff</p> <!-- /wp:paragraph -->
- "editing experience"
- Translation: Gutenberg is a redesign of the WYSIWYG editor (but so much more!).
- "SPA"
- Gutenberg is a Single Page Application within WordPress. Modern, fancy, no page reloads.
- "React-driven"
- Yes, Gutenberg is built in React. That’s probably not going to change anytime soon, if ever. But there was drama.
Tech-wise, it's just a fancy way of putting things in post_content. It's the user experience of making that happen that's undergoing an overhaul.
Let's create-guten-block!
👆 Follow the instructions in the Readme of that link.
- Integrated terminal
- Gutenberg source for reference
- Block plugin folder added to our sidebar
The most important ones are inside our block plugin, then inside the src directory:
└── src
├── block
| ├── block.js
| ├── editor.scss
| └── style.scss
|
├── blocks.js
├── common.scss
└── init.php
Start in block.js. See if you can figure out, by reading the code, how to:
- Change the name of your block, that is, the one that shows in the block selector
- Change the icon of your block (❤ Dashicons)
- Change the text that displays on the front end i.e. when you “View Post”
- Change the text that displays on the back end i.e. editor view
- Give the front end view a border radius of 30px
- Give the editor view a gradient background
- Make the text in first paragraph tag editable.
I hope not!
- Settings
editsaveeditor.scssandstyle.scss
React!
- Gutenberg Github project
- Gutenberg Handbook (somewhat fragmented yet helpful docs - esp. this page )
- Example Blocks
- Gutenberg Times
- Gutenberg News
- CSS-Tricks Series (probably end of this month)
- I may try to organize a Gutenberg learning Hangout at some point – let me know if you would be interested!