diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-contributor.svg b/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-contributor.svg new file mode 100644 index 000000000..19b99029d --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-contributor.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-designer.svg b/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-designer.svg new file mode 100644 index 000000000..5f9022564 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-designer.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-developer.svg b/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-developer.svg new file mode 100644 index 000000000..fba70a472 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-developer.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-user.svg b/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-user.svg new file mode 100644 index 000000000..5519df0d6 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/learning-pathway-user.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index fbdd4ce0c..26b5f7c8d 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/wp-content/themes/pub/wporg-learn-2024/functions.php @@ -2,6 +2,9 @@ namespace WordPressdotorg\Theme\Learn_2024; +// Block files +require_once __DIR__ . '/src/learning-pathway-cards/block.php'; + /** * Actions and filters. */ diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php index 32c9deec6..f987da868 100644 --- a/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php @@ -7,14 +7,10 @@ ?> - -
+ +

+ - -

- - - - -
- + +

+ diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-header.php b/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-header.php index 57009eef1..0a6aeb310 100644 --- a/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-header.php +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-header.php @@ -22,7 +22,7 @@
- +

@@ -30,11 +30,9 @@

- +
- - diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/learning-pathways-terms.php b/wp-content/themes/pub/wporg-learn-2024/patterns/learning-pathways-terms.php deleted file mode 100644 index 9d3367c2f..000000000 --- a/wp-content/themes/pub/wporg-learn-2024/patterns/learning-pathways-terms.php +++ /dev/null @@ -1,31 +0,0 @@ - 'learning-pathway', - 'hide_empty' => false, - ) -); - -if ( ! empty( $learning_pathways ) && ! is_wp_error( $learning_pathways ) ) { ?> - - + + +

+ + + +
+ + +
+
+ + +
+ diff --git a/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/block.json b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/block.json new file mode 100644 index 000000000..dec99ce59 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/block.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "wporg-learn/learning-pathway-cards", + "version": "0.1.0", + "title": "Learning Pathway Cards", + "category": "widgets", + "icon": "smiley", + "description": "Show a cards grid of non-empty Learning Pathway terms", + "usesContext": [], + "attributes": { + "isMini": { + "type": "boolean", + "default": false + } + }, + "supports": { + "html": false, + "spacing": { + "margin": [ + "top", + "bottom" + ] + } + }, + "textdomain": "wporg", + "editorScript": "file:./index.js", + "style": "file:./style-index.css" +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/block.php b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/block.php new file mode 100644 index 000000000..e2bacde15 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/block.php @@ -0,0 +1,191 @@ + __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 ) { + $learning_pathways = get_terms( + array( + 'taxonomy' => 'learning-pathway', + 'hide_empty' => true, + ) + ); + $is_mini = isset( $attributes['isMini'] ) && $attributes['isMini']; + + if ( empty( $learning_pathways ) || is_wp_error( $learning_pathways ) ) { + return __( 'No learning pathways found.', 'wporg-learn' ); + } + + $content = '
'; + + foreach ( $learning_pathways as $learning_pathway ) { + $content .= $is_mini ? render_mini_card( $learning_pathway ) : render_full_card( $learning_pathway ); + } + + $content .= '
'; + + $wrapper_attributes = get_block_wrapper_attributes(); + return sprintf( + '
%2$s
', + $wrapper_attributes, + do_blocks( $content ) + ); +} + +/** + * Render the full card for a learning pathway. + * + * @param object $learning_pathway The learning pathway object. + * @return string Returns the full card markup. + */ +function render_full_card( $learning_pathway ) { + $background_colors = array( + 'user' => '#f5fef8', + 'designer' => '#fef8f6', + 'developer' => '#fffff4', + 'contributor' => '#fDf5fe', + ); + $count = $learning_pathway->count; + + return sprintf( + ' +
+ + +
+ + +
+ + +

%2$s

+ + + +

%3$s

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

%7$s

+ + +
+ + +
+ + +
+ ', + esc_attr( $background_colors[ $learning_pathway->slug ] ), + esc_html( $learning_pathway->name ), + esc_html( $learning_pathway->description ), + esc_url( get_stylesheet_directory_uri() . '/assets/learning-pathway-' . $learning_pathway->slug . '.svg' ), + esc_html( $learning_pathway->term_id ), + esc_url( get_term_link( $learning_pathway ) ), + $count > 1 + ? sprintf( + /* translators: %s: Learning Pathway course count */ + __( 'See all %s courses', 'wporg-learn' ), + esc_html( $count ), + ) + : __( 'See course', 'wporg-learn' ), + ); +} + +/** + * Render the mini card for a learning pathway. + * + * @param object $learning_pathway The learning pathway object. + * @return string Returns the mini card markup. + */ +function render_mini_card( $learning_pathway ) { + return sprintf( + ' + + + +
+ + +
+ + +

%2$s

+ + + +

%3$s

+ + +
+ + + + + + +
+ + + + ', + esc_url( get_term_link( $learning_pathway ) ), + esc_html( $learning_pathway->name ), + esc_html( $learning_pathway->description ), + esc_url( get_stylesheet_directory_uri() . '/assets/learning-pathway-' . $learning_pathway->slug . '.svg' ), + ); +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/index.js b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/index.js new file mode 100644 index 000000000..26d63bc5a --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/index.js @@ -0,0 +1,18 @@ +/** + * 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, +} ); diff --git a/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/style.scss new file mode 100644 index 000000000..5b3799ef2 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/style.scss @@ -0,0 +1,42 @@ +.wp-block-wporg-learn-learning-pathway-cards { + .is-style-cards-grid { + row-gap: var(--wp--preset--spacing--40); + } + + .wporg-learn-learning-pathway-card-full { + .wporg-learn-learning-pathway-card-header { + min-height: 200px; + } + + .wporg-learn-learning-pathway-card-header-content { + + @media screen and (max-width: 768px) { + padding-left: var(--wp--preset--spacing--20) !important; + min-height: unset; + + .wp-block-heading { + font-size: var(--wp--preset--font-size--small) !important; + font-family: var(--wp--preset--font-family--inter) !important; + font-weight: 600 !important; + line-height: var(--wp--custom--body--small--typography--line-height) !important; + } + } + } + + .wp-block-query { + flex: 1; + display: flex; + flex-direction: column; + + .wp-block-group { + flex: 1; + } + } + + .course { + border-bottom: unset; + margin: unset; + padding: unset; + } + } +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/shared/dynamic-edit.js b/wp-content/themes/pub/wporg-learn-2024/src/shared/dynamic-edit.js new file mode 100644 index 000000000..62679697b --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/shared/dynamic-edit.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import ServerSideRender from '@wordpress/server-side-render'; + +export default function Edit( { name, attributes, context } ) { + const blockProps = useBlockProps(); + const { postId } = context; + return ( +
+ +
+ ); +} diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/front-page.html b/wp-content/themes/pub/wporg-learn-2024/templates/front-page.html index 6f329c522..8195b1cd9 100644 --- a/wp-content/themes/pub/wporg-learn-2024/templates/front-page.html +++ b/wp-content/themes/pub/wporg-learn-2024/templates/front-page.html @@ -8,6 +8,8 @@ + + diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/page-learning-pathways.html b/wp-content/themes/pub/wporg-learn-2024/templates/page-learning-pathways.html index b3e8dfcad..2f9711e81 100644 --- a/wp-content/themes/pub/wporg-learn-2024/templates/page-learning-pathways.html +++ b/wp-content/themes/pub/wporg-learn-2024/templates/page-learning-pathways.html @@ -6,9 +6,11 @@
- + + + - +
diff --git a/wp-content/themes/pub/wporg-learn-2024/theme.json b/wp-content/themes/pub/wporg-learn-2024/theme.json index 1ef4c473b..673d435e8 100644 --- a/wp-content/themes/pub/wporg-learn-2024/theme.json +++ b/wp-content/themes/pub/wporg-learn-2024/theme.json @@ -3,6 +3,9 @@ "version": 2, "settings": { "custom": { + "alignment": { + "aligned-max-width": "unset" + }, "color": { "border": "var(--wp--preset--color--light-grey-1)" }, @@ -92,7 +95,7 @@ } }, "layout": { - "contentSize": "960px" + "contentSize": "1160px" }, "typography": { "fontSizes": [