Gutenberg Mastery

Get Started. It's Free
or sign up with your email address
Rocket clouds
Gutenberg Mastery by Mind Map: Gutenberg Mastery

1. Introduction

1.1. what is Gutenberg

1.1.1. the new Wordpress visual editor

1.1.1.1. Gutenberg is the editor DEFAULT on 5.0

1.1.1.2. aim to make adding rich content simple and enjoyable

1.1.1.3. VS the old wordpress editor

1.1.1.3.1. required heavy use of shortcodes and HTML

1.1.1.3.2. not really wysiwig

1.1.1.3.3. will remain supported until 2020

1.1.1.3.4. widgets , shortcodes, meta boxes and custom fields will be eventually deprecated

1.1.1.4. will be merged with customiser and become a landing page builder

1.2. how it will affect

1.2.1. landing page builders

1.2.2. shortcode based plugins

1.2.3. newbies

1.2.4. advanced users

1.3. pros

1.3.1. makes inserting rich content easier

1.3.2. much better than visual editor

1.3.3. amazing copy and paste abilities

1.3.4. perfect for casual users, maybe not so for power users

1.4. cons

1.4.1. interface will take some time to use to

1.4.2. still need adoption by dev community

1.4.3. treats everything as a single block

1.4.4. using some weird custom HTML

1.4.5. clients/users will need to be trained on it

1.4.6. will lead to the end of some core wp features like widgets and shortcodes

2. set up

2.1. update to 5.0

2.1.1. go to wordpress admin

2.1.2. update wordpress

2.2. get 2019 theme

2.2.1. go to appearance>theme>add new

2.3. set up the site

2.3.1. create homepage

2.3.1.1. pages

2.3.1.1.1. new

2.3.2. appearance

2.3.2.1. site identity

2.3.2.1.1. site title

2.3.2.1.2. tagline

2.3.2.1.3. logo

2.3.2.2. menus

2.3.2.2.1. primary

2.3.2.3. homepage settings

2.3.2.3.1. home

2.3.2.4. widgets

2.3.2.4.1. Get in touch

2.3.2.4.2. Visit our office

2.3.2.5. additional CSS

2.3.2.5.1. remove title header

2.3.3. plugins

2.3.3.1. stackable

3. the Gutenberg editor

3.1. overview

3.1.1. top menu

3.1.1.1. add block

3.1.1.2. undo/redo

3.1.1.3. content structure

3.1.1.4. block navigation

3.1.1.5. ... (more)

3.1.1.5.1. hide/show block settings

3.1.1.5.2. insert before/after

3.1.1.5.3. edit as html/visually

3.1.1.5.4. add to reusable blocks

3.1.2. sidebar

3.1.2.1. draft/preview/update

3.1.2.2. settings shortcut

3.1.2.2.1. (hide/shows sidebar)

3.1.2.3. ... (more)

3.1.2.3.1. view

3.1.2.3.2. editor

3.1.2.3.3. keyboard shortcuts

3.1.2.3.4. options

3.1.2.4. document

3.1.2.4.1. revision history

3.1.2.4.2. set featured image

3.1.2.5. block

3.1.2.5.1. type

3.1.2.5.2. settings

3.1.2.5.3. advanced (CSS)

3.2. type of blocks

3.2.1. common blocks

3.2.2. formatting

3.2.3. layout elements

3.2.4. widgets

3.2.5. embeds

3.2.6. 3rd party

3.2.7. reusable blocks

3.3. main blocks

3.3.1. image

3.3.1.1. transform to

3.3.1.1.1. file

3.3.1.1.2. cover

3.3.1.2. image alignment

3.3.1.2.1. left/center/right

3.3.1.2.2. wide width

3.3.1.2.3. full width

3.3.2. text

3.3.3. divider

3.3.4. title h1

3.3.5. columns

3.3.5.1. row 1

3.3.5.1.1. title h1

3.3.5.1.2. services

3.3.5.2. row 2

3.3.5.2.1. inline image * 6

3.3.6. divider

3.3.7. title h1

3.3.8. cta

3.3.9. team members

3.3.10. testimonial

3.4. copy / pasting

3.4.1. youtube

3.4.2. google docs

3.4.3. word/pages

4. Resources

4.1. plugins

4.1.1. coblocks

4.2. themes

4.2.1. ivory

4.3. reading