CSS & JS

General aspects

Every View or Card may have its own CSS and JS code.

To reduce the FCP (First Contentful Paint) metric, CSS code is added within the head tag (at the top of the page), while JS code is added as <script type=module> before the closing "body" tag (at the bottom).

Just-in-Time assets

Views and Cards are modular, and Advanced Views uses the Just-in-Time strategy for assets. This means that each page will have CSS and JS code only for the items that appear on that page.

This eliminates the need to worry about bundling, allowing you to develop templates that can be mixed by editors in any order without enqueuing them site-wide.

Thanks to the modular approach, you can even use TS/Sass or Tailwind to create independent assets, while Advanced Views will take care of the bundling itself. Read this page to learn how to setup TS/Tailwind properly.

How to use it

Add a View and assign fields as usual. (See Creating your first View.)

On the View edit screen, switch to the CSS & JS tab.

Insert or Paste your CSS styles in the CSS Code field.

Click on the Update button to publish your changes.

CSS Code

Selectors

Use the 'Inspect' tool of your browser to identify which class to style. See below for magic shortcuts so you won't need to write repetitive class names when defining your styles.

Magic shortcuts are available (and will use the BEM Unique Name if defined) :

Magic shortcutReplaced withBEM Unique Name

#view

.acf-view--id--X

.bem-name

#view__

.acf-view--id--X .acf-view__

.bem-name .bem-name__

#__

.acf-view__

.bem-name__

Note: These magic shortcuts only work if they are placed in the CSS Code field of your View.

In Practice

Display fields and their labels on one line using:

// universal 
// Display fields and labels inline.
#view > div {
   display: flex;
   gap: 10px;
}

Or alternatively turn on the 'Add Classification Classes' setting in the Template tab, and use the below CSS:

// when adding classification classes
// Display fields and labels inline.
#view__row {
   display: flex;
   gap: 10px;
}

Find classes in the Default Template

Once your View has been published/updated, the Twig template will automatically be generated and can be seen in the Template tab.

See the 'class=""' attribute of the Twig template for each field. E.g. class="acf-view__name-link".

Then define the style in the CSS Code field on the CSS & JS tab.

Example:

// add border to image
.acf-view__category-image {
    padding: 3px;
    border: 1px solid #cecece;
}

Sass usage

In Advanced Views, there is a File System Storage option. If you enable it, you can utilize Sass for View and Card CSS code. Check this page for details.

Tailwind usage

In Advanced Views, there is a File System Storage option. If you enable it, you can utilize Tailwind for View and Card CSS code. Check this page for details.

JS Code

Defaults: Web Component

Every View and Card may have its own JS code. The Advanced Views Framework allows you to employ Web Components without any extra actions. The plugin, out-of-the-box, creates a unique tag wrapper for every View and Card. As soon as you add some JS code, Advanced Views creates a Web Component for the current instance and places your JS code inside.

Tip: If you need to add global JS, you can set the 'Web Component Type' setting of your View or Card to 'None'. Additionally, you can configure the default setting for new Views and Cards inside the Defaults tab of the Framework settings.

This means your code will be automatically executed for every View or Card instance appearing on the page. For example, let's say we have a View and want to track clicks on links inside.

Without Web Components, your JS code might look like this:

document.addEventListener('DOMContentLoaded', function () {
  document.body.querySelectorAll('.my-object').forEach((obj) => {
    obj.querySelectorAll('a').addEventListener('click', function () {
      // some stuff here
    });
  });
});

With Web Components, your code is called for every instance on the page and has the 'this' context. So, you can write it like this:

this.querySelectorAll('a').addEventListener('click', function () {
  // some stuff here
});

Web Components are much shorter and a more convenient way to add custom JS code, especially when dealing with Ajax-loaded content.

In case of the Ajax-loaded content, without Web Components, you would need to employ the MutationObserver to watch for added nodes, find target elements, and add listeners. With Web Components, no extra actions are required. The code above will be called for every new instance out of the box!

Shadow DOM

By default, web components are initialized in the non-shadow (classic) way, meaning they act like any other HTML tags. This entails that all global CSS rules (like p { color: blue; }) will be applied to the inner elements if they match.

The Advanced Views Framework provides the 'Shadow DOM' option, which utilizes the 'shadow DOM' feature of web components. This turns your element into an independent entity, preventing the application of any global styles to its internal items. It's akin to drawing on a clean canvas, where only Views CSS is applied.

The shadow DOM option changes the selector of the element in JavaScript from 'this' to 'this.shadowRoot'. So if you have any JavaScript, don't forget to make this change, as the element and its children are now available solely under the 'this.shadowRoot' selector.

This feature can be immensely useful in various scenarios.

Consider the following:

If the website you are working on is built properly, using a modular approach, it will function seamlessly. However, what if you need to add a new element to an existing website that is constructed without adherence to any specific rules, and has an abundance of global styles that introduce unwanted effects to your new element?

The straightforward solution is to override these styles. However, this process can be time-consuming, and in practice, crafting custom styling for a plain 'ul' might take 20 minutes instead of the usual 3 minutes on a website that follows best practices. This setting circumvents such hassle, allowing you to sidestep the overriding process entirely.

WordPress Interactivity API

Check this guide to see how to use WP Interactivity API.

Employing JS libraries

To add complex interactive elements, like sliders, you'll need to use some JS libraries. If you use the Pro edition, read about the Front-end assets management to see the list of built-in libraries.

If you use the Lite edition, or want to employ a specific library that is missing from the built-in list, you need to:

  1. Enqueue it on the target page

  2. Add code to the JS field of the View or Card to create the instance.

The classic enqueuing in WordPress happens with the wp_enqueue_script function, but to avoid sitewide enqueueing (which is bad for performance), it requires manual detection of the target pages.

That's why we recommend harnessing the modules feature. So, you add import x from "/wp-content/themes/theme_name/assets/library.js" to the top of the JS code, and the browser will automatically load the library only for the necessary pages.

You shouldn't worry about duplications; according to the standard, the browser will import the script only once, even if the same import statement appears in several different Views/Cards.

Notes on the modules

  1. You must have the 'Web Component Type' setting set to 'None'; otherwise, Advanced Views will wrap your JS code into a WebComponent, and the import will cause an error.

  2. You must use the correct path to the JS library

TypeScript usage

In Advanced Views, there is a File System Storage option. If you enable it, you can utilize TypeScript for View and Card JS code. Check this page for details.

Last updated