Events: Iterate on initial design

.gitignore

@@ -112,3 +112,4 @@ 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
+public_html/wp-content/themes/wporg-events-2023/editor.css

public_html/wp-content/themes/wporg-events-2023/functions.php

@@ -5,10 +5,18 @@
 
 require_once __DIR__ . '/inc/city-landing-pages.php';
 
+add_action( 'after_setup_theme', __NAMESPACE__ . '\theme_support' );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
 add_filter( 'wporg_block_navigation_menus', __NAMESPACE__ . '\add_site_navigation_menus' );
 
 
+/**
+ * Register theme supports.
+ */
+function theme_support() {
+	add_editor_style( 'editor.css' );
+}
+
 /**
  * Enqueue scripts and styles.
  */

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

@@ -7,12 +7,14 @@
 		"cssnano": "^6.0.1",
 		"postcss": "^8.4.31",
 		"postcss-cli": "^10.1.0",
+		"postcss-custom-media": "^10.0.2",
 		"postcss-import": "^15.1.0",
 		"postcss-preset-env": "^9.3.0"
 	},
 	"scripts": {
+		"start": "npm run watch",
 		"watch": "npm run build -- --watch",
-		"build": "postcss postcss/style.pcss --output style.css",
+		"build": "postcss postcss/style.pcss postcss/editor.pcss --dir . --ext 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.'",
 		"lint:css": "wp-scripts lint-style 'postcss/*.pcss'"
 	}

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

@@ -1,5 +1,5 @@
-<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group">
+<!-- wp:group {"className":"wporg-events__contributors","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group wporg-events__contributors">
 	<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"},"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} -->
 	<div class="wp-block-group"
 		style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
@@ -38,33 +38,6 @@ <h2 class="wp-block-heading is-style-default">Where all WordPress contributors m
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:jetpack/tiled-gallery {"columnWidths":[["65.48121","34.51879"]],"ids":[79,85,82],"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"}}} -->
-	<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular">
-		<div class="tiled-gallery__gallery">
-			<div class="tiled-gallery__row">
-				<div class="tiled-gallery__col" style="flex-basis:65.48121%">
-					<figure class="tiled-gallery__item"><img alt="" data-height="615" data-id="79"
-							data-link="https://events.wordpress.test/olympus-digital-camera/"
-							data-url="https://events.wordpress.test/files/2023/11/Avenue-A-Strummer-Memorial.jpg"
-							data-width="820"
-							src="https://events.wordpress.test/files/2023/11/Avenue-A-Strummer-Memorial.jpg"
-							data-amp-layout="responsive" /></figure>
-				</div>
-				<div class="tiled-gallery__col" style="flex-basis:34.51879%">
-					<figure class="tiled-gallery__item"><img alt="" data-height="333" data-id="85"
-							data-link="https://events.wordpress.test/shoes/"
-							data-url="https://events.wordpress.test/files/2023/11/shoes.jpg" data-width="500"
-							src="https://events.wordpress.test/files/2023/11/shoes.jpg" data-amp-layout="responsive" />
-					</figure>
-					<figure class="tiled-gallery__item"><img alt="" data-height="338" data-id="82"
-							data-link="https://events.wordpress.test/leaves/"
-							data-url="https://events.wordpress.test/files/2023/11/leaves.jpg" data-width="450"
-							src="https://events.wordpress.test/files/2023/11/leaves.jpg" data-amp-layout="responsive" />
-					</figure>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- /wp:jetpack/tiled-gallery -->
+	<!-- wp:pattern {"slug":"wporg-events-2023/front-contributors-meet-gallery"} /-->
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

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

@@ -12,19 +12,19 @@ <h1 class="wp-block-heading">Meet the community behind WordPress</h1>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:paragraph -->
-		<p>???? events this last year</p>
+		<p>44,744 events this last year</p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:paragraph -->
-		<p>?? countries</p>
+		<p>108 countries</p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:paragraph -->
-		<p>???? contributor attendees</p>
+		<p>540,537 members</p>
 		<!-- /wp:paragraph -->
 	</div>
 	<!-- /wp:group -->
 
 	<!-- wp:wporg/google-map {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"}},"filterSlug":"all-upcoming","id":"all-upcoming-map","apiKey":"WORDCAMP_DEV_GOOGLE_MAPS_API_KEY","showList":false,"showSearch":false} /-->
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

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

@@ -17,4 +17,4 @@ <h2 class="wp-block-heading has-medium-font-size" style="font-style:normal;font-
 	</div>
 	<!-- /wp:buttons -->
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

public_html/wp-content/themes/wporg-events-2023/patterns/front-contributors-meet-gallery.php

@@ -0,0 +1,32 @@
+<?php
+
+/**
+ * Title: Front Page: "Where Contributors Meet..." Gallery
+ * Slug: wporg-events-2023/front-contributors-meet-gallery
+ */
+
+?>
+
+<!-- wp:jetpack/tiled-gallery {"columnWidths":[["65.48121","34.51879"]],"ids":[79,85,82],"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"}}} -->
+<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular">
+	<div class="tiled-gallery__gallery">
+		<div class="tiled-gallery__row">
+			<div class="tiled-gallery__col" style="flex-basis:65.48121%">
+				<figure class="tiled-gallery__item">
+					<img alt="" data-height="272" data-url="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/IMAGES/contributors-rectangle1.png" data-width="615" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/IMAGES/contributors-rectangle1.png" data-amp-layout="responsive" />
+				</figure>
+			</div>
+		</div>
+		<div class="tiled-gallery__row">
+			<div class="tiled-gallery__col">
+				<figure class="tiled-gallery__item"><img alt="" data-height="272" data-url="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/IMAGES/contributors-square1.png" data-width="298" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/IMAGES/contributors-square1.png" data-amp-layout="responsive" /></figure>
+			</div>
+			<div class="tiled-gallery__col">
+				<figure class="tiled-gallery__item">
+					<img alt="" data-height="272" data-url="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/IMAGES/contributors-square2.png" data-width="297" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/IMAGES/contributors-square2.png" data-amp-layout="responsive" />
+				</figure>
+			</div>
+		</div>
+	</div>
+</div>
+<!-- /wp:jetpack/tiled-gallery -->

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

