Reusable Sections with editable content

sage
1

I am trying to figure out a way I can have content that my content editor can access in the WordPress backend, and is available to different page templates. For example, say I have a section of the site that has a CTA quick contact form. I would want that on all pages (for instance), but not on the contact us page itself.

I used to create custom WP themes from scratch then moved to Divi, so this reminds me of the power you have with Divi’s Theme Builder.

I thought maybe a CPT of Reusable Sections, but I wouldn’t want to loop through every Reusable Section since, like I mentioned above, you would not want the quick contact form on the contact us page. I must be missing something! Thoughts?

1 Like
2

I use Gutenberg Reusable Blocks for this and it works really great. There is a plugin that imrproves editing:

1 Like
3

I did not look into this because I thought Sage did not have compatibility with Gutenberg.

4

Interesting.

So you can essentially create new blocks, and then if needed, use the Gutenberg layout system, or gird, and put that block there, right.

The way I used to do it is using ACF Flexible Content, create a row and a column, the column would have the layout e.g. 1/2 or such and then it would have content there, as well as other components, and it worked pretty well.

What if you need something that’s dynamic? Do you also create a gutenberg block for that?

Would be nice if the plugin had more to show, say a YT tutorial. If this works well, then that’ll be a game changer then.

1 Like
5

Sage 9 + 10 have both compatiblity with Gutenberg (core and plugin). Though Sage 10 got dedicated Gutenberg block support, including some ACF-to-block stuff.

Sage 9 enqueues the main style as editor style, Gutenberg editor would wrap the styles (into the edtior styles wrapper as they should not apply to the whole editor page) automatically.
Sage 10 wraps the styles itself and enqueues it as raw editor styles (that are not automatically wrapped by Gutenberg editor).

1 Like
6

Although it is recommended to do the rendering on frontend (JavaScript),
there is support for ServerSide Gutenberg blocks that are rendered on the server side.

1 Like
7

Sounds like this is the way. I will have to figure out how to connect the dots since even the official Sage 9 docs say no.

8

Well, I had no issues with Sage 9 and Gutenberg. Just enqueued the editor styles as Gutenberg styles.

1 Like
9

Thinking out loud here – Tailwind PurgeCSS for Sage10 is looking at the following server side files and, ‘tree shaking’ if-you-will the CSS that is not used. If we are creating in Gutenberg blocks and that code is saved in the db, we’ll have no idea what Tailwind classes were used and they may be tree shaken out of the build.

purge: {
    content: [
        './app/**/*.php',
        './resources/**/*.php',
        './resources/**/*.vue',
        './resources/**/*.js',
    ],
},

Something like a ACF Options page of Reusable Sections may be the answer here. Then I could keep the code server side, Tailwind will see the classes used properly and purge properly.

10

The way I do Tailwind styles in Gutenblocks is by using @MWDelaney’s ACF Gutenblocks package. Then the markup is in a path that Tailwind already knows about.

If you’re trying to apply a certain template to (nearly) all single views in your site I would think that goes in the theme files, not the block editor. If you’re determined to keep the template as a Gutenblock maybe you can write a Tailwind component and apply the styles that way?

1 Like
11

This topic was automatically closed after 42 days. New replies are no longer allowed.