- This topic has 13 replies, 3 voices, and was last updated 3 years, 1 month ago by John.
-
AuthorPosts
-
February 11, 2021 at 7:16 am #1654571John
Good Day,
I have just converted to GeneratePress Pro (loving it).
My old theme had some CSS styling to do things like styling a paragraph as a tip with a different colour background selectable from the classic editor. All this did was add a div around stuff with the class tip. Thing is I have a thousand posts like this: https://www.morganscloud.com/2021/01/10/companionway-washboard-hacks-and-getting-out-there/
As you can see, I have the front end all sorted, by simply adding the required CSS to my generate press child them style.css file, all good.
But the issue is I can’t see the styling when editing in the block editor and I add tip to the Additional CSS class(es) field in a text block (works fine on front end) which is making me nuts since I have to keep previewing.
So I want to style the back end block editor to match the front end.
I added this (found in another thread here) to my child theme functions file:
add_action( 'after_setup_theme', 'generate_child_setup' ); function generate_child_setup() { add_editor_style( 'editor-style.css' ); }
And then I added a css file named editor-style.css to my child them root directory.
To test I just added this CSS to the file:
@charset "UTF-8"; /* CSS Document */ .block-editor { background-color: #784546; } body { background-color: #784546; } body { background: #D54548 }
I think any of the above should turn the background pink. All do not work. I have a feeling I’m doing something deeply stupid, but just can’t see it. If I can just get the editor-style.css file to start affecting the back end, I feel like I would be on my way, so any help would be much appreciated.
Thanks
JohnFebruary 11, 2021 at 10:20 am #1654839LeoStaffCustomer SupportHi John,
If you are using the block editor, have you considered using GenerateBlocks?
The headline block makes things like these super easy to replicate without writing your own CSS:
https://docs.generateblocks.com/article/headline-overview/It will work in live preview as well 🙂
February 11, 2021 at 11:19 am #1654904JohnHi Leo,
Yes, definitely plan to get generate blocks pro so I can get rid of Thrive Architect which I used to build our landing page: https://www.morganscloud.com
That said, since I have over 1000 legacy posts to maintain I would still like to figure how to make the back end look like the front with those legacy divs. See this the blue box on this post: https://www.morganscloud.com/2021/01/10/companionway-washboard-hacks-and-getting-out-there/
Point being I don’t think cracking this will be hard once I have figured how to get the back end style sheet in the child theme working.
Thanks
JohnFebruary 11, 2021 at 12:59 pm #1655010LeoStaffCustomer SupportIs this what you are looking for?
https://generatepress.com/forums/topic/change-wp-text-editor-font-family-or-size/#post-1476969February 11, 2021 at 1:18 pm #1655025JohnHi Leo,
Yes, that’s exactly what I did, see the code in my first comment, and that’s where I got it, but it’s not working and after three hours of messing with it, I just can’t get it to work.
February 11, 2021 at 1:25 pm #1655037LeoStaffCustomer SupportWeird. That solution looks good to me.
This isn’t handled by the theme and the same method is suggested by WordPress as well.
Can you try the same method using a Twenty series WP theme and see if that works?
February 12, 2021 at 7:43 am #1655982JohnHi Leo,
I know, should work. Glad you did not see a deeply stupid error on my part!
Good idea on the theme. I will try that on our testing server with 2020 and all plugins off, and see what happens. I will revert. May be a few days as I need to get some content out the door.
February 12, 2021 at 7:58 am #1655998JohnHi Again Leo,
Update: I just went into an old post in the classic editor, and low and behold the background is pink from my css. So clearly the function is working to load the editor-style.css file from the child theme directory. Why it’s not hitting the block editor I don’t know.
Maybe with your deep understanding of the block editor (I’m new to it) you can point be in the right direction?
I will also do some more research and revert if I crack it. As I say, will be a few days.
This looks like a good place for me to start: https://developer.wordpress.org/block-editor/developers/themes/theme-support/
February 12, 2021 at 4:00 pm #1656442LeoStaffCustomer SupportI’m running out of ideas.
What if you use the full file path for the
editor-style.css
file?
https://generatepress.com/forums/topic/how-to-call-editor-style-css-from-child-theme/#post-149083February 12, 2021 at 5:21 pm #1656473JeremyHi John,
I’ve had similar trouble in the past with this. Maybe give this a try in your
functions.php
instead:add_action( 'enqueue_block_editor_assets', function() { wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' ); } );
February 13, 2021 at 4:52 am #1656772JohnHi Leo,
I don’t think that’s the issue. We know for sure that the CSS file is loading since it’s hitting the classic editor (see my update above). The problem now is that it’s the CSS is not selecting in the block editor. I think the key lies here: https://developer.wordpress.org/block-editor/developers/themes/theme-support/
Seems like I have to do more stuff, both functions and css selectors to hit the block editor.
I bet your Generate Blocks team know exactly how to do this.
I will work more on this early next week.
February 13, 2021 at 4:56 am #1656778JohnHi Thornbrand,
Thanks for coming up on that, much appreciated.
Interesting idea, but I’m pretty sure wp_enqueue_style loads CSS that only hits the front end, not the back. Still, if all else fails I will try it.
February 13, 2021 at 6:16 am #1656824Jeremyenqueue_block_editor_assets can be used to enqueue block scripts and styles in the backend editor only.
I had never been able to get
add_editor_style
to work, so have been usingenqueue_block_editor_assets
on my sites, which has been working fine for me.However, I just tried something on a test site here and got
add_editor_style
working by addingadd_theme_support( 'editor-styles' );
first. See Enqueuing the editor style.So maybe give this a try:
add_theme_support( 'editor-styles' ); add_action( 'after_setup_theme', 'generate_child_setup' ); function generate_child_setup() { add_editor_style( 'editor-style.css' ); }
Just throwing out some ideas. Good luck John, I hope you get it working!
February 17, 2021 at 3:49 am #1661503JohnHi Thornbrand,
Sorry for the delay in answering.
That’s very kind of you, and I’m sure one of those will work.
As soon as I get out from under another project I will dig in and try it.
-
AuthorPosts
- You must be logged in to reply to this topic.