Fix errors and warnings in the course/lesson/question editor

assets/admin/course-pre-publish-panel/course-pre-publish-panel.js

@@ -3,14 +3,18 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
-import { PluginPrePublishPanel } from '@wordpress/edit-post';
+import { PluginPrePublishPanel as DeprecatedPluginPrePublishPanel } from '@wordpress/edit-post';
+import { PluginPrePublishPanel as NewPluginPrePublishPanel } from '@wordpress/editor';
 import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import SenseiIcon from '../../icons/logo-tree.svg';
 
+const PluginPrePublishPanel =
+	NewPluginPrePublishPanel || DeprecatedPluginPrePublishPanel;
+
 /**
  * Course pre-publish panel.
  */

assets/admin/editor-wizard/patterns-list.js

@@ -137,7 +137,9 @@ const PatternsList = ( { onChoose } ) => {
 						>
 							<div className="sensei-patterns-list__item-preview">
 								<BlockPreview
-									__experimentalPadding={ 30 }
+									additionalStyles={ [
+										{ css: 'body { padding: 30px; }' },
+									] }
 									blocks={ blocks
 										.filter( withoutLessonActions )
 										.map( withBlockExample ) }

assets/admin/tour/course-tour/steps.js

@@ -48,7 +48,7 @@ function focusOnCourseOutlineBlock() {
 	if ( ! courseOutlineBlock ) {
 		return;
 	}
-	dispatch( editorStore ).selectBlock( courseOutlineBlock.clientId );
+	dispatch( blockEditorStore ).selectBlock( courseOutlineBlock.clientId );
 }
 
 async function ensureLessonBlocksIsInEditor() {

assets/admin/tour/data/store.js

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { createReduxStore, register } from '@wordpress/data';
-/**
- * Internal dependencies
- */
-import { createReducerFromActionMap } from '../../../shared/data/store-helpers';
 import { controls } from '@wordpress/data-controls';
 import apiFetch from '@wordpress/api-fetch';
 
-export const SENSEI_TOUR_STORE = 'sensei/tour';
+/**
+ * Internal dependencies
+ */
+import {
+	createReducerFromActionMap,
+	createStore,
+} from '../../../shared/data/store-helpers';
 
 export const DEFAULT_STATE = {
 	showTour: true,
@@ -80,11 +81,9 @@ export const reducers = {
 	DEFAULT: ( action, state ) => state,
 };
 
-export const store = createReduxStore( SENSEI_TOUR_STORE, {
+export const SENSEI_TOUR_STORE = createStore( 'sensei/tour', {
 	reducer: createReducerFromActionMap( reducers, DEFAULT_STATE ),
 	actions,
 	selectors,
 	controls,
 } );
-
-register( store );

assets/admin/tour/lesson-tour/steps.js

@@ -8,7 +8,6 @@ import { ExternalLink } from '@wordpress/components';
 import { select, dispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editPostStore } from '@wordpress/edit-post';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -59,23 +58,23 @@ export const focusOnQuizBlock = () => {
 	if ( ! quizBlock ) {
 		return;
 	}
-	dispatch( editorStore ).selectBlock( quizBlock.clientId );
+	dispatch( blockEditorStore ).selectBlock( quizBlock.clientId );
 };
 
 export const focusOnQuestionBlock = () => {
 	const questionBlock = getFirstQuestionBlock();
 	if ( ! questionBlock ) {
 		return;
 	}
-	dispatch( editorStore ).selectBlock( questionBlock.clientId );
+	dispatch( blockEditorStore ).selectBlock( questionBlock.clientId );
 };
 
 export const focusOnBooleanQuestionBlock = () => {
 	const questionBlock = getFirstBooleanQuestionBlock();
 	if ( ! questionBlock ) {
 		return;
 	}
-	dispatch( editorStore ).selectBlock( questionBlock.clientId );
+	dispatch( blockEditorStore ).selectBlock( questionBlock.clientId );
 };
 
 export const ensureBooleanQuestionIsInEditor = () => {

assets/blocks/course-actions-block/course-status-toolbar.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -41,14 +41,14 @@ const CourseStatusToolbar = ( {
 		: setCourseStatus;
 
 	return (
-		<Toolbar>
+		<ToolbarGroup>
 			<ToolbarDropdown
 				options={ CourseStatusOptions }
 				optionsLabel="Course Status"
 				value={ courseStatusValue }
 				onChange={ setCourseStatusCallback }
 			/>
-		</Toolbar>
+		</ToolbarGroup>
 	);
 };
 

assets/blocks/course-outline/lesson-block/lesson-edit-toolbar.js

@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Toolbar, ToolbarItem } from '@wordpress/components';
+import {
+	Button,
+	Spinner,
+	ToolbarGroup,
+	ToolbarItem,
+} from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editPostStore } from '@wordpress/edit-post';
 import { store as editorStore } from '@wordpress/editor';
@@ -19,14 +25,19 @@ const getLessonURL = ( lessonId ) => `post.php?post=${ lessonId }&action=edit`;
  *
  * @param {Object} props          Component props.
  * @param {number} props.lessonId The lesson ID.
+ * @param {Object} forwardedRef   The forwarded ref.
  */
-export const EditLessonLink = ( { lessonId } ) => (
-	<a
-		href={ getLessonURL( lessonId ) }
-		className="wp-block-sensei-lms-course-outline-lesson__edit"
-	>
-		{ __( 'Edit lesson', 'sensei-lms' ) }
-	</a>
+export const EditLessonLink = forwardRef(
+	( { lessonId, ...props }, forwardedRef ) => (
+		<a
+			ref={ forwardedRef }
+			href={ getLessonURL( lessonId ) }
+			className="wp-block-sensei-lms-course-outline-lesson__edit"
+			{ ...props }
+		>
+			{ __( 'Edit lesson', 'sensei-lms' ) }
+		</a>
+	)
 );
 
 /**
@@ -70,12 +81,18 @@ const LessonEditToolbar = ( { lessonId, lessonTitle } ) => {
 
 	let toolbarItem = savePostLink;
 	if ( lessonId ) {
-		toolbarItem = <EditLessonLink lessonId={ lessonId } />;
+		toolbarItem = (
+			<ToolbarItem as={ EditLessonLink } lessonId={ lessonId } />
+		);
 	} else if ( isSavingPost || isSavingStructure || isSavingMetaBoxes ) {
 		toolbarItem = savingPostIndicator;
 	}
 
-	return <Toolbar className="components-button">{ toolbarItem }</Toolbar>;
+	return (
+		<ToolbarGroup className="components-button">
+			{ toolbarItem }
+		</ToolbarGroup>
+	);
 };
 
 export default LessonEditToolbar;

assets/blocks/course-outline/lesson-block/lesson-settings.js

@@ -51,6 +51,7 @@ const LessonSettings = ( {
 				) }
 				<PanelBody title={ __( 'Typography', 'sensei-lms' ) }>
 					<FontSizePicker
+						__nextHasNoMarginBottom // Can be removed when we support WP 6.5+
 						fontSizes={ fontSizes }
 						value={ fontSize }
 						onChange={ ( value ) => {

assets/blocks/course-outline/status-preview/status-store.js

@@ -1,14 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { select as selectData, registerStore } from '@wordpress/data';
+import { select as selectData } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { Status } from './index';
 import { select, controls } from '@wordpress/data-controls';
-import { createReducerFromActionMap } from '../../../shared/data/store-helpers';
+import {
+	createStore,
+	createReducerFromActionMap,
+} from '../../../shared/data/store-helpers';
 
 const DEFAULT_STATE = {
 	completedLessons: [],
@@ -311,9 +314,7 @@ const reducers = {
 	DEFAULT: ( action, state ) => state,
 };
 
-export const COURSE_STATUS_STORE = 'sensei/course-status';
-
-registerStore( COURSE_STATUS_STORE, {
+export const COURSE_STATUS_STORE = createStore( 'sensei/course-status', {
 	reducer: createReducerFromActionMap( reducers, DEFAULT_STATE ),
 	actions,
 	selectors,

assets/blocks/course-progress-block/block.json

@@ -1,4 +1,5 @@
 {
+  "apiVersion": 2,
   "name": "sensei-lms/course-progress",
   "title": "Course Progress",
   "description": "Display the user's progress in the course. This block is only displayed if the user is enrolled.",

assets/blocks/editor-components/toolbar-dropdown/index.js

@@ -7,11 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	Button,
-	Dropdown,
 	MenuGroup,
 	MenuItem,
-	NavigableMenu,
+	ToolbarDropdownMenu,
 } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 
@@ -48,10 +46,10 @@ const ToolbarDropdown = ( {
 	const selectedOption = options.find( ( option ) => value === option.value );
 
 	return (
-		<Dropdown
+		<ToolbarDropdownMenu
 			className="sensei-toolbar-dropdown"
 			popoverProps={ {
-				isAlternate: true,
+				variant: 'toolbar',
 				position: 'bottom right left',
 				focusOnMount: true,
 				...popoverProps,
@@ -60,52 +58,45 @@ const ToolbarDropdown = ( {
 					'sensei-toolbar-dropdown__popover'
 				),
 			} }
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Button
-					onClick={ onToggle }
-					icon={ icon }
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					{ ...toggleProps }
-					children={
-						toggleProps?.children
-							? toggleProps.children( selectedOption )
-							: selectedOption?.label
-					}
-				/>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<NavigableMenu role="menu" stopNavigationEvents>
-					<MenuGroup label={ optionsLabel }>
-						{ options.map( ( option ) => {
-							const isSelected =
-								option.value === selectedOption?.value;
-							const menuItemProps = getMenuItemProps?.( option );
-							return (
-								<MenuItem
-									key={ option.value }
-									role="menuitemradio"
-									isSelected={ isSelected }
-									icon={ isSelected ? check : null }
-									className={ classnames(
-										'sensei-toolbar-dropdown__option',
-										{ 'is-selected': isSelected },
-										menuItemProps?.className
-									) }
-									onClick={ () => {
-										onChange( option.value );
-										onClose();
-									} }
-									children={ option.label }
-									{ ...menuItemProps }
-								/>
-							);
-						} ) }
-					</MenuGroup>
-				</NavigableMenu>
-			) }
+			label={ optionsLabel }
+			icon={ icon ?? null }
+			text={
+				toggleProps?.children
+					? toggleProps.children( selectedOption )
+					: selectedOption?.label
+			}
 			{ ...props }
-		/>
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup label={ optionsLabel }>
+					{ options.map( ( option ) => {
+						const isSelected =
+							option.value === selectedOption?.value;
+						const menuItemProps = getMenuItemProps?.( option );
+
+						return (
+							<MenuItem
+								key={ option.value }
+								role="menuitemradio"
+								isSelected={ isSelected }
+								icon={ isSelected ? check : null }
+								className={ classnames(
+									'sensei-toolbar-dropdown__option',
+									{ 'is-selected': isSelected },
+									menuItemProps?.className
+								) }
+								onClick={ () => {
+									onChange( option.value );
+									onClose();
+								} }
+								children={ option.label }
+								{ ...menuItemProps }
+							/>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+		</ToolbarDropdownMenu>
 	);
 };
 

assets/blocks/featured-video/block.json

@@ -2,10 +2,10 @@
 	"name": "sensei-lms/featured-video",
 	"title": "Featured Video",
 	"description": "Add a featured video to your lesson to highlight the video and make use of our video templates.",
-    "icon": "format-video",
+	"icon": "format-video",
 	"category": "sensei-lms",
 	"textdomain": "sensei-lms",
 	"supports": {
-        "multiple": false
+		"multiple": false
 	}
 }