In a classic theme how do you control the styling of content inside the pages/posts created using gutenberg?

[ad_1]

I’m creating a site for someone who is not too technical but needs to occasionally edit the site content himself (news, change text in pages). I thought WordPress would be perfect for this. I basically have a static HTML/CSS design of the site that I need to turn into a wordpress.

I dove deep into classic themes and went the custom classic theme route.

I don’t understand how to style the content of pages and posts that were created with Gutenberg using CSS. In my template I control the top/bottom of the page but the content is just the\_content() that’s dumped in the page.

I want specific layout/styling for some sections/blocks : a full screen background image with the text on top for this section, a piece of styling at the end of this section, an image that’s inserted that way in this text,..

I can look at the generated html and write my own css using the classes .wp-block-xxx classes. I feel like I have to fight against the the style.css provided by WordPress.

In the editor I can use the “Additional CSS” field for specific blocks but that would make the site difficult to edit for the final user.

I feel like I’m missing something.

[ad_2]
3 Comments
  1. I had the same problem and I didn’t really solve it.

    I either had fully decked out paged that couldn’t be edited in the admin or editable pages that all looked the same.

  2. FSE means Full Site Editing, and the themes that support it are called block themes or FSE themes. FSE is the concept that you can edit all aspects of your pages and posts using (Gutenberg) blocks, instead of having the templates defined by the theme, and having to edit separatelly the footer, sidebar, menu and all widgets here and there on the dashboard and customizer.

    I think you may have some concepts mixed amb although I don’t really get what you are trying to do, but I suspect FSE themes may be what you are looking for. In FSE you can define the default styles of the blocks themselves. Later on you can block the user for making changes to the defaults by hiding parts of the style settings.
    Also you can create patterns, like a banner with a color overlay and a text on top. Then you can lock the overall style and just let the user change the image or edit the text, but not modify the rest of the style.

  3. Have you worked with ACF before? I’d highly recommend you check out the Flexible Content Repeater.

    Also, why is your client messing with CSS – that sounds like a bad idea! 😉

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer