[Resolved] Elements dependent on customizer css – export for assets site. How to incl css?

[Brad]

Elements dependent on customizer css – export for “a cloud library assets site idea”. How to include css?

Hi,

I have a cloud library project idea I’m going to build to manage all my design and development assets I’ve built. Basic idea is to have a central hub site, maybe a multisite, that has all my elements and design assets I’ve built so I can pull from there (not sure how yet) for my future projects.

Question:
If I design a GenerateBlock element which I’m planning on later displaying somewhere via hook with an assigned priority (my usual build preference), and I need custom css classses, how would you suggest including the custom css so it “travels with the element” on export?

In a usually site, I would place the custom css in the customizer. If though I export an element from my “cloud site” to be, possibly named

cloud . j66labs .co

The css for that element would be in the customizer for that site. I’m not sure if one can write inline css in an element (it’s not a wise route though I wouldn’t think).

I’m thinking maybe make an separate style sheet for my cloud library and enqueue it in every site I use assets?

styles-cloud . css

What are you thoughts? Any suggestions? I appreciate your input. I realize this is more of a dev best practices workflow question rather than a support question.

[Brad]

Just came across this suggestion in Mike Oliver’s GeneratePress Membership Community regarding a related objective. Wondering if I could modify this to target specify GenerateBlock Elements. Thoughts?

function custom_load_css() {
  // Get the custom post type name
  $post_type = 'custom_post_type';
  // Check if the current post type is the custom post type
  if( get_post_type() == $post_type ) {
    // Enqueue the stylesheet
    wp_enqueue_style( 'custom-css', '/path/to/css/file.css' );
  }
}
add_action( 'wp_enqueue_scripts', 'custom_load_css' );

Note: I placed the link to the membership site in the private info area.
Their question was how to selectively load css for specific pages, categories through elements

[David]

Hi there,

this:

so it “travels with the element” on export?

Where is it being exported to ? Will someone be exporting the files and importing them to an unconnected site ?

[Brad]

Where is it being exported to ?

A new install site.

project1. com
project2. com
etc

Will someone be exporting the files and importing them to an unconnected site ?

Unconnected?
Are you referring to multisite? If so, let’s take multisite out of the picture for simplicity.

But idea is for me to import the single desired GenerateBlock element for use into one of my new project_. com sites

Basic planned overview:

1.
The cloud site which will have a “library” of all my element blocks, gb assets I’ve designed / built.

cloud.j66labs. co

2.
The dev site I’ll build everything in

dev.j66labs. co

After I design / build “assets” I’m happy with (GenerateBlock elements, etc —

NOTE: THIS IS WHERE THE CSS CUSTOMIZER CHALLENGES COME UP — )

I will want to find an efficient way to get these assets into (1) the cloud.j66labs. co site

export from (2) dev site I guess; import into (1) cloud site?

All this is for my workflow only. If I want to get fancy maybe I’ll create CPT and assign elements to display on those CPT, use FacetWP to search and pull up the “designed blocks / assets” of mine so I can see them in action, make a decision as to if I want to use them in a particular new project.

Next, when I have future projects, let’s say

project3 .com

and I like an gb element I’ve built (it’s in my (1) cloud.j66labs site, I’d like to be able to..

OBJECTIVE

get it into project3 .com for use.
Css may be in customizer of (1) cloud.j66labs. That’s one of my challenges, focused question for this post.

Sincere thanks for your time sharing your suggestions and insight. I really appreciate it.

[David]

Ok, sounds like a very interesting project.
But i don’t think there is an automated solution. The simplest one is to package all the CSS into a single stylesheet and load it on the imported to site.

Some comments, in your second reply regarding the post type:

For GP Elements it is: $post_type = 'gp_elements';

But that function would not apply as it is checking for: get_post_type() == $post_type which will apply to the current post template.

But GP also stores the elements data in: global $generate_elements;
See here for an example of it being used to add a body_class for each element on a page:

https://generatepress.com/forums/topic/kopfbereich-pagehero-class/#post-2513948

That could be repurposed to load as stylesheet if an element was present.

[Brad]

Ok. Cool. Sincere thanks for sharing your insight and taking the time to brainstorm.

1.
The simplest one is to package all the CSS into a single stylesheet and load it on the imported to site.

Followup Clarification Question:

So if I created a style sheet as an example as follows:

styles-cloud.css

Put all my styles in there for all dependent GB elements / asserts I build and “store” in my “cloud site”, then just enqueue this styles-cloud.css stylesheet on the new sites (project a, project b). You think this should work, yes?

I always got confused as to which css got loaded first and takes “precedence over the other”; the enqueue style sheets, the customizer. In-line I assume would override it all.

________________

I’ll check the codec for more info on the other referenced items in your reply…

____

For GP Elements it is: $post_type = ‘gp_elements’;

But that function would not apply as it is checking for: get_post_type() == $post_type which will apply to the current post template.

But GP also stores the elements data in: global $generate_elements;
See here for an example of it being used to add a body_class for each element on a page:

https://generatepress.com/forums/topic/kopfbereich-pagehero-class/#post-2513948

That could be repurposed to load as stylesheet if an element was present.

_______

Sincere thanks again for your assistance. I see gb pro 1.7 rc-1 just dropped. That’s great! Looking forward to the streamlined new features.

[David]

Put all my styles in there for all dependent GB elements / asserts I build and “store” in my “cloud site”, then just enqueue this styles-cloud.css stylesheet on the new sites (project a, project b). You think this should work, yes?

It should do 🙂

GB 1.7 – yeah almost there 🙂

[Brad]

Cool thanks! Have a good week!

[David]

You’re welcome – and you too!

[Author]

Posts