Create Block Gutenpride Tutorial Is out of Sync with Create Block starter template

[jessynd]

Describe the bug
The Create Block tutorial walks users through how to create the Gutenpride block using the create-block package starter block template (npx @wordpress/create-block starter-block). The tutorial takes a CSS-first approach to styling a block and provides further instruction for users wanting to integrate Sass into their block. However, the starter template does not contain the css files the tutorial refers to. The template is SCSS-first. This is confusing to people following the tutorial since the files the tutorial refers to, do not match the template the tutorial starts with. This inconsistency might cause people to give up on completing the tutorial.

Furthermore, if the user ignores the mismatched files and continues on to complete the block using SCSS, when including the custom font's .otf file, webpack fails to compile the files correctly. The user has to extend the webpack.config.js file from @wordpress/scripts by creating their own file in the block and adding loading rules to compile the font. The process for making the scss method is explained in the edits to the original tutorial suggested here. The edits show one method to extend the webpack config in order for the custom font to work.

An additional issue with the Gutenpride create block tutorial is that the colour font used is not accessible in Twenty Twenty or Twenty Twenty One themes due to the varying colour contrasts of the multi-coloured font.

To reproduce
Steps to reproduce the behavior:

1. Go to Create Block tutorial and follow the steps all the way to the CSS portion.
2. Notice that when the starting command npx @wordpress/create-block starter-block is run, the resulting template is set up to run with SCSS, and not plain CSS from the start.
3. Notice that the tutorial is set up to start with CSS files and only provides SCSS as an alternative instead of the default.
4. Notice the error when SCSS is compiled and the otf custom font file does not compile.
5. Compare to the suggested amendment to the tutorial SCSS section.

Expected behavior

1. The create-block block template that npx @wordpress/create-block generates should be CSS-first.
2. The tutorial should expand on the existing instructions for using SCSS in the template and provide information on how to extend the webpack.config.js file in @wordpress/scripts in order to compile otf files or files with other possible formats. Suggested edits here.
3. The tutorial should use a font that is accessible in the latest two core themes: Twenty Twenty and Twenty Twenty One or provide the user a disclaimer that the font should be checked for colour contrast WCAG recommendations when used.
4. Since otf fonts do not work on all browsers, it might be worth exploring a different font format altogether to make it more inclusive.

Editor version :

• WordPress version: 5.5.3
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Gutenberg Plugin
• If the Gutenberg plugin is installed, which version is it? 9.5.0

Desktop :

• OS: macOS Mojave
• Browser: Firefox
• Version 83.0