Lets break these down into steps and go through them one at a time.
Basic Level
Lets get a nice clean setup using our function.php and some css/scss files.
- Use add_theme_support(‘editor-styles’) to declare support for editor styles
- Use add_editor_style( ‘editor-style.css’ ) to load the styles you’ve created into the editor. – example of scss setup – test data for styling blocks
- Set your default, wide & full content widths – example
- Use add_theme_support( ‘align-wide’ ) to declare support for full and alignwide images – Bill Erickson
- Use add_theme_support( ‘wp-block-styles’ ) to declare support for block styles
- Disable custom colours and add own Colour Pallette – see WP Development Courses – A White Pixel
- Disable all core blocks your don’t need per post type – See WordCamp Phoenix 2020 files for example or this article by Misha Rudrastyh or A White Pixel
- Add fonts to the editor – WPBeginner & isitWP
Styling it out
- Create Block Styles – here – A White Pixel
- Edit with attributes and supports – here – A White Pixel
- Create Block Variations – here –
- Create Block Patterns – Rich Tabor – Gutenberg Times – A White Pixel
- Create Block Templates – A White Pixel
Customising to a deeper level
- Create own custom block with supports, attributes, block controls – see separate notes