Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • metallion

    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.

    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


    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

    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
    Is it possible to remove the inheritance and change the color of the text in the field?


    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

Viewing 3 posts - 1 through 3 (of 3 total)