init

wp-content/themes/flatsome/inc/shortcodes/ux_stack.php

@@ -0,0 +1,96 @@
+<?php
+/**
+ * Registers the `ux_stack` shortcode.
+ *
+ * @package flatsome
+ */
+
+/**
+ * Renders the `ux_stack` shortcode.
+ *
+ * @param array  $atts    An array of attributes.
+ * @param string $content The shortcode content.
+ * @param string $tag     The name of the shortcode, provided for context to enable filtering.
+ *
+ * @return string
+ */
+function flatsome_render_ux_stack_shortcode( $atts, $content, $tag ) {
+	$atts = shortcode_atts(
+		array(
+			'visibility'     => '',
+			'class'          => '',
+			'direction'      => 'row',
+			'direction__sm'  => null,
+			'direction__md'  => null,
+			'distribute'     => 'start',
+			'distribute__sm' => null,
+			'distribute__md' => null,
+			'align'          => 'stretch',
+			'align__sm'      => null,
+			'align__md'      => null,
+			'gap'            => '0',
+			'gap__sm'        => null,
+			'gap__md'        => null,
+		),
+		$atts,
+		$tag
+	);
+
+	$id      = 'stack-' . wp_rand();
+	$classes = array( 'stack' );
+
+	if ( ! empty( $atts['class'] ) )      $classes[] = $atts['class'];
+	if ( ! empty( $atts['visibility'] ) ) $classes[] = $atts['visibility'];
+
+	foreach ( array( '', 'sm', 'md' ) as $value ) {
+		$class_prefix = $value ? "$value:" : '';
+		$attr_suffix  = $value ? "__$value" : '';
+
+		if ( $atts[ "direction{$attr_suffix}" ] ) {
+			$classes[] = "{$class_prefix}stack-{$atts["direction{$attr_suffix}"]}";
+		}
+
+		if ( $atts[ "distribute{$attr_suffix}" ] ) {
+			$classes[] = "{$class_prefix}justify-{$atts["distribute{$attr_suffix}"]}";
+		}
+
+		if ( $atts[ "align{$attr_suffix}" ] ) {
+			$classes[] = "{$class_prefix}items-{$atts["align{$attr_suffix}"]}";
+		}
+	}
+
+	wp_enqueue_script( 'css-vars-polyfill' );
+
+	ob_start();
+
+	?>
+	<div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">
+		<?php echo do_shortcode( $content ); ?>
+		<?php
+			echo ux_builder_element_style_tag(
+				$id,
+				array(
+					'gap' => array(
+						'selector' => '> *',
+						'property' => '--stack-gap',
+						'unit'     => 'rem',
+					),
+				),
+				$atts
+			);
+		?>
+	</div>
+	<?php
+
+	return ob_get_clean();
+}
+add_shortcode( 'ux_stack', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner_1', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner_2', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner_4', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner_5', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner_6', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner_7', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner_8', 'flatsome_render_ux_stack_shortcode' );
+add_shortcode( 'ux_stack_inner_9', 'flatsome_render_ux_stack_shortcode' );