Design issues in Learning Mode with latest version of Gutenberg

[renatho]

Steps to Reproduce

1. Activate Twenty Twenty-Two theme (I didn't test with others).
2. Install Gutenberg plugin in the latest version.
3. Create a course with Learning Mode enabled, and some lessons.
4. Take the course as a student.

What I Expected

To see the correct design.

What Happened Instead

I see a different design (buttons misaligned, different colors, and underlines).

PHP / WordPress / Sensei LMS version

PHP 7.4 / WP 6.0 / Sensei LMS 4.5.2 / Gutenberg 13.7.2

Browser / OS version

Chrome

Screenshot / Video

Without Gutenberg plugin activated:

With Gutenberg plugin activated:

[alexsanford]

Confirming that I see the same issue. Only seems to happen for Twenty Twenty-Two for me. Also, there seem to be issues regardless of "Enable theme styles" setting is turned on, but the issues are a little different in that case.

EDIT - this also seems to happen with the Blockbase theme.

[alexsanford]

I noticed another issue that may be related: when I'm using Gutenberg and one of the aforementioned block themes, when I load a Course or Lesson in the block editor, I get an error:

[27-Jul-2022 18:29:47 UTC] PHP Warning:  in_array() expects parameter 2 to be array, null given in /Users/alex/code/automattic/plugins/sensei/includes/course-theme/class-sensei-course-theme-templates.php on line 197
[27-Jul-2022 18:29:47 UTC] PHP Stack trace:
[27-Jul-2022 18:29:47 UTC] PHP   1. {main}() /Users/alex/Local Sites/sensei-dev/app/public/wp-admin/post.php:0
[27-Jul-2022 18:29:47 UTC] PHP   2. require() /Users/alex/Local Sites/sensei-dev/app/public/wp-admin/post.php:187
[27-Jul-2022 18:29:47 UTC] PHP   3. WP_Theme->get_page_templates() /Users/alex/Local Sites/sensei-dev/app/public/wp-admin/edit-form-blocks.php:134
[27-Jul-2022 18:29:47 UTC] PHP   4. apply_filters() /Users/alex/Local Sites/sensei-dev/app/public/wp-includes/class-wp-theme.php:1320
[27-Jul-2022 18:29:47 UTC] PHP   5. WP_Hook->apply_filters() /Users/alex/Local Sites/sensei-dev/app/public/wp-includes/plugin.php:191
[27-Jul-2022 18:29:47 UTC] PHP   6. gutenberg_load_block_page_templates() /Users/alex/Local Sites/sensei-dev/app/public/wp-includes/class-wp-hook.php:307
[27-Jul-2022 18:29:47 UTC] PHP   7. gutenberg_get_block_templates() /Users/alex/Local Sites/sensei-dev/app/public/wp-content/plugins/gutenberg/lib/compat/wordpress-6.1/wp-theme-get-post-templates.php:30
[27-Jul-2022 18:29:47 UTC] PHP   8. apply_filters() /Users/alex/Local Sites/sensei-dev/app/public/wp-content/plugins/gutenberg/lib/compat/wordpress-6.1/block-template-utils.php:165
[27-Jul-2022 18:29:47 UTC] PHP   9. WP_Hook->apply_filters() /Users/alex/Local Sites/sensei-dev/app/public/wp-includes/plugin.php:191
[27-Jul-2022 18:29:47 UTC] PHP  10. Sensei_Course_Theme_Templates->add_course_theme_block_templates() /Users/alex/Local Sites/sensei-dev/app/public/wp-includes/class-wp-hook.php:307
[27-Jul-2022 18:29:47 UTC] PHP  11. array_filter() /Users/alex/code/automattic/plugins/sensei/includes/course-theme/class-sensei-course-theme-templates.php:198
[27-Jul-2022 18:29:47 UTC] PHP  12. Sensei_Course_Theme_Templates->{closure:/Users/alex/code/automattic/plugins/sensei/includes/course-theme/class-sensei-course-theme-templates.php:196-198}() /Users/alex/code/automattic/plugins/sensei/includes/course-theme/class-sensei-course-theme-templates.php:198
[27-Jul-2022 18:29:47 UTC] PHP  13. in_array() /Users/alex/code/automattic/plugins/sensei/includes/course-theme/class-sensei-course-theme-templates.php:197

This error does not occur when I switch to another theme (such as Storefront) or when I disable the Gutenberg plugin. I just updated to the latest version of the Gutenberg plugin and the error is still occurring.

[yscik]

Moving this to the backlog to check after finishing the template & css changes. I couldn't reproduce the issues with the current trunk, or feature/learning-mode branch, but they do contain some changes that might have already fixed this.

[renatho]

Hi there! I also can't see the critical issues anymore in trunk.

I just see some small alignment differences, but nothing that seems super critical.

In WP 6.0.1:

With Gutenberg 14.0.2 activated:

[onubrooks]

Can we close this @renatho ?

[renatho]

Hey @onubrooks! I didn't follow the Learning Mode project closely, but I think the design was changed and the pieces moved, right? So I think we can close this.