@@ -4,6 +4,8 @@ const plugins = [
 	// This has to run before any other plugins, to concatenate all files into one.
 	require( 'postcss-import' ),
 
+	require( 'postcss-custom-media' ),
+
 	// Enable transforms for stage 2+, explictly enable nesting (stage 1).
 	require( 'postcss-preset-env' )( {
 		stage: 2,

public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss

@@ -0,0 +1,31 @@
+/*
+ * Adapted from upstream SASS files. These assume a desktop-first approach, since that lends itself better to the Site Editor.
+ */
+
+
+/*
+ * Gutenberg
+ * @link https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss
+ */
+@custom-media --xhuge (min-width: 1920px);
+@custom-media --huge (min-width: 1440px);
+@custom-media --wide (min-width: 1280px);
+@custom-media --xlarge (min-width: 1080px);
+@custom-media --large (min-width: 960px); /* admin sidebar auto folds */
+@custom-media --medium (min-width: 782px); /* adminbar goes big */
+@custom-media --small (min-width: 600px);
+@custom-media --mobile (min-width: 480px);
+@custom-media --zoomed-in (min-width: 280px);
+
+
+/*
+ * wporg-parent-2021
+ * @link https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/sass/base/_breakpoints.scss
+ */
+@custom-media --small-only (max-width: 559px);
+@custom-media --giant (min-width: 2000px);
+
+
+/*
+ * Custom
+ */

public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss

@@ -0,0 +1,18 @@
+.wp-site-blocks .is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ),
+.is-root-container.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ),
+.edit-post-visual-editor__post-title-wrapper > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
+	/*
+	 * `--wp--style--global--content-size` gets set to `180px`, rather than the layout size from the parent's
+	 * `theme.json`. I'm assuming that's a bug somewhere, but haven't tracked it down. This is a hack to make the
+	 * content width usable until that bug is resolved.
+	 */
+	max-width: var( --wp--custom--layout--content-size ) !important;
+}
+
+.wp-site-blocks .is-layout-constrained,
+.wp-block-post-content-is-layout-constrained {
+	& .alignwide {
+		/* See note about about the `global` sizes. */
+		max-width: var( --wp--custom--layout--wide-size ) !important;
+	}
+}

public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss

@@ -0,0 +1,33 @@
+.wporg-marker-list__container {
+	padding-left: 0;
+}
+
+.wporg-marker-list-item {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	border: 1px solid var(--wp--preset--color--light-grey-1);
+	border-bottom: none;
+	padding: 20px;
+
+	@media (--small-only) {
+		display: block;
+	}
+
+	&:last-child {
+		border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
+	}
+
+	& .wporg-marker-list-item__title {
+		flex: 0 0 60%;
+		--wp--preset--spacing--30: 0;
+	}
+
+	& .wporg-marker-list-item__location {
+		flex: 0 0 15%;
+	}
+
+	& .wporg-marker-list-item__date-time {
+		flex: 0 0 15%;
+	}
+}

public_html/wp-content/themes/wporg-events-2023/postcss/editor.pcss

@@ -0,0 +1,8 @@
+@import "style.pcss";
+
+.block-editor-iframe__body {
+
+	/* Otherwise they get set to `11000px` and `40vh` for some reason. */
+	padding-top: 0;
+	padding-bottom: 0;
+}

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

@@ -0,0 +1,7 @@
+.wporg-events__contributors {
+	@media (--small-only) {
+		&.is-layout-flex {
+			display: block;
+		}
+	}
+}

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

@@ -3,11 +3,23 @@
 	max-height: 80vh;
 	gap: 0;
 
+	@media (--small-only) {
+		height: unset;
+
+		&.is-layout-flex {
+			display: block;
+		}
+	}
+
 	& .wporg-events__cover-stats {
 		gap: 0;
 	}
 
 	& .wp-block-wporg-google-map .wporg-google-map__container {
 		height: 430px;
+
+		@media (--small-only) {
+			height: 170px;
+		}
 	}
 }

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

@@ -6,4 +6,13 @@
  * Template:    wporg-parent-2021
  */
 
-@import "front-page/cover.pcss";
+/* Base */
+@import "base/breakpoints.pcss";
+@import "base/layout.pcss";
+
+/* Pages */
+@import "page/front-page/cover.pcss";
+@import "page/front-page/contributors.pcss";
+
+/* Blocks */
+@import "blocks/wporg-google-map.pcss";

public_html/wp-content/themes/wporg-events-2023/templates/page.html

@@ -0,0 +1,11 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:group {"tagName":"main","className":"entry-content"} -->
+<main class="wp-block-group entry-content">
+	<!-- wp:post-title {"style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}}} /-->
+
+	<!-- wp:post-content {"layout":{"inherit":true},"style":{"spacing":{"blockGap":"0px"}}} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->