Add Online Workshops page template (#2444)

* Add template and pattern with translations

* Add styles

wp-content/themes/pub/wporg-learn-2024/patterns/page-online-workshops-content.php

@@ -0,0 +1,86 @@
+<?php
+/**
+ * Title: Online Workshops Page Content
+ * Slug: wporg-learn-2024/page-online-workshops-content
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"730px"}} -->
+<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--50)">
+
+	<!-- wp:paragraph -->
+	<p><?php esc_html_e( 'Online workshops are live sessions where you can learn alongside other WordPress enthusiasts. They are a safe zone where you can come as you are, develop new ideas, explore issues, ask questions, network over shared interests, exchange theories, collaborate on work, and thrive in uncertainty.', 'wporg-learn' ); ?></p>
+	<!-- /wp:paragraph -->
+
+	<!-- wp:buttons -->
+	<div class="wp-block-buttons">
+
+		<!-- wp:button {"className":"is-style-outline"} -->
+		<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="apply-to-facilitate"><?php esc_html_e( 'Apply to facilitate', 'wporg-learn' ); ?></a></div>
+		<!-- /wp:button -->
+
+		<!-- wp:button {"className":"is-style-fill"} -->
+		<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button" href="https://wordpress.tv/category/learn-wordpress-online-workshops/"><?php esc_html_e( 'View recorded online workshops', 'wporg-learn' ); ?></a></div>
+		<!-- /wp:button -->
+
+	</div>
+	<!-- /wp:buttons -->
+
+</div>
+<!-- /wp:group -->
+
+<!-- wp:wporg-meeting-calendar/main /-->
+
+<!-- wp:columns -->
+<div class="wp-block-columns">
+
+	<!-- wp:column -->
+	<div class="wp-block-column">
+
+		<!-- wp:paragraph {"fontSize":"small"} -->
+		<p class="has-small-font-size">
+			<?php echo wp_kses_post(
+				sprintf(
+					/* translators: %1$s: meetup.com online workshops link, %2$s: code of conduct link */
+					__( 'RSVPs and communications are handled through <a href="%1$s">the Meetup.com group</a>. Each event links to the RSVP page. Events are shown in your local time. You must agree to the <a href="%2$s">Code of Conduct</a> in order to participate in online workshops.', 'wporg-learn' ),
+					esc_url( 'https://www.meetup.com/learn-wordpress-online-workshops/' ),
+					esc_url( 'https://learn.wordpress.org/online-workshops/code-of-conduct/' ),
+				)
+			); ?>
+		</p>
+		<!-- /wp:paragraph -->
+
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column">
+
+		<!-- wp:paragraph {"align":"right","fontSize":"small"} -->
+		<p class="has-text-align-right has-small-font-size"><?php esc_html_e( 'Subscribe to this calendar:', 'wporg-learn' ); ?> <a href="https://calendar.google.com/calendar/u/0/embed?src=3f9k1go9k6bks9u41i20u2lje56hd1fv@import.calendar.google.com" target="_blank" rel="noreferrer noopener"><?php esc_html_e( 'Google Calendar ↗', 'wporg-learn' ); ?></a> &middot; <a href="https://learn.wordpress.org/meetings.ics" target="_blank" rel="noreferrer noopener"><?php esc_html_e( 'ICS', 'wporg-learn' ); ?></a> &middot; <a href="https://learn.wordpress.org/feed/?post_type=meeting" target="_blank" rel="noreferrer noopener"><?php esc_html_e( 'RSS', 'wporg-learn' ); ?></a></p>
+		<!-- /wp:paragraph -->
+
+	</div>
+	<!-- /wp:column -->
+
+</div>
+<!-- /wp:columns -->
+
+<!-- wp:wporg/notice -->
+<div class="wp-block-wporg-notice is-tip-notice">
+	<div class="wp-block-wporg-notice__icon"></div>
+	<div class="wp-block-wporg-notice__content">
+		<p>
+			<?php echo wp_kses_post(
+				sprintf(
+					/* translators: %s: WordPress Playground link */
+					__( 'In order to enhance your learning experience, <a href="%s" target="_blank" rel="noreferrer noopener">click here to open a private and secure WordPress site that only you can access</a>', 'wporg-learn' ),
+					esc_url( 'https://developer.wordpress.org/playground/demo/?step=playground&amp;theme=twentytwentythree' ),
+				)
+			); ?>
+		</p>
+	</div>
+</div>
+<!-- /wp:wporg/notice -->

