Inline CSS with _getRules in Form View Base

[webstractions]

Michael,

I am starting to style my Admin pages and noticed embedded CSS. Tracked it down to a private function named _getRules() within a generated class named APF_Form_View___CSS_meta_box. There is one other similar occurrence a function named _getWidgetRules in APF_Form_View___CSS_widget that does the same thing.

My question is how do you override this functionality? I cannot see any reason for embedding this CSS within, at least, the metabox area. I would prefer normal TH, TD alignment for consistency with other form entry (inline CSS for metaboxes makes TH/TD combinations full width, thus separate lines.).

Over-riding or removing the inline CSS is preferable. I would not like to have to add more CSS rules that are either enqueued later in the process, or worse, a lot of !important rules.

[michaeluno]

Hi,

You may want to use the style_{instantiated class name} hook to modify the style. Say your class name is MyClass, then you can add a function like this.

public function style_MyClass( $sCSSRules ) {
    return $sCSSRules 
        . " /* add your custom CSS rules here. */";
}

[webstractions]

Yeah. Not what I was actually looking for.

To have to add CSS rules to replace another set or rules is counter-productive. The added rules are also inline.

I did come up with another solution, although not very elegant. Inside of my Metabox class where I use addSettingSections method, I over-rode the class declaration for the section (ie: instead of the automatic generated class of admin-page-framework-section, it can be my-app-section).

$this->addSettingSections(
   array(
    'section_id' => 'api_sandbox_keys',
    'title'      => __( 'Sandbox Keys', 'my-app' ),
    'attributes' => array( 
        'id'      => 'section_api_sandbox_keys',
        'class' => 'my-app-section'
     )
   ),
   array(
    'section_id' => 'api_production_keys',
    'title'      => __( 'Production Keys', 'my-app' ),
    'attributes' => array( 
            'id'      => 'section_api_production_keys',
        'class' => 'my-app-section'
    )
    )
);

Now there is nothing to do with any stylesheet. Since the new class name is not declared anywhere, it uses the standard Admin styles for WordPress. This is all I wanted in the first place.

The question still remains. Why does the framework have to have the injected inline styles? And most peculiar is it is used in the metabox and widget coding, but nowhere else.

[michaeluno]

Glad you found a workaround.

The reason that APF uses inline CSS is that the compiled framework code used to be within a single minified file. That meant for the users to easily include the framework file. However, the minifed code was complained by the wordpress.org plugin review team due to its obscurity and now the compiled framework files are split to multiple files. I'm thinking of changing it to enqueue separate CSS and JavaScript files because of that.

Regarding the question that it is only used in the metabox and widget, I'm afraid I don't get what you exactly mean here. All the other factory classes use inline CSS rules including the admin page and the page meta box. I think you are talking about the inline CSS rules for the APF widget form and they are loaded in admin pages where you don't want them to be injected. The reason APF loads the widget inline CSS rules is to support page builder plugins which load widgets. It is hard to know where those plugins embed widgets. There should be a way to easily disable the widget style and I have to take a look.