Some theme styles do not load when latest Gutenberg is activated

[Imran92]

The styles not getting applied in the notices and the question title are only examples. There can be similar issues with other block elements too. As it looks like the element styles are not being used. It can be only for sensei blocks, or a subset of sensei blocks, or all blocks.

Steps to Reproduce

1. Install and activate latest Course theme
2. Have latest Gutenberg installed and activated (Having Gutenberg deactivated will make the problem go away)
3. Create a course with a lesson with quiz
4. Take the quiz as a student
5. Check the notice on top, and also check the questions

What I Expected

All the theme styles to be applied and look like below

What Happened Instead

Some theme styles were missing

PHP / WordPress / Sensei LMS version

8.1, 6.3, 4.19

Browser / OS version

Latest chrome

Screenshot / Video

I did a little investigation and it looks like the styles inside the elements section inside blocks are not getting applied. The styles from the CSS property on top is getting applied as expected.

[donnapep]

@Imran92 Do you have a sense of the impact of this? From the screenshots above, the discrepancy looks minimal.

[Imran92]

@Imran92 Do you have a sense of the impact of this? From the screenshots above, the discrepancy looks minimal.

Hi @donnapep 👋

The screenshot only shows the differences wtih sensei-lms/course-theme-notices block and the sensei-lms/quiz-question blocks as example. But it also affects other blocks too. I've checked that this is happening for the core blocks too. We currently use "elements" property for styling other blocks too, including core/site-title, core/quote, core/pullquote, core/post-title etc, 16 blocks in total. So all of them are affected by missing styles.

As these are mostly styles related typography, border etc, it's not too breaking, but it's spread across whole site. For example, if you hover over the site title, you'll see an underline now, this doesn't look very good, same for the pagination block.

[renatho]

We currently use "elements" property for styling other blocks too, including core/site-title, core/quote, core/pullquote, core/post-title etc, 16 blocks in total. So all of them are affected by missing styles.

While testing it last week, I tested with the paragraph block, and I could see the elements working there. So if you could reproduce it in the other blocks too, I imagine it would be confirmed as a core issue. So maybe we should try to isolate the issue somehow, and open an issue on Gutenberg. 🤔 I'll also try to investigate it a little more to see if I can figure out something else.

[renatho]

I could isolate the issue and I opened an issue on Gutenberg repository: https://github.com/WordPress/gutenberg/issues/55895

I couldn't find the cause easily, so considering that it's just some styles, I'm leaving it to focus on other priorities. Feel free to disagree about priorities, so I could invest more time on it.