wp-content/themes/pub/wporg-learn-2024/src/style/_components.scss

@@ -0,0 +1,12 @@
+.components-modal__frame {
+	box-shadow: unset;
+	border-radius: unset;
+}
+
+.components-modal__content {
+	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
+}
+
+.components-modal__header {
+	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0;
+}

wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss

@@ -0,0 +1,228 @@
+.wporg-block-meeting-calendar {
+	.wporg-meeting-calendar__header {
+		flex-direction: row;
+		padding: unset;
+
+		h2 {
+			margin: unset;
+			text-align: unset;
+			margin-left: var(--wp--preset--spacing--20);
+			font-size: var(--wp--preset--font-size--heading-4);
+		}
+	}
+
+	// Calendar/List toggle
+	.components-button-group {
+		display: flex;
+		flex-direction: row-reverse;
+
+		.components-button {
+			background-color: unset;
+			color: var(--wp--preset--color--white);
+			width: 40px;
+			height: 40px;
+			padding: unset;
+			position: relative;
+			border-radius: 2px;
+			margin-left: unset;
+
+			&:not(:focus) {
+				box-shadow: unset;
+			}
+
+			&::before {
+				content: "";
+				position: absolute;
+				display: block;
+				width: 100%;
+				height: 100%;
+				border-radius: 2px;
+				background-color: var(--wp--preset--color--white);
+				background-repeat: no-repeat;
+				background-position: center;
+			}
+
+			&:disabled {
+				display: none;
+			}
+
+			&.is-primary::before {
+				background-color: var(--wp--preset--color--charcoal-1);
+			}
+
+			// Month
+			&:first-child {
+				&::before {
+					background-image: url(../../assets/block-calendar-dark.svg);
+				}
+
+				&.is-primary::before {
+					background-image: url(../../assets/block-calendar-light.svg);
+				}
+			}
+
+			// List
+			&:last-child {
+				&::before {
+					background-image: url(../../assets/list-type-bullet-dark.svg);
+				}
+
+				&.is-primary::before {
+					background-image: url(../../assets/list-type-bullet-light.svg);
+				}
+			}
+		}
+	}
+
+	.wporg-meeting-calendar__filter {
+		flex-wrap: wrap;
+		background: unset;
+		border: unset;
+		padding-left: unset;
+
+		.wporg-meeting-calendar__filter-feed {
+			display: none;
+		}
+
+		.components-base-control__field {
+			margin-bottom: unset;
+		}
+
+		.components-button.is-link {
+			text-decoration: none;
+		}
+	}
+
+	table th,
+	.wporg-meeting-calendar__cell strong {
+		font-weight: 400;
+		font-size: var(--wp--preset--font-size--normal);
+	}
+
+	table th,
+	.wporg-meeting-calendar__cell {
+		border: 1px solid var(--wp--custom--color--border);
+	}
+
+	.wporg-meeting-calendar__cell {
+		padding: var(--wp--preset--spacing--10);
+
+		> strong {
+			padding: unset;
+			margin: unset;
+		}
+
+		&:first-child,
+		&:last-child {
+			background-color: var(--wp--preset--color--light-grey-2);
+		}
+
+		&.is-today {
+			background-color: var(--wp--preset--color--acid-green-3);
+		}
+	}
+
+	.wporg-meeting-calendar__cell-event {
+		background-color: var(--wp--preset--color--blueberry-4) !important;
+		color: var(--wp--custom--link--color--text) !important;
+		padding: 8px;
+		border: 1px solid var(--wp--custom--link--color--text);
+		font-size: var(--wp--preset--font-size--small);
+		line-height: var(--wp--custom--body--small--typography--line-height);
+		margin: var(--wp--preset--spacing--10) 0 0;
+
+		&:focus {
+			box-shadow: none !important;
+		}
+
+		.wporg-meeting-calendar__cell-event-time {
+			font-weight: 700;
+		}
+
+		.wporg-meeting-calendar__cell-event-title {
+			font-weight: 400;
+		}
+	}
+
+	.wporg-meeting-calendar__list-event-team {
+		background-color: var(--wp--preset--color--acid-green-1);
+		color: var(--wp--preset--color--charcoal-1) !important;
+	}
+
+	.wporg-meeting-calendar__list-event-copy {
+		font-weight: 400;
+	}
+
+	.wporg-meeting-calendar__list {
+		padding: unset;
+
+		.wporg-meeting-calendar__list-event {
+			flex-direction: column-reverse;
+			margin-bottom: unset;
+			border-radius: unset;
+
+			+ .wporg-meeting-calendar__list-event {
+				margin-top: unset;
+				border-top: unset;
+			}
+
+			&:first-of-type {
+				border-top-left-radius: 2px;
+				border-top-right-radius: 2px;
+			}
+
+			&:last-of-type {
+				border-bottom-left-radius: 2px;
+				border-bottom-right-radius: 2px;
+			}
+
+			// Time and timezone
+			> div:first-child {
+				display: flex;
+				gap: 0.5em;
+				font-size: var(--wp--preset--font-size--small);
+				color: var(--wp--preset--color--charcoal-4);
+				padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
+			}
+		}
+
+		.wporg-meeting-calendar__list-event-tz {
+			font-size: unset;
+			color: unset;
+		}
+
+		.wporg-meeting-calendar__list-event-team {
+			margin-left: unset;
+			margin-bottom: var(--wp--preset--spacing--20);
+
+			@media screen and (min-width: 768px) {
+				margin-bottom: unset;
+			}
+		}
+
+		.wporg-meeting-calendar__list-event-details {
+			padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
+
+			> div {
+				flex: 1;
+				align-items: baseline;
+				gap: var(--wp--preset--spacing--20);
+				font-size: var(--wp--preset--font-size--normal);
+
+				@media screen and (min-width: 768px) {
+					display: flex;
+				}
+			}
+
+			.wporg-meeting-calendar__list-event-title {
+				font-size: inherit;
+				font-weight: 400;
+				flex: 1;
+
+				> a {
+					font-size: inherit;
+				}
+			}
+		}
+	}
+}

