Learn Faust tutorial: Blocks step says Faust loads block CSS, but no WordPress styles are applied
Maintainers usually reply within 1 day
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 78/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- nextjs, typescript, wordpress
- Domain
- documentation, frontend
Research direction
Start with the Learn Faust tutorial at “Blocks” > “2. Query for blocks data” and check how its claim about loading CSS matches the generated page. The issue suggests generating src/styles/globalStylesheet.css with npx faust generateGlobalStylesheet --output src/styles/globalStylesheet.css and importing it from src/pages/_app.js, or removing the claim. Done when styles set in WordPress display as expected, or the tutorial no longer says Faust loaded them.
Written by the indexing model from the issue text.
Description
Description
Page: https://faustjs.org/docs/tutorial/learn-faust/ ("Blocks" > "2. Query for blocks data")
Summary
After the blocks step, the tutorial says Faust has "even loaded the CSS required to apply the correct styles." But no step in the tutorial loads any WordPress CSS. The paragraph's markup includes the expected classes and inline styles (e.g. has-large-font-size, padding-top: var(--wp--preset--spacing--20)), but none of these classes or CSS variables are defined in the frontend, so font size, padding, etc. have no visible effect.
Suggested fix
Either add a step that loads WordPress's global styles, e.g.:
npx faust generateGlobalStylesheet --output src/styles/globalStylesheet.css
// src/pages/_app.js
import "@/styles/globalStylesheet.css";
or remove the sentence saying Faust loads the CSS.
Steps to reproduce
Steps to reproduce
- Follow the Learn Faust tutorial through "Blocks" > "2. Query for blocks data".
- In the WordPress editor, change the "Hello World!" post's paragraph font size, padding, and border, then save.
- Run
npm run devand open http://localhost:3000/blog/hello-world/. - Inspect the paragraph in DevTools: the classes and inline styles are present, but the font size and padding are not applied.
Expected
The paragraph displays with the styles set in the editor, as the tutorial describes.
@faustwp/core version
3.6.0
WordPress version
7.1.3
@faustwp/cli version
No response
Faust.js plugin version
1.9.0
Additional context
No response
Existing issues
- I searched existing issues and didn't find a match.
- Dominant language
- TypeScript
- Stars
- 1.6k
- Forks
- 158
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 141
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from wpengine/faustjs
-
Learn Faust tutorial: preview step crashes with "Cannot read properties of undefined (reading 'post')"Possibly taken @josephfusco claimed this today. Open[Area] Core [Type] Documentation
Difficulty 1/5 Under an hour Newbie friendliness 91/100
wpengine/faustjs#2704 · 1 comment · 1 reaction · 1 assignee ·
Maintainers usually reply within 1 day
All issues in wpengine/faustjs
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Maintainers usually reply within 1 day
-
Difficulty 1/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
keptinventory/kept#336 ·
Maintainers usually reply within 1 day
-
good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
hemi-earn
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
vetro-protocol/vetro-monorepo#1013 ·
Maintainers usually reply within 1 day