Support » Plugin: Gutenberg » Gutenberrg Editor – Drop Cap Size??

  • Resolved BarryB64

    (@barryb64)


    Yes, I finally heard the news. Gutenberg is coming my way. Like it, or not. So, I decided to jump in. It does seem okay and it will take some getting used to. However, I did run into a couple of problems, for me.

    First, I notice that I can add “Drop caps” for the initial letter in a paragraph. This is certainly a very nice idea; except for one thing. The letter is way too big for my taste. How do I change the size of the drop cap letter to something smaller? For instance, set the drop cap size to be 18 and normal text at 12.

    I tried to create a class called “has-drop-cap” and set the size to MEDIUM or 16. It didn’t seem to work. It’s only the first paragraph that will have this effect.

    Here is my second problem and it’s a deal breaker. If you visit my site at http://www.inspiration-point.org then you’ll discover that I use small images in my paragraph. I do this to draw attention or give an emphasis to what I’m saying in the text. I tried doing it with Gutenberg and I couldn’t figure out the “How”. Yes, I can set a text-align to “left’. Unfortunately, I could not do any typing except add “verrse”. Huh??

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi, same question: how to get smaller drop cap ?

    Thanks in advance.

    Need to add the following CSS to your theme’s (a child theme preferably) style.css:

    p.has-drop-cap:not(:focus):first-letter {
       float:left;
       font-size:4.0em;
       line-height:.68;
       font-weight:100;
       margin:.05em .1em 0 0;
       text-transform:uppercase;
       font-style:normal;
    }

    The default is font-size:8.4em; and I changed it to font-size:4.0em; which makes the capital letter take two lines in my case. This will change it on the front-end. The editor will still have a large letter. To make the change appear in the editor, need to add something similar to the following in the theme’s functions.php:

    
    /**
     * Enqueue block editor style
     */
    function mytheme_block_editor_styles() {
        wp_enqueue_style( 'mytheme-block-editor-styles', get_theme_file_uri( '/blocks.css' ), false, '1.0', 'all' );
    }
    
    add_action( 'enqueue_block_editor_assets', 'mytheme_block_editor_styles' );

    Then put the same CSS into a “blocks.css” file in your theme’s directory. You can use whatever filename of course. That should do it. I had to do a file search to find the class.. Firefox’s inspect element really wasn’t picking it up for some reason.

    Perfect!

    Many thanks Mark!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Gutenberrg Editor – Drop Cap Size??’ is closed to new replies.