wp-content/themes/pub/wporg-learn-2024/src/style/style.scss

@@ -3,4 +3,11 @@
  * templates or theme.json settings.
  */
 
+@import "components";
 @import "sensei";
+@import "wporg-meeting-calendar";
+
+:root {
+	--wp-components-color-accent: var(--wp--preset--color--blueberry-1);
+	--wp-components-color-accent-darker-10: var(--wp--preset--color--deep-blueberry);
+}

wp-content/themes/pub/wporg-learn-2024/style.css

@@ -4,7 +4,7 @@
  * Author: WordPress.org
  * Author URI: http://wordpress.org/
  * Description: A theme for learn.wordpress.org, built in 2024.
- * Version: 1.0.0
+ * Version: 1.0.1
  * License: GNU General Public License v2 or later
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
  * Text Domain: wporg-learn

wp-content/themes/pub/wporg-learn-2024/templates/page-online-workshops.html

@@ -0,0 +1,19 @@
+<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
+<main class="wp-block-group entry-content">
+
+	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained","contentSize":"1160px"}} -->
+	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--edge-space)">
+
+		<!-- wp:post-title {"level":1} /-->
+
+		<!-- wp:pattern {"slug":"wporg-learn-2024/page-online-workshops-content"} /-->
+
+	</div>
+	<!-- /wp:group -->
+
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->