Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-67364

TinyMCE editor font sizes are too small in Classic theme (and other child themes)

XMLWordPrintable

    • MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_37_STABLE, MOODLE_38_STABLE
    • MDL-67364-master
    • Hide

      Note: Requires access to add/modify code on your test site.

      Setup

      1. Log in as admin.
      2. Set TinyMCE as the main editor (this can be done from Site administration > Plugins > Text editors (move TinyMCE to the top of the list and ensure it's enabled).
      3. Set the theme to Boost.
      4. Clear site caches.
      5. Ensure there is a course created on the test site.

      Test 1 - Themes with no parent still work as expected

      1. Navigate to the course and select "Edit settings" in course administration.
      2. Scroll down to the description (Course summary).
      3. Expand the TinyMCE toolbar, then press the "<>" icon (Edit HTML source).
      4. Replace the contents of the editor with the following, then press "Update":

        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <p>Paragraph</p>
        

      5. CONFIRM all heading levels are easily readable, as per the screenshot:
      6. Press "Save and display", so the heading levels can be viewed again in later tests.

      Test 2 - Child themes can override editor scss

      1. Add the following to the bottom of <wwwroot>/theme/classic/config.php:

        $THEME->editor_scss = ['editor'];
        

      2. Copy the attached editor.scss file into the <wwwroot>/theme/classic/scss/ directory of your test site.
      3. Change the site's theme to Classic.
      4. Clear site caches.
      5. Return to the course's "Edit settings" page (or hard refresh if you still have it open).
      6. Scroll back down to the course summary.
      7. CONFIRM the headings appear in very small font (the last couple of heading levels will be unreadable).
      8. In preparation for the next test, remove the code added in step 1, and delete the editor.scss file you created.

      Test 3 - Child themes with no editor scss override use parent styles

      1. Undo the changes made in steps 1 and 2 of Test 2 above (ie remove the line from the config file, and delete the editor.scss file).
      2. Clear site caches (the theme should still be set to Classic).
      3. Return to the course's "Edit settings" page (or hard refresh if you still have it open).
      4. Scroll back down to the course summary.
      5. CONFIRM all heading levels are now the same as they were for Boost, as per the screenshot at the end of Test 1.

      Test 4 - Atto still displaying as expected

      1. Re-enable Atto editor.
      2. Set the theme to Boost.
      3. Clear site caches.
      4. Return to the course's "Edit settings" page (or hard refresh if you still have it open).
      5. CONFIRM the Course summary heading levels appear correct, and make a note of their appearance (eg take a screenshot).
      6. Change the theme back to Classic and refresh the page.
      7. CONFIRM the Course summary heading levels appear the same as those shown in Boost.
      Show
      Note: Requires access to add/modify code on your test site. Setup Log in as admin. Set TinyMCE as the main editor (this can be done from Site administration > Plugins > Text editors (move TinyMCE to the top of the list and ensure it's enabled). Set the theme to Boost . Clear site caches. Ensure there is a course created on the test site. Test 1 - Themes with no parent still work as expected Navigate to the course and select "Edit settings" in course administration. Scroll down to the description (Course summary). Expand the TinyMCE toolbar, then press the "<>" icon (Edit HTML source). Replace the contents of the editor with the following, then press "Update": <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <p>Paragraph</p> CONFIRM all heading levels are easily readable, as per the screenshot: Press "Save and display", so the heading levels can be viewed again in later tests. Test 2 - Child themes can override editor scss Add the following to the bottom of <wwwroot>/theme/classic/config.php : $THEME->editor_scss = ['editor']; Copy the attached editor.scss file into the <wwwroot>/theme/classic/scss/ directory of your test site. Change the site's theme to Classic . Clear site caches. Return to the course's "Edit settings" page (or hard refresh if you still have it open). Scroll back down to the course summary. CONFIRM the headings appear in very small font (the last couple of heading levels will be unreadable). In preparation for the next test, remove the code added in step 1, and delete the editor.scss file you created. Test 3 - Child themes with no editor scss override use parent styles Undo the changes made in steps 1 and 2 of Test 2 above (ie remove the line from the config file, and delete the editor.scss file). Clear site caches (the theme should still be set to Classic ). Return to the course's "Edit settings" page (or hard refresh if you still have it open). Scroll back down to the course summary. CONFIRM all heading levels are now the same as they were for Boost, as per the screenshot at the end of Test 1. Test 4 - Atto still displaying as expected Re-enable Atto editor. Set the theme to Boost. Clear site caches. Return to the course's "Edit settings" page (or hard refresh if you still have it open). CONFIRM the Course summary heading levels appear correct, and make a note of their appearance (eg take a screenshot). Change the theme back to Classic and refresh the page. CONFIRM the Course summary heading levels appear the same as those shown in Boost.
    • 0
    • International 3.9 - Sprint 5, International 3.9 - Sprint 6

      Currently, for child themes to have editor SCSS styles included (eg Boost includes Bootstrap), they must have them configured, and include their own SCSS file. The result is that themes such as Classic use TinyMCE's default fonts, which do not reflect what is displayed on the page once the input is saved, and in some cases are small enough to be difficult to read. This appears to be something I did not factor in as part of  MDL-62968.

      I think rather than requiring copy/pasting of content into every theme, child themes should only need to include editor SCSS if they wish to override the parent theme, otherwise they should default to the value being used by the parent (this should also stop this problem arising again, as it has in the past with clean/bootstrapbase MDL-39424 and Boost MDL-60588).

      Example (using TinyMCE's default in Classic):

        1. editor.scss
          0.3 kB
        2. MDL-67364.jpg
          MDL-67364.jpg
          30 kB
        3. MDL-67364 (2).jpg
          MDL-67364 (2).jpg
          46 kB
        4. MDL-67364-TinyMCE_headings_after.png
          MDL-67364-TinyMCE_headings_after.png
          22 kB
        5. MDL-67364-TinyMCE_headings_before.png
          MDL-67364-TinyMCE_headings_before.png
          10 kB

            michaelh Michael Hawkins
            michaelh Michael Hawkins
            Jun Pataleta Jun Pataleta
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            1 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 2 hours, 56 minutes
                1d 2h 56m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.