Changing the text size in the Guttenberg editor only (not for the article)

  • I have gone through some searches, but it seems the topic gets blended in with how to edit the text font in an article.

    I want to increase the size in the editor only, without doing a “CTRL+”. I am only looking to enlarge the paragraph text size but NOT affect the article.

    I have looked through the ellipses, and I do not see any way to increase font size.

    How would that be accomplished?

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    I recommend a custom editor style. This is normally implemented by themes so editor appearance matches front end appearance. But there’s no reason your editor style couldn’t have a larger font than front end. Just be aware the text layout will vary due to different sizes. It normally varies anyway since front end screen sizes often do not match editor area size.

    Thread Starter Jeffrey Powers

    (@animalien)

    I’ll check that out. TY

    To change the text size in the Gutenberg editor (WordPress block editor), you can use custom CSS. Here’s how you can do it:

    1. **Access the WordPress Customizer:**
    – Log in to your WordPress admin dashboard.
    – Go to “Appearance” and then click on “Customize.”

    2. **Open Additional CSS Section:**
    – In the Customizer, look for the “Additional CSS” option. Click on it to open the CSS editor.

    3. **Add Custom CSS:**
    – In the CSS editor, you can add custom CSS code to modify the text size in the Gutenberg editor. Here’s an example of CSS code to change the text size:
    `css
    /* Change text size in Gutenberg editor */
    .editor-block-list__block p {
    font-size: 18px; /* Adjust the font size as needed */
    }
    `

    4. **Preview and Publish:**
    – After adding the custom CSS, you can preview the changes in the Gutenberg editor by clicking the “Publish” button. Once you’re satisfied with the changes, click “Publish” to make them live on your website.

    This CSS code targets paragraph blocks (`

    .editor-block-list__block p) within the Gutenberg editor and sets the font size to 18 pixels. You can adjust thefont-size` value to your desired size. Additionally, you can target other elements within the editor by inspecting them using your browser’s developer tools and applying custom CSS accordingly.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.