Skip to content

Commit 02f7f78

Browse files
josephfuscojosephfusco
authored
Add support for querying the WordPress global stylesheet (#1394)
* Use trademarked name Signed-off-by: Joe Fusco <[email protected]> * Add support for querying the global stylesheet Signed-off-by: Joe Fusco <[email protected]> * Add support for SSG approach to global styles Signed-off-by: Joe Fusco <[email protected]> * Add changeset for CLI Signed-off-by: Joe Fusco <[email protected]> * Add basic documentation Signed-off-by: Joe Fusco <[email protected]> * Add docs to sidebar Signed-off-by: Joe Fusco <[email protected]> * Remove json5 from allowlist Signed-off-by: Joe Fusco <[email protected]> --------- Signed-off-by: Joe Fusco <[email protected]>
1 parent 125694c commit 02f7f78

File tree

10 files changed

+197
-38
lines changed

10 files changed

+197
-38
lines changed

‎.changeset/bright-bugs-cry.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@faustwp/cli': patch
3+
---
4+
5+
Added new command `faust generateGlobalStyles` which adds the connected WordPress site's global stylesheet to the root of your project.

‎.changeset/loud-cars-knock.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@faustwp/wordpress-plugin': patch
3+
---
4+
5+
Registered a new GraphQL field, `globalStylesheet`, that returns [wp_get_global_stylesheet](https://developer.wordpress.org/reference/functions/wp_get_global_stylesheet/) and provides the same arguments as the core WordPress function.

‎audit-ci.jsonc‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
{
2-
"$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
3-
"moderate": true,
4-
"allowlist": [
5-
"json5"
6-
]
2+
"$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
3+
"moderate": true,
4+
"allowlist": []
75
}

‎internal/faustjs.org/docs/global-stylesheet.mdx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
slug: global-stylesheet
3+
title: Global Stylesheet
4+
description: Strategies for adding the WordPress global stylesheet to your application
5+
---
6+
7+
The [Faust.js WordPress plugin](https://wordpress.org/plugins/faustwp) adds the ability to query the WordPress global stylesheet using the `globalStylesheet` field.
8+
9+
## WordPress global styles at build time
10+
11+
The WordPress global stylesheet can be grabbed at build time by using the `faust generateGlobalStylesheet` command.
12+
This will create a new file named `globalStylesheet.css` in the root of your application.
13+
14+
Example
15+
16+
```json title="package.json"
17+
scripts": {
18+
"dev": "faust dev",
19+
"build": "faust build",
20+
"generate": "faust generatePossibleTypes && faust generateGlobalStylesheet",
21+
"start": "faust start",
22+
...
23+
}
24+
```

‎internal/faustjs.org/sidebars.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,11 @@ module.exports = {
8686
label: 'Seed Query',
8787
id: 'faustwp/seed-query',
8888
},
89+
{
90+
type: 'doc',
91+
label: 'Global Stylesheet',
92+
id: 'global-stylesheet',
93+
},
8994
{
9095
type: 'doc',
9196
label: 'API Router',

‎packages/faustwp-cli/src/generateGlobalStylesheet.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import 'isomorphic-fetch';
2+
import fs from 'fs';
3+
4+
import { infoLog, errorLog, debugLog } from './stdout/index.js';
5+
import { getGraphqlEndpoint, getWpUrl } from './utils/index.js';
6+
7+
export async function generateGlobalStylesheet(): Promise<void> {
8+
const graphqlEndpoint = getGraphqlEndpoint();
9+
10+
try {
11+
const response: Response = await fetch(graphqlEndpoint, {
12+
method: 'POST',
13+
headers: {
14+
'Content-Type': 'application/json',
15+
},
16+
body: JSON.stringify({
17+
variables: {},
18+
query: `
19+
{
20+
globalStylesheet
21+
}
22+
`,
23+
}),
24+
});
25+
26+
const json: {
27+
data: { globalStylesheet: string };
28+
errors?: {
29+
message: string;
30+
}[];
31+
} = await response.json();
32+
33+
if (json.errors) {
34+
const errors = json.errors.map((error) => {
35+
return error.message;
36+
});
37+
38+
throw new Error(
39+
`There were errors in the GraphQL request: ${errors.join(', ')}`,
40+
);
41+
}
42+
43+
fs.writeFileSync('./globalStylesheet.css', json.data.globalStylesheet);
44+
45+
infoLog("This project's globalStylesheet.css has been updated!");
46+
} catch (err) {
47+
debugLog(
48+
`"faust generateGlobalStylesheet" failed with the following error: `,
49+
err,
50+
);
51+
52+
errorLog("Unable to update this project's globalStylesheet.css");
53+
errorLog(
54+
`Make sure you have "Enable Public Introspection" checked in WPGraphQL: ${getWpUrl()}/wp-admin/admin.php?page=graphql-settings`,
55+
);
56+
57+
process.exit(0);
58+
}
59+
}

‎packages/faustwp-cli/src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { v4 as uuid } from 'uuid';
66
import { debugLog, infoLog } from './stdout/index.js';
77
import { healthCheck } from './healthCheck/index.js';
88
import { generatePossibleTypes } from './generatePossibleTypes.js';
9+
import { generateGlobalStylesheet } from './generateGlobalStylesheet.js';
910
import { userConfig } from './userConfig.js';
1011
import { getCliArgs, getWpSecret, getWpUrl, isDebug } from './utils/index.js';
1112
import {
@@ -76,6 +77,12 @@ import {
7677
await generatePossibleTypes();
7778
process.exit(0);
7879

80+
break;
81+
}
82+
case 'generateGlobalStylesheet': {
83+
await generateGlobalStylesheet();
84+
process.exit(0);
85+
7986
break;
8087
}
8188
}

‎plugins/faustwp/faustwp.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<?php
22
/**
3-
* Plugin Name: Faust
3+
* Plugin Name: Faust.js™
44
* Plugin URI: https://faustjs.org/
5-
* Description: Plugin for working with Faust, the Headless WordPress Framework.
5+
* Description: Plugin for working with Faust.js™, the Headless WordPress Framework.
66
* Author: WP Engine
77
* Author URI: https://wpengine.com/
88
* License: GPLv2 or later

‎plugins/faustwp/includes/graphql/callbacks.php‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,62 @@ function register_faust_toolbar_field() {
7272
);
7373
}
7474

75+
add_action( 'graphql_register_types', __NAMESPACE__ . '\\register_global_stylesheet_field' );
76+
/**
77+
* Registers a field on the User model called "globalStylesheet" which
78+
* returns the stylesheet resulting of merging core, theme, and user data.
79+
*
80+
* @return void
81+
*
82+
* @uses register_graphql_enum_type
83+
* @uses register_graphql_field
84+
* @uses wp_get_global_stylesheet
85+
*
86+
* @link https://developer.wordpress.org/reference/functions/wp_get_global_stylesheet/
87+
*/
88+
function register_global_stylesheet_field() {
89+
register_graphql_enum_type(
90+
'GlobalStylesheetTypesEnum',
91+
array(
92+
'description' => __( 'Types of styles to load', 'faustwp' ),
93+
'values' => array(
94+
'VARIABLES' => array(
95+
'value' => 'variables',
96+
),
97+
'PRESETS' => array(
98+
'value' => 'presets',
99+
),
100+
'STYLES' => array(
101+
'value' => 'styles',
102+
),
103+
'BASE_LAYOUT_STYLES' => array(
104+
'value' => 'base-layout-styles',
105+
),
106+
),
107+
)
108+
);
109+
110+
register_graphql_field(
111+
'RootQuery',
112+
'globalStylesheet',
113+
array(
114+
'type' => 'String',
115+
'args' => array(
116+
'types' => array(
117+
'type' => array( 'list_of' => 'GlobalStylesheetTypesEnum' ),
118+
'description' => __( 'Types of styles to load.', 'faustwp' ),
119+
),
120+
),
121+
'description' => __( 'Returns the stylesheet resulting of merging core, theme, and user data.', 'faustwp' ),
122+
'resolve' => function( $root, $args, $context, $info ) {
123+
$types = $args['types'] ?? null;
124+
125+
return wp_get_global_stylesheet( $types );
126+
},
127+
)
128+
);
129+
}
130+
75131
/**
76132
* Resolver for getting the templates that will be loaded on a given node
77133
*

‎plugins/faustwp/readme.txt‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
=== Faust ===
1+
=== Faust.js ===
22
Contributors: antpb, apmatthe, blakewpe, chriswiegman, claygriffiths, jasonkonen, joefusco, markkelnar, matthewguywright, mindctrl, modernnerd, rfmeier, TeresaGobble, thdespou, wpengine
3-
Tags: faustjs, faust, headless, decoupled
3+
Tags: faustjs, faust, headless, decoupled, composable-architecture
44
Requires at least: 5.7
55
Tested up to: 6.2
66
Stable tag: 0.8.5
77
Requires PHP: 7.2
88
License: GPLv2 or later
99
License URI: https://www.gnu.org/licenses/gpl-2.0.html
1010

11-
Faust transforms your traditional WordPress installation into a flexible headless CMS.
11+
Faust.js™ transforms your traditional WordPress installation into a flexible headless CMS.
1212

1313
== Description ==
1414

15-
In conjunction with the [Faust NPM packages](https://www.npmjs.com/search?q=%40faustwp), Faust enables a decoupled front-end to authenticate with WordPress through GraphQL mutations and REST API endpoints. It is the bridge between a Faust-powered front-end application, and a WordPress backend.
15+
In conjunction with the [Faust.js™ NPM packages](https://www.npmjs.com/search?q=%40faustwp), the Faust.js™ WordPress plugin enables a decoupled front-end to authenticate with WordPress through GraphQL mutations and REST API endpoints. It is the bridge between a Faust.js™ powered front-end application, and a WordPress backend.
1616

1717
The plugin also provides useful options for headless sites, such as the ability to:
1818

@@ -25,51 +25,51 @@ The plugin also provides useful options for headless sites, such as the ability
2525
1. Search for the plugin in WordPress under "Plugins -> Add New".
2626
2. Click the “Install Now” button, followed by "Activate".
2727

28-
That's it! For more information on getting started with headless WordPress, see [Getting Started with Faust](https://faustjs.org/docs/tutorial/dev-env-setup).
28+
That's it! For more information on getting started with headless WordPress, see [Getting Started with Faust.js](https://faustjs.org/docs/tutorial/dev-env-setup).
2929

3030
== Frequently Asked Questions ==
3131

3232
= If I need more support, where should I ask questions? =
33-
Use one of the channels below to contact the Faust team for support.
34-
[GitHub](https://github.com/wpengine/faustjs) - Faust GitHub documentation and codebase.
33+
Use one of the channels below to contact the Faust.js team for support.
34+
[GitHub](https://github.com/wpengine/faustjs) - Faust.js GitHub documentation and codebase.
3535
[Discord](https://discord.gg/J2khkF9XYK) - Interactive chat support on Discord.
3636

3737
= Where can I find more information about development and future features for this plugin? =
3838

39-
Great question! The development team posts weekly summaries of sprints related to Faust, [here](https://faustjs.org/blog).
39+
Great question! The development team posts weekly summaries of sprints related to Faust.js, [here](https://faustjs.org/blog).
4040

41-
= Why the name “Faust”? =
41+
= Why the name “Faust.js”? =
4242

4343
Johann Faust was a German printer and was instrumental in the invention of the printing press, along with his partner Johann Gutenberg. In the same way the printing press democratized the spread of information, the mission of Faust.js is to support and further the vision of WordPress to democratize publishing on the web.
4444

4545
== Screenshots ==
4646

4747
1. The settings page
48-
2. Portfolio, blog, and basic blueprints for headless sites built with Faust
48+
2. Portfolio, blog, and basic blueprints for headless sites built with Faust.js
4949
3. A code snippet
5050

5151
plugins/faustwp/.wordpress-org/screenshot-1.png
5252
plugins/faustwp/.wordpress-org/screenshot-2.png
5353
plugins/faustwp/.wordpress-org/screenshot-3.png
5454

55-
== Changelog ==
56-
57-
= 0.8.5 =
58-
59-
### Patch Changes
60-
61-
- eaa5e48: Added the `shouldShowFaustToolbar` field on the `viewer` WPGraphQL type to determine if the Faust toolbar should be shown based on user preferences.
62-
63-
= 0.8.4 =
64-
65-
### Patch Changes
66-
67-
- 43205e1: Bug Fix: "Post and Category URL rewrites" setting ignores protocol of configured front-end site URL
68-
69-
= 0.8.3 =
70-
71-
### Patch Changes
72-
73-
- c4696ef: - Added new filter `faustwp_exclude_from_public_redirect`, allowing WordPress plugins and themes to exclude certain routes from being redirected when the [enable public route redirects](https://faustjs.org/docs/faustwp/settings#enabling-public-route-redirects) setting is active.
74-
75-
[View the full changelog](https://faustjs.org/docs/changelog/faustwp)
55+
== Changelog ==
56+
57+
= 0.8.5 =
58+
59+
### Patch Changes
60+
61+
- eaa5e48: Added the `shouldShowFaustToolbar` field on the `viewer` WPGraphQL type to determine if the Faust toolbar should be shown based on user preferences.
62+
63+
= 0.8.4 =
64+
65+
### Patch Changes
66+
67+
- 43205e1: Bug Fix: "Post and Category URL rewrites" setting ignores protocol of configured front-end site URL
68+
69+
= 0.8.3 =
70+
71+
### Patch Changes
72+
73+
- c4696ef: - Added new filter `faustwp_exclude_from_public_redirect`, allowing WordPress plugins and themes to exclude certain routes from being redirected when the [enable public route redirects](https://faustjs.org/docs/faustwp/settings#enabling-public-route-redirects) setting is active.
74+
75+
[View the full changelog](https://faustjs.org/docs/changelog/faustwp)

0 commit comments

Comments
 (0)