Home Forums Free Themes Signify Dark Block Editor: Some blocks are showing black text fields with black text

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #147354
    metallion
    Participant

    Hi. I’m experiencing some issue in the visual editor with blocks with text fields showing black background and text entered is black. I can see the text only when highlighted, as per below screenshot

    https://imgur.com/a/jmEtlVY

    This issue applies to blocks like shortcode, HTML and youtube, where there is a text field involved. How do I change the background color of the text field or the text color? Right now I’m unable to view my typing in real time making it hard for me to do any editing.

    #147381
    metallion
    Participant

    Update: I managed to get the background to white by digging around the source using Chrome Inspect element on the text field, so it sort of works for now as I can at least see what I have typed. However, editing on a full white block on a predominantly black website isn’t really aesthetically pleasing to my eye, so I’m trying to make it a black text field with white text, but I’m unable to find where I should change the font colors as it is inherited. Trying to find out where the font color is inherited from returns me the below

    <website url>/wp-admin/load-styles.php?c=0&dir=ltr&load%5Bchunk_0%5D=dashicons,admin-bar,buttons,media-views,editor-buttons,wp-components,wp-block-editor,wp-nux,wp-editor,wp-block-library,wp-block-&load%5Bchunk_1%5D=library-theme,wp-edit-blocks,wp-edit-post,wp-format-library,wp-block-directory,common,forms,admin-menu,dashboard,list-tables,edi&load%5Bchunk_2%5D=t,revisions,media,themes,about,nav-menus,wp-pointer,widgets,site-icon,l10n,wp-auth-check,wp-color-picker&ver=5.5.3

    Can anyone link me to which file I should edit in order to change the font color? My issue now is specifically the text color for when the block is unselected, as I appear to be able to change the color for the text for when the block is selected in editor-styles.css

    #147423
    Psink
    Keymaster

    Hello Metallio

    Sorry for keeping you waiting.

    Here is the solution, In order to change the css of block editor you need to code css in the child-editor-blocks.css

    Here is the few code – add this code at the end

    
    .editor-styles-wrapper.edit-post-visual-editor {
    	background-color: #000;
    	color: #999999;
    }
    .editor-styles-wrapper, .editor-styles-wrapper input, .editor-styles-wrapper select, .editor-styles-wrapper textarea, .editor-styles-wrapper input[type="date"], .editor-styles-wrapper input[type="time"], .editor-styles-wrapper input[type="datetime-local"], .editor-styles-wrapper input[type="week"], .editor-styles-wrapper input[type="month"], .editor-styles-wrapper input[type="text"], .editor-styles-wrapper input[type="email"], .editor-styles-wrapper input[type="url"], .editor-styles-wrapper input[type="password"], .editor-styles-wrapper input[type="search"], .editor-styles-wrapper input[type="tel"], .editor-styles-wrapper input[type="number"], .editor-styles-wrapper .editor-styles-wrapper .mce-content-body a:not(.more-link):not(.button):not(button):hover, .editor-styles-wrapper .editor-styles-wrapper .mce-content-body a:not(.more-link):not(.button):not(button):focus, .editor-styles-wrapper .editor-styles-wrapper .mce-content-body a:not(.more-link):not(.button):not(button):hover, .editor-styles-wrapper .editor-styles-wrapper .mce-content-body a:not(.more-link):not(.button):not(button):focus, .editor-styles-wrapper a:not(.more-link):not(.button):not(button):hover, .editor-styles-wrapper a:not(.more-link):not(.button):not(button):focus, .editor-styles-wrapper textarea, .editor-styles-wrapper .wp-playlist-light .wp-playlist {
        color: #fbf4f4 !important;
    }
    
    .editor-styles-wrapper textarea.editor-post-title__input, .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 {
        color: #000 !important;
    }
    

    If you don’t where the child-editor-blocks.css file is then follow the screen record
    https://www.awesomescreenshot.com/video/3222469?key=5c071d6abc940f7cf9ddcf102de3d41f

    Have a great day

    Regards,
    psink

    #147444
    metallion
    Participant

    Hi. Thanks for the reply. I have tried your code in child-editor-blocks.css and it does not work. I did manage to change the text field background color by adding the following code into child-editor-styles.css

    
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="week"],
    input[type="month"],
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    textarea,
    body .wp-playlist {
    	background-color: #000;
    }
    

    However as I mentioned above I wish to have a black background with white text, but I am not able to change the color of the text in the field as it is inherited. Inspecting the element gave me the information in below screenshot
    https://imgur.com/a/quIakVf
    Is it possible to remove the inheritance and change the color of the text in the field?

    #147481
    Psink
    Keymaster

    can you please share a screenshot of the entire browser. It quite defaults to find the actual issue only with the inspector screenshot

    if color for text is not working you can use important
    as

    color: #000 !important;

    Regards,
    psink

    #147497
    metallion
    Participant

    Hi. I have managed to change the text color in html block, but shortcode block text color is still inherited

    Please refer to below screenshot.

    https://imgur.com/a/uKOJZ4O

    Left window: Current child-editor-styles.css file. Last 2 lines of code was added by me. I managed to change the html block text color to white with below code

    .wp-block-html .block-editor-plain-text {
        color: #fff !important;
    }

    Middle window: current editor with inspect element on the shortcode field

    Right window: editor with inspect element on the shortcode field, but I manually changed the color of the field to #fff inside inspect element.

    As you can see, I can change the text color if I change the CSS of below element inside inspect element

    .block-editor .block-editor-plain-text {
        color: #fff;
    }

    But if I put the same CSS inside child-editor-styles.css, the text color is still inherited, even if I use important. Please advise

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