diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index cac7ce2c7..5c4529d87 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/wp-content/themes/pub/wporg-learn-2024/functions.php @@ -13,6 +13,7 @@ require_once __DIR__ . '/src/course-outline/index.php'; require_once __DIR__ . '/src/learning-pathway-cards/index.php'; require_once __DIR__ . '/src/learning-pathway-header/index.php'; +require_once __DIR__ . '/src/lesson-course-info/index.php'; require_once __DIR__ . '/src/lesson-grid/index.php'; require_once __DIR__ . '/src/lesson-standalone/index.php'; require_once __DIR__ . '/src/search-results-context/index.php'; diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html index a78798aa2..58df16115 100644 --- a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html +++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html @@ -8,14 +8,16 @@ + + - +
- +
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html index 34f7f72d8..5d094e477 100644 --- a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html +++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html @@ -8,14 +8,16 @@ + + - +
- +
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card.html b/wp-content/themes/pub/wporg-learn-2024/parts/card.html index 140624e80..eb46f457b 100644 --- a/wp-content/themes/pub/wporg-learn-2024/parts/card.html +++ b/wp-content/themes/pub/wporg-learn-2024/parts/card.html @@ -8,9 +8,11 @@ + + - +
@@ -19,7 +21,7 @@ - +
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/block.json b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/block.json new file mode 100644 index 000000000..2ce5f7e98 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/block.json @@ -0,0 +1,31 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "wporg-learn/lesson-course-info", + "version": "0.1.0", + "title": "Lesson Course Info", + "category": "design", + "icon": "info-outline", + "description": "Displays information about the course a lesson belongs to.", + "textdomain": "wporg-learn", + "supports": { + "align": true, + "html": false, + "color": { + "text": true, + "background": true, + "link": true + }, + "spacing": { + "margin": true, + "padding": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + }, + "usesContext": [ "postId", "postType" ], + "editorScript": "file:./index.js", + "style": "file:./style-index.css" +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.js new file mode 100644 index 000000000..4d27653d6 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.js @@ -0,0 +1,19 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import Edit from '../shared/dynamic-edit'; +import metadata from './block.json'; +import './style.scss'; + +registerBlockType( metadata.name, { + /** + * @see ./edit.js + */ + edit: Edit, + save: () => null, +} ); diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.php b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.php new file mode 100644 index 000000000..f1d386995 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.php @@ -0,0 +1,71 @@ + __NAMESPACE__ . '\render', + ) + ); +} + +/** + * Render the block content. + * + * @param array $attributes Block attributes. + * @param string $content Block default content. + * @param WP_Block $block Block instance. + * + * @return string Returns the block markup. + */ +function render( $attributes, $content, $block ) { + if ( ! isset( $block->context['postId'] ) || ! isset( $block->context['postType'] ) || 'lesson' !== $block->context['postType'] ) { + return ''; + } + + $course_id = get_post_meta( $block->context['postId'], '_lesson_course', true ); + + if ( empty( $course_id ) ) { + return ''; + } + + $course_title = get_the_title( $course_id ); + $course_permalink = get_permalink( $course_id ); + + if ( empty( $course_title ) || ! $course_permalink ) { + return ''; + } + + $wrapper_attributes = get_block_wrapper_attributes(); + return sprintf( + '

%s

', + $wrapper_attributes, + wp_kses_post( + sprintf( + /* translators: 1: Course link, 2: Course title */ + __( 'Part of: %2$s', 'wporg-learn' ), + get_permalink( $course_id ), + get_the_title( $course_id ), + ) + ), + ); +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/style.scss new file mode 100644 index 000000000..4df15f4ee --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/style.scss @@ -0,0 +1,14 @@ +.wp-block-wporg-learn-lesson-course-info { + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + max-width: 100%; + + > a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss index 54a860240..7e4598690 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss @@ -78,6 +78,40 @@ .taxonomy-level { display: none; } + + .wp-block-wporg-learn-course-status { + display: inline-block; + padding: 4px var(--wp--preset--spacing--10); + border-radius: 2px; + text-decoration: none; + color: var(--wp--preset--color--charcoal-1); + background-color: var(--wp--preset--color--light-grey-2); + + &.is-completed { + background-color: var(--wp--preset--color--acid-green-3); + color: var(--wp--custom--color--green-70); + } + } + } + + .lesson { + .wp-block-post-terms a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + .wp-block-wporg-learn-learning-duration + .wp-block-post-terms { + margin-left: calc(var(--wp--style--block-gap) * -1); + + &::before { + content: "•"; + margin: 0 var(--wp--preset--spacing--10); + color: var(--wp--preset--color--charcoal-5); + } + } } .wp-block-post-title a { diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_tag.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_tag.scss deleted file mode 100644 index 4289c6464..000000000 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_tag.scss +++ /dev/null @@ -1,30 +0,0 @@ -%wporg-learn-tag { - display: inline-block; - padding: 4px var(--wp--preset--spacing--10); - border-radius: 2px; - text-decoration: none; - color: var(--wp--preset--color--charcoal-1); -} - -.wp-block-post-terms.is-style-tag a { - - @extend %wporg-learn-tag; - - background-color: var(--wp--preset--color--blueberry-4); - - &:hover { - text-decoration: underline; - } -} - -.wp-block-wporg-learn-course-status { - - @extend %wporg-learn-tag; - - background-color: var(--wp--preset--color--light-grey-2); - - &.is-completed { - background-color: var(--wp--preset--color--acid-green-3); - color: var(--wp--custom--color--green-70); - } -} 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 e812f873b..693ebcb0e 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 @@ -9,7 +9,6 @@ @import "sensei"; @import "sidebar"; @import "search"; -@import "tag"; @import "taxonomy"; @import "wp-components"; @import "wporg-meeting-calendar";