From e057541841e2c3f03ae19e2680c81849f51d65cf Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Fri, 17 May 2024 15:34:30 +1200 Subject: [PATCH] Add Online Workshops page template (#2444) * Add template and pattern with translations * Add styles --- .../assets/block-calendar-dark.svg | 9 + .../assets/block-calendar-light.svg | 9 + .../assets/list-type-bullet-dark.svg | 3 + .../assets/list-type-bullet-light.svg | 3 + .../page-online-workshops-content.php | 86 +++++++ .../src/style/_components.scss | 12 + .../src/style/_wporg-meeting-calendar.scss | 228 ++++++++++++++++++ .../pub/wporg-learn-2024/src/style/style.scss | 7 + .../themes/pub/wporg-learn-2024/style.css | 2 +- .../templates/page-online-workshops.html | 19 ++ 10 files changed, 377 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-dark.svg create mode 100644 wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-light.svg create mode 100644 wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-dark.svg create mode 100644 wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-light.svg create mode 100644 wp-content/themes/pub/wporg-learn-2024/patterns/page-online-workshops-content.php create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_components.scss create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss create mode 100644 wp-content/themes/pub/wporg-learn-2024/templates/page-online-workshops.html diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-dark.svg b/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-dark.svg new file mode 100644 index 000000000..ddf60f4f7 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-dark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-light.svg b/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-light.svg new file mode 100644 index 000000000..b1dec91a2 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-dark.svg b/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-dark.svg new file mode 100644 index 000000000..569d1d455 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-light.svg b/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-light.svg new file mode 100644 index 000000000..9be4135be --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/page-online-workshops-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/page-online-workshops-content.php new file mode 100644 index 000000000..3a673dfe9 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/page-online-workshops-content.php @@ -0,0 +1,86 @@ + + + +
+ + +

+ + + +
+ + +
+ + + +
+ + +
+ + +
+ + + + + +
+ + +
+ + +

+ the Meetup.com group. Each event links to the RSVP page. Events are shown in your local time. You must agree to the Code of Conduct 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/' ), + ) + ); ?> +

+ + +
+ + + +
+ + +

· ·

+ + +
+ + +
+ + + +
+
+
+

+ click here to open a private and secure WordPress site that only you can access', 'wporg-learn' ), + esc_url( 'https://developer.wordpress.org/playground/demo/?step=playground&theme=twentytwentythree' ), + ) + ); ?> +

+
+
+ diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_components.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_components.scss new file mode 100644 index 000000000..a2dd5f3c2 --- /dev/null +++ b/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; +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss new file mode 100644 index 000000000..976448eaa --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss index d265da04b..6a7e83b7b 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss +++ b/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); +} diff --git a/wp-content/themes/pub/wporg-learn-2024/style.css b/wp-content/themes/pub/wporg-learn-2024/style.css index 08667329d..c84877bea 100644 --- a/wp-content/themes/pub/wporg-learn-2024/style.css +++ b/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 diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/page-online-workshops.html b/wp-content/themes/pub/wporg-learn-2024/templates/page-online-workshops.html new file mode 100644 index 000000000..2093eef25 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/templates/page-online-workshops.html @@ -0,0 +1,19 @@ + + + +
+ + +
+ + + + + +
+ + +
+ + +