Adjusting the Create Block Tutorial so that it syncs up with the Sass-first create-block package

[jessynd]

Description

This PR contains documentation changes to the Create Block tutorial. These changes take into consideration that the create-block package is currently set up to run with Sass, instead of CSS. While the current tutorial guides users to make changes to the style.css and editor.css files, these files don't exist in the generated plugin. These proposed changes take that into account and guide the user through the two methods of using CSS/Sass more clearly.

The changes in the docs also explain how to extend the webpack.config.js file in order to load custom fonts using @wordpress/scripts, without which an error occurs while following the tutorial.

These changes would need to be revised if #27565 is resolved and the create-block package is simplified to be css-first. The changes would also be affected by #27581 if otf file loaders are incorporated into @wordpress/scripts.

How has this been tested?

By following the tutorial step by step and making sure that the steps and instructions within matched the files in the starter template.

Screenshots

N/A

Types of changes

This is a documentation change.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[gziolo]

@mkaz and @paaljoachim – can you confirm that those changes to the documentation are expected?

[mkaz]

This is all accurate, but I think we're adding in too much complexity for a beginning tutorial. The added external OTF asset is causing more trouble than benefit, I picked it because it was a cool visual item to use for a example tutorial.

But between this and the issues in #27881 maybe we should rethink having it as an external asse, a user shouldnt have to edit a webpack config for an initial create block tutorial. It is focusing energy away from the basics of how Gutebnerg works, which is the main goal.

Thoughts?

[gziolo]

Yes, this webpack config part might be too much. I will work on changing to the webpack config to let it work out of the box. This will let this PR focus on differences between CSS and SASS, which on its own is solid 👍

[mkaz]

@gziolo We can also adjust the tutorial so it doesn't require using an OTF font, I'm not sure if that is easier or better approach. I'm open either way.

[jessynd]

I agree that having to adjust the webpack config is far too complicated for this tutorial.
Regarding changing the tutorial so it doesn't require the font, if the webpack cofig is changed so that it works out of the box, I do see the benefit of demonstrating how to include fonts or other assets within a block.

[gziolo]

I have #28043 ready for testing. It adds native support for fonts and images that would greatly simplify this tutorial ✨

[skorasaurus]

What are the next steps to move this forward? (and thanks again for taking this on @jessynd !)

[gziolo]

We no longer need the sections that touch the webpack config. The rest should be a good enhancement 👍

[jessynd]

@skorasaurus and @gziolo I'm almost done reviewing it and will push my changes to the PR in the next couple of days. Other than removing the webpack bit, since the create-block template is Sass-first, I'm rearranging the tutorial so that it's also Sass-first and people are not confused by the files and code included out of the box in the starter block. The pure CSS instructions will come right after and be possible to skip to for people not wanting to work with Sass.

[gziolo]

This sounds great, looking forward to it 👍

[JustinyAhin]

Hello @jessynd,

Any updates on this PR?

There have been some recent changes to the structure of the documentation, so this PR will also need to be updated. Let me know if you need a hand.

Thanks.

[mkaz]

I think part of this change was updated in #30353

The block code changes will need to be updated against the new file location. However as I stated above I think modifying a webpack config is over complicated for a beginner tutorial and we should probably simplify.

[gziolo]

I’m wondering if there is still a need to apply changes from this PR. It influenced a few changes to Create Block and the tutorial making the process simpler. Is there anything we could still use to improve the documentation?