Events: Setup PostCSS

.gitignore

@@ -111,3 +111,4 @@ public_html/wp-content/themes/twentytwentytwo
 public_html/wp-content/themes/twentytwentythree
 public_html/wp-content/themes/twentytwentyfour
 public_html/wp-content/themes/wporg-parent-2021
+public_html/wp-content/themes/wporg-events-2023/style.css

package.json

@@ -18,7 +18,8 @@
 		"public_html/wp-content/plugins/wc-post-types",
 		"public_html/wp-content/plugins/wcpt",
 		"public_html/wp-content/plugins/wordcamp-forms-to-drafts",
-		"public_html/wp-content/plugins/wordcamp-speaker-feedback"
+		"public_html/wp-content/plugins/wordcamp-speaker-feedback",
+		"public_html/wp-content/themes/wporg-events-2023"
 	],
 	"browserslist": [
 		"extends @wordpress/browserslist-config"

public_html/wp-content/themes/wporg-events-2023/README.md

@@ -0,0 +1,3 @@
+# wporg-events-2023
+
+You must run the `build` task for this to be recognized as a valid theme by WP.

public_html/wp-content/themes/wporg-events-2023/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "wporg-events-2023",
+	"version": "0.0.1",
+	"description": "Description: Includes templates for the homepage, event archives, etc",
+	"license": "GPL-2.0-or-later",
+	"devDependencies": {
+		"cssnano": "^6.0.1",
+		"postcss": "^8.4.31",
+		"postcss-cli": "^10.1.0",
+		"postcss-import": "^15.1.0",
+		"postcss-preset-env": "^9.3.0"
+	},
+	"scripts": {
+		"watch": "npm run build -- --watch",
+		"build": "postcss postcss/style.pcss --output style.css",
+		"lint:js": "echo 'There is no JS, but this is required to make the `linter.yml` workflow pass. See https://github.com/yarnpkg/yarn/issues/6739, https://github.com/yarnpkg/yarn/issues/6894.'"
+	}
+}

public_html/wp-content/themes/wporg-events-2023/parts/front-page/cover.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"className":"entry-content","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
-<div class="wp-block-group entry-content">
+<!-- wp:group {"className":"wporg-events__meet-community-map-wrapper","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
+<div class="wp-block-group wporg-events__cover">
 	<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"layout":{"selfStretch":"fixed","flexSize":"50%"},"spacing":{"padding":{"top":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"backgroundColor":"charcoal-2","textColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"wrap"}} -->
 	<div class="wp-block-group has-white-color has-charcoal-2-background-color has-text-color has-background has-link-color"
 		style="padding-top:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">

public_html/wp-content/themes/wporg-events-2023/postcss.config.js

@@ -0,0 +1,23 @@
+const isProduction = process.env.NODE_ENV === 'production';
+
+const plugins = [
+	// This has to run before any other plugins, to concatenate all files into one.
+	require( 'postcss-import' ),
+
+	// Enable transforms for stage 2+, explictly enable nesting (stage 1).
+	require( 'postcss-preset-env' )( {
+		stage: 2,
+		features: {
+			'nesting-rules': true,
+		},
+	} ),
+];
+
+// Minify.
+if ( isProduction ) {
+	plugins.push( require( 'cssnano' ) );
+}
+
+module.exports = {
+	plugins,
+};

public_html/wp-content/themes/wporg-events-2023/postcss/front-page/cover.pcss

@@ -0,0 +1,4 @@
+.wporg-events__cover {
+	gap: 0;
+	/* also add gap for other block */
+}

public_html/wp-content/themes/wporg-events-2023/style.css → public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss

@@ -5,3 +5,5 @@
  * Text Domain: wporg
  * Template:    wporg-parent-2021
  */
+
+ @import 'front-page/cover.pcss';