Title: Block height Last modified: August 28, 2019 --- # Block height * Resolved [Webliberty](https://wordpress.org/support/users/webliberty/) * (@webliberty) * [6 years, 9 months ago](https://wordpress.org/support/topic/block-height/) * 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; } ``` * ![](https://i0.wp.com/i.imgur.com/bAMEAIQ.png?ssl=1) * 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](https://wordpress.org/support/users/vickyagravat/) * (@vickyagravat) * [6 years, 9 months ago](https://wordpress.org/support/topic/block-height/#post-11877945) * Hello [@webliberty](https://wordpress.org/support/users/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 [](https://i0.wp.com/i.imgur.com/eZZVjN5.png?ssl=1) * 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. - This reply was modified 6 years, 9 months ago by [Vicky Agravat](https://wordpress.org/support/users/vickyagravat/). - This reply was modified 6 years, 9 months ago by [James Huff](https://wordpress.org/support/users/macmanx/). * Thread Starter [Webliberty](https://wordpress.org/support/users/webliberty/) * (@webliberty) * [6 years, 9 months ago](https://wordpress.org/support/topic/block-height/#post-11878298) * 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/](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): * Thread Starter [Webliberty](https://wordpress.org/support/users/webliberty/) * (@webliberty) * [6 years, 9 months ago](https://wordpress.org/support/topic/block-height/#post-11878351) * 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](https://wordpress.org/support/users/vickyagravat/) * (@vickyagravat) * [6 years, 9 months ago](https://wordpress.org/support/topic/block-height/#post-11878596) * Great work… [@webliberty](https://wordpress.org/support/users/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… * Thread Starter [Webliberty](https://wordpress.org/support/users/webliberty/) * (@webliberty) * [6 years, 9 months ago](https://wordpress.org/support/topic/block-height/#post-11878654) * Yes, it worked. Thanks! Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Block height’ is closed to new replies. * ![](https://ps.w.org/wp-codemirror-block/assets/icon-256x256.png?rev=2001365) * [CodeMirror Blocks](https://wordpress.org/plugins/wp-codemirror-block/) * [Frequently Asked Questions](https://wordpress.org/plugins/wp-codemirror-block/#faq) * [Support Threads](https://wordpress.org/support/plugin/wp-codemirror-block/) * [Active Topics](https://wordpress.org/support/plugin/wp-codemirror-block/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wp-codemirror-block/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/) * 5 replies * 2 participants * Last reply from: [Webliberty](https://wordpress.org/support/users/webliberty/) * Last activity: [6 years, 9 months ago](https://wordpress.org/support/topic/block-height/#post-11878654) * Status: resolved