* @copyright Copyright (c) 2022, Phi Phan */ namespace BoldBlocks; // Exit if accessed directly. defined( 'ABSPATH' ) || exit; if ( ! class_exists( CustomStyle::class ) ) : /** * The controller class for style. */ class CustomStyle extends CoreComponent { /** * The style handle for feature styles * * @var array */ private $feature_style_handle = 'cbb-dynamic-style'; /** * Store the context of styles * * @var array */ private $style_contexts = [ 'loops' => [], 'loop' => '', 'post' => 0, 'counter' => 0, 'content' => false, 'content_counter' => 0, ]; /** * Store the ID of query loop with carousel or grid layout * * @var array */ private $query_ids = []; /** * The cached styles * * @var array */ private $styles = []; /** * The refined breakpoints * * @var array */ private $breakpoints = []; /** * The list of non-cbb blocks that support dynamic style * * @var array */ public $non_cbb_blocks = [ 'core/template-part' ]; /** * Run main hooks * * @return void */ public function run() { // Register setting fields. add_action( 'init', [ $this, 'register_setting_fields' ] ); // Register style handle. add_action( 'init', [ $this, 'register_feature_style' ] ); // Render block style. add_filter( 'render_block', [ $this, 'render_block_style' ], 10, 3 ); // Render link to post first. add_filter( 'render_block', [ $this, 'build_block_link_to_post' ], 20, 3 ); // Build dynamic block overlay. add_filter( 'render_block', [ $this, 'build_block_overlay' ], 20, 3 ); // Build dynamic block background. add_filter( 'render_block', [ $this, 'build_block_background' ], 30, 3 ); // Build animations. add_filter( 'render_block', [ $this, 'build_block_animations' ], 30, 3 ); // Render accordions. add_filter( 'render_block_data', [ $this, 'render_accordion_block_data' ] ); // Render accordion item blocks. add_filter( 'render_block', [ $this, 'render_accordion_item_block' ], 10, 3 ); // Render grid style for the query loop block. add_filter( 'render_block_core/query', [ $this, 'render_query_loop_grid_style' ], 10, 3 ); // Render carousel settings for the query loop block. add_filter( 'render_block_core/query', [ $this, 'render_query_loop_carousel_layout' ], 10, 3 ); // Enqueue block styles. add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_responsive_styles' ] ); // Enqueue breakpoints. add_action( 'init', [ $this, 'enqueue_reponsive_breakpoints' ] ); // Update loop id. add_filter( 'render_block_context', [ $this, 'update_loop_id' ], 10, 2 ); // Reset loop id. add_filter( 'render_block', [ $this, 'reset_loop_id' ], 10, 2 ); // Render preload style for carousels. add_filter( 'cbb_get_block_style', [ $this, 'get_carousel_preload_style' ], 10, 2 ); // Support dynamic style for none-cbb blocks. add_filter( 'cbb_support_block_style', [ $this, 'support_block_style' ], 10, 2 ); // Set a block layout for non-cbb blocks. add_filter( 'cbb_get_block_layout', [ $this, 'get_block_layout' ], 10, 2 ); // Render sticky data for the core/template-part block. add_filter( 'render_block_core/template-part', [ $this, 'render_template_part_sticky' ], 10, 3 ); // Render settings for carousels. add_filter( 'render_block', [ $this, 'render_carousel_settings' ], 30, 3 ); // Migrate CBB class for old blocks. add_filter( 'render_block', [ $this, 'migrate_cbb_class' ], 30, 3 ); } /** * Register custom setting fields * * @return void */ public function register_setting_fields() { // phpcs:ignore PluginCheck.CodeAnalysis.SettingSanitization.register_settingDynamic register_setting( 'cbb', 'cbb_breakpoints', [ 'type' => 'array', 'show_in_rest' => [ 'name' => 'CBBBreakpoints', 'schema' => [ 'items' => [ 'type' => 'object', 'properties' => [ 'breakpoint' => [ 'type' => 'number', ], 'prefix' => [ 'type' => 'string', ], ], 'additionalProperties' => [ 'type' => 'string', ], ], ], ], 'default' => [ [ 'breakpoint' => 576, 'prefix' => 'sm', ], [ 'breakpoint' => 768, 'prefix' => 'md', ], [ 'breakpoint' => 1024, 'prefix' => 'lg', ], ], ] ); } /** * Enqueue responsive breakpoints * * @return void */ public function enqueue_reponsive_breakpoints() { // Custom blocks handle. $custom_blocks_handler = $this->the_plugin_instance->get_component( CustomBlocks::class ); // Get breakpoint setting. $breakpoints = $this->get_breakpoints(); // Get breakpoint scripts. $breakpoint_script = 'var CBBBreakpoints=' . wp_json_encode( $breakpoints ); // Load JS breakpoints. wp_add_inline_script( $custom_blocks_handler->custom_blocks_handle, $breakpoint_script, 'before' ); wp_add_inline_script( $custom_blocks_handler->carousel_blocks_frontend_handle, $breakpoint_script, 'before' ); } /** * Register a handle for enqueue block styles. * * @return void */ public function register_feature_style() { // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion wp_register_style( $this->feature_style_handle, '' ); } /** * Enqueue all feature styles * * @return void */ public function enqueue_responsive_styles() { if ( wp_is_block_theme() ) { wp_enqueue_style( $this->feature_style_handle ); } wp_add_inline_style( $this->feature_style_handle, $this->get_responsive_styles() ); } /** * Build responsive styles * * @return string */ private function get_responsive_styles() { $style = ''; $breakpoints = $this->get_breakpoints(); $md_breakpoint = absint( $breakpoints['md']['breakpoint'] ?? 768 ); $md_breakpoint_max = $md_breakpoint - 1; $lg_breakpoint = absint( $breakpoints['lg']['breakpoint'] ?? 1024 ); $lg_breakpoint_max = $lg_breakpoint - 1; $md_start = "@media(min-width:{$md_breakpoint}px){"; $lg_start = "@media(min-width:{$lg_breakpoint}px){"; $end = '}'; // Padding. $padding_style = '.sm-cbb-padding-top{padding-top:var(--cbb--padding-top) !important;}.sm-cbb-padding-right{padding-right:var(--cbb--padding-right) !important;}.sm-cbb-padding-bottom{padding-bottom:var(--cbb--padding-bottom) !important;}.sm-cbb-padding-left{padding-left:var(--cbb--padding-left) !important;}'; $padding_style .= "{$md_start}.md-cbb-padding-top{padding-top:var(--cbb--padding-top) !important;}.md-cbb-padding-right{padding-right:var(--cbb--padding-right) !important;}.md-cbb-padding-bottom{padding-bottom:var(--cbb--padding-bottom) !important;}.md-cbb-padding-left{padding-left:var(--cbb--padding-left) !important;}{$end}"; $padding_style .= "{$lg_start}.lg-cbb-padding-top{padding-top:var(--cbb--padding-top) !important;}.lg-cbb-padding-right{padding-right:var(--cbb--padding-right) !important;}.lg-cbb-padding-bottom{padding-bottom:var(--cbb--padding-bottom) !important;}.lg-cbb-padding-left{padding-left:var(--cbb--padding-left) !important;}{$end}"; $style .= $padding_style; // Margin. $margin_style = '.sm-cbb-margin-top{margin-top:var(--cbb--margin-top) !important;}.sm-cbb-margin-right{margin-right:var(--cbb--margin-right) !important;}.sm-cbb-margin-bottom{margin-bottom:var(--cbb--margin-bottom) !important;}.sm-cbb-margin-left{margin-left:var(--cbb--margin-left) !important;}'; $margin_style .= "{$md_start}.md-cbb-margin-top{margin-top:var(--cbb--margin-top) !important;}.md-cbb-margin-right{margin-right:var(--cbb--margin-right) !important;}.md-cbb-margin-bottom{margin-bottom:var(--cbb--margin-bottom) !important;}.md-cbb-margin-left{margin-left:var(--cbb--margin-left) !important;}{$end}"; $margin_style .= "{$lg_start}.lg-cbb-margin-top{margin-top:var(--cbb--margin-top) !important;}.lg-cbb-margin-right{margin-right:var(--cbb--margin-right) !important;}.lg-cbb-margin-bottom{margin-bottom:var(--cbb--margin-bottom) !important;}.lg-cbb-margin-left{margin-left:var(--cbb--margin-left) !important;}{$end}"; $style .= $margin_style; // Block gap. $block_gap_style = '.sm-cbb-block-gap > *{margin-block-start:0;margin-block-end:0;}.sm-cbb-block-gap > * + *{margin-block-start:var(--cbb--block-gap) !important;margin-block-end:0;}'; $block_gap_style .= "{$md_start}.md-cbb-block-gap > *{margin-block-start:0;margin-block-end:0;}.md-cbb-block-gap > * + *{margin-block-start:var(--cbb--block-gap) !important;margin-block-end:0;}{$end}"; $block_gap_style .= "{$lg_start}.lg-cbb-block-gap > *{margin-block-start:0;margin-block-end:0;}.lg-cbb-block-gap > * + *{margin-block-start:var(--cbb--block-gap) !important;margin-block-end:0;}{$end}"; $style .= $block_gap_style; // Border. $border_style = '.sm-cbb-border-top{border-top:var(--cbb--border-top) !important;}.sm-cbb-border-right{border-right:var(--cbb--border-right) !important;}.sm-cbb-border-bottom{border-bottom:var(--cbb--border-bottom) !important;}.sm-cbb-border-left{border-left:var(--cbb--border-left) !important;}'; $border_style .= "{$md_start}.md-cbb-border-top{border-top:var(--cbb--border-top) !important;}.md-cbb-border-right{border-right:var(--cbb--border-right) !important;}.md-cbb-border-bottom{border-bottom:var(--cbb--border-bottom) !important;}.md-cbb-border-left{border-left:var(--cbb--border-left) !important;}{$end}"; $border_style .= "{$lg_start}.lg-cbb-border-top{border-top:var(--cbb--border-top) !important;}.lg-cbb-border-right{border-right:var(--cbb--border-right) !important;}.lg-cbb-border-bottom{border-bottom:var(--cbb--border-bottom) !important;}.lg-cbb-border-left{border-left:var(--cbb--border-left) !important;}{$end}"; $style .= $border_style; // Border radius. $radius_style = '.sm-cbb-border-radius{overflow:hidden;border-radius: var(--cbb--border-radius) !important;}'; $radius_style .= "{$md_start}.md-cbb-border-radius{overflow:hidden;border-radius: var(--cbb--border-radius) !important;}{$end}"; $radius_style .= "{$lg_start}.lg-cbb-border-radius{overflow:hidden;border-radius: var(--cbb--border-radius) !important;}{$end}"; $style .= $radius_style; // Width. $width_style = '.sm-cbb-width{width:var(--cbb--width) !important;}'; $width_style .= "{$md_start}.md-cbb-width{width:var(--cbb--width) !important;}{$end}"; $width_style .= "{$lg_start}.lg-cbb-width{width:var(--cbb--width) !important;}{$end}"; $style .= $width_style; // Height. $height_style = '.sm-cbb-height{height:var(--cbb--height) !important;}'; $height_style .= "{$md_start}.md-cbb-height{height:var(--cbb--height) !important;}{$end}"; $height_style .= "{$lg_start}.lg-cbb-height{height:var(--cbb--height) !important;}{$end}"; $style .= $height_style; // Aspect ratio. $aspect_ratio_style = '.sm-cbb-aspect-ratio{aspect-ratio:var(--cbb--aspect-ratio);}'; $aspect_ratio_style .= "{$md_start}.md-cbb-aspect-ratio{aspect-ratio:var(--cbb--aspect-ratio);}{$end}"; $aspect_ratio_style .= "{$lg_start}.lg-cbb-aspect-ratio{aspect-ratio:var(--cbb--aspect-ratio);}{$end}"; $style .= $aspect_ratio_style; // Text alignment. $text_align_style = '.sm-cbb-text-align{text-align:var(--cbb--text-align);}'; $text_align_style .= "{$md_start}.md-cbb-text-align{text-align:var(--cbb--text-align);}{$end}"; $text_align_style .= "{$lg_start}.lg-cbb-text-align{text-align:var(--cbb--text-align);}{$end}"; $style .= $text_align_style; // Vertical alignment. $v_align_style = '.sm-cbb-v-align.cbb-layout-grid{display:grid;align-content:var(--cbb--v-align);}.sm-cbb-v-align.cbb-layout-grid>*{width:100%;}.sm-cbb-v-align.cbb-align-items{align-items:var(--cbb--v-align);}.sm-cbb-v-align.cbb-align-self{align-self:var(--cbb--v-align);}'; $v_align_style .= "{$md_start}.md-cbb-v-align.cbb-layout-grid{display:grid;align-content:var(--cbb--v-align);}.md-cbb-v-align.cbb-layout-grid>*{width:100%;}.md-cbb-v-align.cbb-align-items{align-items:var(--cbb--v-align);}.md-cbb-v-align.cbb-align-self{align-self:var(--cbb--v-align);}{$end}"; $v_align_style .= "{$lg_start}.lg-cbb-v-align.cbb-layout-grid{display:grid;align-content:var(--cbb--v-align);}.lg-cbb-v-align.cbb-layout-grid>*{width:100%;}.lg-cbb-v-align.cbb-align-items{align-items:var(--cbb--v-align);}.lg-cbb-v-align.cbb-align-self{align-self:var(--cbb--v-align);}{$end}"; $style .= $v_align_style; // Justify alignment. $h_align_style = '.sm-cbb-h-align.cbb-layout-grid{display:grid;justify-content:var(--cbb--h-align);}.sm-cbb-h-align.cbb-layout-grid>*{width:auto;}.sm-cbb-h-align.cbb-justify-items{justify-items:var(--cbb--h-align);}.sm-cbb-h-align.cbb-justify-self{justify-self:var(--cbb--h-align);}'; $h_align_style .= "{$md_start}.md-cbb-h-align.cbb-layout-grid{display:grid;justify-content:var(--cbb--h-align);}.md-cbb-h-align.cbb-layout-grid>*{width:auto;}.md-cbb-h-align.cbb-justify-items{justify-items:var(--cbb--h-align);}.md-cbb-h-align.cbb-justify-self{justify-self:var(--cbb--h-align);}{$end}"; $h_align_style .= "{$lg_start}.lg-cbb-h-align.cbb-layout-grid{display:grid;justify-content:var(--cbb--h-align);}.lg-cbb-h-align.cbb-layout-grid>*{width:auto;}.lg-cbb-h-align.cbb-justify-items{justify-items:var(--cbb--h-align);}.lg-cbb-h-align.cbb-justify-self{justify-self:var(--cbb--h-align);}{$end}"; $style .= $h_align_style; // Transform. $transform_style = '.sm-cbb-transform{transform:var(--cbb--transform);transform-origin:var(--cbb--transform-origin)}'; $transform_style .= "{$md_start}.md-cbb-transform{transform:var(--cbb--transform);transform-origin:var(--cbb--transform-origin)}{$end}"; $transform_style .= "{$lg_start}.lg-cbb-transform{transform:var(--cbb--transform);transform-origin:var(--cbb--transform-origin)}{$end}"; $style .= $transform_style; // Visibility. $visibility_style = "@media(max-width:{$md_breakpoint_max}px){.cbb-hidden-sm{display:none !important;}}"; $visibility_style .= "@media(min-width:{$md_breakpoint}px) and (max-width:{$lg_breakpoint_max}px){.cbb-hidden-md{display:none !important;}}"; $visibility_style .= "@media(min-width:{$lg_breakpoint}px){.cbb-hidden-lg{display:none !important;}}"; $style .= $visibility_style; // Grid: Columns, rows, auto-rows, & gap. $grid_style = '.sm-cbb-grid-columns > *,.sm-cbb-grid-columns > * + *{margin:0}.sm-cbb-grid-columns{grid-template-columns:var(--cbb--grid-columns);}.sm-cbb-grid-rows{grid-template-rows:var(--cbb--grid-rows);}.sm-cbb-grid-auto-rows{grid-auto-rows:var(--cbb--grid-auto-rows);}.sm-cbb-grid-gap-column{column-gap:var(--cbb--grid-gap-column);}.sm-cbb-grid-gap-row{row-gap:var(--cbb--grid-gap-row);}'; $grid_style .= "{$md_start}.md-cbb-grid-columns > * {margin:0}.md-cbb-grid-columns{grid-template-columns:var(--cbb--grid-columns);}.md-cbb-grid-rows{grid-template-rows:var(--cbb--grid-rows);}.md-cbb-grid-auto-rows{grid-auto-rows:var(--cbb--grid-auto-rows);}.md-cbb-grid-gap-column{column-gap:var(--cbb--grid-gap-column);}.md-cbb-grid-gap-row{row-gap:var(--cbb--grid-gap-row);}{$end}"; $grid_style .= "{$lg_start}.lg-cbb-grid-columns > * {margin:0}.lg-cbb-grid-columns{grid-template-columns:var(--cbb--grid-columns);}.lg-cbb-grid-rows{grid-template-rows:var(--cbb--grid-rows);}.lg-cbb-grid-auto-rows{grid-auto-rows:var(--cbb--grid-auto-rows);}.lg-cbb-grid-gap-column{column-gap:var(--cbb--grid-gap-column);}.lg-cbb-grid-gap-row{row-gap:var(--cbb--grid-gap-row);}{$end}"; $style .= $grid_style; // Grid item: columnSpan & rowSpan. $grid_item_style = '.sm-cbb-grid-item-column{grid-column:var(--cbb--grid-item-column);}.sm-cbb-grid-item-row{grid-row:var(--cbb--grid-item-row);}.sm-cbb-grid-item-order{order:var(--cbb--grid-item-order);}'; $grid_item_style .= "{$md_start}.md-cbb-grid-item-column{grid-column:var(--cbb--grid-item-column);}.md-cbb-grid-item-row{grid-row:var(--cbb--grid-item-row);}.md-cbb-grid-item-order{order:var(--cbb--grid-item-order);}{$end}"; $grid_item_style .= "{$lg_start}.lg-cbb-grid-item-column{grid-column:var(--cbb--grid-item-column);}.lg-cbb-grid-item-row{grid-row:var(--cbb--grid-item-row);}.lg-cbb-grid-item-order{order:var(--cbb--grid-item-order);}{$end}"; $style .= $grid_item_style; // Accordion gap. $accordion_gap_style = '.sm-cbb-accordion-gap{display:flex;flex-direction:column;gap:var(--cbb--accordion-gap);}.sm-cbb-a-has-border > .is-accordion-item{border-top:var(--cbb--ab-top);}.sm-cbb-a-no-border > .is-accordion-item{border-top:0;}'; $accordion_gap_style .= "{$md_start}.md-cbb-accordion-gap{display:flex;flex-direction:column;gap:var(--cbb--accordion-gap);}.md-cbb-a-has-border > .is-accordion-item{border-top:var(--cbb--ab-top);}.md-cbb-a-no-border > .is-accordion-item{border-top:0;}{$end}"; $accordion_gap_style .= "{$lg_start}.lg-cbb-accordion-gap{display:flex;flex-direction:column;gap:var(--cbb--accordion-gap);}.lg-cbb-a-has-border > .is-accordion-item{border-top:var(--cbb--ab-top);}.lg-cbb-a-no-border > .is-accordion-item{border-top:0;}{$end}"; $style .= $accordion_gap_style; // Accordion padding. // We don't need padding style, because it has a default value. // Sticky offset. $sticky_offset_style = '.is-stick-to-top.sm-cbb-sticky-offset{top: var(--cbb--sticky-offset);}.is-stick-to-bottom.sm-cbb-sticky-offset{bottom: var(--cbb--sticky-offset);}'; $sticky_offset_style .= "{$md_start}.is-stick-to-top.md-cbb-sticky-offset{top: var(--cbb--sticky-offset);}.is-stick-to-bottom.md-cbb-sticky-offset{bottom: var(--cbb--sticky-offset);}{$end}"; $sticky_offset_style .= "{$lg_start}.is-stick-to-top.lg-cbb-sticky-offset{top: var(--cbb--sticky-offset);}.is-stick-to-bottom.lg-cbb-sticky-offset{bottom: var(--cbb--sticky-offset);}{$end}"; $style .= $sticky_offset_style; // Offcanvas. $offcanvas_style = "{$md_start}.is-offcanvas.placement-start,.is-offcanvas.placement-end{width:var(--bb--modal-width--md,25rem);}.is-offcanvas.placement-top,.is-offcanvas.placement-bottom{height:var(--bb--modal-height--md,30vh);}{$end}"; $offcanvas_style .= "{$lg_start}.is-offcanvas.placement-start,.is-offcanvas.placement-end{width:var(--bb--modal-width--lg,25rem);}.is-offcanvas.placement-top,.is-offcanvas.placement-bottom{height:var(--bb--modal-height--lg,30vh);}{$end}"; $style .= $offcanvas_style; // Popover. $popover_style = "{$md_start}.is-popover{width:var(--bb--modal-width--md,auto);height:var(--bb--modal-height--md,auto);}{$end}"; $popover_style .= "{$lg_start}.is-popover{width:var(--bb--modal-width--lg,auto);height:var(--bb--modal-height--lg,auto);}{$end}"; $style .= $popover_style; // Modal. $modal_style = "{$md_start}.is-modal > .bb-modal-dialog{width:var(--bb--modal-width--md,32rem);}.is-modal > .bb-modal-dialog[style*=\"--bb--modal-height--md:\"]{height:var(--bb--modal-height--md);}.modal--custom-position{align-items:var(--bb--modal-v-align--md);justify-content:var(--bb--modal-h-align--md);}{$end}"; $modal_style .= "{$lg_start}.is-modal > .bb-modal-dialog{width:var(--bb--modal-width--md,50rem);}.is-modal > .bb-modal-dialog[style*=\"--bb--modal-height--lg:\"]{height:var(--bb--modal-height--lg);}.modal--custom-position{align-items:var(--bb--modal-v-align--lg);justify-content:var(--bb--modal-h-align--lg);}{$end}"; $style .= $modal_style; // Mobile background. $background_style = '.cbb-mobile-image > .bb\:block-background--img{display:none !important;}.cbb-mobile-image > .is-mobile-image {display:block !important;}'; $background_style .= "@media(min-width:{$md_breakpoint}px){.cbb-mobile-image > .bb\:block-background--img{display:block !important;}.cbb-mobile-image > .is-mobile-image {display:none !important;}}"; $background_style .= "@media(max-width:{$md_breakpoint_max}px){.cbb-mobile-background{background-image: var(--cbb-mobile-background) !important;}}"; $style .= $background_style; return $style; } /** * Render style for all supported blocks * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function render_block_style( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } // Bail if the block has no style. if ( ! $this->has_style( $block, $block_instance ) ) { return $block_content; } // Buil selector. $selector = $this->generate_selector( $block['blockName'], $block_instance ); // Get custom style. $is_in_cache = isset( $this->styles[ $selector ] ); if ( $is_in_cache ) { $block_styles = $this->styles[ $selector ]; } else { $block_styles = $this->get_block_style( $block, $selector, $block_instance ); // Add to the cache. $this->styles[ $selector ] = $block_styles; } if ( empty( $block_styles['style'] ?? '' ) ) { if ( isset( $block_styles['classes'] ) && count( $block_styles['classes'] ) > 1 ) { // There is no style, but we have class-features like visibility. $block_content = $this->add_class_to_block( $block_content, implode( ' ', $block_styles['classes'] ) ); } return $block_content; } if ( ! wp_is_block_theme() ) { // Enqueue style. wp_enqueue_style( $this->feature_style_handle ); } if ( ! $is_in_cache ) { wp_add_inline_style( $this->feature_style_handle, $block_styles['style'] ); } // Add selector to block wrapper element. $block_content = $this->add_class_to_block( $block_content, implode( ' ', $block_styles['classes'] ) ); return $block_content; } /** * Get block custom style * * @param array $block * @param string $selector * @param WP_Block $block_instance * @return string */ private function get_block_style( $block, $selector, $block_instance ) { $style = ''; $class_selector = '.' . $selector; $classes = [ $selector ]; $style_array = []; $responsive_style_array = []; // Get responsive settings. $breakpoints = $this->get_breakpoints(); // Get the settings. $settings = $block['attrs']['boldblocks']; // Features. $features = [ 'padding' => [ 'func_build_responsive_style' => [ $this, 'build_padding_style' ], 'group' => 'spacing', ], 'margin' => [ 'func_build_responsive_style' => [ $this, 'build_margin_style' ], 'group' => 'spacing', ], 'blockGap' => [ 'func_build_responsive_style' => [ $this, 'build_block_gap_style' ], 'group' => 'spacing', ], 'border' => [ 'func_build_responsive_style' => [ $this, 'build_border_style' ] ], 'borderRadius' => [ 'func_build_responsive_style' => [ $this, 'build_border_radius_style' ] ], 'width' => [ 'func_build_responsive_style' => [ $this, 'build_width_style' ] ], 'height' => [ 'func_build_responsive_style' => [ $this, 'build_height_style' ] ], 'aspectRatio' => [ 'func_build_responsive_style' => [ $this, 'build_aspect_ratio_style' ] ], 'textAlignment' => [ 'func_build_responsive_style' => [ $this, 'build_text_align_style' ] ], 'verticalAlignment' => [ 'func_build_responsive_style' => [ $this, 'build_vertical_align_style' ], 'func_build_dependent_style' => [ $this, 'build_vertical_align_dependent_style' ], ], 'justifyAlignment' => [ 'func_build_responsive_style' => [ $this, 'build_justify_align_style' ], 'func_build_dependent_style' => [ $this, 'build_justify_align_dependent_style' ], ], 'transform' => [ 'func_build_responsive_style' => [ $this, 'build_transform_style' ], 'func_build_dependent_style' => [ $this, 'build_transform_dependent_style' ], ], 'hidden' => [ 'func_build_style' => [ $this, 'build_hidden_style' ], 'group' => 'visibility', ], 'columns' => [ 'func_build_responsive_style' => [ $this, 'build_columns_style' ], 'group' => 'grid', 'layout_type' => 'grid', ], 'rows' => [ 'func_build_responsive_style' => [ $this, 'build_rows_style' ], 'group' => 'grid', 'layout_type' => 'grid', ], 'autoRows' => [ 'func_build_responsive_style' => [ $this, 'build_auto_rows_style' ], 'group' => 'grid', 'layout_type' => 'grid', ], 'gap' => [ 'func_build_responsive_style' => [ $this, 'build_gap_style' ], 'group' => 'grid', 'layout_type' => 'grid', ], 'columnSpan' => [ 'func_build_responsive_style' => [ $this, 'build_column_span_style' ], 'group' => 'gridItem', 'layout_type' => 'gridItem', ], 'rowSpan' => [ 'func_build_responsive_style' => [ $this, 'build_row_span_style' ], 'group' => 'gridItem', 'layout_type' => 'gridItem', ], 'accordionGap' => [ 'func_build_responsive_style' => [ $this, 'build_accordion_gap_style' ], 'func_build_dependent_style' => [ $this, 'build_accordion_gap_dependent_style' ], 'group' => 'accordion', 'setting_name' => 'gap', 'layout_type' => 'accordion', ], 'accordionPadding' => [ 'func_build_responsive_style' => [ $this, 'build_accordion_padding_style' ], 'group' => 'accordion', 'setting_name' => 'padding', 'layout_type' => 'accordion', ], 'accordionBorder' => [ 'func_build_style' => [ $this, 'build_accordion_border_style' ], 'group' => 'accordion', 'setting_name' => 'border', 'layout_type' => 'accordion', ], 'accordionRadius' => [ 'func_build_style' => [ $this, 'build_accordion_radius_style' ], 'group' => 'accordion', 'setting_name' => 'radius', 'layout_type' => 'accordion', ], 'stickyOffset' => [ 'func_build_responsive_style' => [ $this, 'build_sticky_offset_style' ], 'group' => 'sticky', 'setting_name' => 'offset', ], ]; $block_layout = apply_filters( 'cbb_get_block_layout', $block_instance->block_type->supports['layoutType'] ?? '', $block ); foreach ( $features as $feature => $feature_args ) { if ( isset( $feature_args['layout_type'] ) && $block_layout !== $feature_args['layout_type'] ) { continue; } if ( ! in_array( $feature, [ 'border', 'hidden' ], true ) && 'accordionItem' === $block_layout ) { continue; } if ( ! in_array( $feature, [ 'border', 'hidden', 'accordionGap', 'accordionPadding', 'accordionBorder', 'accordionRadius' ], true ) && 'accordion' === $block_layout ) { continue; } if ( 'stickyOffset' === $feature ) { // Not supported block layouts. if ( ! in_array( $block_layout, [ 'standalone', 'gridItem' ], true ) ) { continue; } // Not enable sticky or enabling scrolling up. if ( ! ( $settings['sticky']['enable'] ?? false ) || ( $settings['sticky']['isStickOnScrollingUp'] ?? false ) ) { continue; } } $group_name = $feature_args['group'] ?? null; $setting_name = $feature_args['setting_name'] ?? $feature; if ( $this->is_valid_value( $group_name ) ) { $setting_value = $settings[ $group_name ][ $setting_name ] ?? null; } else { $setting_value = $settings[ $setting_name ] ?? null; } if ( empty( $setting_value ) ) { continue; } $args = array_merge( [ 'settings' => $settings, 'setting_value' => $setting_value, 'feature' => $feature, 'selector' => $class_selector, 'breakpoints' => $breakpoints, 'block' => $block, 'block_layout' => $block_layout, ], $feature_args ); if ( \is_callable( $args['func_build_style'] ?? '' ) ) { $this->build_style( array_merge( $args, [ 'value' => $setting_value ] ), $style_array, $classes ); } if ( \is_callable( $args['func_build_responsive_style'] ?? '' ) && $this->is_valid_responsive_value( $args['setting_value'] ) ) { $this->build_responsive_style( $args, $responsive_style_array, $classes ); } } if ( $style_array ) { foreach ( $style_array as $item_style ) { $style .= $item_style; } } if ( $responsive_style_array ) { foreach ( $responsive_style_array as $responsive_style ) { $style .= $responsive_style; } } $custom_css = $this->get_custom_css_style( $block ); if ( $custom_css ) { // Get & refine custom style. $custom_style = $this->refine_custom_value( $custom_css['value'] ?? '', [ 'selector' => $class_selector ], 'CSS' ); if ( $custom_style ) { $style .= $custom_style; } } // Allow altering the style. $style = apply_filters( 'cbb_get_block_style', $style, [ 'settings' => $settings, 'selector' => $class_selector, 'breakpoints' => $breakpoints, 'block' => $block, 'block_layout' => $block_layout, ] ); return [ 'style' => $style, 'classes' => $classes, ]; } /** * Build custom style * * @param array $args * @param array &$style_array * @param array &$classes * @return string */ private function build_style( $args, &$style_array, &$classes ) { $return_value = false; $func_build_style = $args['func_build_style'] ?? ''; if ( ! \is_callable( $func_build_style ) ) { return $return_value; } $setting_value = $args['setting_value'] ?? []; if ( ! $this->is_valid_value( $setting_value ) ) { return $return_value; } // Build style. return $func_build_style( $args, $style_array, $classes ); } /** * Build style for padding * * @param array $args * @return string */ private function build_padding_style( $args ) { $style_array = []; $value = $args['value']; if ( is_array( $value ) ) { if ( isset( $value['top'] ) && is_string( $value['top'] ) ) { $top_style = $this->get_spacing_value( $value['top'] ); if ( $this->is_valid_value( $top_style ) ) { $style_array['--cbb--padding-top'] = $top_style; } } if ( isset( $value['right'] ) && is_string( $value['right'] ) ) { $right_style = $this->get_spacing_value( $value['right'] ); if ( $this->is_valid_value( $right_style ) ) { $style_array['--cbb--padding-right'] = $right_style; } } if ( isset( $value['bottom'] ) && is_string( $value['bottom'] ) ) { $bottom_style = $this->get_spacing_value( $value['bottom'] ); if ( $this->is_valid_value( $bottom_style ) ) { $style_array['--cbb--padding-bottom'] = $bottom_style; } } if ( isset( $value['left'] ) && is_string( $value['left'] ) ) { $left_style = $this->get_spacing_value( $value['left'] ); if ( $this->is_valid_value( $left_style ) ) { $style_array['--cbb--padding-left'] = $left_style; } } } return $style_array; } /** * Build style for margin * * @param array $args * @return string */ private function build_margin_style( $args ) { $style_array = []; $value = $args['value']; if ( is_array( $value ) ) { if ( isset( $value['top'] ) && is_string( $value['top'] ) ) { $top_style = $this->get_spacing_value( $value['top'] ); if ( $this->is_valid_value( $top_style ) ) { $style_array['--cbb--margin-top'] = $top_style; } } if ( isset( $value['right'] ) && is_string( $value['right'] ) ) { $right_style = $this->get_spacing_value( $value['right'] ); if ( $this->is_valid_value( $right_style ) ) { $style_array['--cbb--margin-right'] = $right_style; } } if ( isset( $value['bottom'] ) && is_string( $value['bottom'] ) ) { $bottom_style = $this->get_spacing_value( $value['bottom'] ); if ( $this->is_valid_value( $bottom_style ) ) { $style_array['--cbb--margin-bottom'] = $bottom_style; } } if ( isset( $value['left'] ) && is_string( $value['left'] ) ) { $left_style = $this->get_spacing_value( $value['left'] ); if ( $this->is_valid_value( $left_style ) ) { $style_array['--cbb--margin-left'] = $left_style; } } } return $style_array; } /** * Build style for gap * * @param array $args * @return string */ private function build_block_gap_style( $args ) { $style_array = []; $value = $args['value']; if ( is_array( $value ) && ( $value['top'] ?? false ) ) { $gap_style = $this->get_spacing_value( $value['top'] ); if ( $this->is_valid_value( $gap_style ) ) { $style_array['--cbb--block-gap'] = $gap_style; } } return $style_array; } /** * Build style for border * * @param array $args * @return string */ private function build_border_style( $args ) { $style_array = []; $value = $args['value']; if ( is_array( $value ) ) { if ( ( $value['top'] ?? false ) || ( $value['right'] ?? false ) || ( $value['bottom'] ?? false ) || ( $value['left'] ?? false ) ) { $top = $value['top'] ?? null; $right = $value['right'] ?? null; $bottom = $value['bottom'] ?? null; $left = $value['left'] ?? null; } else { $top = $value; $right = $value; $bottom = $value; $left = $value; } if ( $top ) { $top_style = $this->build_border_side_css_value( $top, 'top' ); if ( $top_style ) { $style_array['--cbb--border-top'] = $top_style; } } if ( $right ) { $right_style = $this->build_border_side_css_value( $right, 'right' ); if ( $right_style ) { $style_array['--cbb--border-right'] = $right_style; } } if ( $bottom ) { $bottom_style = $this->build_border_side_css_value( $bottom, 'bottom' ); if ( $bottom_style ) { $style_array['--cbb--border-bottom'] = $bottom_style; } } if ( $left ) { $left_style = $this->build_border_side_css_value( $left, 'left' ); if ( $left_style ) { $style_array['--cbb--border-left'] = $left_style; } } } return $style_array; } /** * Build the css variable for border by side * * @param array $value * @param string $side * @return string */ private function build_border_side_css_value( $value, $side ) { $style_array = []; if ( is_array( $value ) ) { if ( $this->is_valid_value( $value['width'] ?? null ) && is_string( $value['width'] ) ) { $style_array[] = $value['width']; } if ( $this->is_valid_value( $value['style'] ?? null ) && is_string( $value['style'] ) ) { $style_array[] = $value['style']; } if ( $this->is_valid_value( $value['color'] ?? null ) ) { $color = $this->get_css_color_value( $value['color'] ); if ( $color ) { $style_array[] = $color; } } } return implode( ' ', $style_array ); } /** * Build style for radius * * @param array $args * @return string */ private function build_border_radius_style( $args ) { $style_array = []; $value = $args['value']; if ( is_array( $value ) ) { $css_value = ''; $top_left = $value['top-left'] ?? 0; $top_right = $value['top-right'] ?? 0; $bottom_right = $value['bottom-right'] ?? 0; $bottom_left = $value['bottom-left'] ?? 0; if ( ! empty( $top_left ) || ! empty( $top_right ) || ! empty( $bottom_right ) || ! empty( $bottom_left ) ) { $css_value = "{$top_left} {$top_right} {$bottom_right} {$bottom_left}"; } if ( $args['settings']['enableEllipticalRadius'] ?? false ) { $top_left = $value['top-left-vertical'] ?? 0; $top_right = $value['top-right-vertical'] ?? 0; $bottom_right = $value['bottom-right-vertical'] ?? 0; $bottom_left = $value['bottom-left-vertical'] ?? 0; if ( ! empty( $top_left ) || ! empty( $top_right ) || ! empty( $bottom_right ) || ! empty( $bottom_left ) ) { $css_value = "{$css_value} / {$top_left} {$top_right} {$bottom_right} {$bottom_left}"; } } if ( $css_value ) { $style_array['--cbb--border-radius'] = $css_value; } } return $style_array; } /** * Build style for width * * @param array $args * @return string */ private function build_width_style( $args ) { $style_array = []; $value = $args['value']; if ( is_array( $value ) && ( $value['value'] ?? false ) ) { $width_style = $value['value']; if ( $this->is_valid_value( $width_style ) ) { $style_array['--cbb--width'] = $width_style; } } return $style_array; } /** * Build style for height * * @param array $args * @return string */ private function build_height_style( $args ) { $style_array = []; $value = $args['value']; if ( is_array( $value ) && ( $value['value'] ?? false ) ) { $style = $value['value']; if ( $this->is_valid_value( $style ) ) { $style_array['--cbb--height'] = $style; } } return $style_array; } /** * Build style for aspect ratio * * @param array $args * @return string */ private function build_aspect_ratio_style( $args ) { $style_array = []; $value = $args['value']; if ( is_array( $value ) && ( $value['value'] ?? false ) ) { $style = $value['value']; if ( $this->is_valid_value( $style ) ) { $style_array['--cbb--aspect-ratio'] = $style; } } return $style_array; } /** * Build style for text alignment * * @param array $args * @return string */ private function build_text_align_style( $args ) { $style_array = []; $value = $args['value']; if ( $this->is_valid_value( $value ) ) { $style_array['--cbb--text-align'] = $value; } return $style_array; } /** * Build style for vertical alignment * * @param array $args * @return string */ private function build_vertical_align_style( $args ) { $style_array = []; $value = $args['value'] ?? null; if ( $this->is_valid_value( $value ) ) { if ( 'top' === $value ) { $value = 'start'; } elseif ( 'bottom' === $value ) { $value = 'end'; } $style_array['--cbb--v-align'] = $value; } return $style_array; } /** * Build dependent style for vertical alignment * * @param array $args * @param array &$classes * @return string */ private function build_vertical_align_dependent_style( $args, &$classes ) { $style = ''; $value = $args['setting_value'] ?? null; if ( $this->is_valid_value( $value ) ) { $block_layout = $args['block_layout'] ?? ''; if ( 'grid' === $block_layout ) { $class = 'cbb-align-items'; } elseif ( 'gridItem' === $block_layout ) { $class = 'cbb-align-self'; } else { $class = 'cbb-layout-grid'; } if ( ! in_array( $class, $classes, true ) ) { $classes[] = $class; } } return $style; } /** * Build style for justify alignment * * @param array $args * @return string */ private function build_justify_align_style( $args ) { $style_array = []; $value = $args['value'] ?? null; if ( $this->is_valid_value( $value ) ) { $block_layout = $args['block_layout'] ?? ''; if ( in_array( $block_layout, [ 'standalone', 'carouselItem', 'vstackItem' ], true ) ) { if ( 'left' === $value ) { $value = 'start'; } elseif ( 'right' === $value ) { $value = 'end'; } } $style_array['--cbb--h-align'] = $value; } return $style_array; } /** * Build dependent style for justify alignment * * @param array $args * @param array &$classes * @return string */ private function build_justify_align_dependent_style( $args, &$classes ) { $style = ''; $value = $args['setting_value'] ?? null; if ( $this->is_valid_value( $value ) ) { $block_layout = $args['block_layout'] ?? ''; if ( 'grid' === $block_layout ) { $class = 'cbb-justify-items'; } elseif ( 'gridItem' === $block_layout ) { $class = 'cbb-justify-self'; } else { // if ( in_array( $block_layout, [ 'standalone', 'carouselItem', 'vstackItem' ], true ) ) {. $class = 'cbb-layout-grid'; } if ( ! in_array( $class, $classes, true ) ) { $classes[] = $class; } } return $style; } /** * Build style for transform * * @param array $args * @return string */ private function build_transform_style( $args ) { $style_array = []; $value = $args['value']; if ( ! empty( $value ) && is_array( $value ) ) { $style = implode( ' ', array_filter( array_map( [ $this, 'build_transform_item' ], $value ) ) ); if ( $this->is_valid_value( $value ) ) { $style_array['--cbb--transform'] = $style; } } return $style_array; } /** * Build transform item: translate, rotate, scale, skew * * @return string */ private function build_transform_item( $transform_item ) { $style = ''; if ( is_array( $transform_item ) && count( $transform_item ) > 0 ) { // Get tranform type. $transform_type = array_keys( $transform_item )[0]; $transform_value = $transform_item[ $transform_type ] ?? ''; if ( $transform_type === 'rotate' ) { if ( is_numeric( $transform_value ) ) { $style = "rotate({$transform_value}deg)"; } } elseif ( is_array( $transform_value ) ) { $suffix = 'skew' === $transform_type ? 'deg' : ''; $x = $transform_value['x'] ?? ''; $y = $transform_value['y'] ?? ''; $x_value = preg_replace( '/[^0-9.]/', '', $x ); $y_value = preg_replace( '/[^0-9.]/', '', $y ); if ( \is_numeric( $x_value ) || \is_numeric( $y_value ) ) { if ( ! \is_numeric( $x_value ) ) { if ( 'scale' === $transform_type ) { $x = 1; } else { $x = 0; } } if ( ! \is_numeric( $y_value ) ) { if ( 'scale' === $transform_type ) { $y = 1; } else { $y = 0; } } $style = "{$transform_type}({$x}{$suffix}, {$y}{$suffix})"; } } } return $style; } /** * Build dependent style for transform * * @param array $args * @param array &$classes * @return string */ private function build_transform_dependent_style( $args, &$classes ) { $transform_origin = $args['settings']['transformOrigin'] ?? []; $x = $transform_origin['x'] ?? .5; if ( ! \is_numeric( $x ) ) { $x = .5; } $x = round( $x, 2 ) * 100; $y = $transform_origin['y'] ?? .5; if ( ! \is_numeric( $y ) ) { $y = .5; } $y = round( $y, 2 ) * 100; return "{$args['selector']}{--cbb--transform-origin: {$x}% {$y}%;}"; } /** * Build style for hidden * * @param array $args * @param array &$style_array * @param array &$classes * @return array */ private function build_hidden_style( $args, &$style_array, &$classes ) { $value = $args['value'] ?? null; if ( ! empty( $value ) && is_array( $value ) ) { foreach ( $value as $breakpoint ) { $class = "cbb-hidden-{$breakpoint}"; if ( ! in_array( $class, $classes, true ) ) { $classes[] = $class; } } } } /** * Build style for grid columns * * @param array $args * @return string */ private function build_columns_style( $args ) { $style_array = []; $value = $args['value'] ?? null; if ( $this->is_valid_value( $value ) ) { $style_array['--cbb--grid-columns'] = $value; } return $style_array; } /** * Build style for grid rows * * @param array $args * @return string */ private function build_rows_style( $args ) { $style_array = []; $value = $args['value'] ?? null; if ( $this->is_valid_value( $value ) ) { $style_array['--cbb--grid-rows'] = $value; } return $style_array; } /** * Build style for grid auto rows * * @param array $args * @return string */ private function build_auto_rows_style( $args ) { $style_array = []; $value = $args['value'] ?? null; if ( $this->is_valid_value( $value ) ) { $style_array['--cbb--grid-auto-rows'] = $value; } return $style_array; } /** * Build style for grid gap * * @param array $args * @return string */ private function build_gap_style( $args ) { $style_array = []; $value = $args['value'] ?? null; if ( $value && is_array( $value ) ) { $column_gap = $value['column'] ?? null; if ( $this->is_valid_value( $column_gap ) ) { $style_array['--cbb--grid-gap-column'] = $column_gap; } $row_gap = $value['row'] ?? null; if ( $this->is_valid_value( $row_gap ) ) { $style_array['--cbb--grid-gap-row'] = $row_gap; } } return $style_array; } /** * Build style for grid item column span * * @param array $args * @return string */ private function build_column_span_style( $args ) { $style_array = []; $value = $args['value'] ?? null; if ( $value && is_array( $value ) ) { $start = $value['start'] ?? null; $span = $value['span'] ?? null; $order = $value['order'] ?? null; if ( $this->is_valid_value( $start ) || $this->is_valid_value( $span ) ) { $start = $this->is_valid_value( $start ) ? $start : 'auto'; $span = $this->is_valid_value( $span ) ? $span : 'auto'; if ( 'auto' !== $span && absint( $span ) > 0 ) { $span = "span {$span}"; } $style_array['--cbb--grid-item-column'] = "{$start} / {$span}"; } if ( $this->is_valid_value( $order ) && $order !== 'auto' ) { $style_array['--cbb--grid-item-order'] = $order; } } return $style_array; } /** * Build style for grid item row span * * @param array $args * @return string */ private function build_row_span_style( $args ) { $style_array = []; $value = $args['value'] ?? null; if ( $value && is_array( $value ) ) { $start = $value['start'] ?? null; $span = $value['span'] ?? null; if ( $this->is_valid_value( $start ) || $this->is_valid_value( $span ) ) { $start = $this->is_valid_value( $start ) ? $start : 'auto'; $span = $this->is_valid_value( $span ) ? $span : 'auto'; if ( 'auto' !== $span && absint( $span ) > 0 ) { $span = "span {$span}"; } $style_array['--cbb--grid-item-row'] = "{$start} / {$span}"; } } return $style_array; } /** * Build style for accordion gap * * @param array $args * @return string */ private function build_accordion_gap_style( $args ) { $style_array = []; $value = $args['value']; if ( $this->is_valid_value( $value ) ) { $style_array['--cbb--accordion-gap'] = $this->get_spacing_value( $value ); } return $style_array; } /** * Build dependent style for accordion gap * * @param array $args * @param array &$classes * @return string */ private function build_accordion_gap_dependent_style( $args, &$classes ) { $style = ''; $setting_values = $args['setting_values']; if ( $this->is_valid_value( $setting_values ) && is_array( $setting_values ) ) { foreach ( $setting_values as $breakpoint => $value ) { if ( strpos( $value, 'var:preset|spacing|' ) !== false || absint( $value ) > 0 ) { $classes[] = "{$breakpoint}-cbb-a-has-border"; } else { $classes[] = "{$breakpoint}-cbb-a-no-border"; } } } return $style; } /** * Build style for accordion gap * * @param array $args * @return string */ private function build_accordion_padding_style( $args ) { $style_array = []; $value = $args['value']; if ( $value && is_array( $value ) ) { $x = $value['x'] ?? null; if ( ! $this->is_valid_value( $x ) ) { $x = '1.25rem'; } $x = $this->get_spacing_value( $x ); $y = $value['y'] ?? null; if ( ! $this->is_valid_value( $y ) ) { $y = '1rem'; } $y = $this->get_spacing_value( $y ); $style_array['--cbb--accordion-padding'] = "{$y} {$x}"; } return $style_array; } /** * Build style for accordion border * * @param array $args * @return string */ private function build_accordion_border_style( $args, &$style_array ) { $value = $args['value'] ?? null; if ( $value && is_array( $value ) ) { if ( ( $value['top'] ?? false ) || ( $value['right'] ?? false ) || ( $value['bottom'] ?? false ) || ( $value['left'] ?? false ) ) { $border_styles = $this->build_border_style( $args ); } else { $border_styles = $this->build_border_style( [ 'value' => [ 'top' => $value, 'right' => $value, 'bottom' => $value, 'left' => $value, ], ] ); } if ( $border_styles ) { $border_style = implode( ';', array_map( function ( $attr_key ) use ( $border_styles ) { return "{$attr_key}:{$border_styles[ $attr_key ]}"; }, array_keys( $border_styles ) ) ); $style_array[] = "{$args['selector']}{{$border_style};}"; } } return $style_array; } /** * Build style for accordion radius * * @param array $args * @return string */ private function build_accordion_radius_style( $args, &$style_array ) { $value = $args['value'] ?? null; if ( $value ) { if ( is_array( $value ) ) { $top_left = $value['topLeft'] ?? 0; $top_right = $value['topRight'] ?? 0; $bottom_right = $value['bottomRight'] ?? 0; $bottom_left = $value['bottomLeft'] ?? 0; $css_value = "{$top_left} {$top_right} {$bottom_right} {$bottom_left}"; } elseif ( is_string( $value ) ) { $css_value = $value; } $style_array[] = "{$args['selector']}{--cbb--border-radius:{$css_value};}"; } return $style_array; } /** * Build style for sticky offset * * @param array $args * @return array */ private function build_sticky_offset_style( $args ) { $style_array = []; $value = $args['value']; if ( $value && is_array( $value ) ) { $offset = $value['value'] ?? null; if ( $this->is_valid_value( $offset ) ) { $style_array['--cbb--sticky-offset'] = $offset; } } return $style_array; } /** * Check whether current block has custom style or not. * * @param [type] $block * @return boolean */ private function get_custom_css_style( $block ) { // There is no boldblocks value. if ( ! isset( $block['attrs']['boldblocks'] ) || ! isset( $block['attrs']['boldblocks']['customCSS'] ) ) { return false; } $custom_css = $block['attrs']['boldblocks']['customCSS']; if ( ! is_array( $custom_css ) || empty( $custom_css['value'] ) ) { return false; } return $custom_css; } /** * Render dynamic link to post element * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function build_block_link_to_post( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } // There is no post context. $post_id = $block_instance->context['postId'] ?? false; if ( ! $post_id ) { return $block_content; } // There is no background value. if ( ! ( $block['attrs']['boldblocks']['background'] ?? false ) ) { return $block_content; } $background = $block['attrs']['boldblocks']['background']; $media_type = $background['mediaType'] ?? 'image'; if ( 'image' === $media_type && ( $background['image']['useFeaturedImage'] ?? false ) && ( $background['image']['linkToPost'] ?? false ) ) { $block_content = $this->add_inner_content_to_block( $block_content, '' ); } return $block_content; } /** * Render dynamic background image * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function build_block_background( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } // Ignore legacy markup. if ( strpos( $block['innerHTML'] ?? '', 'bb:block-background' ) !== false ) { return $block_content; } $context_background = []; $meta_name = $block['attrs']['metadata']['name'] ?? ''; if ( $meta_name && 'cbb/block-overrides' === ( $block['attrs']['metadata']['bindings']['background']['source'] ?? '' ) ) { $context_background = $block_instance->context['cbb/block-overrides'][ $meta_name ]['background'] ?? []; } $background = $block['attrs']['boldblocks']['background'] ?? []; if ( $context_background ) { $background = array_replace_recursive( $background, $context_background ); } // There is no background value. if ( ! $background ) { return $block_content; } $media_type = $background['mediaType'] ?? 'image'; $media_url = $background[ $media_type ]['url'] ?? ''; if ( 'image' === $media_type ) { if ( $background['image']['useFeaturedImage'] ?? false ) { return $this->build_thumbnail_background( $background, $block_content, $block, $block_instance ); } elseif ( $media_url ) { return $this->build_custom_image_background( $background, $block_content, $block, $block_instance ); } } elseif ( 'video' === $media_type && $media_url ) { return $this->build_video_background( $background, $block_content, $block, $block_instance ); } return $block_content; } /** * Build the background using custom image * * @param array $background * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ private function build_custom_image_background( $background, $block_content, $block, $block_instance ) { $block_class = 'bb:has-background bb:has-background--image'; $block_background = $this->build_image_background( $background['image']['id'] ?? false, $background, $block_class ); if ( strpos( $block['innerHTML'] ?? '', $block_background['block_class'] ) === false ) { $block_content = $this->add_class_to_block( $block_content, $block_background['block_class'] ); } $block_content = $this->add_inner_content_to_block( $block_content, $block_background['background_markup'] ); return $block_content; } /** * Build the background using post thumbnail * * @param array $background * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ private function build_thumbnail_background( $background, $block_content, $block, $block_instance ) { $post_id = $block_instance->context['postId'] ?? false; if ( ! $post_id ) { return $block_content; } $image_id = get_post_thumbnail_id( $post_id ); $block_class = 'bb:has-background bb:has-background--image'; if ( $image_id ) { $block_background = $this->build_image_background( $image_id, $background, $block_class ); if ( strpos( $block['innerHTML'] ?? '', $block_background['block_class'] ) === false ) { $block_content = $this->add_class_to_block( $block_content, $block_background['block_class'] ); } $block_content = $this->add_inner_content_to_block( $block_content, $block_background['background_markup'] ); } else { // Add custom background as a fallback. if ( $background['image']['url'] ?? '' ) { $block_content = $this->add_class_to_block( $block_content, 'has-no-thumbnail' ); $block_content = $this->build_custom_image_background( $background, $block_content, $block, $block_instance ); } else { $block_content = $this->add_class_to_block( $block_content, $block_class . ' has-no-thumbnail' ); } } return $block_content; } /** * Build image background * * @param int $image_id * @param array $background * @param string $block_class * @return array */ private function build_image_background( $image_id, $background, $block_class ) { $settings = $background['settings'] ?? []; $media = $background['image'] ?? []; $mobile_background = ! ( $media['useFeaturedImage'] ?? false ) && ( $media['hasMobileBackground'] ?? false ) && ( $media['mobileBackground']['url'] ?? '' ) ? $media['mobileBackground'] : false; $background_classes = [ 'bb:block-background bb:block-background--image cbb-bg-image' ]; $background_position = round( ( $settings['focalPoint']['x'] ?? .5 ) * 100 ) . '% ' . round( ( $settings['focalPoint']['y'] ?? .5 ) * 100 ) . '%'; $image_element = ''; $dataset = []; $image_size = $media['size'] ?? 'full'; $is_internal_image = false; $image_url = $image_id ? wp_get_attachment_image_url( $image_id, $image_size ) : false; if ( $image_url ) { $is_internal_image = true; } else { $image_url = $media['url'] ?? ''; } $custom_alt_text = $media['customAlt'] ?? ''; $object_fit = $settings['objectFit'] ?? 'cover'; if ( empty( $object_fit ) ) { $object_fit = 'cover'; } $img_style = 'display:block;width:100%;height:100%;object-fit:' . $object_fit . ';object-position:' . $background_position . ';'; $background_styles = []; if ( $settings['isImgElement'] ?? false ) { $attrs = [ 'style' => esc_attr( $img_style ), 'class' => 'bb:block-background--img', ]; $loading_priority = $settings['loadingPriority'] ?? ''; if ( $loading_priority ) { if ( $loading_priority === 'lazy' ) { $attrs['loading'] = 'lazy'; } elseif ( in_array( $loading_priority, [ 'high', 'low' ], true ) ) { $attrs['fetchpriority'] = $loading_priority; } } if ( $is_internal_image ) { $alt = trim( wp_strip_all_tags( get_post_meta( $image_id, '_wp_attachment_image_alt', true ) ) ); if ( ! $alt ) { $attrs['alt'] = $custom_alt_text; } $image_element = wp_get_attachment_image( $image_id, $image_size, false, $attrs ); } else { $image_element = $this->generate_image_element( $image_url, array_merge( $attrs, [ 'alt' => $custom_alt_text ] ) ); } if ( $mobile_background ) { $background_classes[] = 'cbb-mobile-image'; $attrs['class'] .= ' is-mobile-image'; $mobile_image = ''; if ( $mobile_background['id'] ?? false ) { $alt = trim( wp_strip_all_tags( get_post_meta( $mobile_background['id'], '_wp_attachment_image_alt', true ) ) ); $attrs['alt'] = $alt ? $alt : $custom_alt_text; $mobile_image = wp_get_attachment_image( $mobile_background['id'], $image_size, false, $attrs ); } if ( ! $mobile_image ) { $mobile_image = $this->generate_image_element( $mobile_background['url'], array_merge( $attrs, [ 'alt' => $custom_alt_text ] ) ); } $image_element .= $mobile_image; } } else { $image_as_background = $this->get_background_image_url( $image_url ); $background_styles = [ 'background-image' => 'url(' . $image_as_background . ')', 'background-position' => $background_position, ]; if ( ! empty( $settings['isFixed'] ) ) { $background_styles['background-attachment'] = 'fixed'; } $background_styles['background-repeat'] = $settings['repeat'] ?? 'no-repeat'; $background_styles['background-size'] = $settings['size'] ?? 'cover'; if ( $mobile_background ) { $background_styles['--cbb-mobile-background'] = "url('{$this->get_background_image_url( $mobile_background['url'] )}')"; $background_classes[] = 'cbb-mobile-background'; } } $animation_type = $settings['animation']['type'] ?? ''; $animation_settings = $settings['animation']['settings'] ?? []; if ( $animation_type && 'none' !== $animation_type ) { $background_classes[] = $animation_type; if ( in_array( $animation_type, [ 'bg-scroll-horizontal', 'bg-scroll-vertical' ], true ) ) { if ( ! ( $settings['isImgElement'] ?? false ) ) { if ( $this->has_animation_setting_value( 'scroll', 'duration', $animation_settings ) ) { $background_styles['animation-duration'] = $this->get_animation_setting_value( 'scroll', 'duration', $animation_settings ) . 's'; } if ( $background_styles['background-repeat'] !== 'repeat' ) { $background_styles['background-repeat'] = 'bg-scroll-horizontal' === $animation_type ? 'repeat-x' : 'repeat-y'; } if ( $this->has_animation_setting_value( 'scroll', 'reverseDirection', $animation_settings ) ) { $background_classes[] = 'is-reverse'; } } } elseif ( 'bg-parallax' === $animation_type ) { unset( $background_styles['background-attachment'] ); $dataset['data-speed'] = $this->get_animation_setting_value( 'parallax', 'speed', $animation_settings, 0.5 ); if ( $this->get_animation_setting_value( 'parallax', 'opacity', $animation_settings, '' ) ) { $dataset['data-opacity'] = 'true'; } if ( $this->get_animation_setting_value( 'parallax', 'disableParallax', $animation_settings, '' ) ) { $dataset['data-disable-parallax'] = 'true'; $breakpoint = $this->get_animation_setting_value( 'parallax', 'disableParallaxBreakpoint', $animation_settings ); if ( ! $breakpoint ) { $breakpoint = 767; } $dataset['data-disable-parallax-breakpoint'] = $breakpoint; } } elseif ( 'bg-zoom' === $animation_type ) { if ( isset( $animation_settings['zoom']['initialScale'] ) ) { $background_styles['--cbb--zoom-initial-scale'] = $animation_settings['zoom']['initialScale']; } if ( isset( $animation_settings['zoom']['scale'] ) ) { $background_styles['--cbb--zoom-scale'] = $animation_settings['zoom']['scale']; } if ( isset( $animation_settings['zoom']['duration'] ) ) { $background_styles['--cbb--zoom-duration'] = $animation_settings['zoom']['duration'] . 's'; } if ( isset( $animation_settings['zoom']['timingFunction'] ) ) { $background_styles['--cbb--zoom-timing-function'] = $animation_settings['zoom']['timingFunction']; } $zoom_event = $animation_settings['zoom']['event'] ?? 'hover'; $background_classes[] = "bg-zoom-{$zoom_event}"; if ( 'reveal' === $zoom_event ) { $dataset['data-reveal-animation'] = esc_attr( wp_json_encode( [ 'name' => 'bgZoom', 'animation' => 'bgZoom var(--cbb--zoom-duration) var(--cbb--zoom-timing-function)', 'multipleTimes' => $animation_settings['zoom']['multipleTimes'] ?? false, 'forwards' => true, ] ) ); } if ( ! empty( $animation_settings['zoom']['withOpacity'] ) ) { $background_styles['--cbb--zoom-initial-opacity'] = $animation_settings['zoom']['initialOpacity'] ?? 0; $background_styles['--cbb--zoom-opacity'] = $animation_settings['zoom']['opacity'] ?? 1; } } elseif ( 'bg-zoomIn' === $animation_type ) { if ( isset( $animation_settings['zoomIn']['initialScale'] ) ) { $background_styles['--cbb--zoom-initial-scale'] = $animation_settings['zoomIn']['initialScale']; } if ( isset( $animation_settings['zoomIn']['duration'] ) ) { $background_styles['--cbb--zoom-duration'] = $animation_settings['zoomIn']['duration'] . 's'; } if ( isset( $animation_settings['zoomIn']['timingFunction'] ) ) { $background_styles['--cbb--zoom-timing-function'] = $animation_settings['zoomIn']['timingFunction']; } if ( ! empty( $animation_settings['zoomIn']['withOpacity'] ) ) { $background_styles['--cbb--zoom-initial-opacity'] = $animation_settings['zoomIn']['initialOpacity'] ?? 0; $background_styles['--cbb--zoom-opacity'] = $animation_settings['zoomIn']['opacity'] ?? 1; } $dataset['data-reveal-animation'] = esc_attr( wp_json_encode( [ 'name' => 'bgZoomIn', 'animation' => 'bgZoomIn var(--cbb--zoom-duration) var(--cbb--zoom-timing-function)', 'multipleTimes' => $animation_settings['zoomIn']['multipleTimes'] ?? false, 'forwards' => true, ] ) ); } } $background_style = $background_styles ? array_reduce( array_keys( $background_styles ), function ( $carry, $key ) use ( $background_styles ) { return $carry . $key . ':' . $background_styles[ $key ] . ';'; }, '' ) : ''; if ( $background_style ) { $background_style = ' style="' . $background_style . '"'; } // Get image full size. $image_full_size = $is_internal_image ? $this->generate_image_full_attributes( $image_id ) : false; $dataset['data-src'] = $image_full_size ? $image_full_size['src'] : $image_url; if ( $image_full_size ) { $dataset['data-width'] = $image_full_size['width']; $dataset['data-height'] = $image_full_size['height']; } $data_attribute = $dataset ? array_reduce( array_keys( $dataset ), function ( $carry, $key ) use ( $dataset ) { return $carry . ' ' . $key . '="' . esc_attr( $dataset[ $key ] ) . '"'; }, ' ' ) : ''; $background_image = sprintf( '
%4$s
', \implode( ' ', $background_classes ), $background_style, $data_attribute, $image_element ); if ( $animation_type && 'none' !== $animation_type ) { $block_class .= ' js-animation-' . $animation_type; } return [ 'background_markup' => $background_image, 'block_class' => $block_class, ]; } /** * Generate data for full size of an image * * @param int $image_id * @return array */ private function generate_image_full_attributes( $image_id ) { $image = wp_get_attachment_image_src( $image_id, 'full' ); if ( $image ) { list( $src, $width, $height ) = $image; return [ 'src' => $src, 'width' => $width, 'height' => $height, ]; } return []; } /** * Generate img tag from an image url * * @param string $image_url * @param array $attrs * @return string */ private function generate_image_element( $image_url, $attrs ) { $attr_html = ''; foreach ( $attrs as $name => $value ) { $attr_html .= " $name=" . '"' . esc_attr( $value ) . '"'; } // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage return sprintf( '', esc_attr( $image_url ), $attr_html ); } /** * Get image as background url * * @param string $image_url * @return string */ private function get_background_image_url( $image_url ) { return strpos( $image_url, 'data:image/svg+xml' ) === 0 ? '"' . esc_attr( $image_url ) . '"' : esc_attr( $image_url ); } /** * Render animations * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function build_block_animations( $block_content, $block, $block_instance ) { // There is no animations value. if ( ! isset( $block['attrs']['boldblocks'] ) || ! isset( $block['attrs']['boldblocks']['animations'] ) ) { return $block_content; } // Get animations. $animations = $block['attrs']['boldblocks']['animations']; if ( ! is_array( $animations ) ) { return $block_content; } $animation_names = $this->get_animation_names(); $animation_object = array_reduce( $animations, function ( $accumulator, $animation ) use ( $animation_names ) { $name = $animation['name'] ?? ''; $duration = $animation['duration'] ?? ''; if ( ! $name || ! $duration ) { return $accumulator; } $delay = $animation['delay'] ?? 0; $repeat = $animation['repeat'] ?? 1; $infinite = $animation['infinite'] ?? false; $timing_function = $animation['timingFunction'] ?? ''; $animation_name = isset( $animation_names[ $name ]['name'] ) ? $animation_names[ $name ]['name'] : $name; if ( ! $timing_function && isset( $animation_names[ $name ]['timingFunction'] ) ) { $timing_function = $animation_names[ $name ]['timingFunction']; } $timing_function = $timing_function ? " $timing_function" : ''; $count = $infinite ? 'infinite' : $repeat; $animation_string = "$animation_name {$duration}s{$timing_function} {$delay}s $count"; // Save animation. $accumulator['animation'] = $accumulator['animation'] ? "{$accumulator['animation']}, $animation_string" : $animation_string; // Save the name. $accumulator['name'] = $accumulator['name'] ? "{$accumulator['name']},$name" : $name; return $accumulator; }, [ 'animation' => '', 'name' => '', ] ); if ( $animation_object['name'] && $animation_object['animation'] ) { $animation_object['multipleTimes'] = $block['attrs']['boldblocks']['animateMultipleTimes'] ?? false; $block_content = $this->add_data_to_block( $block_content, 'data-reveal-animation', esc_attr( wp_json_encode( $animation_object ) ) ); $block_content = $this->add_class_to_block( $block_content, 'animate__waiting' ); } return $block_content; } /** * Get all predefined animations * * @return array */ private function get_animation_names() { $animation_names = [ 'bounce' => false, 'flash' => false, 'pulse' => [ 'timingFunction' => 'ease-in-out' ], 'rubberBand' => false, 'shakeX' => false, 'shakeY' => false, 'headShake' => [ 'timingFunction' => 'ease-in-out' ], 'swing' => false, 'tada' => false, 'wobble' => false, 'jello' => false, 'heartBeat' => [ 'timingFunction' => 'ease-in-out' ], 'backInDown' => false, 'backInLeft' => false, 'backInRight' => false, 'backInUp' => false, 'bounceIn' => false, 'bounceInDown' => false, 'bounceInLeft' => false, 'bounceInRight' => false, 'bounceInUp' => false, 'fadeIn' => false, 'fadeInDown' => [ 'name' => 'fadeInXY' ], 'fadeInDownBig' => [ 'name' => 'fadeInXY' ], 'fadeInLeft' => [ 'name' => 'fadeInXY' ], 'fadeInLeftBig' => [ 'name' => 'fadeInXY' ], 'fadeInRight' => [ 'name' => 'fadeInXY' ], 'fadeInRightBig' => [ 'name' => 'fadeInXY' ], 'fadeInUp' => [ 'name' => 'fadeInXY' ], 'fadeInUpBig' => [ 'name' => 'fadeInXY' ], 'fadeInTopLeft' => [ 'name' => 'fadeInXY' ], 'fadeInTopRight' => [ 'name' => 'fadeInXY' ], 'fadeInBottomLeft' => [ 'name' => 'fadeInXY' ], 'fadeInBottomRight' => [ 'name' => 'fadeInXY' ], 'fadeInUpSmall' => [ 'name' => 'fadeInXY' ], 'fadeInRightSmall' => [ 'name' => 'fadeInXY' ], 'fadeInDownSmall' => [ 'name' => 'fadeInXY' ], 'fadeInLeftSmall' => [ 'name' => 'fadeInXY' ], 'flip' => false, 'flipInX' => false, 'flipInY' => false, 'lightSpeedInRight' => [ 'timingFunction' => 'ease-out' ], 'lightSpeedInLeft' => [ 'timingFunction' => 'ease-out' ], 'rotateIn' => [ 'name' => 'rotateInZ' ], 'rotateInDownLeft' => [ 'name' => 'rotateInZ' ], 'rotateInDownRight' => [ 'name' => 'rotateInZ' ], 'rotateInUpLeft' => [ 'name' => 'rotateInZ' ], 'rotateInUpRight' => [ 'name' => 'rotateInZ' ], 'jackInTheBox' => false, 'rollIn' => false, 'zoomIn' => false, 'zoomInDown' => [ 'name' => 'zoomInXY' ], 'zoomInLeft' => [ 'name' => 'zoomInXY' ], 'zoomInRight' => [ 'name' => 'zoomInXY' ], 'zoomInUp' => [ 'name' => 'zoomInXY' ], 'slideInDown' => [ 'name' => 'slideInXY' ], 'slideInLeft' => [ 'name' => 'slideInXY' ], 'slideInRight' => [ 'name' => 'slideInXY' ], 'slideInUp' => [ 'name' => 'slideInXY' ], 'slideInDownSmall' => [ 'name' => 'slideInXY' ], 'slideInLeftSmall' => [ 'name' => 'slideInXY' ], 'slideInRightSmall' => [ 'name' => 'slideInXY' ], 'slideInUpSmall' => [ 'name' => 'slideInXY' ], 'spin' => false, 'zoomOutIn' => false, ]; return $animation_names; } /** * Has a animation setting value or not * * @param string $type * @param string $name * @param array $settings * @return mixed */ private function has_animation_setting_value( $type, $name, $settings ) { return isset( $settings[ $type ][ $name ] ) || isset( $settings[ $name ] ); } /** * Get background animation setting value * * @param string $type * @param string $name * @param array $settings * @param mixed $default_val * @return mixed */ private function get_animation_setting_value( $type, $name, $settings, $default_val = '' ) { if ( isset( $settings[ $type ][ $name ] ) ) { return $settings[ $type ][ $name ]; } else { return $settings[ $name ] ?? $default_val; } } /** * Build the video background * * @param array $background * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ private function build_video_background( $background, $block_content, $block, $block_instance ) { $settings = $background['settings'] ?? []; $media = $background['video'] ?? []; $block_class = 'bb:has-background bb:has-background--video'; $background_position = round( ( $settings['focalPoint']['x'] ?? .5 ) * 100 ) . '% ' . round( ( $settings['focalPoint']['y'] ?? .5 ) * 100 ) . '%'; $object_fit = $settings['objectFit'] ?? 'cover'; if ( empty( $object_fit ) ) { $object_fit = 'cover'; } $video_style = 'object-fit:' . $object_fit . ';object-position:' . $background_position . ';'; $block_background = sprintf( '
', $media['url'], $video_style ); if ( $media['isPausable'] ?? false ) { $block_class .= ' cbb-has-video-controls'; $block_background .= ''; } if ( strpos( $block['innerHTML'] ?? '', $block_class ) === false ) { $block_content = $this->add_class_to_block( $block_content, $block_class ); } $block_content = $this->add_inner_content_to_block( $block_content, $block_background ); return $block_content; } /** * Render block overlay * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function build_block_overlay( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } $block_overlay = $block['attrs']['boldblocks']['overlay'] ?? false; // There is no overlay value. if ( ! ( $block_overlay['overlayColor'] ?? false ) ) { return $block_content; } // Ignore legacy markup. if ( strpos( $block['innerHTML'] ?? '', 'bb:block-overlay' ) !== false ) { return $block_content; } $bg_color = ''; $overlay_color = $block_overlay['overlayColor'] ?? []; if ( ( $overlay_color['gradientSlug'] ?? false ) || ( $overlay_color['gradientValue'] ?? false ) ) { if ( $overlay_color['gradientSlug'] ?? false ) { $bg_color = sprintf( 'var(--wp--preset--gradient--%1$s, %2$s)', $overlay_color['gradientSlug'], $overlay_color['gradientValue'] ?? '' ); } else { $bg_color = $overlay_color['gradientValue']; } } elseif ( ( $overlay_color['slug'] ?? false ) || ( $overlay_color['value'] ?? false ) ) { if ( $overlay_color['slug'] ?? false ) { $bg_color = sprintf( 'var(--wp--preset--color--%1$s, %2$s)', $overlay_color['slug'], $overlay_color['value'] ?? '' ); } else { $bg_color = $overlay_color['value']; } } if ( empty( $bg_color ) ) { return $block_content; } $opacity = absint( $block_overlay['opacity'] ?? 100 ); // Build the markup. $overlay_markup = sprintf( '', $bg_color, $opacity / 100 ); $block_class = 'bb:has-overlay'; if ( strpos( $block['innerHTML'] ?? '', $block_class ) === false ) { $block_content = $this->add_class_to_block( $block_content, $block_class ); } $block_content = $this->add_inner_content_to_block( $block_content, $overlay_markup ); return $block_content; } /** * Render accordions block data * * @param array $parsed_block * @return array */ public function render_accordion_block_data( $parsed_block ) { $block_type = \WP_Block_Type_Registry::get_instance()->get_registered( $parsed_block['blockName'] ); if ( ! $block_type ) { return $parsed_block; } $layout_type = $block_type->supports['layoutType'] ?? ''; if ( ! in_array( $layout_type, [ 'accordion', 'accordionItem' ], true ) ) { return $parsed_block; } static $accordion_counter = 0; static $accordion_id = ''; static $item_index = []; if ( 'accordion' === $layout_type ) { ++$accordion_counter; $processor = new \WP_HTML_Tag_Processor( $parsed_block['innerHTML'] ?? '' ); $accordion_id = ''; if ( $processor->next_tag() ) { $accordion_id = $processor->get_attribute( 'id' ); } if ( ! $accordion_id ) { $accordion_id = 'accordion-' . $accordion_counter; } } elseif ( 'accordionItem' === $layout_type ) { if ( ! isset( $item_index[ $accordion_id ] ) ) { $item_index[ $accordion_id ] = 1; } else { ++$item_index[ $accordion_id ]; } $parsed_block['attrs']['boldblocks']['accordionItem']['block_id'] = $accordion_id . '-item-' . $item_index[ $accordion_id ]; } return $parsed_block; } /** * Render accordion item blocks * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function render_accordion_item_block( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } // Bail if it is not an accordion item block. if ( 'accordionItem' !== ( $block_instance->block_type->supports['layoutType'] ?? '' ) ) { return $block_content; } $block_id = $block['attrs']['boldblocks']['accordionItem']['block_id'] ?? ''; $block_id_selector = '#' . $block_id; if ( $block_id ) { $processor = new \WP_HTML_Tag_Processor( $block_content ); while ( $processor->next_tag() ) { $tag_class = $processor->get_attribute( 'class' ); if ( ! $tag_class ) { continue; } if ( strpos( $tag_class, 'accordion-header' ) !== false ) { $processor->set_attribute( 'data-toggle-target', $block_id_selector ); $processor->set_attribute( 'aria-controls', $block_id ); } elseif ( strpos( $tag_class, 'accordion-link' ) !== false ) { $processor->set_attribute( 'href', $block_id_selector ); } elseif ( strpos( $tag_class, 'accordion-collapse' ) !== false ) { $processor->set_attribute( 'id', $block_id ); $processor->set_attribute( 'role', 'region' ); break; } } $block_content = $processor->get_updated_html(); } return $block_content; } /** * Render grid style for the query loop's grid layout * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function render_query_loop_grid_style( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } // If this is a core/query block that has grid layout. $grid_data = $this->get_query_loop_grid_data( $block, $block_instance ); if ( ! $grid_data ) { return $block_content; } $display_layout = $grid_data['displayType'] ?? ''; if ( 'responsiveGrid' === $display_layout && ( $grid_data['grid'] ?? false ) ) { // Buil selector. $selector = 'cbb-query-' . $this->get_query_loop_id( $block ); // Get responsive settings. $breakpoints = $this->get_breakpoints(); // Get custom style. $block_style = $this->get_query_grid_style( [ 'selector' => ".{$selector} > ul", 'block' => $block, 'data' => $grid_data['grid'], 'breakpoints' => $breakpoints, ] ); if ( empty( $block_style ) ) { return $block_content; } $handle = $selector; // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion wp_register_style( $handle, '' ); wp_add_inline_style( $handle, $block_style ); wp_enqueue_style( $handle ); // Add selector to block wrapper element. $block_content = $this->add_class_to_block( $block_content, $selector ); } return $block_content; } /** * Build an unique ID for a query loop * * @param array $block * @return string */ private function get_query_loop_id( $block ) { $query_id = $block['attrs']['queryId'] ?? 1; $key = "id_{$query_id}"; if ( ! isset( $this->query_ids[ $key ] ) ) { $this->query_ids[ $key ] = 1; } else { ++$this->query_ids[ $key ]; } return $query_id . '-' . $this->query_ids[ $key ]; } /** * Get grid layout data * * @param array $block * @param WP_Block $block_instance * @return array */ private function get_query_loop_grid_data( $block, $block_instance ) { $data = []; $old_layout_type = $block['attrs']['displayLayout']['type'] ?? ''; if ( 'grid' === $old_layout_type ) { // Convert to the new name. $old_layout_type = 'responsiveGrid'; } $data['displayType'] = $old_layout_type; $data['grid'] = $block['attrs']['boldblocks']['grid'] ?? []; if ( $block_instance->block_type->api_version >= 3 ) { $post_template = $this->get_nested_post_template( $block_instance ); if ( $post_template ) { if ( 'responsiveGrid' === ( $post_template->attributes['boldblocks']['layout']['type'] ?? '' ) ) { $data['displayType'] = 'responsiveGrid'; $data['grid'] = $post_template->attributes['boldblocks']['grid'] ?? []; } } } return $data; } /** * Build grid style * * @param array $args * @return string */ private function get_query_grid_style( $args ) { $selector = $args['selector']; $data = $args['data']; // None-responsive style. $style = "{$selector}{display:grid;padding:0;margin:0;}{$selector} > li{padding:0;margin:0;}{$selector} > li + li{margin-block-start:0;margin-block-end:0;}"; // Columns style. $style .= $this->build_query_loop_responsive_style( array_merge( $args, [ 'setting_value' => $data['columns'] ?? null, 'func_build_responsive_style' => function ( $args ) { $style_array = []; $value = $args['value']; if ( $value ) { $style_array = [ '--cbb--grid--columns' => $value, ]; } return $style_array; }, 'func_build_dependent_style' => function ( $args ) { $responsive_styles = $args['responsive_styles'] ?? []; $selector = $args['selector']; $breakpoints = $args['breakpoints'] ?? []; $style = "{$selector}{grid-template-columns:var(--cbb--grid--columns);}"; foreach ( $responsive_styles as $breakpoint => $attribute_array ) { $media_query = $breakpoints[ $breakpoint ]['minQuery'] ?? ''; if ( $media_query ) { $style = \str_replace( '##CONTENT##', $style, $media_query ); } break; } return $style; }, ] ) ); // Rows style. $style .= $this->build_query_loop_responsive_style( array_merge( $args, [ 'setting_value' => $data['rows'] ?? null, 'func_build_responsive_style' => function ( $args ) { $style_array = []; $value = $args['value']; if ( $value ) { $style_array = [ '--cbb--grid--rows' => $value, ]; } return $style_array; }, 'func_build_dependent_style' => function ( $args ) { $responsive_styles = $args['responsive_styles'] ?? []; $selector = $args['selector']; $breakpoints = $args['breakpoints'] ?? []; $style = "{$selector}{grid-template-rows:var(--cbb--grid--rows);}"; foreach ( $responsive_styles as $breakpoint => $attribute_array ) { $media_query = $breakpoints[ $breakpoint ]['minQuery'] ?? ''; if ( $media_query ) { $style = \str_replace( '##CONTENT##', $style, $media_query ); } break; } return $style; }, ] ) ); // Auto rows style. $style .= $this->build_query_loop_responsive_style( array_merge( $args, [ 'setting_value' => $data['autoRows'] ?? null, 'func_build_responsive_style' => function ( $args ) { $style_array = []; $value = $args['value']; if ( $value ) { $style_array = [ '--cbb--grid--auto-rows' => $value, ]; } return $style_array; }, 'func_build_dependent_style' => function ( $args ) { $responsive_styles = $args['responsive_styles'] ?? []; $selector = $args['selector']; $breakpoints = $args['breakpoints'] ?? []; $style = "{$selector}{grid-auto-rows:var(--cbb--grid--auto-rows);}"; foreach ( $responsive_styles as $breakpoint => $attribute_array ) { $media_query = $breakpoints[ $breakpoint ]['minQuery'] ?? ''; if ( $media_query ) { $style = \str_replace( '##CONTENT##', $style, $media_query ); } break; } return $style; }, ] ) ); // Gap style. $style .= $this->build_query_loop_responsive_style( array_merge( $args, [ 'setting_value' => $data['gap'] ?? null, 'func_build_responsive_style' => function ( $args ) { $style_array = []; $value = $args['value']; if ( $value && is_array( $value ) ) { $row = $value['row'] ?? null; if ( $this->is_valid_value( $row ) ) { $style_array['--cbb--grid--gap--row'] = $row; } $column = $value['column'] ?? null; if ( $this->is_valid_value( $column ) ) { $style_array['--cbb--grid--gap--column'] = $column; } } return $style_array; }, 'func_build_dependent_style' => function ( $args ) { $responsive_styles = $args['responsive_styles'] ?? []; $selector = $args['selector']; $breakpoints = $args['breakpoints'] ?? []; $style = ''; foreach ( $responsive_styles as $breakpoint => $style_array ) { if ( strpos( $style, 'row-gap' ) !== false && strpos( $style, 'column-gap' ) !== false ) { break; } $media_query = $breakpoints[ $breakpoint ]['minQuery'] ?? ''; if ( strpos( $style, 'row-gap' ) === false && isset( $style_array['--cbb--grid--gap--row'] ) ) { $row_style = "{$selector}{row-gap:var(--cbb--grid--gap--row);}"; if ( $media_query ) { $style .= \str_replace( '##CONTENT##', $row_style, $media_query ); } else { $style .= $row_style; } } if ( strpos( $style, 'column-gap' ) === false && isset( $style_array['--cbb--grid--gap--column'] ) ) { $column_style = "{$selector}{column-gap:var(--cbb--grid--gap--column);}"; if ( $media_query ) { $style .= \str_replace( '##CONTENT##', $column_style, $media_query ); } else { $style .= $column_style; } } } return $style; }, ] ) ); $items = $data['items'] ?? []; if ( $items ) { foreach ( $items as $item_key => $item_value ) { $item_index = str_replace( 'item', '', $item_key ); // Column style. $style .= $this->build_query_loop_responsive_style( array_merge( $args, [ 'setting_value' => $item_value['columnSpan'] ?? [], 'setting_name' => 'columnSpan', 'selector' => "{$selector} > li:nth-of-type({$item_index})", 'func_build_responsive_style' => [ $this, 'build_grid_item_responsive_style' ], 'func_build_dependent_style' => [ $this, 'build_grid_item_dependent_style' ], ] ) ); // Row style. $style .= $this->build_query_loop_responsive_style( array_merge( $args, [ 'setting_value' => $item_value['rowSpan'] ?? [], 'setting_name' => 'rowSpan', 'selector' => "{$selector} > li:nth-of-type({$item_index})", 'func_build_responsive_style' => [ $this, 'build_grid_item_responsive_style' ], 'func_build_dependent_style' => [ $this, 'build_grid_item_dependent_style' ], ] ) ); } } return $style; } /** * Build responsive style for grid item * * @param array $args * @return array */ private function build_grid_item_responsive_style( $args ) { $setting_name = $args['setting_name'] ?? 'columnSpan'; $variable_name = 'columnSpan' === $setting_name ? '--cbb--grid-item--column' : '--cbb--grid-item--row'; $style_array = []; $value = $args['value']; if ( $value && is_array( $value ) ) { $span = $value['span'] ?? null; $start = $value['start'] ?? null; if ( $this->is_valid_value( $start ) || $this->is_valid_value( $span ) ) { if ( ! $this->is_valid_value( $start ) ) { $start = 'auto'; } if ( ! $this->is_valid_value( $span ) ) { $span = 'auto'; } if ( $span !== 'auto' && $span > 0 ) { $span = "span {$span}"; } $style_array[ $variable_name ] = "{$start} / {$span}"; } if ( 'columnSpan' === $setting_name ) { $order = $value['order'] ?? null; if ( is_numeric( $order ) ) { $style_array['--cbb--grid-item--order'] = $order; } } } return $style_array; } /** * Build dependent style for grid item * * @param array $args * @return array */ private function build_grid_item_dependent_style( $args ) { $setting_name = $args['setting_name'] ?? 'columnSpan'; $variable_name = 'columnSpan' === $setting_name ? '--cbb--grid-item--column' : '--cbb--grid-item--row'; $css_name = 'columnSpan' === $setting_name ? 'grid-column' : 'grid-row'; $responsive_styles = $args['responsive_styles'] ?? []; $selector = $args['selector']; $breakpoints = $args['breakpoints'] ?? []; $style = ''; foreach ( $responsive_styles as $breakpoint => $style_array ) { if ( 'columnSpan' === $setting_name ) { if ( strpos( $style, $css_name ) !== false && strpos( $style, 'order' ) !== false ) { break; } } elseif ( strpos( $style, $css_name ) !== false ) { break; } $media_query = $breakpoints[ $breakpoint ]['minQuery'] ?? ''; if ( strpos( $style, $css_name ) === false && isset( $style_array[ $variable_name ] ) ) { $column_style = "{$selector}{{$css_name}:var($variable_name);}"; if ( $media_query ) { $style .= \str_replace( '##CONTENT##', $column_style, $media_query ); } else { $style .= $column_style; } } if ( 'columnSpan' === $setting_name && strpos( $style, 'order' ) === false && isset( $style_array['--cbb--grid-item--order'] ) ) { $order_style = "{$selector}{order:var(--cbb--grid-item--order);}"; if ( $media_query ) { $style .= \str_replace( '##CONTENT##', $order_style, $media_query ); } else { $style .= $order_style; } } } return $style; } /** * Render carousel layout for query loop blocks * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function render_query_loop_carousel_layout( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } $post_template = $this->get_nested_post_template( $block_instance ); if ( $post_template ) { // If this has carousel layout. if ( 'carousel' === ( $post_template->attributes['boldblocks']['layout']['type'] ?? '' ) ) { // Build carousel settings. $carousel_settings = $post_template->attributes['boldblocks']['carousel'] ?? []; if ( $carousel_settings ) { if ( ! $this->block_has_attribute( 'data-carousel-settings', $block_content ) ) { $carousel_attr = $this->build_carousel_settings( $carousel_settings, true ); if ( $carousel_attr ) { $block_content = $this->add_data_to_block( $block_content, 'data-carousel-settings', esc_attr( $carousel_attr ) ); } } // Buil selector. $selector = 'cbb-query-' . $this->get_query_loop_id( $block ); // Get responsive settings. $breakpoints = $this->get_breakpoints(); // Get custom style. $block_style = $this->get_carousel_preload_style( '', [ 'selector' => ".{$selector}", 'settings' => [ 'carousel' => $carousel_settings ], 'block_layout' => 'carousel', 'breakpoints' => $breakpoints, ] ); $carousel_class = 'js-carousel-layout cbb-carousel-preload'; if ( $block_style ) { $handle = $selector; // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion wp_register_style( $handle, '' ); wp_add_inline_style( $handle, $block_style ); wp_enqueue_style( $handle ); $carousel_class .= ' ' . $selector; } if ( $carousel_settings['displayLoader'] ?? false ) { $carousel_class .= ' has-preloader'; if ( 'coverflow' === ( $carousel_settings['effect'] ?? '' ) ) { $carousel_class .= ' is-fading-loader'; } // Add preloader. $block_content = $this->add_inner_content_to_block( $block_content, $this->get_carousel_preloader_markup( $block, $block_instance ) ); } // Add selector to block wrapper element. $block_content = $this->add_class_to_block( $block_content, $carousel_class ); } } } return $block_content; } /** * Add preload style for carousels * * @param string $style * @param array $args */ public function get_carousel_preload_style( $style, $args ) { if ( 'carousel' === ( $args['block_layout'] ?? '' ) ) { $preload_style = ''; $value = $args['settings']['carousel'] ?? false; $selector = $args['selector']; $breakpoints = $args['breakpoints']; if ( $value && is_array( $value ) ) { if ( $value['enableResponsive'] ?? false ) { $setting_value = $value['breakpoints'] ?? []; $responsive_styles = []; foreach ( $setting_value as $breakpoint => $value_by_breakpoint ) { $value = null; if ( $this->is_valid_value( $value_by_breakpoint['value'] ?? null ) ) { $value = $value_by_breakpoint['value']; } elseif ( isset( $value_by_breakpoint['inherit'] ) && is_string( $value_by_breakpoint['inherit'] ) ) { $value = $setting_value[ $value_by_breakpoint['inherit'] ]['value'] ?? null; } if ( $this->is_valid_value( $value ) ) { $style_by_breakpoint = $this->build_carousel_preload_style( $value ); if ( $style_by_breakpoint ) { $responsive_styles[ $breakpoint ] = $style_by_breakpoint; } } } $this->sort_styles( $responsive_styles ); $last_responsive_style = ''; foreach ( $responsive_styles as $breakpoint => $style_by_breakpoint ) { if ( ! $style_by_breakpoint || ! is_array( $style_by_breakpoint ) ) { continue; } $responsive_style = ''; foreach ( $style_by_breakpoint as $attr_key => $attr_value ) { $responsive_style .= "{$attr_key}:{$attr_value};"; } if ( $responsive_style !== $last_responsive_style ) { $style_with_selector = "{$selector}{{$responsive_style}}"; $media_query = $breakpoints[ $breakpoint ]['minQuery'] ?? ''; if ( $media_query ) { $preload_style .= \str_replace( '##CONTENT##', $style_with_selector, $media_query ); } else { $preload_style .= $style_with_selector; } $last_responsive_style = $responsive_style; } } } else { $style_array = $this->build_carousel_preload_style( $value ); $attr_style = ''; foreach ( $style_array as $attr_key => $attr_value ) { $attr_style .= "{$attr_key}:{$attr_value};"; } if ( $attr_style ) { $preload_style .= "{$selector}{{$attr_style}}"; } } } if ( $preload_style ) { $style .= $preload_style; } } return $style; } /** * Build preload style for carousels * * @param array $value * @return void */ private function build_carousel_preload_style( $value ) { $style_array = []; $slides_perview = $value['slidesPerView'] ?? 1; if ( is_array( $slides_perview ) ) { if ( $slides_perview['auto'] ?? false ) { $slides_perview = 'auto'; } else { $slides_perview = $slides_perview['value'] ?? 1; } } if ( $slides_perview !== 'auto' ) { $gap_count = absint( ceil( $slides_perview ) ) - 1; if ( $slides_perview <= 0 ) { $slides_perview = 1; } } else { $gap_count = 0; } $space_between = $value['spaceBetween'] ?? 0; if ( $space_between < 0 ) { $space_between = 0; } $total_gap = $gap_count * $space_between; $style_array['--cbb-slide-width'] = $slides_perview === 'auto' ? 'auto' : "calc((100% - {$total_gap}px ) / {$slides_perview})"; $style_array['--cbb-carousel-gap'] = "{$space_between}px"; return $style_array; } /** * Build a json string of carousel settings * * @param array $carousel_settings * @param boolean $exclude_li_role * @return string */ private function build_carousel_settings( $carousel_settings, $exclude_li_role = false ) { // phpcs:disable $dataset = []; // Speed. if ( $carousel_settings['speed'] ?? false ) { $dataset['speed'] = $carousel_settings['speed']; } // Loop and rewind. $dataset['loop'] = false; $dataset['rewind'] = false; $loop_type = $carousel_settings['loopType'] ?? ''; if ( 'infinite' === $loop_type ) { $dataset['loop'] = true; } elseif ( 'rewind' === $loop_type ) { $dataset['rewind'] = true; } // Autoplay. $dataset['autoplay'] = false; $autoplay = $carousel_settings['autoplay'] ?? false; if ( $autoplay && is_array( $autoplay ) && ( $autoplay['enable'] ?? false ) ) { unset( $autoplay['enable'] ); if ( !$dataset['loop'] && !$dataset['rewind']) { $autoplay['stopOnLastSlide'] = true; } $dataset['autoplay'] = $autoplay; } // Play/pause. if ( $carousel_settings['playPause']['enable'] ?? false ) { $dataset['playPause'] = $carousel_settings['playPause']; } // Direction. if ( $carousel_settings['direction'] ?? false ) { $dataset['direction'] = $carousel_settings['direction']; } // Effect. $effect = $carousel_settings['effect'] ?? 'slide'; // Handle wrong default data. if ( is_array( $effect ) ) { $effect = 'slide'; } if ( $effect ) { $dataset['effect'] = $effect; $effectSettings = $carousel_settings['effectSettings'] ?? []; $settings = $effectSettings[ $effect . 'Effect' ] ?? false; // Fade. if ( 'fade' === $effect ) { $dataset['fadeEffect'] = [ 'crossFade' => true ]; } elseif ( 'coverflow' === $effect ) { // Coverflow. if ( is_array( $settings ) ) { $dataset['coverflowEffect'] = $settings; } else { $dataset['coverflowEffect'] = [ 'slideShadows' => false ]; } } elseif ( 'creative' === $effect ) { // Creative. if ( is_array( $settings ) ) { $dataset['creativeEffect'] = $settings; } else { $dataset['creativeEffect'] = [ 'prev' => [ 'translate' => [ '-20%', 0, -1 ], ], 'next' => [ 'translate' => [ '100%', 0, 0 ], ], ]; } $dataset['direction'] = "horizontal"; } } // slidesPerView. $slidesPerViewDependencies = [ 'fade', 'flip', 'cube', 'cards', 'creative', ]; if ( in_array($effect, $slidesPerViewDependencies, true ) ) { $dataset['slidesPerView'] = 1; } else { $slidesPerView = $this->carousel_refine_slides_per_view( $carousel_settings['slidesPerView'] ?? 1 ); $slidesPerGroup = absint( $carousel_settings['slidesPerGroup'] ?? 0 ); if ( $slidesPerView ) { $dataset['slidesPerView'] = $slidesPerView; if ( $slidesPerView >= 2 && $slidesPerGroup ) { $dataset['slidesPerGroup'] = $slidesPerGroup; } } // spaceBetween. $spaceBetween = absint( $carousel_settings['spaceBetween'] ?? 0 ); if ( $spaceBetween ) { $dataset['spaceBetween'] = $spaceBetween; } // Breakpoints. $breakpoint_settings = $this->get_breakpoints(); $breakpoint_values = [ 'sm' => $breakpoint_settings['sm']['breakpoint'] ?? 576, 'md' => $breakpoint_settings['md']['breakpoint'] ?? 768, 'lg' => $breakpoint_settings['lg']['breakpoint'] ?? 1024, ]; $breakpoints = $carousel_settings['breakpoints'] ?? []; if ( ($carousel_settings['enableResponsive'] ?? false) && is_array( $breakpoints ) ) { // Mobile first. $this->sort_styles( $breakpoints ); $breakpoint_atts = []; foreach ( array_keys( $breakpoints ) as $breakpoint ) : $value = $breakpoints[ $breakpoint ]['value'] ?? ''; $inherit = $breakpoints[ $breakpoint ]['inherit'] ?? ''; $value_by_breakpoint = false; if ( $value && is_array( $value ) ) { $value_by_breakpoint = $value; } if ( ! $value_by_breakpoint && is_string( $inherit ) ) { $inheritValue = $breakpoints[ $inherit ] ?? ''; if ( $inheritValue && is_array( $inheritValue ) ) { $value_by_breakpoint = $inheritValue; } } if ( is_array( $value_by_breakpoint ) ) { $value_by_breakpoint['slidesPerView'] = $this->carousel_refine_slides_per_view( $value_by_breakpoint['slidesPerView'] ?? 1); $breakpoint_atts[ $breakpoint_values[ $breakpoint ] ] = $value_by_breakpoint; } endforeach; if ( $breakpoint_atts ) { // Replace global params. $first_breakpoint = array_values($breakpoint_atts)[0]; $dataset['slidesPerView'] = $first_breakpoint['slidesPerView']; if ($dataset['slidesPerView'] > 1 && ($first_breakpoint['slidesPerGroup'] ?? 0)) { $dataset['slidesPerGroup'] = $first_breakpoint['slidesPerGroup']; } if ( $first_breakpoint['spaceBetween'] ) { $dataset['spaceBetween'] = $first_breakpoint['spaceBetween']; } // Set the breakpoints. $dataset['breakpoints'] = $breakpoint_atts; } } else { if ( $carousel_settings['oneSlidePerViewInMobile'] ?? false ) { $dataset['slidesPerView'] = 1; if ( $slidesPerGroup ) { $dataset['slidesPerGroup'] = 1; } $dataset['breakpoints'] = [ $breakpoint_values['sm'] => [ 'slidesPerView' => 1, 'slidesPerGroup' => 1, ], $breakpoint_values['md'] => [ 'slidesPerView' => $slidesPerView, 'slidesPerGroup' => $slidesPerGroup ? $slidesPerGroup : 1, ], ]; } } } // centeredSlides. $dataset['centeredSlides'] = $carousel_settings['centeredSlides'] ?? false; if ($dataset['centeredSlides'] && $effect === 'slide' && ($carousel_settings['centeredSlidesSettings']['enable'] ?? '')) { $dataset['centeredSlidesSettings'] = $carousel_settings['centeredSlidesSettings']; } // Pagination. $pagination = $carousel_settings['pagination'] ?? []; $dataset['pagination'] = $pagination['enable'] ?? false; if ( $dataset['pagination'] ) { $dataset['paginationSettings'] = $pagination; } // Navigation. $navigation = $carousel_settings['navigation'] ?? []; $dataset['navigation'] = $navigation['enable'] ?? false; if ( $dataset['navigation'] ) { $dataset['navigationSettings'] = $navigation; } // Scrollbar. $scrollbar = $carousel_settings['scrollbar'] ?? []; $dataset['scrollbar'] = $scrollbar['enable'] ?? false; if ( $dataset['scrollbar'] ) { $dataset['scrollbarSettings'] = $scrollbar; } // Equal height?. $equalHeight = $carousel_settings['equalHeight'] ?? false; if ( $equalHeight ) { // Only add the property when it is true to prevent from invalid content. $dataset['equalHeight'] = $equalHeight; } // Sync carousels. $thumbs = $carousel_settings['thumbs'] ?? []; if ( $thumbs['enable'] ?? false ) { $dataset['thumbsSettings'] = $thumbs; } // Exclude li role. if ( $exclude_li_role ) { $dataset['a11y'] = ['slideRole' => '', 'slideLabelMessage' => '']; } return wp_json_encode( $dataset ); // phpcs:enable } /** * Refine the slides per view * * @param mixed $raw_value * @return void */ private function carousel_refine_slides_per_view( $raw_value ) { $value = $raw_value; if ( is_array( $raw_value ) ) { $value = $raw_value['auto'] ?? false ? 'auto' : floatval( $raw_value['value'] ?? 1 ); } return $value ? $value : 1; } /** * Get nested post template block for core/query * * @param WP_Block $block_instance * @return boolean|WP_Block */ private function get_nested_post_template( $block_instance ) { return $this->find_nested_block( $block_instance, 'core/post-template' ); } /** * Find a specific nested block from a parent block * * @param WP_Block $block * @param string $block_name * @return mixed */ public function find_nested_block( $block, $block_name ) { if ( $block->name === $block_name ) { return $block; } foreach ( $block->inner_blocks as $inner_block ) { $result = $this->find_nested_block( $inner_block, $block_name ); if ( $result ) { return $result; } } return false; } /** * Build responsive style * * @param array $args * @param array &$style_array * @param array &$responsive_style_array * @return string */ private function build_query_loop_responsive_style( $args ) { $func_build_responsive_style = $args['func_build_responsive_style'] ?? ''; if ( ! \is_callable( $func_build_responsive_style ) ) { return ''; } $setting_value = $args['setting_value'] ?? []; if ( empty( $setting_value ) || ! \is_array( $setting_value ) ) { return ''; } $breakpoints = $args['breakpoints']; $selector = $args['selector']; $responsive_styles = []; foreach ( $setting_value as $breakpoint => $value_by_breakpoint ) { $value = null; if ( $this->is_valid_value( $value_by_breakpoint['value'] ?? null ) ) { $value = $value_by_breakpoint['value']; } elseif ( isset( $value_by_breakpoint['inherit'] ) && is_string( $value_by_breakpoint['inherit'] ) ) { $value = $setting_value[ $value_by_breakpoint['inherit'] ]['value'] ?? null; } if ( $this->is_valid_value( $value ) ) { $style_by_breakpoint = $func_build_responsive_style( array_merge( $args, [ 'value' => $value ] ) ); if ( $style_by_breakpoint ) { $responsive_styles[ $breakpoint ] = $style_by_breakpoint; } } } $this->sort_styles( $responsive_styles ); $dependent_style = ''; $func_build_dependent_style = $args['func_build_dependent_style'] ?? ''; if ( \is_callable( $func_build_dependent_style ) ) { $dependent_style = $func_build_dependent_style( array_merge( $args, [ 'responsive_styles' => $responsive_styles ] ) ); } $style = ''; $last_responsive_style = ''; foreach ( $responsive_styles as $breakpoint => $style_by_breakpoint ) { if ( ! $style_by_breakpoint || ! is_array( $style_by_breakpoint ) ) { continue; } $responsive_style = ''; foreach ( $style_by_breakpoint as $attr_key => $attr_value ) { $responsive_style .= "{$attr_key}:{$attr_value};"; } if ( $responsive_style !== $last_responsive_style ) { $style_with_selector = "{$selector}{{$responsive_style}}"; $media_query = $breakpoints[ $breakpoint ]['minQuery'] ?? ''; if ( $media_query ) { $style .= \str_replace( '##CONTENT##', $style_with_selector, $media_query ); } else { $style .= $style_with_selector; } $last_responsive_style = $responsive_style; } } return $style . $dependent_style; } /** * Build the breakpoints * * @return array */ private function get_breakpoints() { if ( ! $this->breakpoints ) { $breakpoints = get_option( 'cbb_breakpoints' ); if ( empty( $breakpoints ) ) { $breakpoints = [ [ 'breakpoint' => 576, 'prefix' => 'sm', ], [ 'breakpoint' => 768, 'prefix' => 'md', ], [ 'breakpoint' => 1024, 'prefix' => 'lg', ], ]; } $breakpoints = array_filter( array_map( function ( $item ) { if ( empty( $item['breakpoint'] ) || empty( $item['prefix'] ) ) { return false; } $breakpoint = absint( $item['breakpoint'] ); if ( $breakpoint < 10 ) { return false; } $max_breakpoint = $breakpoint - 1; $item['breakpointMax'] = $max_breakpoint; if ( $item['prefix'] !== 'sm' ) { $item['minQuery'] = "@media (min-width: {$breakpoint}px){##CONTENT##}"; $item['maxQuery'] = "@media (max-width: {$max_breakpoint}px){##MAX_CONTENT##}"; } else { $item['minQuery'] = ''; $item['maxQuery'] = "@media (max-width: {$max_breakpoint}px){##MAX_CONTENT##}"; } return $item; }, $breakpoints ) ); $this->breakpoints = array_column( $breakpoints, null, 'prefix' ); } return $this->breakpoints; } /** * Generate block selector. * * @param string $block_name * @param WP_Block $block_instance * @return string */ private function generate_selector( $block_name, $block_instance ) { $selector_prefix = 'cbb'; if ( '' !== $this->style_contexts['loop'] ) { $post_id = $block_instance->context['postId'] ?? 0; if ( ! $this->style_contexts['post'] || $this->style_contexts['post'] !== $post_id ) { $this->style_contexts['post'] = $post_id; $this->style_contexts['counter'] = 0; $this->style_contexts['content_counter'] = 0; } if ( $this->style_contexts['content'] ) { // The content context selector. $content_counter = ++$this->style_contexts['content_counter']; return "{$selector_prefix}-p{$this->style_contexts['post']}-{$content_counter}"; } $counter = ++$this->style_contexts['counter']; // The selector inside the loop. return "{$selector_prefix}-{$this->style_contexts['loop']}-{$counter}"; } else { // The global selector. return wp_unique_id( "{$selector_prefix}-g-" ); } } /** * Update loop id when having a post template block * * @param array $context * @param array $block * @return array */ public function update_loop_id( $context, $block ) { if ( $this->is_loop_temlate_block( $block['blockName'] ?? '' ) ) { if ( isset( $context['queryId'] ) ) { $query_id = $context['queryId']; if ( in_array( $query_id, $this->style_contexts['loops'], true ) ) { $count = count( array_filter( $this->style_contexts['loops'], function ( $value ) use ( $query_id ) { return $value === $query_id; } ) ); $this->style_contexts['loop'] = "{$query_id}i{$count}"; } else { $this->style_contexts['loop'] = $query_id; } $this->style_contexts['loops'][] = $query_id; } } // Post content inside a loop. if ( $this->style_contexts['loop'] && 'core/post-content' === ( $block['blockName'] ?? '' ) ) { $this->style_contexts['content'] = true; } return $context; } /** * Reset loop id when the post template is rendered * * @param string $content * @param array $block * @return string */ public function reset_loop_id( $content, $block ) { if ( $this->is_loop_temlate_block( $block['blockName'] ?? '' ) ) { $this->style_contexts['loop'] = ''; $this->style_contexts['post'] = 0; } // Post content inside a loop. if ( 'core/post-content' === ( $block['blockName'] ?? '' ) ) { $this->style_contexts['content'] = false; } return $content; } /** * Render sticky attributes for core template part blocks * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function render_template_part_sticky( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } // If this block has sticky data. $sticky_data = $block['attrs']['boldblocks']['sticky'] ?? false; if ( $sticky_data && ( $sticky_data['enable'] ?? false ) ) { $sticky_classes = [ 'is-sticky-block' ]; $sticky_classes[] = 'is-stick-to-' . ( $sticky_data['stickTo'] ?? 'top' ); if ( $sticky_data['isStickOnScrollingUp'] ?? false ) { $sticky_classes[] = 'is-sticky-on-scrollup'; } elseif ( $sticky_data['isFixed'] ?? false ) { $sticky_classes[] = 'is-fixed'; if ( $sticky_data['isInFlow'] ?? false ) { $sticky_classes[] = 'is-in-flow'; } if ( $sticky_data['isDetectingScroll'] ?? false ) { $sticky_classes[] = 'is-detecting-scroll'; } } elseif ( $sticky_data['isDetectingStuck'] ?? false ) { $sticky_classes[] = 'is-detecting-stuck'; } if ( in_array( $block['attrs']['area'] ?? '', [ 'header', 'footer' ], true ) ) { $sticky_classes[] = 'is-sticky-' . $block['attrs']['area']; } $block_content = $this->add_class_to_block( $block_content, implode( ' ', $sticky_classes ) ); } return $block_content; } /** * Render settings for carousel layout blocks * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function render_carousel_settings( $block_content, $block, $block_instance ) { // Ignore admin side. if ( is_admin() ) { return $block_content; } // There is no carousel layout. if ( 'carousel' !== ( $block_instance->block_type->supports['layoutType'] ?? '' ) ) { return $block_content; } // Carousel settings. $carousel_settings = $block['attrs']['boldblocks']['carousel'] ?? []; // Dataset attribute. $carousel_dataset = $this->build_carousel_settings( $carousel_settings ); if ( $carousel_dataset ) { $block_content = $this->add_data_to_block( $block_content, 'data-carousel-settings', esc_attr( $carousel_dataset ) ); } // Preload class. $preloader_class = 'cbb-carousel-preload'; // Has preloader? $has_preloader = $carousel_settings['displayLoader'] ?? false; if ( $has_preloader ) { $preloader_class .= ' has-preloader'; if ( 'coverflow' === ( $carousel_settings['effect'] ?? '' ) ) { $preloader_class .= ' is-fading-loader'; } // Add the loader to the markup. $block_content = $this->add_inner_content_to_block( $block_content, $this->get_carousel_preloader_markup( $block, $block_instance ) ); } // Mark it as having preloader. $block_content = $this->add_class_to_block( $block_content, $preloader_class ); return $block_content; } /** * Get the preloader markup for carousels * * @param array $block * @param WP_Block $block_instance * @return string */ private function get_carousel_preloader_markup( $block, $block_instance ) { return apply_filters( 'cbb_carousel_preloader', '
', $block, $block_instance ); } /** * Migrate cbb class for old CBB blocks. * * @param string $block_content * @param array $block * @param WP_Block $block_instance * @return string */ public function migrate_cbb_class( $block_content, $block, $block_instance ) { // Ignore admin side or empty content. if ( is_admin() || ! $block_content ) { return $block_content; } // There is no need to migrate. $migrate_cbb_class = $block_instance->block_type->supports['migrateClass'] ?? ''; if ( ! $migrate_cbb_class ) { return $block_content; } // Replace the class. $block_reader = new \WP_HTML_Tag_Processor( $block_content ); if ( $block_reader->next_tag( [ 'class_name' => $migrate_cbb_class ] ) ) { $new_class = str_ends_with( $migrate_cbb_class, 'custom' ) ? 'cbb-block' : 'cbb-block-parent'; $block_reader->set_attribute( 'class', str_replace( $migrate_cbb_class, $new_class, $block_reader->get_attribute( 'class' ) ) ); // Render the updated HTML. return $block_reader->get_updated_html(); } return $block_content; } /** * Support block style for non-cbb blocks * * @param string $is_supported * @param array $block * @return boolean */ public function support_block_style( $is_supported, $block ) { if ( in_array( $block['blockName'] ?? '', $this->non_cbb_blocks, true ) ) { $is_supported = true; } return $is_supported; } /** * Set a valid layout for none-cbb blocks * * @param string $block_layout * @param array $block * @return string */ public function get_block_layout( $block_layout, $block ) { if ( in_array( $block['blockName'] ?? '', $this->non_cbb_blocks, true ) ) { $block_layout = 'standalone'; } return $block_layout; } /** * Check whether the block is a loop template block. * * @param string $block_name * @return array */ private function is_loop_temlate_block( $block_name ) { $loop_template_blocks = apply_filters( 'cbb_get_loop_temlate_blocks', [ 'core/post-template' ] ); return in_array( $block_name, $loop_template_blocks, true ); } /** * Check whether current block has custom style or not. * * @param array $block * @param WP_Block $block_instance * @return boolean */ private function has_style( $block, $block_instance ) { // There is no boldblocks value. if ( ! isset( $block['attrs']['boldblocks'] ) ) { return false; } return apply_filters( 'cbb_support_block_style', isset( $block_instance->block_type->supports['cbb'] ), $block, $block_instance ); } /** * Order style array by breakpoints * * @param array $styles * @return void */ private function sort_styles( &$styles ) { uksort( $styles, function ( $a, $b ) { if ( 'lg' === $a || 'sm' === $b ) { return 1; } if ( 'sm' === $a || 'lg' === $b ) { return -1; } return 0; } ); } /** * Build responsive style * * @param array $args * @param array &$responsive_style_array * @param array &$classes * @return string */ private function build_responsive_style( $args, &$responsive_style_array, &$classes ) { $return_value = false; $func_build_responsive_style = $args['func_build_responsive_style'] ?? ''; if ( ! \is_callable( $func_build_responsive_style ) ) { return $return_value; } $setting_value = $args['setting_value'] ?? []; if ( empty( $setting_value ) || ! \is_array( $setting_value ) ) { return $return_value; } $breakpoints = $args['breakpoints']; $selector = $args['selector']; $setting_values = []; $responsive_styles = []; foreach ( $setting_value as $breakpoint => $value_by_breakpoint ) { $value = null; if ( $this->is_valid_value( $value_by_breakpoint['value'] ?? null ) ) { $value = $value_by_breakpoint['value']; } elseif ( isset( $value_by_breakpoint['inherit'] ) && is_string( $value_by_breakpoint['inherit'] ) ) { $value = $setting_value[ $value_by_breakpoint['inherit'] ]['value'] ?? null; } if ( $this->is_valid_value( $value ) ) { $style_by_breakpoint = $func_build_responsive_style( array_merge( $args, [ 'value' => $value ] ) ); if ( $style_by_breakpoint ) { $responsive_styles[ $breakpoint ] = $style_by_breakpoint; } } $setting_values[ $breakpoint ] = $value; } $this->sort_styles( $responsive_styles ); $dependent_style = ''; $func_build_dependent_style = $args['func_build_dependent_style'] ?? ''; if ( \is_callable( $func_build_dependent_style ) ) { $dependent_style = $func_build_dependent_style( array_merge( $args, [ 'setting_values' => $setting_values, 'responsive_styles' => $responsive_styles, ] ), $classes ); } $keys = []; $style = ''; $last_responsive_style = ''; foreach ( $responsive_styles as $breakpoint => $style_by_breakpoint ) { $responsive_style = ''; foreach ( $style_by_breakpoint as $attr_key => $attr_value ) { $responsive_style .= "{$attr_key}:{$attr_value};"; if ( ! in_array( $attr_key, $keys, true ) ) { $keys[] = $attr_key; $classes[] = $breakpoint . '-' . str_replace( '--cbb--', 'cbb-', $attr_key ); } } if ( $responsive_style !== $last_responsive_style ) { $style_with_selector = "{$selector}{{$responsive_style}}"; $min_query = $breakpoints[ $breakpoint ]['minQuery'] ?? ''; if ( $min_query ) { $style_with_selector = \str_replace( '##CONTENT##', $style_with_selector, $min_query ); } $style .= $style_with_selector; $last_responsive_style = $responsive_style; } } // Add style to the style_array. if ( $style ) { $style .= $dependent_style; $responsive_style_array[] = $style; return $style; } return $return_value; } /** * Check wether the block markup has a attribute or not. * * @param string $attribute * @param string $block_content * @return boolean */ private function block_has_attribute( $attribute, $block_content ) { $tags = new \WP_HTML_Tag_Processor( $block_content ); if ( $tags->next_tag() ) { return null !== $tags->get_attribute( $attribute ); } return false; } /** * Add CSS class to block wrapper * * @param string $block_content * @param string $classes * @return string */ public function add_class_to_block( $block_content, $classes ) { $tags = new \WP_HTML_Tag_Processor( $block_content ); if ( $tags->next_tag() ) { $tags->add_class( $classes ); } return $tags->get_updated_html(); } /** * Add data attribute to block wrapper * * @param string $block_content * @param string $value * @return string */ public function add_data_to_block( $block_content, $name, $value ) { $tags = new \WP_HTML_Tag_Processor( $block_content ); if ( $tags->next_tag() ) { $tags->set_attribute( $name, $value ); } return $tags->get_updated_html(); } /** * Add inner content to block markup * * @param string $block_content * @param string $inner_content * @return string */ public function add_inner_content_to_block( $block_content, $inner_content ) { if ( $inner_content ) { $block_content = \preg_replace( '/' . \preg_quote( '>', '/' ) . '/', '>' . $inner_content, $block_content, 1 ); } return $block_content; } /** * Detect a value is valid * * @param mixed $value * @return boolean */ private function is_valid_value( $value ) { return isset( $value ) && $value !== ''; } /** * Detect a responsive value is valid * * @param mixed $value * @return boolean */ private function is_valid_responsive_value( $value ) { return ! empty( $value['lg']['value'] ) || ! empty( $value['md']['value'] ) || ! empty( $value['sm']['value'] ); } /** * Get value for spacing var * * @param string $value * @return string */ private function get_spacing_value( $value ) { if ( ! $this->is_valid_value( $value ) ) { return ''; } if ( strpos( $value, 'var:preset|spacing|' ) !== false ) { preg_match( '/var:preset\|spacing\|(.+)/', $value, $slug ); if ( ! $slug ) { return $value; } return "var(--wp--preset--spacing--{$slug[1]})"; } return $value; } /** * Get CSS value for a color object. * * @param array $color_array * @return string */ private function get_css_color_value( $color_array ) { $value = ''; if ( ! empty( $color_array ) ) { if ( is_string( $color_array ) ) { $value = $color_array; } elseif ( is_array( $color_array ) ) { if ( $color_array['gradientSlug'] ?? false ) { $value = "var(--wp--preset--gradient--{$color_array['gradientSlug']}, {$color_array['gradientValue']})"; } elseif ( $color_array['gradientValue'] ?? false ) { $value = $color_array['gradientValue']; } elseif ( $color_array['slug'] ?? false ) { $value = "var(--wp--preset--color--{$color_array['slug']}, {$color_array['value']})"; } elseif ( $color_array['value'] ?? false ) { $value = $color_array['value']; } } } return $value; } /** * Refine custom JS and CSS value * * @param string $code * @param array $tokens * @param string $type * @return string */ public function refine_custom_value( $code, $tokens = [], $type = 'CSS' ) { // Remove tags. if ( 'CSS' === $type ) { $unsafe_tags = [ 'script', 'style', 'iframe', 'object', 'embed', 'img', 'video', 'audio', 'math', 'form' ]; // Build a regex pattern that matches: // 1. ... (full tag with content) // 2. or (self-closing or empty). $pattern = sprintf( '/<(%s)\b[^>]*>(?:.*?<\/\1\s*>)?/is', implode( '|', $unsafe_tags ) ); // Remove all unsafe tags in one go. $code = preg_replace( $pattern, '', $code ); } // Replace breakpoint tokens. $breakpoints = $this->get_breakpoints(); $tokens = array_merge( $tokens, [ 'TABLET_UP' => ( $breakpoints['md']['breakpoint'] ?? 768 ) . 'px', 'TABLET_DOWN' => ( $breakpoints['md']['breakpointMax'] ?? 767 ) . 'px', 'DESKTOP_UP' => ( $breakpoints['lg']['breakpoint'] ?? 1024 ) . 'px', 'DESKTOP_DOWN' => ( $breakpoints['lg']['breakpointMax'] ?? 1023 ) . 'px', ] ); $code = str_replace( array_keys( $tokens ), array_values( $tokens ), $code ); // Minify it. return $this->minify( $code, $type ); } /** * Simple minify JS and CSS * * @param string $code * @param string $type * @return string */ public function minify( $code, $type = 'CSS' ) { if ( $this->the_plugin_instance->is_debug_mode() ) { return $code; } if ( 'CSS' === $type ) { $code = preg_replace( '/\s+/', ' ', $code ); } elseif ( 'JS' === $type ) { // Remove comments first - https://stackoverflow.com/a/31907095/1038868. $pattern = '/(?:(?:\/\*(?:[^*]|(?:\*+[^*\/]))*\*+\/)|(?:(?