Support » Plugin: CodeMirror Blocks » Block height

  • Resolved Webliberty

    (@webliberty)


    Please change the height of the block with the code, because with a small code fragment in the editor, the field looks empty and takes up free space, indentation is too large.

    .CodeMirror {
        font-family: monospace;
        height: 300px;
        color: #000;
        direction: ltr;
    }

    For example, you can set the minimum height or even remove this property from css for the class .CodeMirror

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Vicky Agravat

    (@vickyagravat)

    Hello @webliberty

    I have intentionally changed the height property to auto on original .CodeMirror class. Because, if some one want’s to display just one line of code.

    Here is Example:
    Theme Used: Twenty Nineteen

    Imagine if you want display just single line of code and that block is rendered with 300px height!!! how it looks?

    Now, back to your problem.
    I think, there are two possibility of extra height.
    1. it get height from your theme or other plugin css.
    2. or there are extra blank space in your code block.

    What you should do?
    ————————-
    1. Please try to check it with default WordPress themes?
    2. Please let me know when you add Code Block first time from Block Inserter what is initial height of block, without pasted any code?
    3. Or what is height after removing all the code from any Code Block.

    Webliberty

    (@webliberty)

    1. Theme: Twenty Fifteen
    2. Initial height of block, without pasted any code:

    3. The height is the same, does not change

    But I think I found the cause of the strange behavior of the block and it lies in the installed plugin Gutenberg https://ru.wordpress.org/plugins/gutenberg/ version 6.4.0. When you disable it, the field becomes normal, as in your screenshot.

    These styles with height 300px loaded for a block with active plugin Gutenberg from the file: wp-includes/js/codemirror/codemirror.min.css

    In console Google Chrome (Open the picture in a new tab to see it larger):

    Webliberty

    (@webliberty)

    In this case you probably need to change the styles of your wp-content/plugins/wp-codemirror-block/vendor/codemirror/lib/codemirror.css and add !important for height:

    .CodeMirror {
      /* Set height, width, borders, and global font properties here */
      font-family: monospace;
      height: auto!important;
      color: black;
      direction: ltr;
    }

    Then the height of the block will be normal even when the plugin Gutenberg is enabled.

    Plugin Author Vicky Agravat

    (@vickyagravat)

    Great work… @webliberty

    Now, i have understand the problem…

    If i set height property auto !important it will create problem in your other plugin….

    I will fix this issue in next plugin update.

    But, if you want to fixed it now, here is quick solution for you,…

    1. edit wp-content/plugins/wp-codemirror-block/assets/blocks/blocks.style.build.css
    for editor
    replace from line 3 to 6

    .CodeMirror {
      font-size: .8em;
      transition: inherit;
    }

    with

    .codeMirror-editor .CodeMirror {
      font-size: .8em;
      transition: inherit;
      height: auto;
    }

    it will give extra class check and get higher priority than other .CodeMirror class.
    also it will not apply outside of .codeMirror-editor so, it will not conflict with your other plugin…

    2. edit wp-content/plugins/wp-codemirror-block/assets/blocks/blocks.style.build.css
    for front-end
    replace from line 9 to 11

    .CodeMirror {
      transition: .3s all ease-in;
    }

    with

    .code-block .CodeMirror {
      transition: .3s all ease-in;
      height: auto;
    }

    Tell me if it worked fine!

    Thank you…

    Webliberty

    (@webliberty)

    Yes, it worked. Thanks!

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