Loop Item Styles

[OTW-DEV-1]

Description

BUG
When creating a loop item all styles dont seem to be added.
i created a loop item for products, styled the div block , image, title etc but none of these styles are showing in the frontend. see screenshots

also when creating a component with an image and it's set to 100% width, it seems like its getting the 100% width from the page instead of the container itself, so for example if i create a card component and add 3 of them in a flex row, they are each full width instead of inline.
Also would be best to have a control of the flex-grow , shrink and basis for each compontent/div?

Even if i create a simple div flex row, add 3 divs in it, i have no control over their flex parameters

Agreement

• I confirm I have read and followed the Editor V4 Discussion Form guidelines, and agree this discussion may be closed without warning.

[outrank-charles]

I've also just discovered the styling of Components, built with atomic elements are completely broken on the front-end when you use them in a Loop Grid, or Loop Carousel. This makes this entire design system unusable on real projects at the moment, and have to revert back to V3, which is disappointing.

In the editor, it looks like it should:

But on the frontend it's completely broken:

[AgustinBustosBP]

Atomic elements are not working on loops at the moment, solved it by doing everything in v3

[chrisringrose]

I was able to get a loop grid working with v4 widgets

After reviewing the source code, when Elementor renders a page, it may find a Loop Grid or Loop Carousel that uses a saved loop template. If that loop template contains newer Atomic elements, Elementor does not always load the CSS for those inner elements automatically. To work around that, when a document is being rendered, it scans for any Loop Grid or Loop Carousel widgets, finds the template IDs they use, and then tells Elementor to render those loop templates too.

By forcing Elementor to process those nested loop templates, Elementor also discovers the Atomic elements inside them and loads the CSS they need.

A few safeguards are built in too:

• It keeps track of which document IDs have already been processed, so it does not get stuck in a render loop.
• It only processes each document once per request.
• It stores template IDs uniquely, so the same template is not rendered more than once unnecessarily.

Here's my code snippet:

function my_elementor_render_loop_templates_for_atomic_css( $post_id ) {
	/**
	 * Tracks document IDs already processed during this request.
	 *
	 * This prevents:
	 * 1. Duplicate work when the same document is encountered multiple times.
	 * 2. Infinite recursion when we manually trigger 'elementor/post/render'
	 *    for loop templates, which will call this function again.
	 *
	 * @var array<int, true>
	 */
	static $processed_post_ids = [];

	$post_id = (int) $post_id;

	// Bail on invalid IDs.
	if ( $post_id <= 0 ) {
		return;
	}

	// Prevent duplicate processing / recursive loops.
	if ( isset( $processed_post_ids[ $post_id ] ) ) {
		return;
	}

	$processed_post_ids[ $post_id ] = true;

	// Elementor must be loaded for any of this to work.
	if ( ! class_exists( '\Elementor\Plugin' ) ) {
		return;
	}

	$plugin = \Elementor\Plugin::$instance;

	// Be defensive in case Elementor internals are unavailable for some reason.
	if ( ! $plugin || ! isset( $plugin->documents, $plugin->db ) ) {
		return;
	}

	/*
	 * Get the current document in the most frontend-friendly way first.
	 *
	 * 'get_doc_for_frontend()' is preferred because this hook runs in a render
	 * context. If that fails, fall back to the generic document lookup.
	 */
	$document = $plugin->documents->get_doc_for_frontend( $post_id );

	if ( ! $document ) {
		$document = $plugin->documents->get( $post_id );
	}

	if ( ! $document ) {
		return;
	}

	// Raw Elementor element tree for this document.
	$elements_data = $document->get_elements_data();

	if ( empty( $elements_data ) || ! is_array( $elements_data ) ) {
		return;
	}

	/**
	 * Unique set of loop template IDs found in this document.
	 *
	 * Keys are template IDs, values are always true.
	 *
	 * @var array<int, true>
	 */
	$loop_template_ids = [];

	/*
	 * Walk the full element tree once and collect every Loop Grid / Loop Carousel
	 * template reference we can find.
	 *
	 * We use Elementor's own iterate_data() helper so nested containers/widgets
	 * are traversed consistently.
	 */
	$plugin->db->iterate_data(
		$elements_data,
		static function( $element ) use ( &$loop_template_ids ) {
			if ( ! is_array( $element ) ) {
				return;
			}

			$widget_type = $element['widgetType'] ?? '';

			// We only care about widgets that render a saved loop template.
			if ( 'loop-grid' !== $widget_type && 'loop-carousel' !== $widget_type ) {
				return;
			}

			$settings = $element['settings'] ?? [];

			/*
			 * Primary loop template.
			 *
			 * This is the main template selected in the Loop Grid / Carousel.
			 */
			$template_id = isset( $settings['template_id'] ) ? (int) $settings['template_id'] : 0;

			if ( $template_id > 0 ) {
				$loop_template_ids[ $template_id ] = true;
			}

			/*
			 * Alternate templates.
			 *
			 * Elementor can optionally rotate between multiple templates, so we
			 * include those too.
			 */
			if ( empty( $settings['alternate_templates'] ) || ! is_array( $settings['alternate_templates'] ) ) {
				return;
			}

			foreach ( $settings['alternate_templates'] as $alternate_template ) {
				if ( ! is_array( $alternate_template ) ) {
					continue;
				}

				$alternate_template_id = isset( $alternate_template['template_id'] )
					? (int) $alternate_template['template_id']
					: 0;

				if ( $alternate_template_id > 0 ) {
					$loop_template_ids[ $alternate_template_id ] = true;
				}
			}
		}
	);

	// Nothing to render, so we're done.
	if ( empty( $loop_template_ids ) ) {
		return;
	}

	/*
	 * Render each discovered loop template once.
	 *
	 * This re-enters Elementor's render pipeline for those template documents,
	 * which allows Atomic element CSS inside them to be discovered and loaded.
	 */
	foreach ( array_keys( $loop_template_ids ) as $loop_template_id ) {
		do_action( 'elementor/post/render', $loop_template_id );
	}
}

add_action('elementor/post/render', 'my_elementor_render_loop_templates_for_atomic_css', 1);

[chrisringrose]

Glad it worked!

And best part is, it's easy to just remove this code when Elementor finally fixes this.

[AgustinBustosBP]

Very helpful!

[drdiercks]

This is so helpful! Thank you so much.

[function-az]

This works in loading the styles - thank you so much!

I'm still struggling with the image background being a dynamic tag to the post feature image. It repeats one post's feature image, rather than respecting each posts' features image that are different from one another.

[drdiercks]

I'm experiencing a problem where the featured image doesn't get loaded in to the V4 Flexbox (inside Loop Grid), but it does get loaded into V3 Containers. See screenshot below of Custom Post Type Loop Grid (Artists), not showing the correct image (only the fallback), but the V3 container below it showing the featured image just fine.

Have you found a way to force Elementor to query the correct image?

[function-az]

Just saw that "Atomic Loops" and "Atomic Grids" are coming soon in the V4 roadmap. Hopefully these fix the issues we are having...