Skip to content

Commit

Permalink
Add course info block on lesson cards (#2847)
Browse files Browse the repository at this point in the history
* Add course info block on lesson cards

* Update lesson card experience level style

* Fix doc

* Use block gap var for level spacing to match row style
  • Loading branch information
adamwoodnz authored Aug 20, 2024
1 parent 3128a62 commit 8ebdeab
Show file tree
Hide file tree
Showing 11 changed files with 182 additions and 37 deletions.
1 change: 1 addition & 0 deletions wp-content/themes/pub/wporg-learn-2024/functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@

<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->

<!-- wp:wporg-learn/lesson-course-info {"style":{"typography":{"lineHeight":1.6},"spacing":{"margin":{"top":"6px"}}},"fontSize":"extra-small"} /-->

<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->

<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">

<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->

<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
<!-- wp:post-terms {"term":"level","separator":" ","fontSize":"extra-small"} /-->

</div>
<!-- /wp:group -->
Expand Down
6 changes: 4 additions & 2 deletions wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@

<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->

<!-- wp:wporg-learn/lesson-course-info {"style":{"typography":{"lineHeight":1.6},"spacing":{"margin":{"top":"6px"}}},"fontSize":"extra-small"} /-->

<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->

<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">

<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->

<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
<!-- wp:post-terms {"term":"level","separator":" ","fontSize":"extra-small"} /-->

</div>
<!-- /wp:group -->
Expand Down
6 changes: 4 additions & 2 deletions wp-content/themes/pub/wporg-learn-2024/parts/card.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@

<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->

<!-- wp:wporg-learn/lesson-course-info {"style":{"typography":{"lineHeight":1.6},"spacing":{"margin":{"top":"6px"}}},"fontSize":"extra-small"} /-->

<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->

<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">

<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
Expand All @@ -19,7 +21,7 @@

<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->

<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
<!-- wp:post-terms {"term":"level","separator":" ","fontSize":"extra-small"} /-->

</div>
<!-- /wp:group -->
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
}
Original file line number Diff line number Diff line change
@@ -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,
} );
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<?php
/**
* Block Name: Lesson Course Info
* Description: Displays information about the course a lesson belongs to.
*
* @package wporg
*/

namespace WordPressdotorg\Theme\Learn_2024\Lesson_Course_Info;

use Sensei_Utils;

add_action( 'init', __NAMESPACE__ . '\init' );

/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function init() {
register_block_type(
dirname( dirname( __DIR__ ) ) . '/build/lesson-course-info',
array(
'render_callback' => __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(
'<p %s>%s</p>',
$wrapper_attributes,
wp_kses_post(
sprintf(
/* translators: 1: Course link, 2: Course title */
__( 'Part of: <a href="%1$s">%2$s</a>', 'wporg-learn' ),
get_permalink( $course_id ),
get_the_title( $course_id ),
)
),
);
}
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
34 changes: 34 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
30 changes: 0 additions & 30 deletions wp-content/themes/pub/wporg-learn-2024/src/style/_tag.scss

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
@import "sensei";
@import "sidebar";
@import "search";
@import "tag";
@import "taxonomy";
@import "wp-components";
@import "wporg-meeting-calendar";
Expand Down

0 comments on commit 8ebdeab

Please sign in to comment.