Repository navigation
feat(core): add WordPress-style body classes - #2689
Merged
Merged
Conversation
… bodyClass prop and useBodyClass
josephfusco
added
[Area] Core
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Preview class generation and toolbar opt-in behavior need correction to avoid unintended styling.
3 open issues
What changed in this PR
Adds WordPress-style body classes to Faust pages to support CSS ported from WordPress themes.
Changes:
- Adds class generation, a lifecycle hook, and opt-in template integration.
- Reuses the hook in the toolbar and enables classes in the getting-started example.
- Adds tests and API documentation.
| File | Description |
|---|---|
| packages/faustwp-core/tests/utils/getBodyClasses.test.ts | Tests class generation. |
| packages/faustwp-core/tests/hooks/useBodyClass.test.ts | Tests class lifecycle. |
| packages/faustwp-core/tests/components/WordPressTemplate.test.tsx | Tests opt-in behavior. |
| packages/faustwp-core/src/utils/getBodyClasses.ts | Derives classes from seed nodes. |
| packages/faustwp-core/src/index.ts | Exports the new APIs. |
| packages/faustwp-core/src/hooks/useBodyClass.tsx | Adds and cleans up body classes. |
| packages/faustwp-core/src/components/WordPressTemplate.tsx | Adds the bodyClass option. |
| packages/faustwp-core/src/components/Toolbar/Toolbar.tsx | Uses the hook for toolbar classes. |
| examples/next/faustwp-getting-started/pages/preview.js | Enables preview body classes. |
| examples/next/faustwp-getting-started/pages/index.js | Enables homepage body classes. |
| examples/next/faustwp-getting-started/pages/[...wordpressNode].js | Enables routed page body classes. |
| docs/reference/use-body-class/index.md | Documents usage and supported classes. |
| docs/nav.json | Links the new reference page. |
Review effort: Balanced
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2682
It's opt-in with
<WordPressTemplate bodyClass />, so existing CSS can't change, and I checked it in the getting-started example in Chrome against WordPress 7.0: a post getssingle single-post postid-5, a categoryarchive category category-news category-2, the front pagehome blog, a preview with the toolbaradmin-bar logged-in single single-post postid-5, and classes swap cleanly on client-side navigation.