diff --git a/wp-content/plugins/wporg-learn/inc/post-meta.php b/wp-content/plugins/wporg-learn/inc/post-meta.php index 2421c75a0..74e22c44d 100644 --- a/wp-content/plugins/wporg-learn/inc/post-meta.php +++ b/wp-content/plugins/wporg-learn/inc/post-meta.php @@ -27,11 +27,32 @@ * Register all post meta keys. */ function register() { + register_lesson_meta(); register_lesson_plan_meta(); register_workshop_meta(); register_misc_meta(); } +/** + * Register post meta keys for lessons. + */ +function register_lesson_meta() { + register_post_meta( + 'lesson', + '_lesson_featured', + array( + 'description' => __( 'Whether the lesson is featured.', 'wporg-learn' ), + 'type' => 'string', + 'single' => true, + 'sanitize_callback' => 'sanitize_text_field', + 'show_in_rest' => true, + 'auth_callback' => function( $allowed, $meta_key, $post_id ) { + return current_user_can( 'edit_post', $post_id ); + }, + ), + ); +} + /** * Register post meta keys for lesson plans. */ @@ -613,6 +634,7 @@ function render_locales_list() { function enqueue_editor_assets() { enqueue_expiration_date_assets(); enqueue_language_meta_assets(); + enqueue_lesson_featured_meta_assets(); enqueue_duration_meta_assets(); } @@ -669,6 +691,31 @@ function enqueue_language_meta_assets() { } } +/** + * Enqueue scripts for the featured lesson meta block. + */ +function enqueue_lesson_featured_meta_assets() { + global $typenow; + + if ( 'lesson' === $typenow ) { + $script_asset_path = get_build_path() . 'lesson-featured-meta.asset.php'; + if ( ! file_exists( $script_asset_path ) ) { + wp_die( 'You need to run `yarn start` or `yarn build` to build the required assets.' ); + } + + $script_asset = require( $script_asset_path ); + wp_enqueue_script( + 'wporg-learn-lesson-featured-meta', + get_build_url() . 'lesson-featured-meta.js', + $script_asset['dependencies'], + $script_asset['version'], + true + ); + + wp_set_script_translations( 'wporg-learn-lesson-featured-meta', 'wporg-learn' ); + } +} + /** * Enqueue scripts for the duration meta block. */ diff --git a/wp-content/plugins/wporg-learn/js/lesson-featured-meta/index.js b/wp-content/plugins/wporg-learn/js/lesson-featured-meta/index.js new file mode 100644 index 000000000..d0c178140 --- /dev/null +++ b/wp-content/plugins/wporg-learn/js/lesson-featured-meta/index.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { CheckboxControl, PanelRow } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { PluginDocumentSettingPanel } from '@wordpress/edit-post'; +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { registerPlugin } from '@wordpress/plugins'; + +const FEATURED = 'featured'; + +const LessonFeaturedMeta = () => { + const postMetaData = useSelect( ( select ) => select( 'core/editor' ).getEditedPostAttribute( 'meta' ) || {} ); + const { editPost } = useDispatch( 'core/editor' ); + const [ lessonFeatured, setLessonFeatured ] = useState( postMetaData?._lesson_featured === FEATURED ); + + return ( + + + { + setLessonFeatured( newLessonFeatured ); + + editPost( { + meta: { + ...postMetaData, + _lesson_featured: newLessonFeatured ? FEATURED : '', + }, + } ); + } } + /> + + + ); +}; + +registerPlugin( 'wporg-learn-lesson-featured-meta', { + render: LessonFeaturedMeta, +} ); diff --git a/wp-content/plugins/wporg-learn/webpack.config.js b/wp-content/plugins/wporg-learn/webpack.config.js index 6d91ef951..9ad6c0fe1 100644 --- a/wp-content/plugins/wporg-learn/webpack.config.js +++ b/wp-content/plugins/wporg-learn/webpack.config.js @@ -9,6 +9,7 @@ config.entry = { 'duration-meta': './js/duration-meta/index.js', 'expiration-date': './js/expiration-date/index.js', 'lesson-count': './js/lesson-count/src/index.js', + 'lesson-featured-meta': './js/lesson-featured-meta/index.js', 'workshop-application-form': './js/workshop-application-form/src/index.js', 'workshop-details': './js/workshop-details/src/index.js', event: './js/event.js', diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index a538def26..1d025bd7e 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/wp-content/themes/pub/wporg-learn-2024/functions.php @@ -8,6 +8,7 @@ require_once __DIR__ . '/src/course-grid/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-grid/index.php'; require_once __DIR__ . '/src/search-results-context/index.php'; require_once __DIR__ . '/src/upcoming-online-workshops/index.php'; require_once __DIR__ . '/src/sensei-meta-list/index.php'; 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 aa691ba33..d39facfd2 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 @@ -56,7 +56,7 @@ -

+

@@ -73,13 +73,13 @@ - -
- + +
+ - + diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/block.json b/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/block.json new file mode 100644 index 000000000..727567a63 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/block.json @@ -0,0 +1,7 @@ +{ + "name": "wporg-learn/lesson-grid", + "title": "Learn Lesson Grid", + "description": "A query loop block variation which displays a cards grid of lessons, filterable by the 'featured' lesson post meta.", + "textdomain": "wporg-learn", + "editorScript": "file:./index.js" +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/index.js new file mode 100644 index 000000000..8aa385feb --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/index.js @@ -0,0 +1,86 @@ +import { registerBlockVariation } from '@wordpress/blocks'; +import { addFilter } from '@wordpress/hooks'; +import { InspectorControls } from '@wordpress/block-editor'; +import { CheckboxControl, PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +const VARIATION_NAME = 'wporg-learn/lesson-grid'; + +registerBlockVariation( 'core/query', { + name: VARIATION_NAME, + title: __( 'Learn Lesson Grid', 'wporg-learn' ), + icon: { + src: ( + + + + ), + }, + description: __( 'Displays a cards grid of lessons.', 'wporg-learn' ), + attributes: { + className: 'wporg-learn-lesson-grid wporg-learn-card-grid', + namespace: VARIATION_NAME, + query: { + perPage: 6, + postType: 'lesson', + lessonFeatured: false, + }, + align: 'wide', + }, + isActive: ( { namespace, query } ) => namespace === VARIATION_NAME && query.postType === 'lesson', + innerBlocks: [ + [ + 'core/post-template', + { + style: { spacing: { blockGap: 'var:preset|spacing|50' } }, + layout: { type: 'grid', columnCount: null, minimumColumnWidth: '330px' }, + }, + [ [ 'core/template-part', { slug: 'card-lesson', className: 'has-display-contents' }, [] ] ], + ], + [ 'core/query-no-results' ], + ], +} ); + +const isLessonGridVariation = ( { attributes: { namespace } } ) => namespace && namespace === VARIATION_NAME; + +const LessonGridControls = ( { + props: { + attributes: { query }, + setAttributes, + }, +} ) => ( + + { + setAttributes( { + query: { + ...query, + lessonFeatured: checked, + }, + } ); + } } + /> + +); + +export const withLessonGridControls = ( BlockEdit ) => ( props ) => { + return isLessonGridVariation( props ) ? ( + <> + + + + + + ) : ( + + ); +}; + +addFilter( 'editor.BlockEdit', 'core/query', withLessonGridControls ); diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/index.php b/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/index.php new file mode 100644 index 000000000..0aa27d03d --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-grid/index.php @@ -0,0 +1,85 @@ +get_param( 'lessonFeatured' ); + + if ( 'true' === $lesson_featured ) { + $args['meta_query'][] = array( + 'key' => '_lesson_featured', + 'value' => 'featured', + 'compare' => '=', + ); + } + + return $args; +}