first commit

This commit is contained in:
User A0264400
2026-04-01 23:20:16 +03:00
commit a766acdc90
23071 changed files with 4933189 additions and 0 deletions

View File

@@ -0,0 +1,160 @@
<?php
/**
* UAGB Block Positioning.
*
* @since 2.8.0
* @package uagb
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( ! class_exists( 'UAGB_Block_Positioning' ) ) {
/**
* Class UAGB_Block_Positioning.
*
* @since 2.8.0
*/
class UAGB_Block_Positioning {
/**
* The instance of this class, or null if it has not been created yet.
*
* @since 2.8.0
* @var object|null instance
*/
private static $instance = null;
/**
* The Initiator.
*
* @since 2.8.0
* @return object An instance of this class.
*/
public static function get_instance() {
if ( ! isset( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
/**
* The Constructor.
*
* @since 2.8.0
* @return void
*/
public function __construct() {
add_filter( 'uagb_render_block', array( $this, 'add_positioning_classes' ), 10, 2 );
}
/**
* Add the required positioning classes if needed.
*
* @param string $block_content The block content.
* @param array $block The block data.
* @since 2.8.0
* @return string The block content after updation.
*/
public function add_positioning_classes( $block_content, $block ) {
if ( empty( $block['blockName'] ) ) {
return $block_content;
}
// Check $block_content is string or not.
if ( ! is_string( $block_content ) || false === strpos( $block['blockName'], 'uagb' ) ) {
return $block_content;
}
// Filter image block content.
if ( 'uagb/image' === $block['blockName'] ) {
$block_content = $this->image_block_content_filters( $block_content, $block );
}
// Return early if this doesn't need any positioning classes.
if (
'uagb/container' !== $block['blockName']
|| empty( $block['attrs']['UAGPosition'] )
) {
return $block_content;
}
// Create the class to prepend to this block's class list.
$prepended_classes = 'uagb-position__sticky';
// Once all the additional classes have been added, add the start of the block selector.
$prepended_classes .= ' wp-block-uagb-';
// Replace the closest opening block selector with the prepended classes.
$updated_content = preg_replace( '/wp-block-uagb-/', $prepended_classes, $block_content, 1 );
// If an error was encountered, null would have been passed. Keep the content as it is when this happens.
if ( $updated_content ) {
$block_content = $updated_content;
}
return $block_content;
}
/**
* This function is used to filter image block content.
*
* @param string $block_content Image block content.
* @param array $block Image block data.
* @since 2.10.2
* @return string
*/
public function image_block_content_filters( $block_content, $block ) {
// Remove srcset attribute from image.
if ( empty( $block['attrs']['id'] ) && ! empty( $block['attrs']['url'] ) && strpos( $block_content, 'srcset' ) ) {
$remove_srcset_from_content = preg_replace( '/srcset="([^"]*)"/', '', $block_content );
if ( $remove_srcset_from_content ) {
$block_content = $remove_srcset_from_content;
}
return $block_content;
}
/**
* For migrating http and https.
*/
if ( empty( $block['attrs']['id'] ) || empty( $block['attrs']['url'] ) ) {
return $block_content;
}
// Check url protocol.
$current_url_protocol = wp_parse_url( get_site_url(), PHP_URL_SCHEME );
$attribute_url_protocol = wp_parse_url( $block['attrs']['url'], PHP_URL_SCHEME );
if ( ! is_string( $current_url_protocol ) || ! is_string( $attribute_url_protocol ) || $current_url_protocol === $attribute_url_protocol ) {
return $block_content;
}
foreach ( array( 'url', 'urlMobile', 'urlTablet' ) as $replace_attributes_url ) {
if ( empty( $block['attrs'][ $replace_attributes_url ] ) ) {
continue;
}
if ( false === strpos( $block_content, $block['attrs'][ $replace_attributes_url ] ) ) {
continue;
}
// Replace http with https with current url protocol.
$migrated_urls = str_replace( $attribute_url_protocol, $current_url_protocol, $block['attrs'][ $replace_attributes_url ] );
$block_content = str_replace( $block['attrs'][ $replace_attributes_url ], $migrated_urls, $block_content );
}
return $block_content;
}
}
/**
* Prepare if class 'UAGB_Block_Positioning' exist.
* Kicking this off by calling 'get_instance()' method
*/
UAGB_Block_Positioning::get_instance();
}

View File

@@ -0,0 +1,119 @@
import advancedHeadingAttribute from '@Blocks/advanced-heading/attributes';
import postGridAttribute from '@Blocks/post/post-grid/attributes';
import postCarouselAttribute from '@Blocks/post/post-carousel/attributes';
import postMasonryAttribute from '@Blocks/post/post-masonry/attributes';
import sectionAttribute from '@Blocks/section/attributes';
import buttonsAttribute from '@Blocks/buttons/attributes';
import buttonsChildAttribute from '@Blocks/buttons-child/attributes';
import infoboxAttribute from '@Blocks/info-box/attributes';
import testimonialAttribute from '@Blocks/testimonial/attributes';
import teamAttribute from '@Blocks/team/attributes';
import socialAttribute from '@Blocks/social-share/attributes';
import socialChildAttribute from '@Blocks/social-share-child/attributes';
import googleMapAttribute from '@Blocks/google-map/attributes';
import iconAttribute from '@Blocks/icon/attributes';
import iconListAttribute from '@Blocks/icon-list/attributes';
import iconListChildAttribute from '@Blocks/icon-list-child/attributes';
import priceListAttribute from '@Blocks/price-list/attributes';
import priceListChildAttribute from '@Blocks/price-list-child/attributes';
import contentAttribute from '@Blocks/timeline/content-timeline/attributes';
import contentChildAttribute from '@Blocks/timeline/content-timeline-child/attributes';
import postTimelineAttribute from '@Blocks/timeline/post-timeline/attributes';
import callToActionAttribute from '@Blocks/call-to-action/attributes';
import columnAttribute from '@Blocks/column/attributes';
import columnsAttribute from '@Blocks/columns/attributes';
import gfAttribute from '@Blocks/gf-designer/attributes';
import cf7Attribute from '@Blocks/cf7-designer/attributes';
import blockquoteAttribute from '@Blocks/blockquote/attributes';
import marketingBtnAttribute from '@Blocks/marketing-button/attributes';
import tableofContentAttribute from '@Blocks/table-of-contents/attributes';
import howToAttribute from '@Blocks/how-to/attributes';
import howToStepAttribute from '@Blocks/how-to/child-blocks/step/attributes';
import faqAttribute from '@Blocks/faq/attributes';
import faqChildAttribute from '@Blocks/faq-child/attributes';
import inlineNoticeAttribute from '@Blocks/inline-notice/attributes';
import taxonomyListAttribute from '@Blocks/taxonomy-list/attributes';
import reviewAttribute from '@Blocks/review/attributes';
import wpSearchAttribute from '@Blocks/wp-search/attributes';
import formsAttribute from '@Blocks/forms/attributes';
import formsAcceptAttribute from '@Blocks/forms/child-blocks/accept/attributes';
import formsEmailAttribute from '@Blocks/forms/child-blocks/email/attributes';
import formsHiddenAttribute from '@Blocks/forms/child-blocks/hidden/attributes';
import formsNameAttribute from '@Blocks/forms/child-blocks/name/attributes';
import formsToggleAttribute from '@Blocks/forms/child-blocks/toggle/attributes';
import formsUrlAttribute from '@Blocks/forms/child-blocks/url/attributes';
import formsTextareaAttribute from '@Blocks/forms/child-blocks/textarea/attributes';
import tabsAttribute from '@Blocks/tabs/attributes';
import lottieAttribute from '@Blocks/lottie/attributes';
import starRatingAttribute from '@Blocks/star-rating/attributes';
import containerAttribute from '@Blocks/container/attributes';
import imageAttribute from '@Blocks/image/attributes';
import modalAttribute from '@Blocks/modal/attributes';
import counterAttribute from '@Blocks/counter/attributes';
import imageGalleryAttribute from '@Blocks/image-gallery/attributes';
import separatorAttribute from '@Blocks/separator/attributes';
import countdownAttribute from '@Blocks/countdown/attributes';
import sliderAttribute from '@Blocks/slider/attributes';
import sliderChildAttribute from '@Blocks/slider-child/attributes';
import popupBuilderAttribute from '@Blocks/popup-builder/attributes';
export const blocksAttributes = {
'advanced-heading': advancedHeadingAttribute,
'post-grid': postGridAttribute,
'post-carousel': postCarouselAttribute,
'post-masonry': postMasonryAttribute,
'section': sectionAttribute,
'buttons': buttonsAttribute,
'buttons-child': buttonsChildAttribute,
'icon': iconAttribute,
'info-box': infoboxAttribute,
'testimonial': testimonialAttribute,
'team': teamAttribute,
'social-share': socialAttribute,
'social-share-child': socialChildAttribute,
'google-map': googleMapAttribute,
'icon-list': iconListAttribute,
'icon-list-child': iconListChildAttribute,
'restaurant-menu': priceListAttribute,
'restaurant-menu-child': priceListChildAttribute,
'call-to-action': callToActionAttribute,
'column': columnAttribute,
'columns': columnsAttribute,
'gf-styler': gfAttribute,
'cf7-styler': cf7Attribute,
'blockquote': blockquoteAttribute,
'marketing-button': marketingBtnAttribute,
'table-of-contents': tableofContentAttribute,
'how-to': howToAttribute,
'faq': faqAttribute,
'faq-child': faqChildAttribute,
'inline-notice': inlineNoticeAttribute,
'taxonomy-list': taxonomyListAttribute,
'review': reviewAttribute,
'wp-search': wpSearchAttribute,
'forms': formsAttribute,
'forms-accept': formsAcceptAttribute,
'forms-email': formsEmailAttribute,
'forms-hidden': formsHiddenAttribute,
'forms-name': formsNameAttribute,
'forms-toggle': formsToggleAttribute,
'forms-url': formsUrlAttribute,
'forms-textarea': formsTextareaAttribute,
'tabs': tabsAttribute,
'lottie': lottieAttribute,
'star-rating': starRatingAttribute,
'content-timeline': contentAttribute,
'content-timeline-child': contentChildAttribute,
'post-timeline': postTimelineAttribute,
'how-to-step': howToStepAttribute,
'container': containerAttribute,
'image': imageAttribute,
'modal': modalAttribute,
'counter': counterAttribute,
'image-gallery': imageGalleryAttribute,
'separator': separatorAttribute,
'countdown': countdownAttribute,
'slider': sliderAttribute,
'slider-child': sliderChildAttribute,
'popup-builder': popupBuilderAttribute,
};

View File

@@ -0,0 +1,30 @@
<?php
/**
* Blocks config loader.
*
* @package UAGB
*/
if ( ! defined( 'ABSPATH' ) || ! defined( 'UAGB_DIR' ) ) {
exit; // Exit if accessed directly, or if UAGB_DIR is not defined.
}
// Require the dynamic block classes.
require_once UAGB_DIR . 'blocks-config/post/class-uagb-post.php';
require_once UAGB_DIR . 'blocks-config/post-timeline/class-uagb-post-timeline.php';
require_once UAGB_DIR . 'blocks-config/cf7-styler/class-uagb-cf7-styler.php';
require_once UAGB_DIR . 'blocks-config/gf-styler/class-uagb-gf-styler.php';
require_once UAGB_DIR . 'blocks-config/taxonomy-list/class-uagb-taxonomy-list.php';
require_once UAGB_DIR . 'blocks-config/table-of-content/class-uagb-table-of-content.php';
require_once UAGB_DIR . 'blocks-config/forms/class-uagb-forms.php';
require_once UAGB_DIR . 'blocks-config/lottie/class-uagb-lottie.php';
require_once UAGB_DIR . 'blocks-config/image/class-uagb-image.php';
require_once UAGB_DIR . 'blocks-config/image-gallery/class-spectra-image-gallery.php';
require_once UAGB_DIR . 'blocks-config/popup-builder/class-uagb-popup-builder.php';
require_once UAGB_DIR . 'blocks-config/buttons-child/class-uagb-buttons-child.php';
require_once UAGB_DIR . 'blocks-config/google-map/class-uagb-google-map.php';
require_once UAGB_DIR . 'blocks-config/icon/class-spectra-icon.php';
require_once UAGB_DIR . 'blocks-config/faq/class-uagb-faq.php';
// Require the advanced settings PHP classes.
require_once UAGB_DIR . 'blocks-config/advanced-settings/class-uagb-block-positioning.php';

View File

@@ -0,0 +1,91 @@
<?php
/**
* Spectra - Buttons Child
*
* @package UAGB
*
* @since 2.6.3
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Class UAGB_Buttons_Child.
*
* @since 2.6.3
*/
class UAGB_Buttons_Child {
/**
* Member Variable
*
* @since 2.6.3
* @var instance
*/
private static $instance;
/**
* Get class instance.
*
* @since 2.6.3
* @return UAGB_Buttons_Child
*/
public static function get_instance() {
if ( ! isset( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
/**
* Class Constructor.
*
* @since 2.6.3
* @return void
*/
public function __construct() {
add_action( 'init', array( $this, 'register_buttons_child' ) );
}
/**
* Register Buttons Child.
*
* @since 2.6.3
* @return void
*/
public function register_buttons_child() {
register_block_type(
'uagb/buttons-child',
array(
'render_callback' => array( $this, 'render_buttons_child' ),
'uses_context' => array(
'queryId',
'query',
'queryContext',
'attrs',
),
)
);
}
/**
* Render Button Child
*
* @param array $attributes Attributes.
* @param String $content Content.
* @param object $block Block Object.
* @since 2.6.3
* @return string $content.
*/
public function render_buttons_child( $attributes, $content, $block ) {
return apply_filters( 'spectra_buttons_child_content', $content, $attributes, $block );
}
}
/**
* Prepare if class 'UAGB_Buttons_Child' exist.
* Kicking this off by calling 'get_instance()' method
*/
UAGB_Buttons_Child::get_instance();

View File

@@ -0,0 +1,956 @@
<?php
/**
* UAGB - Contact Form 7 Designer.
*
* @package UAGB
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( ! class_exists( 'UAGB_CF7_Styler' ) ) {
/**
* Class UAGB_CF7_Styler.
*/
class UAGB_CF7_Styler {
/**
* Member Variable
*
* @var instance
*/
private static $instance;
/**
* Initiator
*/
public static function get_instance() {
if ( ! isset( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
/**
* Constructor
*/
public function __construct() {
// Activation hook.
add_action( 'init', array( $this, 'register_blocks' ) );
}
/**
* Registers the `core/latest-posts` block on server.
*
* @since 0.0.1
*/
public function register_blocks() {
// Check if the register function exists.
if ( ! function_exists( 'register_block_type' ) ) {
return;
}
$field_border_attribute = array();
$btn_border_attribute = array();
if ( method_exists( 'UAGB_Block_Helper', 'uag_generate_php_border_attribute' ) ) {
$field_border_attribute = UAGB_Block_Helper::uag_generate_php_border_attribute( 'input' );
$btn_border_attribute = UAGB_Block_Helper::uag_generate_php_border_attribute( 'btn' );
}
$enable_legacy_blocks = UAGB_Admin_Helper::get_admin_settings_option( 'uag_enable_legacy_blocks' );
if ( 'yes' === $enable_legacy_blocks ) {
register_block_type(
'uagb/cf7-styler',
array(
'attributes' => array_merge(
$field_border_attribute,
$btn_border_attribute,
array(
'block_id' => array(
'type' => 'string',
),
'align' => array(
'type' => 'string',
'default' => 'left',
),
'className' => array(
'type' => 'string',
),
'formId' => array(
'type' => 'string',
'default' => '0',
),
'isHtml' => array(
'type' => 'boolean',
),
'formJson' => array(
'type' => 'object',
'default' => null,
),
'fieldStyle' => array(
'type' => 'string',
'default' => 'box',
),
'fieldVrPadding' => array(
'type' => 'number',
'default' => 10,
),
'fieldHrPadding' => array(
'type' => 'number',
'default' => 10,
),
'fieldBgColor' => array(
'type' => 'string',
'default' => '#fafafa',
),
'fieldLabelColor' => array(
'type' => 'string',
'default' => '#333',
),
'fieldInputColor' => array(
'type' => 'string',
'default' => '#333',
),
'buttonAlignment' => array(
'type' => 'string',
'default' => 'left',
),
'buttonAlignmentTablet' => array(
'type' => 'string',
'default' => '',
),
'buttonAlignmentMobile' => array(
'type' => 'string',
'default' => '',
),
'buttonVrPadding' => array(
'type' => 'number',
'default' => 10,
),
'buttonHrPadding' => array(
'type' => 'number',
'default' => 25,
),
'buttonTextColor' => array(
'type' => 'string',
'default' => '#333',
),
'buttonBgColor' => array(
'type' => 'string',
'default' => '',
),
'buttonTextHoverColor' => array(
'type' => 'string',
'default' => '#333',
),
'buttonBgHoverColor' => array(
'type' => 'string',
'default' => '',
),
'fieldSpacing' => array(
'type' => 'number',
'default' => '',
),
'fieldSpacingTablet' => array(
'type' => 'number',
),
'fieldSpacingMobile' => array(
'type' => 'number',
),
'fieldLabelSpacing' => array(
'type' => 'number',
'default' => '',
),
'fieldLabelSpacingTablet' => array(
'type' => 'number',
),
'fieldLabelSpacingMobile' => array(
'type' => 'number',
),
'labelFontSize' => array(
'type' => 'number',
'default' => '',
),
'labelFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'labelFontSizeTablet' => array(
'type' => 'number',
),
'labelFontSizeMobile' => array(
'type' => 'number',
),
'labelFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'labelFontWeight' => array(
'type' => 'string',
),
'labelLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'labelLineHeight' => array(
'type' => 'number',
),
'labelLineHeightTablet' => array(
'type' => 'number',
),
'labelLineHeightMobile' => array(
'type' => 'number',
),
'labelLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'inputFontSize' => array(
'type' => 'number',
'default' => '',
),
'inputFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'inputFontSizeTablet' => array(
'type' => 'number',
),
'inputFontSizeMobile' => array(
'type' => 'number',
),
'inputFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'inputFontWeight' => array(
'type' => 'string',
),
'inputLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'inputLineHeight' => array(
'type' => 'number',
),
'inputLineHeightTablet' => array(
'type' => 'number',
),
'inputLineHeightMobile' => array(
'type' => 'number',
),
'inputLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'buttonFontSize' => array(
'type' => 'number',
'default' => '',
),
'buttonFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'buttonFontSizeTablet' => array(
'type' => 'number',
),
'buttonFontSizeMobile' => array(
'type' => 'number',
),
'buttonFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'buttonFontWeight' => array(
'type' => 'string',
),
'buttonLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'buttonLineHeight' => array(
'type' => 'number',
),
'buttonLineHeightTablet' => array(
'type' => 'number',
),
'buttonLineHeightMobile' => array(
'type' => 'number',
),
'buttonLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'enableOveride' => array(
'type' => 'boolean',
'default' => true,
),
'radioCheckSize' => array(
'type' => 'number',
'default' => '',
),
'radioCheckSizeTablet' => array(
'type' => 'number',
),
'radioCheckSizeMobile' => array(
'type' => 'number',
),
'radioCheckBgColor' => array(
'type' => 'string',
'default' => '',
),
'radioCheckSelectColor' => array(
'type' => 'string',
'default' => '',
),
'radioCheckLableColor' => array(
'type' => 'string',
'default' => '',
),
'radioCheckBorderColor' => array(
'type' => 'string',
'default' => '#abb8c3',
),
'radioCheckBorderWidth' => array(
'type' => 'number',
'default' => '',
),
'radioCheckBorderWidthTablet' => array(
'type' => 'number',
'default' => '1',
),
'radioCheckBorderWidthMobile' => array(
'type' => 'number',
'default' => '1',
),
'radioCheckBorderWidthUnit' => array(
'type' => 'string',
'default' => 'px',
),
'radioCheckBorderRadius' => array(
'type' => 'number',
'default' => '',
),
'radioCheckFontSize' => array(
'type' => 'number',
'default' => '',
),
'radioCheckFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'radioCheckFontSizeTablet' => array(
'type' => 'number',
),
'radioCheckFontSizeMobile' => array(
'type' => 'number',
),
'radioCheckFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'radioCheckFontWeight' => array(
'type' => 'string',
),
'radioCheckLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'radioCheckLineHeight' => array(
'type' => 'number',
),
'radioCheckLineHeightTablet' => array(
'type' => 'number',
),
'radioCheckLineHeightMobile' => array(
'type' => 'number',
),
'radioCheckLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'validationMsgPosition' => array(
'type' => 'string',
'default' => 'default',
),
'validationMsgColor' => array(
'type' => 'string',
'default' => '#ff0000',
),
'validationMsgBgColor' => array(
'type' => 'string',
'default' => '',
),
'enableHighlightBorder' => array(
'type' => 'boolean',
'default' => false,
),
'highlightBorderColor' => array(
'type' => 'string',
'default' => '#ff0000',
),
'validationMsgFontSize' => array(
'type' => 'number',
'default' => '',
),
'validationMsgFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'validationMsgFontSizeTablet' => array(
'type' => 'number',
),
'validationMsgFontSizeMobile' => array(
'type' => 'number',
),
'validationMsgFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'validationMsgFontWeight' => array(
'type' => 'string',
),
'validationMsgLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'validationMsgLineHeight' => array(
'type' => 'number',
),
'validationMsgLineHeightTablet' => array(
'type' => 'number',
),
'validationMsgLineHeightMobile' => array(
'type' => 'number',
),
'validationMsgLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'successMsgColor' => array(
'type' => 'string',
'default' => '',
),
'successMsgBgColor' => array(
'type' => 'string',
'default' => '',
),
'successMsgBorderColor' => array(
'type' => 'string',
'default' => '',
),
'errorMsgColor' => array(
'type' => 'string',
'default' => '',
),
'errorMsgBgColor' => array(
'type' => 'string',
'default' => '',
),
'errorMsgBorderColor' => array(
'type' => 'string',
'default' => '',
),
'msgBorderSize' => array(
'type' => 'number',
'default' => '',
),
'msgBorderSizeUnit' => array(
'type' => 'string',
'default' => 'px',
),
'msgBorderRadius' => array(
'type' => 'number',
'default' => '',
),
'msgVrPadding' => array(
'type' => 'number',
'default' => '',
),
'msgHrPadding' => array(
'type' => 'number',
'default' => '',
),
'msgFontSize' => array(
'type' => 'number',
'default' => '',
),
'msgFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'msgFontSizeTablet' => array(
'type' => 'number',
),
'msgFontSizeMobile' => array(
'type' => 'number',
),
'msgFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'msgFontWeight' => array(
'type' => 'string',
),
'msgLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'msgLineHeight' => array(
'type' => 'number',
),
'msgLineHeightTablet' => array(
'type' => 'number',
),
'msgLineHeightMobile' => array(
'type' => 'number',
),
'msgLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'radioCheckBorderRadiusType' => array(
'type' => 'string',
'default' => 'px',
),
'msgBorderRadiusType' => array(
'type' => 'string',
'default' => 'px',
),
'fieldBorderRadiusType' => array(
'type' => 'string',
'default' => 'px',
),
'buttonBorderRadiusType' => array(
'type' => 'string',
'default' => 'px',
),
'messageTopPaddingDesktop' => array(
'type' => 'number',
),
'messageBottomPaddingDesktop' => array(
'type' => 'number',
),
'messageLeftPaddingDesktop' => array(
'type' => 'number',
),
'messageRightPaddingDesktop' => array(
'type' => 'number',
),
'messageTopPaddingTablet' => array(
'type' => 'number',
),
'messageBottomPaddingTablet' => array(
'type' => 'number',
),
'messageLeftPaddingTablet' => array(
'type' => 'number',
),
'messageRightPaddingTablet' => array(
'type' => 'number',
),
'messageTopPaddingMobile' => array(
'type' => 'number',
),
'messageBottomPaddingMobile' => array(
'type' => 'number',
),
'messageLeftPaddingMobile' => array(
'type' => 'number',
),
'messageRightPaddingMobile' => array(
'type' => 'number',
),
'messagePaddingTypeDesktop' => array(
'type' => 'string',
'default' => 'px',
),
'messageSpacingLink' => array(
'type' => 'boolean',
'default' => false,
),
'buttonTopPaddingDesktop' => array(
'type' => 'number',
),
'buttonBottomPaddingDesktop' => array(
'type' => 'number',
),
'buttonLeftPaddingDesktop' => array(
'type' => 'number',
),
'buttonRightPaddingDesktop' => array(
'type' => 'number',
),
'buttonTopPaddingTablet' => array(
'type' => 'number',
),
'buttonBottomPaddingTablet' => array(
'type' => 'number',
),
'buttonLeftPaddingTablet' => array(
'type' => 'number',
),
'buttonRightPaddingTablet' => array(
'type' => 'number',
),
'buttonTopPaddingMobile' => array(
'type' => 'number',
),
'buttonBottomPaddingMobile' => array(
'type' => 'number',
),
'buttonLeftPaddingMobile' => array(
'type' => 'number',
),
'buttonRightPaddingMobile' => array(
'type' => 'number',
),
'buttonPaddingTypeDesktop' => array(
'type' => 'string',
'default' => 'px',
),
'buttonPaddingTypeTablet' => array(
'type' => 'string',
'default' => 'px',
),
'buttonPaddingTypeMobile' => array(
'type' => 'string',
'default' => 'px',
),
'buttonSpacingLink' => array(
'type' => 'boolean',
'default' => false,
),
'fieldTopPaddingDesktop' => array(
'type' => 'number',
),
'fieldBottomPaddingDesktop' => array(
'type' => 'number',
),
'fieldLeftPaddingDesktop' => array(
'type' => 'number',
),
'fieldRightPaddingDesktop' => array(
'type' => 'number',
),
'fieldTopPaddingTablet' => array(
'type' => 'number',
),
'fieldBottomPaddingTablet' => array(
'type' => 'number',
),
'fieldLeftPaddingTablet' => array(
'type' => 'number',
),
'fieldRightPaddingTablet' => array(
'type' => 'number',
),
'fieldTopPaddingMobile' => array(
'type' => 'number',
),
'fieldBottomPaddingMobile' => array(
'type' => 'number',
),
'fieldLeftPaddingMobile' => array(
'type' => 'number',
),
'fieldRightPaddingMobile' => array(
'type' => 'number',
),
'fieldPaddingTypeDesktop' => array(
'type' => 'string',
'default' => 'px',
),
'fieldPaddingTypeTablet' => array(
'type' => 'string',
'default' => 'px',
),
'fieldPaddingTypeMobile' => array(
'type' => 'string',
'default' => 'px',
),
'fieldSpacingLink' => array(
'type' => 'boolean',
'default' => false,
),
'labelTransform' => array(
'type' => 'string',
),
'labelDecoration' => array(
'type' => 'string',
),
'labelFontStyle' => array(
'type' => 'string',
),
'inputTransform' => array(
'type' => 'string',
),
'inputDecoration' => array(
'type' => 'string',
),
'inputFontStyle' => array(
'type' => 'string',
),
'buttonTransform' => array(
'type' => 'string',
),
'buttonDecoration' => array(
'type' => 'string',
),
'buttonFontStyle' => array(
'type' => 'string',
),
'radioCheckTransform' => array(
'type' => 'string',
),
'radioCheckDecoration' => array(
'type' => 'string',
),
'radioCheckFontStyle' => array(
'type' => 'string',
),
'validationMsgTransform' => array(
'type' => 'string',
),
'validationMsgDecoration' => array(
'type' => 'string',
),
'validationMsgFontStyle' => array(
'type' => 'string',
),
'msgTransform' => array(
'type' => 'string',
),
'msgDecoration' => array(
'type' => 'string',
),
'msgFontStyle' => array(
'type' => 'string',
),
'isPreview' => array(
'type' => 'boolean',
'default' => false,
),
'labelLetterSpacing' => array(
'type' => 'number',
'default' => '',
),
'labelLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'labelLetterSpacingMobile' => array(
'type' => 'number',
),
'labelLetterSpacingTablet' => array(
'type' => 'number',
),
'inputLetterSpacing' => array(
'type' => 'number',
'default' => '',
),
'inputLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'inputLetterSpacingMobile' => array(
'type' => 'number',
),
'inputLetterSpacingTablet' => array(
'type' => 'number',
),
'buttonLetterSpacing' => array(
'type' => 'number',
'default' => '',
),
'buttonLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'buttonLetterSpacingMobile' => array(
'type' => 'number',
),
'buttonLetterSpacingTablet' => array(
'type' => 'number',
),
'radioCheckLetterSpacing' => array(
'type' => 'number',
'default' => '',
),
'radioCheckLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'radioCheckLetterSpacingMobile' => array(
'type' => 'number',
),
'radioCheckLetterSpacingTablet' => array(
'type' => 'number',
),
'validationMsgLetterSpacing' => array(
'type' => 'number',
'default' => '',
),
'validationMsgLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'validationMsgLetterSpacingMobile' => array(
'type' => 'number',
),
'validationMsgLetterSpacingTablet' => array(
'type' => 'number',
),
'msgLetterSpacing' => array(
'type' => 'number',
'default' => '',
),
'msgLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'msgLetterSpacingMobile' => array(
'type' => 'number',
),
'msgLetterSpacingTablet' => array(
'type' => 'number',
),
'fieldBorderStyle' => array(
'type' => 'string',
'default' => 'solid',
),
'fieldBorderWidth' => array(
'type' => 'number',
'default' => 1,
),
'fieldBorderRadius' => array(
'type' => 'number',
'default' => 0,
),
'fieldBorderColor' => array(
'type' => 'string',
'default' => '#eeeeee',
),
'fieldBorderFocusColor' => array(
'type' => 'string',
'default' => '',
),
'buttonBorderStyle' => array(
'type' => 'string',
'default' => 'solid',
),
'buttonBorderWidth' => array(
'type' => 'number',
'default' => 1,
),
'buttonBorderRadius' => array(
'type' => 'number',
'default' => 0,
),
'buttonBorderColor' => array(
'type' => 'string',
'default' => '#333',
),
'buttonBorderHoverColor' => array(
'type' => 'string',
'default' => '#333',
),
)
),
'render_callback' => array( $this, 'render_html' ),
)
);
}
}
/**
* Render CF7 HTML.
*
* @param array $attributes Array of block attributes.
*
* @since 1.10.0
*/
public function render_html( $attributes ) {
$form = $attributes['formId'];
$classes = array(
'uagb-cf7-styler__align-' . $attributes['align'],
'uagb-cf7-styler__field-style-' . $attributes['fieldStyle'],
'uagb-cf7-styler__btn-align-' . $attributes['buttonAlignment'],
'uagb-cf7-styler__btn-align-tablet-' . $attributes['buttonAlignmentTablet'],
'uagb-cf7-styler__btn-align-mobile-' . $attributes['buttonAlignmentMobile'],
'uagb-cf7-styler__highlight-style-' . $attributes['validationMsgPosition'],
);
if ( $attributes['enableOveride'] ) {
$classes[] = 'uagb-cf7-styler__check-style-enabled';
}
if ( $attributes['enableHighlightBorder'] ) {
$classes[] = 'uagb-cf7-styler__highlight-border';
}
$desktop_class = '';
$tab_class = '';
$mob_class = '';
if ( array_key_exists( 'UAGHideDesktop', $attributes ) || array_key_exists( 'UAGHideTab', $attributes ) || array_key_exists( 'UAGHideMob', $attributes ) ) {
$desktop_class = ( isset( $attributes['UAGHideDesktop'] ) ) ? 'uag-hide-desktop' : '';
$tab_class = ( isset( $attributes['UAGHideTab'] ) ) ? 'uag-hide-tab' : '';
$mob_class = ( isset( $attributes['UAGHideMob'] ) ) ? 'uag-hide-mob' : '';
}
$main_classes = array(
'wp-block-uagb-cf7-styler',
'uagb-cf7-styler__outer-wrap',
'uagb-block-' . $attributes['block_id'],
$desktop_class,
$tab_class,
$mob_class,
);
if ( isset( $attributes['className'] ) ) {
$main_classes[] = $attributes['className'];
}
ob_start();
if ( $form && 0 !== $form && -1 !== $form ) {
?>
<div class = "<?php echo esc_attr( implode( ' ', $main_classes ) ); ?>">
<div class = "<?php echo esc_attr( implode( ' ', $classes ) ); ?>">
<?php echo do_shortcode( '[contact-form-7 id="' . $form . '"]' ); ?>
</div>
</div>
<?php
}
return ob_get_clean();
}
}
/**
* Prepare if class 'UAGB_CF7_Styler' exist.
* Kicking this off by calling 'get_instance()' method
*/
UAGB_CF7_Styler::get_instance();
}

View File

@@ -0,0 +1,549 @@
<?php
/**
* UAGB Forms.
*
* @package UAGB
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( ! class_exists( 'UAGB_Forms' ) ) {
/**
* Class UAGB_Forms.
*/
class UAGB_Forms {
/**
* Member Variable
*
* @since 1.22.0
* @var instance
*/
private static $instance;
/**
* Member Variable
*
* @since 1.22.0
* @var settings
*/
private static $settings;
/**
* Initiator
*
* @since 1.22.0
*/
public static function get_instance() {
if ( ! isset( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
/**
*
* Constructor
*
* @since 1.22.0
*/
public function __construct() {
add_action( 'wp_ajax_uagb_process_forms', array( $this, 'process_forms' ) );
add_action( 'wp_ajax_nopriv_uagb_process_forms', array( $this, 'process_forms' ) );
}
/**
* Return the blocks content for reusable block.
*
* @param int $reusable_ref_id reference id of reusable block.
* @since 2.6.2
* @return array
*/
public function reusable_block_content_on_page( $reusable_ref_id ) {
if ( is_int( $reusable_ref_id ) ) {
$content = get_post_field( 'post_content', $reusable_ref_id );
return parse_blocks( $content );
}
return array();
}
/**
* Generates ids for all wp template part.
*
* @param array $block_attr attributes array.
* @since 2.6.2
* @return integer|boolean
*/
public function get_fse_template_part( $block_attr ) {
if ( empty( $block_attr['slug'] ) ) {
return false;
}
$id = false;
$slug = $block_attr['slug'];
$templates_parts = get_block_templates( array( 'slugs__in' => $slug ), 'wp_template_part' );
foreach ( $templates_parts as $templates_part ) {
if ( $slug === $templates_part->slug ) {
$id = $templates_part->wp_id;
break;
}
}
return $id;
}
/**
* Return array of validated attributes.
*
* @param array $block_attr of Block.
* @param string $block_id of Block.
* @since 2.6.2
* @return array
*/
public function uagb_forms_block_attr_check( $block_attr, $block_id ) {
if ( ! empty( $block_attr['ref'] ) ) {
$reusable_blocks_content = $this->reusable_block_content_on_page( $block_attr['ref'] );
$block_attr = $this->recursive_inner_forms( $reusable_blocks_content, $block_id );
}
if ( ! empty( $block_attr['slug'] ) ) {
$id = $this->get_fse_template_part( $block_attr );
$reusable_blocks_content = $this->reusable_block_content_on_page( $id );
$block_attr = $this->recursive_inner_forms( $reusable_blocks_content, $block_id );
}
return ( is_array( $block_attr ) && $block_attr['block_id'] === $block_id ) ? $block_attr : false;
}
/**
* Get the Inner blocks array.
*
* @since 2.3.5
* @access private
*
* @param array $blocks_array Block Array.
* @param string $block_id of Block.
*
* @return mixed $recursive_inner_forms inner blocks Array.
*/
private function recursive_inner_forms( $blocks_array, $block_id ) {
if ( empty( $blocks_array ) ) {
return;
}
foreach ( $blocks_array as $blocks ) {
if ( empty( $blocks ) ) {
continue;
}
if ( ! empty( $blocks['attrs'] ) && isset( $blocks['blockName'] ) && ( 'uagb/forms' === $blocks['blockName'] || 'core/block' === $blocks['blockName'] || 'core/template-part' === $blocks['blockName'] ) ) {
$blocks_attrs = $this->uagb_forms_block_attr_check( $blocks['attrs'], $block_id );
if ( ! $blocks_attrs ) {
continue;
}
return $blocks_attrs;
} else {
if ( is_array( $blocks['innerBlocks'] ) && ! empty( $blocks['innerBlocks'] ) ) {
foreach ( $blocks['innerBlocks'] as $j => $inner_block ) {
if ( ! empty( $inner_block['attrs'] ) && isset( $inner_block['blockName'] ) && ( 'uagb/forms' === $inner_block ['blockName'] || 'core/block' === $inner_block['blockName'] || 'core/template-part' === $blocks['blockName'] ) ) {
$inner_block_attrs = $this->uagb_forms_block_attr_check( $inner_block['attrs'], $block_id );
if ( ! $inner_block_attrs ) {
continue;
}
return $inner_block_attrs;
} else {
$temp_attrs = $this->recursive_inner_forms( $inner_block['innerBlocks'], $block_id );
if ( ! empty( $temp_attrs ) && isset( $temp_attrs['block_id'] ) && $temp_attrs['block_id'] === $block_id ) {
return $temp_attrs;
}
}
}
}
}
}
}
/**
*
* Form Process Initiated.
*
* @since 1.22.0
*/
public function process_forms() {
check_ajax_referer( 'uagb_forms_ajax_nonce', 'nonce' );
$options = array(
'recaptcha_site_key_v2' => \UAGB_Admin_Helper::get_admin_settings_option( 'uag_recaptcha_site_key_v2', '' ),
'recaptcha_site_key_v3' => \UAGB_Admin_Helper::get_admin_settings_option( 'uag_recaptcha_site_key_v3', '' ),
'recaptcha_secret_key_v2' => \UAGB_Admin_Helper::get_admin_settings_option( 'uag_recaptcha_secret_key_v2', '' ),
'recaptcha_secret_key_v3' => \UAGB_Admin_Helper::get_admin_settings_option( 'uag_recaptcha_secret_key_v3', '' ),
);
if ( empty( $_POST['post_id'] ) || empty( $_POST['block_id'] ) ) {
wp_send_json_error( 400 );
}
$current_block_attributes = false;
$block_id = sanitize_text_field( $_POST['block_id'] );
$post_content = get_post_field( 'post_content', sanitize_text_field( $_POST['post_id'] ) );
if ( has_block( 'uagb/forms', $post_content ) || has_block( 'core/block', $post_content ) ) {
$blocks = parse_blocks( $post_content );
if ( ! empty( $blocks ) && is_array( $blocks ) ) {
$current_block_attributes = $this->recursive_inner_forms( $blocks, $block_id );
}
}
if ( function_exists( 'wp_is_block_theme' ) && wp_is_block_theme() ) {
$wp_query_args = array(
'post_status' => array( 'publish' ),
'post_type' => array( 'wp_template', 'wp_template_part' ),
);
$template_query = new WP_Query( $wp_query_args );
$template_query_posts = $template_query->posts;
if ( ! empty( $template_query_posts ) && is_array( $template_query_posts ) ) {
foreach ( $template_query_posts as $post ) {
if ( ! function_exists( '_build_block_template_result_from_post' ) ) {
continue;
}
$template = _build_block_template_result_from_post( $post );
if ( is_wp_error( $template ) ) {
continue;
}
$template_post_content = $template->content . ( ! empty( $post_content ) ? $post_content : '' );
$template_content = parse_blocks( $template_post_content );
if ( get_template() === $template->theme && ! empty( $template_content ) && is_array( $template_content ) ) {
$current_block_attributes = $this->recursive_inner_forms( $template_content, $block_id );
if ( is_array( $current_block_attributes ) && $current_block_attributes['block_id'] === $block_id ) {
break;
}
}
}
}
}
$widget_content = get_option( 'widget_block' );
if ( ! empty( $widget_content ) && is_array( $widget_content ) && empty( $current_block_attributes ) ) {
foreach ( $widget_content as $value ) {
if ( ! is_array( $value ) || empty( $value['content'] ) ) {
continue;
}
if ( has_block( 'uagb/forms', $value['content'] ) ) {
$current_block_attributes = $this->recursive_inner_forms( parse_blocks( $value['content'] ), $block_id );
if ( is_array( $current_block_attributes ) && $current_block_attributes['block_id'] === $block_id ) {
break;
}
}
}
}
// Check for $current_block_attributes is not set and check for Advanced Hooks.
if ( empty( $current_block_attributes ) && defined( 'ASTRA_ADVANCED_HOOKS_POST_TYPE' ) ) {
$option = array(
'location' => 'ast-advanced-hook-location',
'exclusion' => 'ast-advanced-hook-exclusion',
'users' => 'ast-advanced-hook-users',
);
$result = Astra_Target_Rules_Fields::get_instance()->get_posts_by_conditions( ASTRA_ADVANCED_HOOKS_POST_TYPE, $option );
if ( ! empty( $result ) && is_array( $result ) ) {
$post_ids = array_keys( $result );
foreach ( $post_ids as $post_id ) {
$custom_post = get_post( $post_id );
if ( ! $custom_post instanceof WP_Post ) {
continue;
}
$post_content = $custom_post->post_content;
if ( has_block( 'uagb/forms', $post_content ) ) {
$blocks = parse_blocks( $post_content );
if ( ! empty( $blocks ) && is_array( $blocks ) ) {
$current_block_attributes = $this->recursive_inner_forms( $blocks, $block_id );
if ( is_array( $current_block_attributes ) && $current_block_attributes['block_id'] === $block_id ) {
break;
}
}
}
}
}
}
if ( empty( $current_block_attributes ) ) {
wp_send_json_error( 400 );
}
$admin_email = get_option( 'admin_email' );
if ( is_array( $current_block_attributes ) ) {
if ( isset( $current_block_attributes['afterSubmitToEmail'] ) && empty( trim( $current_block_attributes['afterSubmitToEmail'] ) ) && is_string( $admin_email ) ) {
$current_block_attributes['afterSubmitToEmail'] = sanitize_email( $admin_email );
}
if ( ! isset( $current_block_attributes['reCaptchaType'] ) ) {
$current_block_attributes['reCaptchaType'] = 'v2';
}
// bail if recaptcha is enabled and recaptchaType is not set.
if ( ! empty( $current_block_attributes['reCaptchaEnable'] ) && empty( $current_block_attributes['reCaptchaType'] ) ) {
wp_send_json_error( 400 );
}
if ( 'v2' === $current_block_attributes['reCaptchaType'] ) {
$google_recaptcha_site_key = $options['recaptcha_site_key_v2'];
$google_recaptcha_secret_key = $options['recaptcha_secret_key_v2'];
} elseif ( 'v3' === $current_block_attributes['reCaptchaType'] ) {
$google_recaptcha_site_key = $options['recaptcha_site_key_v3'];
$google_recaptcha_secret_key = $options['recaptcha_secret_key_v3'];
}
if ( ! empty( $current_block_attributes['reCaptchaEnable'] ) && ! empty( $google_recaptcha_secret_key ) && ! empty( $google_recaptcha_site_key ) ) {
// Google recaptcha secret key verification starts.
$google_recaptcha = isset( $_POST['captcha_response'] ) ? sanitize_text_field( $_POST['captcha_response'] ) : '';
$remoteip = isset( $_SERVER['REMOTE_ADDR'] ) ? sanitize_text_field( $_SERVER['REMOTE_ADDR'] ) : '';
// calling google recaptcha api.
$google_url = 'https://www.google.com/recaptcha/api/siteverify';
$errors = new WP_Error();
if ( empty( $google_recaptcha ) || empty( $remoteip ) ) {
$errors->add( 'invalid_api', __( 'Please try logging in again to verify that you are not a robot.', 'ultimate-addons-for-gutenberg' ) );
return $errors;
} else {
$google_response = wp_safe_remote_get(
add_query_arg(
array(
'secret' => $google_recaptcha_secret_key,
'response' => $google_recaptcha,
'remoteip' => $remoteip,
),
$google_url
)
);
if ( is_wp_error( $google_response ) ) {
$errors->add( 'invalid_recaptcha', __( 'Please try logging in again to verify that you are not a robot.', 'ultimate-addons-for-gutenberg' ) );
return $errors;
} else {
$google_response = wp_remote_retrieve_body( $google_response );
$decode_google_response = json_decode( $google_response );
if ( false === $decode_google_response->success ) {
wp_send_json_error( 400 );
}
}
}
}
}
if ( empty( $google_recaptcha_secret_key ) && ! empty( $google_recaptcha_site_key ) ) {
wp_send_json_error( 400 );
}
if ( ! empty( $google_recaptcha_secret_key ) && empty( $google_recaptcha_site_key ) ) {
wp_send_json_error( 400 );
}
// sanitizing form_data elements in later stage.
$form_data = isset( $_POST['form_data'] ) ? json_decode( wp_unslash( $_POST['form_data'] ), true ) : array(); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
$body = '';
$body .= '<div style="border: 50px solid #f6f6f6;">';
$body .= '<div style="padding: 15px;">';
foreach ( $form_data as $key => $value ) {
if ( $key ) {
if ( is_array( $value ) && stripos( wp_json_encode( $value ), '+' ) !== false ) {
$val = implode( '', $value );
$body .= '<p><strong>' . str_replace( '_', ' ', ucwords( esc_html( $key ) ) ) . '</strong> - ' . esc_html( $val ) . '</p>';
} elseif ( is_array( $value ) ) {
$val = implode( ', ', $value );
$body .= '<p><strong>' . str_replace( '_', ' ', ucwords( esc_html( $key ) ) ) . '</strong> - ' . esc_html( $val ) . '</p>';
} else {
$body .= '<p><strong>' . str_replace( '_', ' ', ucwords( esc_html( $key ) ) ) . '</strong> - ' . esc_html( $value ) . '</p>';
}
}
}
$body .= '<p style="text-align:center;">This e-mail was sent from a ' . get_bloginfo( 'name' ) . ' ( ' . site_url() . ' )</p>';
$body .= '</div>';
$body .= '</div>';
$this->send_email( $body, $form_data, $current_block_attributes );
}
/**
* Validate emails from $to, $cc and $bcc.
*
* @param array $emails array.
* @since 2.7.0
* @return array
*/
public function get_valid_emails( $emails ) {
$valid_emails = array();
if ( is_array( $emails ) ) {
foreach ( $emails as $email ) {
$email = trim( $email );
$email = sanitize_email( $email );
if ( is_email( $email ) ) {
$valid_emails[] = $email;
}
}
}
return $valid_emails;
}
/**
*
* Trigger Mail.
*
* @param object $body Email Body.
* @param object $form_data Email Body Array.
* @param object $args Extra Data.
*
* @since 1.22.0
*/
public function send_email( $body, $form_data, $args ) {
$to = isset( $args['afterSubmitToEmail'] ) ? trim( $args['afterSubmitToEmail'] ) : sanitize_email( get_option( 'admin_email' ) );
$cc = isset( $args['afterSubmitCcEmail'] ) ? trim( $args['afterSubmitCcEmail'] ) : '';
$bcc = isset( $args['afterSubmitBccEmail'] ) ? trim( $args['afterSubmitBccEmail'] ) : '';
$subject = isset( $args['afterSubmitEmailSubject'] ) ? $args['afterSubmitEmailSubject'] : __( 'Form Submission', 'ultimate-addons-for-gutenberg' );
if ( ! empty( $to ) && is_string( $to ) ) {
$to_emails = $this->get_valid_emails( explode( ',', $to ) );
}
if ( ! empty( $cc ) && is_string( $cc ) ) {
$cc_emails = $this->get_valid_emails( explode( ',', $cc ) );
}
if ( ! empty( $bcc ) && is_string( $bcc ) ) {
$bcc_emails = $this->get_valid_emails( explode( ',', $bcc ) );
}
if ( empty( $to_emails ) ) {
wp_send_json_success( 400 );
}
$sender_email_address = ! empty( $form_data['Email'] ) ? sanitize_email( $form_data['Email'] ) : 'example@mail.com';
$headers = array( 'Content-Type: text/html; charset=UTF-8', 'From: Email <' . $sender_email_address . '>' );
foreach ( $to_emails as $email ) {
$headers[] = 'Reply-To: ' . get_bloginfo( 'name' ) . ' <' . $email . '>';
}
if ( ! empty( $cc_emails ) ) {
foreach ( $cc_emails as $email ) {
$headers[] = 'Cc: ' . $email;
}
}
if ( ! empty( $bcc_emails ) ) {
foreach ( $bcc_emails as $email ) {
$headers[] = 'Bcc: ' . $email;
}
}
$successful_mail = wp_mail( $to_emails, $subject, $body, $headers );
if ( $successful_mail ) {
do_action( 'uagb_form_success', $form_data );
wp_send_json_success( 200 );
} else {
wp_send_json_success( 400 );
}
}
/**
* Validates that a given URL uses the HTTPS scheme and is well-formed.
*
* This function checks that the provided URL is properly structured and
* uses the secure HTTPS protocol. If the URL passes validation, it returns
* an escaped version of the URL. Otherwise, it returns an empty string.
*
* @param string $url The URL to be validated.
*
* @since 2.16.5
* @return string Escaped URL if valid and uses HTTPS; otherwise, an empty string.
*/
public static function validate_confirmation_url( $url ) {
// First, we check that the URL starts with 'https://' to
// ensure that the URL is using the secure HTTPS protocol.
//
// Additionally, use the filter_var() function to validate that the URL
// conforms to the proper URL structure. This function takes two
// arguments: the URL to be validated and a filter constant. The
// FILTER_VALIDATE_URL constant is used to validate that the URL is
// well-formed.
//
// If the URL is not valid, then return an empty string. This will
// prevent the function from attempting to parse the URL and extract
// its components.
if ( strpos( $url, 'https://' ) !== 0 || ! filter_var( $url, FILTER_VALIDATE_URL ) ) {
// Return an empty string if the URL is invalid.
return '';
}
$parsed_url = wp_parse_url( $url );
// Check if the URL is well-formed and uses HTTPS.
//
// wp_parse_url() is a WordPress function that takes a URL and
// breaks it down into its component parts. It returns an array
// containing the following keys:
// - host: The hostname of the URL (e.g. example.com)
// - scheme: The protocol used in the URL (e.g. http or https)
// - port: The port number used in the URL (if applicable)
// - user: The username used in the URL (if applicable)
// - pass: The password used in the URL (if applicable)
// - path: The path used in the URL (e.g. /about)
// - query: The query string used in the URL (e.g. ?name=John)
// - fragment: The fragment used in the URL (e.g. #top)
//
// We need to check that $parsed_url is an array, and that it
// contains the 'host' and 'scheme' keys. If any of these checks
// fail, we return an empty string.
//
// If the URL is well-formed and uses HTTPS, we escape the URL
// using WordPress's esc_url() function, and return the result.
if ( is_array( $parsed_url )
&& isset( $parsed_url['host'] )
&& isset( $parsed_url['scheme'] ) &&
'https' === $parsed_url['scheme']
) {
// If the URL is well-formed and uses HTTPS, return an escaped
// version of the URL.
return esc_url( $url );
}
// Return an empty string if validation fails.
return '';
}
}
/**
* Prepare if class 'UAGB_Forms' exist.
* Kicking this off by calling 'get_instance()' method
*/
UAGB_Forms::get_instance();
}

View File

@@ -0,0 +1,211 @@
<?php
/**
* UAGB Google Map.
*
* @package UAGB
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( ! class_exists( 'UAGB_Google_Map' ) ) {
/**
* Class UAGB_Google_Map.
*/
class UAGB_Google_Map {
/**
* Member Variable
*
* @since 2.6.4
* @var instance
*/
private static $instance;
/**
* Initiator
*
* @since 2.6.4
*/
public static function get_instance() {
if ( ! isset( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
/**
* Constructor
*/
public function __construct() {
add_action( 'init', array( $this, 'register_blocks' ) );
}
/**
* Registers the `core/latest-posts` block on server.
*
* @since 2.6.4
*/
public function register_blocks() {
// Check if the register function exists.
if ( ! function_exists( 'register_block_type' ) ) {
return;
}
register_block_type(
'uagb/google-map',
array(
'attributes' => array(
'block_id' => array(
'type' => 'string',
),
'address' => array(
'type' => 'string',
'default' => 'Brainstorm Force',
),
'height' => array(
'type' => 'number',
'default' => 300,
),
'heightTablet' => array(
'type' => 'number',
'default' => 300,
),
'heightMobile' => array(
'type' => 'number',
'default' => 300,
),
'zoom' => array(
'type' => 'number',
'default' => 12,
),
'language' => array(
'type' => 'string',
'default' => 'en',
),
'isPreview' => array(
'type' => 'boolean',
'default' => false,
),
'enableSatelliteView' => array(
'type' => 'boolean',
'default' => false,
),
),
'render_callback' => array( $this, 'google_map_callback' ),
)
);
}
/**
* Renders the Google Map block on server.
*
* @param array $attributes Array of block attributes.
*
* @since 2.6.4
*/
public function google_map_callback( $attributes ) {
$desktop_class = '';
$tab_class = '';
$mob_class = '';
/**
* Added filter to attributes to support Dynamic Content.
*
* @since 2.7.0
* @hooked Pro -> DynamicContent->uagb_google_map_block_attributes
* */
$attributes = apply_filters( 'uagb_google_map_block_attributes', $attributes );
if ( array_key_exists( 'UAGHideDesktop', $attributes ) || array_key_exists( 'UAGHideTab', $attributes ) || array_key_exists( 'UAGHideMob', $attributes ) ) {
$desktop_class = ( isset( $attributes['UAGHideDesktop'] ) ) ? 'uag-hide-desktop' : '';
$tab_class = ( isset( $attributes['UAGHideTab'] ) ) ? 'uag-hide-tab' : '';
$mob_class = ( isset( $attributes['UAGHideMob'] ) ) ? 'uag-hide-mob' : '';
}
$zindex_desktop = '';
$zindex_tablet = '';
$zindex_mobile = '';
$zindex_wrap = array();
$zindex_extention_enabled = ( isset( $attributes['zIndex'] ) || isset( $attributes['zIndexTablet'] ) || isset( $attributes['zIndexMobile'] ) );
if ( $zindex_extention_enabled ) {
$zindex_desktop = ( isset( $attributes['zIndex'] ) ) ? '--z-index-desktop:' . $attributes['zIndex'] . ';' : false;
$zindex_tablet = ( isset( $attributes['zIndexTablet'] ) ) ? '--z-index-tablet:' . $attributes['zIndexTablet'] . ';' : false;
$zindex_mobile = ( isset( $attributes['zIndexMobile'] ) ) ? '--z-index-mobile:' . $attributes['zIndexMobile'] . ';' : false;
if ( $zindex_desktop ) {
array_push( $zindex_wrap, $zindex_desktop );
}
if ( $zindex_tablet ) {
array_push( $zindex_wrap, $zindex_tablet );
}
if ( $zindex_mobile ) {
array_push( $zindex_wrap, $zindex_mobile );
}
}
$block_id = 'uagb-block-' . $attributes['block_id'];
$main_classes = array(
'wp-block-uagb-google-map',
'uagb-google-map__wrap',
$block_id,
$desktop_class,
$tab_class,
$mob_class,
$zindex_extention_enabled ? 'uag-blocks-common-selector' : '',
( is_array( $attributes ) && isset( $attributes['className'] ) ) ? $attributes['className'] : '',
);
$address = ! empty( $attributes['address'] ) ? rawurlencode( $attributes['address'] ) : rawurlencode( 'Brainstorm Force' );
$zoom = ! empty( $attributes['zoom'] ) ? $attributes['zoom'] : 12;
$language = ! empty( $attributes['language'] ) ? $attributes['language'] : 'en';
$height = ! empty( $attributes['height'] ) ? $attributes['height'] : 300;
$map_type = 'm';
if ( is_array( $attributes ) && isset( $attributes['enableSatelliteView'] ) ) {
$map_type = $attributes['enableSatelliteView'] ? 'k' : 'm';
}
$updated_url = add_query_arg(
array(
'q' => $address,
'z' => $zoom,
'hl' => $language,
't' => $map_type,
'output' => 'embed',
'iwloc' => 'near',
),
'https://maps.google.com/maps'
);
ob_start();
?>
<div
class="<?php echo esc_attr( implode( ' ', $main_classes ) ); ?>"
style="<?php echo esc_attr( implode( '', $zindex_wrap ) ); ?>" >
<embed
class="uagb-google-map__iframe"
title="<?php _e( 'Google Map for ', 'ultimate-addons-for-gutenberg' ) . $address; ?>"
src="<?php echo esc_url_raw( $updated_url ); ?>"
width="640"
height="<?php echo floatval( $height ); ?>"
loading="lazy"
></embed>
</div>
<?php
return ob_get_clean();
}
}
/**
* Prepare if class 'UAGB_Google_Map' exist.
* Kicking this off by calling 'get_instance()' method
*/
UAGB_Google_Map::get_instance();
}

View File

@@ -0,0 +1,614 @@
<?php
/**
* Spectra - Icon
*
* @since 2.12.5
* @package UAGB
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( ! class_exists( 'Spectra_Icon' ) ) {
/**
* Class Spectra_Icon.
*
* @since 2.12.5
*/
final class Spectra_Icon {
/**
* Member Variable
*
* @since 2.12.5
* @var Spectra_Icon
*/
private static $instance;
/**
* Initiator
*
* @since 2.12.5
* @return Spectra_Icon
*/
public static function get_instance() {
if ( null === self::$instance ) {
self::$instance = new self();
}
return self::$instance;
}
/**
* Constructor
*
* @since 2.12.5
*/
public function __construct() {
add_action( 'init', array( $this, 'register_icon' ) );
}
/**
* Registers the `icon` block on server.
*
* @since 2.12.5
* @return void
*/
public function register_icon() {
// Check if the register function exists.
if ( ! function_exists( 'register_block_type' ) ) {
return;
}
$icon_border_attributes = array();
$icon_border_attributes = UAGB_Block_Helper::uag_generate_php_border_attribute( 'icon' ); // @phpstan-ignore-line
register_block_type(
'uagb/icon',
array(
'attributes' => array_merge(
array(
'icon' => array(
'type' => 'string',
'default' => 'circle-check',
),
// Size.
'iconSize' => array(
'type' => 'number',
'default' => 40,
),
'iconSizeTablet' => array(
'type' => 'number',
),
'iconSizeMobile' => array(
'type' => 'number',
),
'iconSizeUnit' => array(
'type' => 'string',
'default' => 'px',
),
),
// Alignment.
array(
'align' => array(
'type' => 'string',
'default' => 'center',
),
'alignTablet' => array(
'type' => 'string',
'default' => '',
),
'alignMobile' => array(
'type' => 'string',
'default' => '',
),
),
// Color.
array(
'iconColor' => array(
'type' => 'string',
'default' => '#333',
),
'iconBorderColor' => array(
'type' => 'string',
'default' => '',
),
'iconBackgroundColorType' => array(
'type' => 'string',
'default' => 'classic',
),
'iconBackgroundColor' => array(
'type' => 'string',
'default' => '',
),
'iconBackgroundGradientColor' => array(
'type' => 'string',
'default' => 'linear-gradient(90deg, rgb(155, 81, 224) 0%, rgb(6, 147, 227) 100%)',
),
'iconHoverColor' => array(
'type' => 'string',
'default' => '',
),
'iconHoverBackgroundColorType' => array(
'type' => 'string',
'default' => 'classic',
),
'iconHoverBackgroundColor' => array(
'type' => 'string',
),
'iconHoverBackgroundGradientColor' => array(
'type' => 'string',
'default' => 'linear-gradient(90deg, rgb(155, 81, 224) 0%, rgb(6, 147, 227) 100%)',
),
),
// Rotation.
array(
'rotation' => array(
'type' => 'number',
'default' => 0,
),
'rotationUnit' => array(
'type' => 'string',
'default' => 'deg',
),
'block_id' => array(
'type' => 'string',
),
),
// Link related attributes.
array(
'link' => array(
'type' => 'string',
'default' => '',
),
'target' => array(
'type' => 'boolean',
'default' => false,
),
'disableLink' => array(
'type' => 'boolean',
'default' => false,
),
'iconAccessabilityMode' => array(
'type' => 'string',
'default' => 'svg',
),
'iconAccessabilityDesc' => array(
'type' => 'string',
'default' => '',
),
),
// Padding.
array(
'iconTopPadding' => array(
'type' => 'number',
'default' => 5,
),
'iconRightPadding' => array(
'type' => 'number',
'default' => 5,
),
'iconLeftPadding' => array(
'type' => 'number',
'default' => 5,
),
'iconBottomPadding' => array(
'type' => 'number',
'default' => 5,
),
'iconTopTabletPadding' => array(
'type' => 'number',
),
'iconRightTabletPadding' => array(
'type' => 'number',
),
'iconLeftTabletPadding' => array(
'type' => 'number',
),
'iconBottomTabletPadding' => array(
'type' => 'number',
),
'iconTopMobilePadding' => array(
'type' => 'number',
),
'iconRightMobilePadding' => array(
'type' => 'number',
),
'iconLeftMobilePadding' => array(
'type' => 'number',
),
'iconBottomMobilePadding' => array(
'type' => 'number',
),
'iconPaddingUnit' => array(
'type' => 'string',
'default' => 'px',
),
'iconTabletPaddingUnit' => array(
'type' => 'string',
'default' => 'px',
),
'iconMobilePaddingUnit' => array(
'type' => 'string',
'default' => 'px',
),
'iconPaddingLink' => array(
'type' => 'boolean',
'default' => false,
),
),
// Margin.
array(
'iconTopMargin' => array(
'type' => 'number',
),
'iconRightMargin' => array(
'type' => 'number',
),
'iconLeftMargin' => array(
'type' => 'number',
),
'iconBottomMargin' => array(
'type' => 'number',
),
'iconTopTabletMargin' => array(
'type' => 'number',
),
'iconRightTabletMargin' => array(
'type' => 'number',
),
'iconLeftTabletMargin' => array(
'type' => 'number',
),
'iconBottomTabletMargin' => array(
'type' => 'number',
),
'iconTopMobileMargin' => array(
'type' => 'number',
),
'iconRightMobileMargin' => array(
'type' => 'number',
),
'iconLeftMobileMargin' => array(
'type' => 'number',
),
'iconBottomMobileMargin' => array(
'type' => 'number',
),
'iconMarginUnit' => array(
'type' => 'string',
'default' => 'px',
),
'iconTabletMarginUnit' => array(
'type' => 'string',
'default' => 'px',
),
'iconMobileMarginUnit' => array(
'type' => 'string',
'default' => 'px',
),
'iconMarginLink' => array(
'type' => 'boolean',
'default' => false,
),
'isPreview' => array(
'type' => 'boolean',
'default' => false,
),
'iconBorderStyle' => array(
'type' => 'string',
'default' => 'default',
),
'useSeparateBoxShadows' => array(
'type' => 'boolean',
'default' => true,
),
'iconShadowColor' => array(
'type' => 'string',
'default' => '#00000070',
),
'iconShadowHOffset' => array(
'type' => 'number',
'default' => 0,
),
'iconShadowVOffset' => array(
'type' => 'number',
'default' => 0,
),
'iconShadowBlur' => array(
'type' => 'number',
'default' => 0,
),
'iconBoxShadowColor' => array(
'type' => 'string',
'default' => '#00000070',
),
'iconBoxShadowHOffset' => array(
'type' => 'number',
'default' => 0,
),
'iconBoxShadowVOffset' => array(
'type' => 'number',
'default' => 0,
),
'iconBoxShadowBlur' => array(
'type' => 'number',
),
'iconBoxShadowSpread' => array(
'type' => 'number',
),
'iconBoxShadowPosition' => array(
'type' => 'string',
'default' => 'outset',
),
'iconShadowColorHover' => array(
'type' => 'string',
'default' => '#00000070',
),
'iconShadowHOffsetHover' => array(
'type' => 'number',
'default' => 0,
),
'iconShadowVOffsetHover' => array(
'type' => 'number',
'default' => 0,
),
'iconShadowBlurHover' => array(
'type' => 'number',
'default' => 0,
),
'iconBoxShadowColorHover' => array(
'type' => 'string',
),
'iconBoxShadowHOffsetHover' => array(
'type' => 'number',
'default' => 0,
),
'iconBoxShadowVOffsetHover' => array(
'type' => 'number',
'default' => 0,
),
'iconBoxShadowBlurHover' => array(
'type' => 'number',
),
'iconBoxShadowSpreadHover' => array(
'type' => 'number',
),
'iconBoxShadowPositionHover' => array(
'type' => 'string',
'default' => 'outset',
),
),
// Responsive Borders.
$icon_border_attributes
),
'render_callback' => array( $this, 'render_uagb_icon' ),
)
);
}
/**
* Check if a URL has a protocol (http/https).
*
* @since 2.12.5
*
* @param string $url The URL to check.
* @return bool Whether the URL has a protocol.
*/
public static function get_protocol( $url ) {
$urlParts = wp_parse_url( $url );
if ( is_array( $urlParts ) ) {
return isset( $urlParts['scheme'] );
}
return false;
}
/**
* Prepend 'http://' to a URL if it doesn't have a protocol.
*
* @since 2.12.5
*
* @param string $url The URL to prepend 'http://' to.
* @return string The modified URL.
*/
public static function prepend_http( $url ) {
return ( ! empty( $url ) && ! self::get_protocol( $url ) ) ? 'http://' . $url : $url;
}
/**
* Renders the icon block.
*
* @param array $attributes Array of block attributes.
*
* @since 2.12.5
* @return string|false
*/
public function render_uagb_icon( $attributes ) {
$block_id = 'uagb-block-' . $attributes['block_id'];
$iconBottomMargin = isset( $attributes['iconBottomMargin'] ) ? $attributes['iconBottomMargin'] : '';
$iconLeftMargin = isset( $attributes['iconLeftMargin'] ) ? $attributes['iconLeftMargin'] : '';
$iconRightMargin = isset( $attributes['iconRightMargin'] ) ? $attributes['iconRightMargin'] : '';
$iconTopMargin = isset( $attributes['iconTopMargin'] ) ? $attributes['iconTopMargin'] : '';
$iconBottomTabletMargin = isset( $attributes['iconBottomTabletMargin'] ) ? $attributes['iconBottomTabletMargin'] : '';
$iconLeftTabletMargin = isset( $attributes['iconLeftTabletMargin'] ) ? $attributes['iconLeftTabletMargin'] : '';
$iconRightTabletMargin = isset( $attributes['iconRightTabletMargin'] ) ? $attributes['iconRightTabletMargin'] : '';
$iconTopTabletMargin = isset( $attributes['iconTopTabletMargin'] ) ? $attributes['iconTopTabletMargin'] : '';
$iconBottomMobileMargin = isset( $attributes['iconBottomMobileMargin'] ) ? $attributes['iconBottomMobileMargin'] : '';
$iconLeftMobileMargin = isset( $attributes['iconLeftMobileMargin'] ) ? $attributes['iconLeftMobileMargin'] : '';
$iconRightMobileMargin = isset( $attributes['iconRightMobileMargin'] ) ? $attributes['iconRightMobileMargin'] : '';
$iconTopMobileMargin = isset( $attributes['iconTopMobileMargin'] ) ? $attributes['iconTopMobileMargin'] : '';
$margin_variables = array( $iconBottomMargin, $iconLeftMargin, $iconRightMargin, $iconTopMargin, $iconBottomTabletMargin, $iconLeftTabletMargin, $iconRightTabletMargin, $iconTopTabletMargin, $iconBottomMobileMargin, $iconLeftMobileMargin, $iconRightMobileMargin, $iconTopMobileMargin );
$desktop_class = '';
$tab_class = '';
$mob_class = '';
if ( array_key_exists( 'UAGHideDesktop', $attributes ) || array_key_exists( 'UAGHideTab', $attributes ) || array_key_exists( 'UAGHideMob', $attributes ) ) {
$desktop_class = ( isset( $attributes['UAGHideDesktop'] ) ) ? 'uag-hide-desktop' : '';
$tab_class = ( isset( $attributes['UAGHideTab'] ) ) ? 'uag-hide-tab' : '';
$mob_class = ( isset( $attributes['UAGHideMob'] ) ) ? 'uag-hide-mob' : '';
}
$zindex_desktop = '';
$zindex_tablet = '';
$zindex_mobile = '';
$zindex_wrap = array();
$zindex_extention_enabled = ( isset( $attributes['zIndex'] ) || isset( $attributes['zIndexTablet'] ) || isset( $attributes['zIndexMobile'] ) );
if ( $zindex_extention_enabled ) {
$zindex_desktop = ( isset( $attributes['zIndex'] ) ) ? '--z-index-desktop:' . $attributes['zIndex'] . ';' : false;
$zindex_tablet = ( isset( $attributes['zIndexTablet'] ) ) ? '--z-index-tablet:' . $attributes['zIndexTablet'] . ';' : false;
$zindex_mobile = ( isset( $attributes['zIndexMobile'] ) ) ? '--z-index-mobile:' . $attributes['zIndexMobile'] . ';' : false;
if ( $zindex_desktop ) {
array_push( $zindex_wrap, $zindex_desktop );
}
if ( $zindex_tablet ) {
array_push( $zindex_wrap, $zindex_tablet );
}
if ( $zindex_mobile ) {
array_push( $zindex_wrap, $zindex_mobile );
}
}
$has_margin = false;
foreach ( $margin_variables as $margin ) {
if ( is_numeric( $margin ) ) {
$has_margin = true;
break;
}
}
$margin_class = $has_margin ? 'wp-block-uagb-icon--has-margin' : '';
$main_classes = array(
'uagb-icon-wrapper',
$block_id,
( is_array( $attributes ) && isset( $attributes['className'] ) ) ? $attributes['className'] : '',
$margin_class,
$desktop_class,
$tab_class,
$mob_class,
$zindex_extention_enabled ? 'uag-blocks-common-selector' : '',
);
$iconSvg = isset( $attributes['icon'] ) ? $attributes['icon'] : 'circle-check';
$link = isset( $attributes['link'] ) ? $attributes['link'] : '';
$target = isset( $attributes['target'] ) ? $attributes['target'] : false;
$disableLink = isset( $attributes['disableLink'] ) ? $attributes['disableLink'] : false;
$linkUrl = $disableLink ? $link : '#';
$targetVal = $target ? '_blank' : '_self';
ob_start();
$iconHtml = UAGB_Helper::render_svg_html( $iconSvg );
$iconHtml = ob_get_clean();
if ( $iconHtml ) {
$role_attr = ( 'image' === $attributes['iconAccessabilityMode'] ) ? ' role="img"' : ( ( 'svg' === $attributes['iconAccessabilityMode'] ) ? ' role="graphics-symbol"' : '' );
$aria_hidden_attr = ( 'presentation' === $attributes['iconAccessabilityMode'] ) ? 'true' : 'false';
$aria_label_attr = ( 'presentation' !== $attributes['iconAccessabilityMode'] ) ? ' aria-label="' . esc_attr( $attributes['iconAccessabilityDesc'] ) . '"' : '';
$iconHtml = preg_replace(
'/<svg(.*?)>/',
'<svg$1' . $role_attr . ' aria-hidden="' . $aria_hidden_attr . '"' . $aria_label_attr . '>',
$iconHtml
);
}
$aria_label_attr = ( 'presentation' !== $attributes['iconAccessabilityMode'] ) ? ( empty( $attributes['iconAccessabilityDesc'] ) ? implode( '', str_split( $attributes['icon'] ) ) : $attributes['iconAccessabilityDesc'] ) : '';
// Check and prepend the protocol if necessary.
if ( '#' !== $linkUrl ) {
$linkUrl = self::get_protocol( $linkUrl ) ? $linkUrl : self::prepend_http( $linkUrl );
}
if ( $iconHtml && $disableLink && $linkUrl ) {
// Wrap the SVG content with an anchor tag.
$iconHtml = preg_replace(
'/<svg(.*?)>(.*?)<\/svg>/s',
'<a rel="noopener noreferrer" href="' . esc_url( $linkUrl ) . '" target="' . esc_attr( $targetVal ) . '"><svg$1>$2</svg></a>',
$iconHtml
);
}
ob_start();
?>
<div class="<?php echo esc_attr( implode( ' ', $main_classes ) ); ?>"
style="<?php echo esc_attr( implode( '', $zindex_wrap ) ); ?>" >
<?php if ( $has_margin ) : ?>
<div class='uagb-icon-margin-wrapper'>
<?php endif; ?>
<span class="uagb-svg-wrapper"
<?php
if ( $aria_label_attr ) {
echo ' aria-label="' . esc_attr( $aria_label_attr ) . '"';
}
?>
tabindex="0">
<?php echo $iconHtml; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Already escaped & sanitize inside render_svg_html(). ?>
</span>
<?php if ( $has_margin ) : ?>
</div>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
/**
* Renders Front-end Click Event.
*
* @param string $id Block ID.
* @since 2.15.0
* @return string|false The Output Buffer.
*/
public static function render_icon_click( $id ) {
ob_start();
?>
window.addEventListener( 'DOMContentLoaded', () => {
const blockScope = document.querySelector( '.uagb-block-<?php echo esc_html( $id ); ?>' );
if ( ! blockScope ) {
return;
}
const anchorElement = blockScope.querySelector('a');
if (!anchorElement) {
return;
}
<?php // Add event listener for Enter and Space key presses. ?>
blockScope.addEventListener('keydown', (event) => {
if ( 13 === event.keyCode || 32 === event.keyCode ) {
event.preventDefault();
<?php // Trigger the click event on the blockScope. ?>
anchorElement.click();
}
} );
} );
<?php
return ob_get_clean();
}
}
/**
* Prepare if class 'Spectra_Icon' exist.
* Kicking this off by calling 'get_instance()' method
*/
Spectra_Icon::get_instance();
}

View File

@@ -0,0 +1,79 @@
<?php
/**
* UAGB Post.
*
* @package UAGB
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( ! class_exists( 'UAGB_Image' ) ) {
/**
* Class UAGB_Image.
*/
class UAGB_Image {
/**
* Member Variable
*
* @since 2.0.0
* @var instance
*/
private static $instance;
/**
* Initiator
*
* @since 2.0.0
*/
public static function get_instance() {
if ( ! isset( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
/**
* Constructor
*/
public function __construct() {
add_action( 'init', array( $this, 'register_blocks' ) );
}
/**
* Register the Image block on server.
*
* @since 2.0.0
*/
public function register_blocks() {
// Check if the register function exists.
if ( ! function_exists( 'register_block_type' ) ) {
return;
}
register_block_type(
'uagb/image',
array(
'supports' => array(
'color' => array(
'__experimentalDuotone' => 'img',
'text' => false,
'background' => false,
),
),
)
);
}
}
/**
* Prepare if class 'UAGB_Image' exist.
* Kicking this off by calling 'get_instance()' method
*/
UAGB_Image::get_instance();
}

View File

@@ -0,0 +1,223 @@
<?php
/**
* UAGB - Lottie
*
* @package UAGB
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( ! class_exists( 'UAGB_Lottie' ) ) {
/**
* Class UAGB_Lottie.
*
* @since 1.20.0
*/
class UAGB_Lottie {
/**
* Member Variable
*
* @since 1.20.0
* @var instance
*/
private static $instance;
/**
* Initiator
*
* @since 1.20.0
*/
public static function get_instance() {
if ( ! isset( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
/**
* Constructor
*
* @since 1.20.0
*/
public function __construct() {
// Activation hook.
add_action( 'init', array( $this, 'register_blocks' ) );
}
/**
* Registers the `uagb/lottie` block on server.
*
* @since 1.20.0
*/
public function register_blocks() {
// Check if the register function exists.
if ( ! function_exists( 'register_block_type' ) ) {
return;
}
register_block_type(
'uagb/lottie',
array(
'attributes' => array(
'block_id' => array(
'type' => 'string',
),
'align' => array(
'type' => 'string',
'default' => 'center',
),
'lottieURl' => array(
'type' => 'string',
'default' => '',
),
'lottieSource' => array(
'type' => 'string',
'default' => 'library',
),
'jsonLottie' => array(
'type' => 'object',
),
// Controls.
'loop' => array(
'type' => 'boolean',
'default' => true,
),
'speed' => array(
'type' => 'number',
'default' => 1,
),
'reverse' => array(
'type' => 'boolean',
'default' => false,
),
'playOnHover' => array(
'type' => 'boolean',
'default' => false,
),
'playOn' => array(
'type' => 'string',
'default' => 'none',
),
// Style.
'height' => array(
'type' => 'number',
),
'heightTablet' => array(
'type' => 'number',
),
'heightMob' => array(
'type' => 'number',
),
'width' => array(
'type' => 'number',
),
'widthTablet' => array(
'type' => 'number',
),
'widthMob' => array(
'type' => 'number',
),
'backgroundColor' => array(
'type' => 'string',
'default' => '',
),
'backgroundHColor' => array(
'type' => 'string',
'default' => '',
),
'isPreview' => array(
'type' => 'boolean',
'default' => false,
),
),
'render_callback' => array( $this, 'render_html' ),
)
);
}
/**
* Render Lottie HTML.
*
* @param array $attributes Array of block attributes.
*
* @since 1.20.0
*/
public function render_html( $attributes ) {
$block_id = '';
if ( isset( $attributes['block_id'] ) ) {
$block_id = $attributes['block_id'];
}
$desktop_class = '';
$tab_class = '';
$mob_class = '';
if ( array_key_exists( 'UAGHideDesktop', $attributes ) || array_key_exists( 'UAGHideTab', $attributes ) || array_key_exists( 'UAGHideMob', $attributes ) ) {
$desktop_class = ( isset( $attributes['UAGHideDesktop'] ) ) ? 'uag-hide-desktop' : '';
$tab_class = ( isset( $attributes['UAGHideTab'] ) ) ? 'uag-hide-tab' : '';
$mob_class = ( isset( $attributes['UAGHideMob'] ) ) ? 'uag-hide-mob' : '';
}
$zindex_desktop = '';
$zindex_tablet = '';
$zindex_mobile = '';
$zindex_wrap = array();
$zindex_extention_enabled = ( isset( $attributes['zIndex'] ) || isset( $attributes['zIndexTablet'] ) || isset( $attributes['zIndexMobile'] ) );
if ( $zindex_extention_enabled ) {
$zindex_desktop = ( isset( $attributes['zIndex'] ) ) ? '--z-index-desktop:' . $attributes['zIndex'] . ';' : false;
$zindex_tablet = ( isset( $attributes['zIndexTablet'] ) ) ? '--z-index-tablet:' . $attributes['zIndexTablet'] . ';' : false;
$zindex_mobile = ( isset( $attributes['zIndexMobile'] ) ) ? '--z-index-mobile:' . $attributes['zIndexMobile'] . ';' : false;
if ( $zindex_desktop ) {
array_push( $zindex_wrap, $zindex_desktop );
}
if ( $zindex_tablet ) {
array_push( $zindex_wrap, $zindex_tablet );
}
if ( $zindex_mobile ) {
array_push( $zindex_wrap, $zindex_mobile );
}
}
$main_classes = array(
'uagb-block-' . $block_id,
'uagb-lottie__outer-wrap',
'uagb-lottie__' . $attributes['align'],
$desktop_class,
$tab_class,
$mob_class,
$zindex_extention_enabled ? 'uag-blocks-common-selector' : '',
);
ob_start();
?>
<div class = "wp-block-uagb-lottie">
<div class = "<?php echo esc_attr( implode( ' ', $main_classes ) ); ?>" style="<?php echo esc_attr( implode( '', $zindex_wrap ) ); ?>">
</div>
</div>
<?php
return ob_get_clean();
}
}
/**
* Prepare if class 'UAGB_Lottie' exist.
* Kicking this off by calling 'get_instance()' method
*/
UAGB_Lottie::get_instance();
}

View File

@@ -0,0 +1,363 @@
<?php
/**
* Spectra - Popup Builder
*
* @package UAGB
*
* @since 2.6.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Class UAGB_Popup_Builder.
*
* @since 2.6.0
*/
class UAGB_Popup_Builder {
/**
* Post ID Member Variable.
*
* @var int $post_id
*
* @since 2.6.0
*/
protected $post_id;
/**
* Member Variable for all Popup IDs needed to be rendered on the given page.
*
* @var array $popup_ids
*
* @since 2.6.0
*/
protected $popup_ids;
/**
* Constructor to Default the Current Instance's Post ID and add the Shortcode if needed.
*
* @return void
*
* @since 2.6.0
*/
public function __construct() {
$this->post_id = 0;
$this->popup_ids = array();
if ( ! shortcode_exists( 'spectra_popup' ) ) {
add_shortcode( 'spectra_popup', array( $this, 'spectra_popup_shortcode' ) );
}
}
/**
* Create Instance for the Admin Dashboard.
*
* @return object Initialized object of this class.
*
* @since 2.6.0
*/
public static function create_for_admin() {
$instance = new self();
add_action( 'spectra_after_menu_register', array( $instance, 'add_popup_builder_submenu' ) );
return $instance;
}
/**
* Create Instance with Script Generation.
*
* @return object Initialized object of this class.
*
* @since 2.6.0
*/
public static function generate_scripts() {
$instance = new self();
add_action( 'wp_enqueue_scripts', array( $instance, 'enqueue_popup_scripts_for_post' ), 1 );
return $instance;
}
/**
* Add the Popup Builder Submenu to the Spectra Menu.
*
* @return void
*
* @since 2.6.0
*/
public function add_popup_builder_submenu() {
add_submenu_page(
'spectra',
__( 'Popup Builder', 'ultimate-addons-for-gutenberg' ),
__( 'Popup Builder', 'ultimate-addons-for-gutenberg' ),
'manage_options',
'edit.php?post_type=spectra-popup'
);
}
/**
* Enqueue all popup scripts for the current post.
*
* @return void
*
* @since 2.6.0
*/
public function enqueue_popup_scripts_for_post() {
if ( ! is_front_page() ) {
$this->post_id = get_the_ID();
}
$elementor_preview_active = false;
if ( defined( 'ELEMENTOR_VERSION' ) ) { // Check if elementor is active.
$elementor_preview_active = \Elementor\Plugin::$instance->preview->is_preview_mode();
}
if ( 'spectra-popup' === get_post_type( $this->post_id ) || $elementor_preview_active ) {
return;
}
$this->enqueue_popup_scripts();
}
/**
* Generate Shortcode Content.
*
* @param array $attr The shortcode attributes.
* @return string|void The output buffer or void for early return.
*
* @since 2.6.0
*/
public function spectra_popup_shortcode( $attr ) {
$attr = shortcode_atts(
array(
'id' => 0,
),
$attr,
'spectra_popup'
);
if ( empty( $attr['id'] ) ) {
return;
}
$popup = get_post( $attr['id'] );
if ( empty( $popup ) ) {
return;
}
$popup_type = get_post_meta( $attr['id'], 'spectra-popup-type', true );
if ( 'unset' === $popup_type ) {
return;
}
$popup_enabled = get_post_meta( $attr['id'], 'spectra-popup-enabled', true );
if ( ! $popup_enabled ) {
return;
}
ob_start();
echo do_shortcode( do_blocks( $popup->post_content ) );
$output = ob_get_clean();
return is_string( $output ) ? $output : '';
}
/**
* Enqueue all the Spectra Popup Scripts needed on the given post.
*
* @return void
*
* @since 2.6.0
*/
public function enqueue_popup_scripts() {
$args = array(
'post_type' => 'spectra-popup',
'posts_per_page' => -1,
'meta_query' => array( // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
array(
'key' => 'spectra-popup-enabled', // The meta key.
'value' => true, // The meta value to compare with.
'compare' => '=', // The comparison type.
'type' => 'BOOLEAN', // The meta value type.
),
),
);
$popups = new WP_Query( $args );
while ( $popups->have_posts() ) :
$popups->the_post();
$popup_id = get_the_ID();
$render_this_popup = apply_filters( 'spectra_pro_popup_display_filters', true, $this->post_id );
if ( $render_this_popup ) {
$current_popup_assets = new UAGB_Post_Assets( $popup_id );
$current_popup_assets->enqueue_scripts();
if ( is_array( $this->popup_ids ) ) {
array_push( $this->popup_ids, $popup_id );
}
}
endwhile;
wp_reset_postdata();
add_action( 'wp_body_open', array( $this, 'generate_popup_shortcode' ) );
}
/**
* Generate the popup shortcodes needed.
*
* @return void
*
* @since 2.6.0
*/
public function generate_popup_shortcode() {
if ( is_array( $this->popup_ids ) && ! empty( $this->popup_ids ) ) {
foreach ( $this->popup_ids as $popup_id ) {
echo do_shortcode( '[spectra_popup id=' . esc_attr( $popup_id ) . ']' );
}
}
}
/**
* Adds or removes list table column headings for the Popup Builder.
*
* @param array $columns Array of columns.
* @return array
*
* @since 2.6.0
*/
public static function popup_builder_admin_headings( $columns ) {
unset( $columns['date'] );
unset( $columns['author'] );
$columns['spectra_popup_type'] = __( 'Type', 'ultimate-addons-for-gutenberg' );
$columns['author'] = __( 'Author', 'ultimate-addons-for-gutenberg' );
$updated_columns = apply_filters( 'spectra_pro_admin_popup_list_titles', $columns );
if ( ! is_array( $updated_columns ) || empty( $updated_columns ) ) {
$updated_columns = $columns;
}
$updated_columns['spectra_popup_toggle'] = __( 'Enable/Disable', 'ultimate-addons-for-gutenberg' );
return $updated_columns;
}
/**
* Adds the custom list table column content for the Popup Builder.
*
* @param string $column Name of the column.
* @param int $post_id Post id.
* @return void
*
* @since 2.6.0
*/
public function popup_builder_admin_content( $column, $post_id ) {
switch ( $column ) {
case 'spectra_popup_type':
$layout = get_post_meta( $post_id, 'spectra-popup-type', true );
if ( ! is_string( $layout ) ) {
break;
}
switch ( $layout ) {
case 'banner':
echo esc_html__( 'Info Bar', 'ultimate-addons-for-gutenberg' );
break;
case 'popup':
echo esc_html__( 'Popup', 'ultimate-addons-for-gutenberg' );
break;
default:
echo esc_html__( 'Unset', 'ultimate-addons-for-gutenberg' );
break;
}
break;
case 'spectra_popup_toggle':
$layout = get_post_meta( $post_id, 'spectra-popup-type', true );
if ( ! is_string( $layout ) ) {
break;
}
$enabled = get_post_meta( $post_id, 'spectra-popup-enabled', true );
$toggle_class = 'spectra-popup-builder__switch';
if ( is_rtl() ) {
$toggle_class .= ' is-rtl-toggle';
}
if ( 'unset' === $layout ) {
$toggle_class .= ' spectra-popup-builder__switch--disabled';
} elseif ( $enabled ) {
$toggle_class .= ' spectra-popup-builder__switch--active';
}
echo '<div class="' . esc_attr( $toggle_class ) . '" data-post_id="' . esc_attr( $post_id ) . '"><span></span></div>';
break;
default:
do_action( 'spectra_pro_admin_popup_list_content', $column, $post_id );
break;
}
}
/**
* Enqueues scripts for the Toggle Button in the Popup Table.
*
* @return void
*
* @since 2.6.0
*/
public function popup_toggle_scripts() {
global $pagenow;
$screen = get_current_screen();
if ( 'spectra-popup' === $screen->post_type && 'edit.php' === $pagenow ) {
$extension = SCRIPT_DEBUG ? '' : '.min';
wp_register_script(
'uagb-popup-builder-admin-js',
UAGB_URL . 'assets/js/spectra-popup-builder-admin' . $extension . '.js',
array(),
UAGB_VER,
false
);
wp_register_style(
'uagb-popup-builder-admin-css',
UAGB_URL . 'assets/css/spectra-popup-builder-admin' . $extension . '.css',
array(),
UAGB_VER
);
wp_localize_script(
'uagb-popup-builder-admin-js',
'uagb_popup_builder_admin',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'uagb_popup_builder_admin_nonce' => wp_create_nonce( 'uagb_popup_builder_admin_nonce' ),
)
);
wp_enqueue_script( 'uagb-popup-builder-admin-js' );
wp_enqueue_style( 'uagb-popup-builder-admin-css' );
}
}
/**
* Update the Current Popup's Meta from Admin Table.
*
* @return void
*
* @since 2.6.0
*/
public function update_popup_status() {
check_ajax_referer( 'uagb_popup_builder_admin_nonce', 'nonce' );
if ( ! current_user_can( 'manage_options' ) ) {
wp_send_json_error();
}
if ( ! isset( $_POST['enabled'] ) || ! isset( $_POST['post_id'] ) ) {
wp_send_json_error();
}
$enabled = rest_sanitize_boolean( sanitize_text_field( $_POST['enabled'] ) );
$popup_id = sanitize_text_field( $_POST['post_id'] );
update_post_meta( $popup_id, 'spectra-popup-enabled', $enabled );
wp_send_json_success();
}
}

View File

@@ -0,0 +1,842 @@
<?php
/**
* UAGB - Taxonomy-List
*
* @package UAGB
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( ! class_exists( 'UAGB_Taxonomy_List' ) ) {
/**
* Class UAGB_Taxonomy_List.
*
* @since 1.18.1
*/
class UAGB_Taxonomy_List {
/**
* Member Variable
*
* @since 1.18.1
* @var instance
*/
private static $instance;
/**
* Initiator
*
* @since 1.18.1
*/
public static function get_instance() {
if ( ! isset( self::$instance ) ) {
self::$instance = new self();
}
return self::$instance;
}
/**
* Constructor
*
* @since 1.18.1
*/
public function __construct() {
// Activation hook.
add_action( 'init', array( $this, 'register_blocks' ) );
}
/**
* Registers the `uagb/taxonomy-list` block on server.
*
* @since 1.18.1
*/
public function register_blocks() {
// Check if the register function exists.
if ( ! function_exists( 'register_block_type' ) ) {
return;
}
$border_attribute = array();
if ( method_exists( 'UAGB_Block_Helper', 'uag_generate_php_border_attribute' ) ) {
$border_attribute = UAGB_Block_Helper::uag_generate_php_border_attribute( 'overall' );
}
register_block_type(
'uagb/taxonomy-list',
array(
'attributes' => array_merge(
$border_attribute,
array(
'block_id' => array(
'type' => 'string',
),
'postType' => array(
'type' => 'string',
'default' => 'post',
),
'taxonomyType' => array(
'type' => 'string',
'default' => 'category',
),
'categories' => array(
'type' => 'string',
),
'order' => array(
'type' => 'string',
'default' => 'desc',
),
'orderBy' => array(
'type' => 'string',
'default' => 'date',
),
'postsToShow' => array(
'type' => 'number',
'default' => '8',
),
'layout' => array(
'type' => 'string',
'default' => 'grid',
),
'columns' => array(
'type' => 'number',
'default' => 3,
),
'tcolumns' => array(
'type' => 'number',
'default' => 2,
),
'mcolumns' => array(
'type' => 'number',
'default' => 1,
),
'noTaxDisplaytext' => array(
'type' => 'string',
'default' => __( 'Taxonomy Not Available.', 'ultimate-addons-for-gutenberg' ),
),
'boxShadowColor' => array(
'type' => 'string',
'default' => '#00000070',
),
'boxShadowHOffset' => array(
'type' => 'number',
'default' => 0,
),
'boxShadowVOffset' => array(
'type' => 'number',
'default' => 0,
),
'boxShadowBlur' => array(
'type' => 'number',
),
'boxShadowSpread' => array(
'type' => 'number',
),
'boxShadowPosition' => array(
'type' => 'string',
'default' => 'outset',
),
'showCount' => array(
'type' => 'boolean',
'default' => true,
),
'showEmptyTaxonomy' => array(
'type' => 'boolean',
'default' => false,
),
'showhierarchy' => array(
'type' => 'boolean',
'default' => false,
),
'titleTag' => array(
'type' => 'string',
'default' => '',
),
// Color Attributes.
'bgColor' => array(
'type' => 'string',
'default' => '#f5f5f5',
),
'titleColor' => array(
'type' => 'string',
'default' => '#3b3b3b',
),
'countColor' => array(
'type' => 'string',
'default' => '#777777',
),
'listTextColor' => array(
'type' => 'string',
'default' => '#3b3b3b',
),
'hoverlistTextColor' => array(
'type' => 'string',
'default' => '#3b3b3b',
),
'listStyleColor' => array(
'type' => 'string',
'default' => '#3b3b3b',
),
'hoverlistStyleColor' => array(
'type' => 'string',
'default' => '#3b3b3b',
),
// Spacing Attributes.
'rowGap' => array(
'type' => 'number',
'default' => 20,
),
'columnGap' => array(
'type' => 'number',
'default' => 20,
),
'contentPadding' => array(
'type' => 'number',
'default' => 20,
),
'contentPaddingTablet' => array(
'type' => 'number',
'default' => 15,
),
'contentPaddingMobile' => array(
'type' => 'number',
'default' => 15,
),
'titleBottomSpace' => array(
'type' => 'number',
'default' => 5,
),
'listBottomMargin' => array(
'type' => 'number',
'default' => 10,
),
// ALignment Attributes.
'alignment' => array(
'type' => 'string',
'default' => 'center',
),
// List Attributes.
'listStyle' => array(
'type' => 'string',
'default' => 'disc',
),
'listDisplayStyle' => array(
'type' => 'string',
'default' => 'list',
),
// Seperator Attributes.
'seperatorStyle' => array(
'type' => 'string',
'default' => 'none',
),
'seperatorWidth' => array(
'type' => 'number',
'default' => 100,
),
'seperatorThickness' => array(
'type' => 'number',
'default' => 1,
),
'seperatorColor' => array(
'type' => 'string',
'default' => '#b2b4b5',
),
'seperatorHoverColor' => array(
'type' => 'string',
'default' => '#b2b4b5',
),
// Typograpghy attributes.
'titleFontSize' => array(
'type' => 'number',
),
'titleFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'titleFontSizeMobile' => array(
'type' => 'number',
),
'titleFontSizeTablet' => array(
'type' => 'number',
),
'titleFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'titleFontWeight' => array(
'type' => 'string',
),
'titleFontStyle' => array(
'type' => 'string',
),
'titleLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'titleLineHeight' => array(
'type' => 'number',
),
'titleLineHeightTablet' => array(
'type' => 'number',
),
'titleLineHeightMobile' => array(
'type' => 'number',
),
'titleLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'countFontSize' => array(
'type' => 'number',
),
'countFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'countFontSizeMobile' => array(
'type' => 'number',
),
'countFontSizeTablet' => array(
'type' => 'number',
),
'countFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'countFontWeight' => array(
'type' => 'string',
),
'countFontStyle' => array(
'type' => 'string',
),
'countLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'countLineHeight' => array(
'type' => 'number',
),
'countLineHeightTablet' => array(
'type' => 'number',
),
'countLineHeightMobile' => array(
'type' => 'number',
),
'countLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'listFontSize' => array(
'type' => 'number',
),
'listFontSizeType' => array(
'type' => 'string',
'default' => 'px',
),
'listFontSizeMobile' => array(
'type' => 'number',
),
'listFontSizeTablet' => array(
'type' => 'number',
),
'listFontFamily' => array(
'type' => 'string',
'default' => 'Default',
),
'listFontWeight' => array(
'type' => 'string',
),
'listFontStyle' => array(
'type' => 'string',
),
'listLineHeightType' => array(
'type' => 'string',
'default' => 'em',
),
'listLineHeight' => array(
'type' => 'number',
),
'listLineHeightTablet' => array(
'type' => 'number',
),
'listLineHeightMobile' => array(
'type' => 'number',
),
'listLoadGoogleFonts' => array(
'type' => 'boolean',
'default' => false,
),
'contentLeftPadding' => array(
'type' => 'number',
),
'contentRightPadding' => array(
'type' => 'number',
),
'contentTopPadding' => array(
'type' => 'number',
),
'contentBottomPadding' => array(
'type' => 'number',
),
'contentLeftPaddingTablet' => array(
'type' => 'number',
),
'contentRightPaddingTablet' => array(
'type' => 'number',
),
'contentTopPaddingTablet' => array(
'type' => 'number',
),
'contentBottomPaddingTablet' => array(
'type' => 'number',
),
'contentLeftPaddingMobile' => array(
'type' => 'number',
),
'contentRightPaddingMobile' => array(
'type' => 'number',
),
'contentTopPaddingMobile' => array(
'type' => 'number',
),
'contentBottomPaddingMobile' => array(
'type' => 'number',
),
'contentPaddingUnit' => array(
'type' => 'string',
'default' => 'px',
),
'mobileContentPaddingUnit' => array(
'type' => 'string',
'default' => 'px',
),
'tabletContentPaddingUnit' => array(
'type' => 'string',
'default' => 'px',
),
'contentPaddingLink' => array(
'type' => 'boolean',
'default' => false,
),
'titleTransform' => array(
'type' => 'string',
),
'countTransform' => array(
'type' => 'string',
),
'listTransform' => array(
'type' => 'string',
),
'titleDecoration' => array(
'type' => 'string',
),
'countDecoration' => array(
'type' => 'string',
),
'listDecoration' => array(
'type' => 'string',
),
'isPreview' => array(
'type' => 'boolean',
'default' => false,
),
// letter spacing.
'titleLetterSpacing' => array(
'type' => 'number',
'default' => 0,
),
'titleLetterSpacingTablet' => array(
'type' => 'number',
),
'titleLetterSpacingMobile' => array(
'type' => 'number',
),
'titleLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'countLetterSpacing' => array(
'type' => 'number',
),
'countLetterSpacingTablet' => array(
'type' => 'number',
),
'countLetterSpacingMobile' => array(
'type' => 'number',
),
'countLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'listLetterSpacing' => array(
'type' => 'number',
),
'listLetterSpacingTablet' => array(
'type' => 'number',
),
'listLetterSpacingMobile' => array(
'type' => 'number',
),
'listLetterSpacingType' => array(
'type' => 'string',
'default' => 'px',
),
'borderColor' => array(
'type' => 'string',
'default' => '#E0E0E0',
),
'borderThickness' => array(
'type' => 'number',
'default' => 1,
),
'borderRadius' => array(
'type' => 'number',
'default' => 3,
),
'borderStyle' => array(
'type' => 'string',
'default' => 'solid',
),
'borderHoverColor' => array(
'type' => 'string',
'default' => '#E0E0E0',
),
)
),
'render_callback' => array( $this, 'render_html' ),
)
);
}
/**
* Render Grid HTML.
*
* @param array $attributes Array of block attributes.
*
* @since 1.18.1
*/
public function grid_html( $attributes ) {
$block_id = $attributes['block_id'];
$postType = $attributes['postType'];
$taxonomyType = $attributes['taxonomyType'];
$layout = $attributes['layout'];
$seperatorStyle = $attributes['seperatorStyle'];
$noTaxDisplaytext = $attributes['noTaxDisplaytext'];
$showCount = $attributes['showCount'];
$titleTag = $attributes['titleTag'];
if ( 'grid' === $layout ) {
$array_of_allowed_HTML = array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div' );
$title_tag = UAGB_Helper::title_tag_allowed_html( $titleTag, $array_of_allowed_HTML, 'h4' );
$pt = get_post_type_object( $postType );
if ( $pt ) {
$singular_name = $pt->labels->singular_name;
$plural_name = $pt->labels->name;
} else {
// Fallback if $pt or $pt->labels is null.
$singular_name = __( 'Item', 'ultimate-addons-for-gutenberg' );
$plural_name = __( 'Items', 'ultimate-addons-for-gutenberg' );
}
$args = array(
'hide_empty' => ! $attributes['showEmptyTaxonomy'],
'parent' => 0,
);
$new_categories_list = get_terms( $attributes['taxonomyType'], $args );
if ( is_array( $new_categories_list ) ) {
foreach ( $new_categories_list as $value ) {
$link = get_term_link( $value->slug, $attributes['taxonomyType'] );
if ( ! is_wp_error( $link ) ) {
?>
<div class="uagb-taxomony-box">
<a class="uagb-tax-link" href= "<?php echo esc_url( $link ); ?>">
<<?php echo esc_html( $title_tag ); ?> class="uagb-tax-title"><?php echo esc_html( $value->name ); ?>
</<?php echo esc_html( $title_tag ); ?>>
<?php if ( $showCount ) { ?>
<?php echo esc_attr( $value->count ); ?>
<?php $countName = ( 1 != $value->count ) ? esc_attr( $plural_name ) : esc_attr( $singular_name ); ?>
<?php echo esc_attr( apply_filters( 'uagb_taxonomy_count_text', $countName, $value->count ) ); ?>
<?php } ?>
</a>
</div>
<?php
}
}
}
}
}
/**
* Return link for individual category.
*
* @param string $slug of category.
* @param string $taxonomy_type attributes.
*
* @since 2.6.0
* @return string link using slug.
*/
public function get_link_of_individual_categories( $slug, $taxonomy_type ) {
if ( ! is_string( $slug ) ) {
return '#';
}
$link = get_term_link( $slug, $taxonomy_type );
if ( is_wp_error( $link ) ) {
$link = '#';
}
return $link;
}
/**
* Get terms hierarchical.
*
* @param string $taxonomy_type of taxonomy type.
* @param integer $parent_id of parent id.
* @param bool $show_empty_taxonomy of show empty taxonomy.
* @since 2.10.4
* @return array of terms.
*/
public function get_terms_hierarchical( $taxonomy_type, $parent_id, $show_empty_taxonomy ) {
$args = array(
'taxonomy' => $taxonomy_type,
'parent' => $parent_id,
'hide_empty' => ! $show_empty_taxonomy,
);
$terms = get_terms( $args );
if ( is_wp_error( $terms ) || empty( $terms ) || ! is_array( $terms ) ) {
return array();
}
foreach ( $terms as $term ) {
$term->children = $this->get_terms_hierarchical( $taxonomy_type, $term->term_id, $show_empty_taxonomy );
}
return $terms;
}
/**
* Display terms recursive.
*
* @param object $term of terms.
* @param string $taxonomy_type of taxonomy type.
* @param bool $showCount of show count.
* @param string $seperatorStyle of separator style.
* @param string $title_tag of title tag.
* @param bool $show_hierarchy of show hierarchy.
* @since 2.10.4
* @return void
*/
public function display_terms_recursive( $term, $taxonomy_type, $showCount, $seperatorStyle, $title_tag, $show_hierarchy ) {
if ( $term instanceof WP_Term ) {
$child_link = $this->get_link_of_individual_categories( $term->slug, $taxonomy_type );
echo sprintf(
'<li class="uagb-tax-list"><%s class="uagb-tax-link-wrap"><a class="uagb-tax-link" href="%s">%s</a> %s</%s><div class="uagb-tax-separator"></div></li>',
esc_html( $title_tag ),
esc_url( $child_link ),
esc_html( $term->name ),
( boolval( $showCount ) ? ' (' . esc_attr( $term->count ) . ') ' : '' ),
esc_html( $title_tag )
);
if ( $show_hierarchy && ! empty( $term->children ) && is_array( $term->children ) ) {
foreach ( $term->children as $child ) {
echo sprintf( '<ul class="uagb-taxonomy-list-children">' );
$this->display_terms_recursive( $child, $taxonomy_type, $showCount, $seperatorStyle, $title_tag, $show_hierarchy );
echo sprintf( '</ul>' );
}
}
}
}
/**
* Render List HTML.
*
* @param array $attributes Array of block attributes.
*
* @since 1.18.1
*/
public function list_html( $attributes ) {
$block_id = $attributes['block_id'];
$postType = $attributes['postType'];
$taxonomyType = $attributes['taxonomyType'];
$layout = $attributes['layout'];
$seperatorStyle = $attributes['seperatorStyle'];
$noTaxDisplaytext = $attributes['noTaxDisplaytext'];
$showCount = $attributes['showCount'];
$titleTag = $attributes['titleTag'];
if ( 'list' === $layout ) {
$array_of_allowed_HTML = array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div' );
$title_tag = UAGB_Helper::title_tag_allowed_html( $titleTag, $array_of_allowed_HTML, 'div' );
$pt = get_post_type_object( $postType );
$singular_name = $pt->labels->singular_name;
$args = array(
'hide_empty' => ! $attributes['showEmptyTaxonomy'],
'parent' => 0,
);
$taxonomy_type = $attributes['taxonomyType'];
$show_empty_taxonomy = $attributes['showEmptyTaxonomy'];
$new_categories_list = $this->get_terms_hierarchical( $taxonomy_type, 0, $show_empty_taxonomy );
?>
<?php if ( 'dropdown' !== $attributes['listDisplayStyle'] && ! empty( $new_categories_list ) && is_array( $new_categories_list ) ) { ?>
<ul class="uagb-list-wrap">
<?php
foreach ( $new_categories_list as $term ) {
?>
<?php
if ( $term instanceof WP_Term ) {
$this->display_terms_recursive( $term, $taxonomy_type, $showCount, $seperatorStyle, $title_tag, $attributes['showhierarchy'] );
}
?>
<?php } ?>
</ul>
<?php } else { ?>
<select class="uagb-list-dropdown-wrap" onchange="redirectToTaxonomyLink(this)">
<option selected value=""> -- <?php esc_html_e( 'Select', 'ultimate-addons-for-gutenberg' ); ?> -- </option>
<?php
if ( is_array( $new_categories_list ) ) {
foreach ( $new_categories_list as $key => $value ) {
$link = $this->get_link_of_individual_categories( $value->slug, $attributes['taxonomyType'] );
?>
<option value="<?php echo esc_url( $link ); ?>" >
<?php echo esc_attr( $value->name ); ?>
<?php if ( $showCount ) { ?>
<?php echo ' (' . esc_attr( $value->count ) . ')'; ?>
<?php } ?>
</option>
<?php
}
}
?>
</select>
<script type="text/javascript">
function redirectToTaxonomyLink( selectedOption ) {
var selectedValue = selectedOption.value;
if ( selectedValue ) {
location.href = selectedValue;
}
}
</script>
<?php } ?>
<?php
}
}
/**
* Render Taxonomy List HTML.
*
* @param array $attributes Array of block attributes.
*
* @since 1.18.1
*/
public function render_html( $attributes ) {
$block_id = $attributes['block_id'];
$postType = $attributes['postType'];
$taxonomyType = $attributes['taxonomyType'];
$layout = $attributes['layout'];
$seperatorStyle = $attributes['seperatorStyle'];
$noTaxDisplaytext = $attributes['noTaxDisplaytext'];
$showCount = $attributes['showCount'];
$desktop_class = '';
$tab_class = '';
$mob_class = '';
if ( array_key_exists( 'UAGHideDesktop', $attributes ) || array_key_exists( 'UAGHideTab', $attributes ) || array_key_exists( 'UAGHideMob', $attributes ) ) {
$desktop_class = ( isset( $attributes['UAGHideDesktop'] ) ) ? 'uag-hide-desktop' : '';
$tab_class = ( isset( $attributes['UAGHideTab'] ) ) ? 'uag-hide-tab' : '';
$mob_class = ( isset( $attributes['UAGHideMob'] ) ) ? 'uag-hide-mob' : '';
}
$zindex_desktop = '';
$zindex_tablet = '';
$zindex_mobile = '';
$zindex_wrap = array();
$zindex_extention_enabled = ( isset( $attributes['zIndex'] ) || isset( $attributes['zIndexTablet'] ) || isset( $attributes['zIndexMobile'] ) );
if ( $zindex_extention_enabled ) {
$zindex_desktop = ( isset( $attributes['zIndex'] ) ) ? '--z-index-desktop:' . $attributes['zIndex'] . ';' : false;
$zindex_tablet = ( isset( $attributes['zIndexTablet'] ) ) ? '--z-index-tablet:' . $attributes['zIndexTablet'] . ';' : false;
$zindex_mobile = ( isset( $attributes['zIndexMobile'] ) ) ? '--z-index-mobile:' . $attributes['zIndexMobile'] . ';' : false;
if ( $zindex_desktop ) {
array_push( $zindex_wrap, $zindex_desktop );
}
if ( $zindex_tablet ) {
array_push( $zindex_wrap, $zindex_tablet );
}
if ( $zindex_mobile ) {
array_push( $zindex_wrap, $zindex_mobile );
}
}
$main_classes = array(
'wp-block-uagb-taxonomy-list',
'uagb-taxonomy__outer-wrap',
'uagb-layout-' . $layout,
'uagb-block-' . $block_id,
$desktop_class,
$tab_class,
$mob_class,
$zindex_extention_enabled ? 'uag-blocks-common-selector' : '',
);
$args = array(
'hide_empty' => ! $attributes['showEmptyTaxonomy'],
);
if ( $taxonomyType ) {
$new_categories_list = get_terms( $taxonomyType, $args );
}
ob_start();
?>
<div class = "<?php echo esc_attr( implode( ' ', $main_classes ) ); ?>" style="<?php echo esc_attr( implode( '', $zindex_wrap ) ); ?>">
<?php if ( ! empty( $new_categories_list ) ) { ?>
<?php $this->grid_html( $attributes ); ?>
<?php $this->list_html( $attributes ); ?>
<?php } else { ?>
<div class="uagb-tax-not-available"><?php echo esc_html( $noTaxDisplaytext ); ?></div>
<?php } ?>
</div>
<?php
return ob_get_clean();
}
}
/**
* Prepare if class 'UAGB_Taxonomy_List' exist.
* Kicking this off by calling 'get_instance()' method
*/
UAGB_Taxonomy_List::get_instance();
}

View File

@@ -0,0 +1,110 @@
import { useEffect, useMemo } from '@wordpress/element';
import { STORE_NAME as storeName } from '@Store/constants';
import { useSelect } from '@wordpress/data';
import getGBSEditorStyles from '@Controls/getGBSEditorStyles';
import AddGBSStylesDom from './AddGBSStylesDom';
import { GBS_RANDOM_NUMBER } from '@Utils/Helpers';
import { blocksAttributes } from '@Attributes/getBlocksDefaultAttributes';
import getAttributeFallback, { getFallbackNumber } from '@Controls/getAttributeFallback';
const AddGBSStyles = ( ChildComponent )=> {
const WrapWithStyle = ( props ) => {
const { globalBlockStyles, initialStateFlag } = useSelect( ( select ) => {
const getStore = select( storeName );
return {
globalBlockStyles: getStore.getGlobalBlockStyles(),
initialStateFlag: getStore.getState()?.initialStateSetFlag,
}
}, [] );
const {
attributes,
attributes : {
globalBlockStyleId
},
setAttributes,
name,
} = props;
const blockName = name.replace( 'uagb/', '' );
const modifiedAttr = { ...attributes };
const isGBSPresent = useMemo( () => globalBlockStyles?.find( style => {
return globalBlockStyleId && style?.value === globalBlockStyleId;
} ), [ globalBlockStyleId, globalBlockStyles ] );
useEffect( () => {
if ( uagb_blocks_info?.spectra_pro_status && 'enabled' === uagb_blocks_info?.uag_enable_gbs_extension ) {
const editorStyles = getGBSEditorStyles( globalBlockStyles, globalBlockStyleId );
AddGBSStylesDom( globalBlockStyleId, editorStyles );
}
// Don't set attribute is extension is not enabled.
if ( 'disabled' === uagb_blocks_info?.uag_enable_gbs_extension ){
return;
}
if( initialStateFlag && ! isGBSPresent && globalBlockStyleId ){
const resetObject = { globalBlockStyleId : '', globalBlockStyleName : '' };
for ( const attributeKey in modifiedAttr ) {
// Check attribute support GBS style.
if( ! blocksAttributes?.[ blockName ]?.[ attributeKey ]?.isGBSStyle ){
continue;
}
// Reset gbs number attributes.
if( GBS_RANDOM_NUMBER === modifiedAttr?.[ attributeKey ] ){
resetObject[ attributeKey ] = getFallbackNumber( '', attributeKey, blockName );
}
// Reset the attributes which are not GBS style attributes.
if( ! modifiedAttr?.[ attributeKey ] ){
resetObject[ attributeKey ] = getAttributeFallback( '', attributeKey, blockName );
}
}
setAttributes( resetObject );
}
}, [ globalBlockStyles ] );
// Filter the placeholder attribute.
if ( globalBlockStyleId && 'disabled' === uagb_blocks_info?.uag_enable_gbs_extension ){
// If extension is disabled then set attributes as default.
for ( const objectKey in modifiedAttr ) {
// Check attribute support GBS style.
if( ! blocksAttributes?.[ blockName ]?.[ objectKey ]?.isGBSStyle ){
continue;
}
// Reset gbs number attributes.
if( GBS_RANDOM_NUMBER === modifiedAttr?.[ objectKey ] ){
modifiedAttr[ objectKey ] = getFallbackNumber( '', objectKey, blockName );
}
// Reset the attributes which are not GBS style attributes.
if( ! modifiedAttr?.[ objectKey ] ){
modifiedAttr[ objectKey ] = getAttributeFallback( '', objectKey, blockName );
}
}
}else{
for ( const objectKey in modifiedAttr ) {
// Replace GBS_RANDOM_NUMBER with empty string.
if( GBS_RANDOM_NUMBER === modifiedAttr?.[objectKey] ){
modifiedAttr[objectKey] = '';
}
}
}
const updatedAttributes = {
...attributes,
...modifiedAttr
};
props = { ...props, ...{ attributes: updatedAttributes, isGBSPresent } };
return <ChildComponent { ...props }/>
}
return WrapWithStyle;
}
export default AddGBSStyles;

View File

@@ -0,0 +1,46 @@
const AddGBSStylesDom = ( globalBlockStyleId, styleText ) => {
const putStyleInHead = ( current_document, rawStyle, tagId ) => {
if ( ! rawStyle ) return;
tagId = 'spectra-gbs-' + globalBlockStyleId;
const isExistTag = current_document.getElementById( tagId );
if( ! isExistTag ){
const node = document.createElement( 'style' )
node.setAttribute( 'id', tagId );
node.textContent = rawStyle;
current_document.head.appendChild( node )
}else{
isExistTag.textContent = rawStyle
}
}
putStyleInHead( document, styleText, globalBlockStyleId );
setTimeout( () => {
const getAllIFrames = document.getElementsByTagName( 'iframe' );
if ( ! getAllIFrames?.length ) {
return;
}
for ( const iterateIFrames of getAllIFrames ) {
// Skip the iframe with the specific name.
if ( uagb_blocks_info.exclude_crops_iframes.includes( iterateIFrames.name ) ) {
continue;
}
try {
const iframeDocument = iterateIFrames?.contentWindow.document || iterateIFrames?.contentDocument;
if( ! iframeDocument?.head ){
continue;
}
putStyleInHead( iframeDocument, styleText, globalBlockStyleId );
} catch ( e ) {
// Ignore cross-origin access errors.
}
} // Loop end.
} );
};
export default AddGBSStylesDom;

View File

@@ -0,0 +1,16 @@
import { useEffect } from '@wordpress/element';
import addBlockEditorDynamicStyles from '@Controls/addBlockEditorDynamicStyles';
import { useDeviceType } from '@Controls/getPreviewType';
const AddStaticStyles = ( ChildComponent )=> {
const WrapWithStyle = ( props ) => {
useEffect( () => {
addBlockEditorDynamicStyles();
}, [] );
return <ChildComponent { ...props } deviceType={ useDeviceType() } />
}
return WrapWithStyle;
}
export default AddStaticStyles;

View File

@@ -0,0 +1,77 @@
const addBlockEditorDynamicStyles = () => {
setTimeout( () => {
const getAllIFrames = document.getElementsByTagName( 'iframe' );
if ( ! getAllIFrames?.length ) {
return;
}
const cloneLinkTag = ( linkId ) => {
const getTag = document.getElementById( linkId );
return getTag ? getTag.cloneNode( true ) : false;
}
const cloneStyleTag = ( styleId ) => {
const getStyleTag = document.getElementById( styleId );
return getStyleTag ? getStyleTag.textContent : false;
}
const dashiconsCss = cloneLinkTag( 'dashicons-css' );
const blockCssCss = cloneLinkTag( 'uagb-block-css-css' );
const slickStyle = cloneLinkTag( 'uagb-slick-css-css' );
const swiperStyle = cloneLinkTag( 'uagb-swiper-css-css' );
const aosStyle = cloneLinkTag( 'uagb-aos-css-css' );
const editorStyle = cloneStyleTag( 'uagb-editor-styles' );
const editorProStyle = cloneStyleTag( 'spectra-pro-editor-styles' );
const spacingStyle = cloneStyleTag( 'uagb-blocks-editor-spacing-style' );
const editorCustomStyle = cloneStyleTag( 'uagb-blocks-editor-custom-css' );
for ( const iterateIFrames of getAllIFrames ) {
// Skip the iframe with the specific name.
if ( uagb_blocks_info.exclude_crops_iframes.includes( iterateIFrames.name ) ) {
continue;
}
try {
const iframeDocument = iterateIFrames?.contentWindow?.document || iterateIFrames?.contentDocument;
if( ! iframeDocument?.head ){
continue;
}
const copyLinkTag = ( clonedTag, tagId ) => {
if ( ! clonedTag ) return;
const isExistTag = iframeDocument.getElementById( tagId );
if ( isExistTag ) return;
iframeDocument.head.appendChild( clonedTag );
}
const copyStyleTag = ( clonedTag, tagId ) => {
if ( ! clonedTag ) return;
const isExistTag = iframeDocument.getElementById( tagId );
if( ! isExistTag ){
const node = document.createElement( 'style' )
node.setAttribute( 'id', tagId );
node.textContent = clonedTag;
iframeDocument.head.appendChild( node )
}else{
isExistTag.textContent = clonedTag
}
}
copyLinkTag( blockCssCss, 'uagb-block-css-css' );
copyLinkTag( dashiconsCss, 'dashicons-css' );
copyLinkTag( slickStyle, 'uagb-slick-css-css' );
copyLinkTag( swiperStyle, 'uagb-swiper-css-css' );
copyLinkTag( aosStyle, 'uagb-aos-css-css' );
copyStyleTag( editorStyle, 'uagb-editor-styles' );
copyStyleTag( editorProStyle, 'spectra-pro-editor-styles' );
copyStyleTag( spacingStyle, 'uagb-blocks-editor-spacing-style' );
copyStyleTag( editorCustomStyle, 'uagb-blocks-editor-custom-css' );
} catch ( e ) {
// Ignore cross-origin access errors.
}
} // Loop end.
} );
};
export default addBlockEditorDynamicStyles;

View File

@@ -0,0 +1,46 @@
const addBlockEditorResponsiveStyles = ( clientId, styling, deviceTypeClass ) => {
// Desktop.
const findResponsiveElement = document.getElementById( `block-${ clientId }` );
if ( null !== findResponsiveElement && undefined !== findResponsiveElement ) {
findResponsiveElement.classList.remove( 'uag-hide-desktop' ); // To remove uag-hide-desktop when toggle click.
styling.map( ( item ) => {
if ( item ) {
findResponsiveElement.classList.remove( item, deviceTypeClass );
if ( 'uag-hide-desktop' === item ) {
findResponsiveElement.classList.add( item, deviceTypeClass );
}
}
return findResponsiveElement;
} );
}
// Desktop ends.
// Tablet / Mobile Starts.
const tabletPreview = document.getElementsByClassName( 'is-tablet-preview' );
const mobilePreview = document.getElementsByClassName( 'is-mobile-preview' );
if ( 0 !== tabletPreview.length || 0 !== mobilePreview.length ) {
const preview = tabletPreview[ 0 ] || mobilePreview[ 0 ];
const iframe = preview.getElementsByTagName( 'iframe' )[ 0 ];
const iframeDocument = iframe.contentWindow.document || iframe.contentDocument;
const findResponsiveElementInIframe = iframeDocument.getElementById( `block-${ clientId }` );
if ( null !== findResponsiveElementInIframe && undefined !== findResponsiveElementInIframe ) {
styling.map( ( item ) => {
if ( item ) {
findResponsiveElementInIframe.classList.remove( item, deviceTypeClass );
if ( 'uag-hide-tab' === item || 'uag-hide-mob' === item ) {
findResponsiveElementInIframe.classList.add( item, deviceTypeClass );
}
}
return findResponsiveElementInIframe;
} );
}
}
};
export default addBlockEditorResponsiveStyles;

View File

@@ -0,0 +1,17 @@
import { applyFilters } from '@wordpress/hooks';
function addCommonDataToSpectraBlocks( configData = {} ) {
let data = {
example: {
attributes: {
isPreview: true,
},
},
usesContext: [ 'postId', 'postType' ],
};
if ( 'site-editor' === uagb_blocks_info.is_site_editor ) {
data = {};
}
return applyFilters( 'addCommonDataToSpectraBlocks', { ...configData, ...data } );
}
export default addCommonDataToSpectraBlocks;

View File

@@ -0,0 +1,138 @@
import { useEffect } from '@wordpress/element';
import { select } from '@wordpress/data';
const headingDescToggleDefault = 'yes' === uagb_blocks_info.uagb_old_user_less_than_2;
const getUniqId = ( blocks ) => blocks
.reduce( ( result, block ) => {
if ( block?.attributes?.block_id && block.name.includes( 'uagb' ) ) {
result.blockIds.push( block.attributes.block_id );
result.clientIds.push( block.clientId );
}
if ( block.innerBlocks ) {
const { blockIds, clientIds } = getUniqId( block.innerBlocks );
result.blockIds = [ ...result.blockIds, ...blockIds ];
result.clientIds = [ ...result.clientIds, ...clientIds ];
}
return result;
}, { blockIds: [], clientIds: [] } );
const checkDuplicate = ( blockIds, block_id, currentIndex ) => {
const getFiltered = blockIds.filter( ( el ) => ( el === block_id ) );
return getFiltered.length > 1 && currentIndex === blockIds.lastIndexOf( block_id )
}
const addInitialAttr = ( ChildComponent ) => {
const WrappedComponent = ( props ) => {
const { name, setAttributes, clientId, attributes : { block_id } } = props;
const listOfParentBlock = [
'uagb/faq',
'uagb/buttons',
'uagb/icon-list',
'uagb/restaurant-menu',
'uagb/social-share',
'uagb/content-timeline',
'uagb/tabs',
'uagb/how-to'
]; // Add all parent block name here who's getting issue in customize preview.
useEffect( () => {
if ( uagb_blocks_info.is_customize_preview && ( '0' === block_id || undefined === block_id ) && listOfParentBlock.includes( name ) ) {
document.addEventListener( `UAG-${name}-${clientId.substr( 0, 8 )}-BlockCustomizeWidgetEditor`, function ( e ) {
setAttributes( { block_id: e.detail.id, classMigrate: e.detail.classMigrate, childMigrate: e.detail.childMigrate } );
} );
}
}, [] );
useEffect( () => {
if ( uagb_blocks_info.is_customize_preview && ( '0' === block_id || undefined === block_id ) && listOfParentBlock.includes( name ) ) {
const loadCustomEvent = new CustomEvent( `UAG-${name}-${clientId.substr( 0, 8 )}-BlockCustomizeWidgetEditor`, { detail: { id: clientId.substr( 0, 8 ), classMigrate: true, childMigrate: true }, } );
document.dispatchEvent( loadCustomEvent );
}
}, [ props.attributes ] );
useEffect( () => {
const listOfClassMigrate = [
'uagb/advanced-heading',
'uagb/blockquote',
'uagb/buttons',
'uagb/call-to-action',
'uagb/column',
'uagb/columns',
'uagb/icon-list',
'uagb/marketing-button',
'uagb/image-gallery',
'uagb/info-box',
'uagb/lottie',
'uagb/restaurant-menu',
'uagb/section',
'uagb/social-share',
'uagb/content-timeline',
'uagb/table-of-contents',
'uagb/team',
'uagb/testimonial',
'uagb/instagram-feed',
'uagb/login',
'uagb/register',
];
const listOfChildMigrate = [
'uagb/buttons',
'uagb/icon-list',
'uagb/restaurant-menu',
'uagb/social-share',
'uagb/content-timeline',
'uagb/instagram-feed',
];
const listOfIsHtml = [ 'uagb/cf7-styler', 'uagb/gf-styler' ];
const listOfEditorInnerblocksPreview = [ 'uagb/countdown' ];
const listOfAllTaxonomyStore = [ 'uagb/post-carousel', 'uagb/post-grid', 'uagb/post-masonry' ];
const attributeObject = { block_id: clientId.substr( 0, 8 ) };
if ( listOfAllTaxonomyStore.includes( name ) ) {
attributeObject.allTaxonomyStore = undefined;
}
// editorInnerblocksPreview: This attribute is used to display innerblocks preview for 'Replace with Content' mode.
if ( listOfEditorInnerblocksPreview.includes( name ) ) {
attributeObject.editorInnerblocksPreview = false;
}
if ( listOfIsHtml.includes( name ) ) {
attributeObject.isHtml = false;
}
if ( listOfChildMigrate.includes( name ) ) {
attributeObject.childMigrate = true;
}
if ( listOfClassMigrate.includes( name ) ) {
attributeObject.classMigrate = true;
}
if ( 'uagb/advanced-heading' === name ) {
attributeObject.headingDescToggle = headingDescToggleDefault;
}
const getStore = select( 'core/block-editor' );
const getAllBlocks = getStore?.getBlocks ? getStore.getBlocks() : null;
const { blockIds, clientIds } = getAllBlocks ? getUniqId( getAllBlocks ) : { blockIds: [], clientIds: [] };
if ( 'not_set' === block_id || '0' === block_id || ! block_id || checkDuplicate( blockIds, block_id, clientIds.indexOf( clientId ) ) ) {
setAttributes( attributeObject );
}
}, [ clientId ] );
return <ChildComponent { ...props } />;
};
return WrappedComponent;
};
export default addInitialAttr;

View File

@@ -0,0 +1,144 @@
import { select, dispatch, subscribe } from '@wordpress/data';
import { createBlock, parse, serialize } from '@wordpress/blocks';
import isInvalid from './isInvalid';
// Flag to Detect if At Least One Block was Recovered.
let recoveryDone = false;
// Create Recovery CSS to Hide All Errornous Blocks.
const createRecoveryCSS = () => {
const recoveryCSS = document.createElement( 'style' );
recoveryCSS.setAttribute( 'id', 'uagb-recovery-styles' );
recoveryCSS.innerHTML = '.has-warning[data-type^="uagb/"] { opacity: 0 !important; }';
document.body.appendChild( recoveryCSS );
};
// Destroy the Recovery CSS to Restore the Editor to its Original State.
const destroyRecoveryCSS = () => {
const recoveryCSS = document.querySelector( '#uagb-recovery-styles' );
if ( recoveryCSS ) {
document.body.removeChild( recoveryCSS );
}
};
// Start Block Recovery for all Spectra Blocks.
const initBlockRecovery = ( blocks ) => {
const curBlocks = [ ...blocks ];
let isRecovered = false;
const recoverInnerBlocks = ( innerBlocks ) => {
innerBlocks.forEach( ( block ) => {
if ( isInvalid( block ) ) {
isRecovered = true;
const newBlock = recoverBlock( block );
for ( const key in newBlock ) {
block[ key ] = newBlock[ key ];
}
}
if ( block.innerBlocks.length ) {
recoverInnerBlocks( block.innerBlocks );
}
} );
};
recoverInnerBlocks( curBlocks );
return [ curBlocks, isRecovered ];
};
// Create Replacement Blocks Based on the Fixed Variant.
const recoverBlocks = ( allBlocks ) =>
allBlocks.map( ( block ) => {
const curBlock = block;
if ( 'core/block' === block.name ) {
const {
attributes: { ref },
} = block;
const reusableBlockPosts = select( 'core' ).getEntityRecords( 'postType', 'wp_block' );
let reusableBlockPost = null;
if ( reusableBlockPosts ) {
reusableBlockPosts?.forEach( ( post ) => {
if ( ref === post?.id ) {
reusableBlockPost = post?.content?.raw;
}
} );
}
if ( null === reusableBlockPost ) {
return curBlock;
}
const parsedBlocks = parse( reusableBlockPost ) || [];
const [ recoveredBlocks, isRecovered ] = initBlockRecovery( parsedBlocks );
if ( isRecovered ) {
recoveryDone = true;
return {
blocks: recoveredBlocks,
isReusable: true,
ref,
};
}
}
if ( curBlock.innerBlocks && curBlock.innerBlocks.length ) {
const newInnerBlocks = recoverBlocks( curBlock.innerBlocks );
if ( newInnerBlocks.some( ( innerBlock ) => innerBlock.recovered ) ) {
curBlock.innerBlocks = newInnerBlocks;
curBlock.replacedClientId = curBlock.clientId;
curBlock.recovered = true;
}
}
if ( isInvalid( curBlock ) ) {
recoveryDone = true;
const newBlock = recoverBlock( curBlock );
newBlock.replacedClientId = curBlock.clientId;
newBlock.recovered = true;
return newBlock;
}
return curBlock;
} );
// Recover Current Block.
const recoverBlock = ( { name, attributes, innerBlocks } ) => createBlock( name, attributes, innerBlocks );
// Start with the Automatic Block Recovery Process.
const autoBlockRecovery = () => {
createRecoveryCSS();
setTimeout( () => {
const unsubscribe = subscribe( () => {
if ( select( 'core' ).getEntityRecords( 'postType', 'wp_block' ) !== null ) {
unsubscribe();
const recoveredBlocks = recoverBlocks( select( 'core/block-editor' ).getBlocks() );
recoveredBlocks.forEach( ( block ) => {
if ( block.isReusable && block.ref ) {
dispatch( 'core' )
.editEntityRecord( 'postType', 'wp_block', block.ref, {
content: serialize( block.blocks ),
} )
.then();
}
if ( block.recovered && block.replacedClientId ) {
dispatch( 'core/block-editor' ).replaceBlock( block.replacedClientId, block );
}
} );
if ( recoveryDone ) {
//eslint-disable-next-line no-console
console.log(
'%cSpectra Auto Recovery Enabled: All Spectra Blocks on this page have been recovered!',
'border-radius: 6px; width: 100%; margin: 16px 0; padding: 16px; background-color: #007CBA; color: #fff; font-weight: bold; text-shadow: 2px 2px 2px #0063A1;'
);
}
destroyRecoveryCSS();
}
} );
}, 0 );
};
export default autoBlockRecovery;

View File

@@ -0,0 +1,27 @@
import maybeGetColorForVariable from '@Controls/maybeGetColorForVariable';
function colourNameToHex( colour ) {
let result;
const colours = {
'black': '#000000',
'cyan-bluish-gray': '#abb8c3',
'white': '#ffffff',
'pale-pink': '#f78da7',
'luminous-vivid-orange': '#ff6900',
'luminous-vivid-amber': '#fcb900',
'light-green-cyan': '#7bdcb5',
'vivid-green-cyan': '#00d084',
'pale-cyan-blue': '#8ed1fc',
'vivid-cyan-blue': '#0693e3',
'vivid-purple': '#9b51e0',
'vivid-red': '#cf2e2e',
};
if ( typeof colours[ colour?.toLowerCase() ] !== 'undefined' ) {
result = colours[ colour?.toLowerCase() ];
} else {
const colorVal = `var(--wp--preset--color--${ colour })`;
result = maybeGetColorForVariable( colorVal );
}
return result;
}
export default colourNameToHex;

View File

@@ -0,0 +1,32 @@
/**
* Set inline CSS class.
*
* @param {Object} props - The block object.
* @return {Array} The inline CSS class.
*/
import parseSVG from './parseIcon';
function renderSVG( svg ) {
svg = parseSVG( svg );
const fontAwesome = uagb_blocks_info.uagb_svg_icons[ svg ];
if ( 'undefined' !== typeof fontAwesome ) {
const viewbox_array = fontAwesome.svg.hasOwnProperty( 'brands' )
? fontAwesome.svg.brands.viewBox
: fontAwesome.svg.solid.viewBox;
const path = fontAwesome.svg.hasOwnProperty( 'brands' )
? fontAwesome.svg.brands.path
: fontAwesome.svg.solid.path;
const viewBox = viewbox_array?.join( ' ' );
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox={ viewBox }>
<path d={ path }></path>
</svg>
);
}
}
export default renderSVG;

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,240 @@
export const getBorderAttributes = ( prefix ) => {
const defaults = {
// Width
borderTopWidth: '',
borderRightWidth: '',
borderBottomWidth: '',
borderLeftWidth: '',
borderTopWidthTablet: '',
borderRightWidthTablet: '',
borderBottomWidthTablet: '',
borderLeftWidthTablet: '',
borderTopWidthMobile: '',
borderRightWidthMobile: '',
borderBottomWidthMobile: '',
borderLeftWidthMobile: '',
// Radius
borderTopLeftRadius: '',
borderTopRightRadius: '',
borderBottomRightRadius: '',
borderBottomLeftRadius: '',
borderTopLeftRadiusTablet: '',
borderTopRightRadiusTablet: '',
borderBottomRightRadiusTablet: '',
borderBottomLeftRadiusTablet: '',
borderTopLeftRadiusMobile: '',
borderTopRightRadiusMobile: '',
borderBottomRightRadiusMobile: '',
borderBottomLeftRadiusMobile: '',
// unit
borderRadiusUnit: 'px',
borderRadiusUnitTablet: 'px',
borderRadiusUnitMobile: 'px',
// common
borderStyle: '',
borderColor: '',
borderHColor: '',
};
const attributes = {};
const devices = [
{ devicePrefix: '', copyPastePrefix: '' },
{ devicePrefix: 'Tablet', copyPastePrefix: '-tablet' },
{ devicePrefix: 'Mobile', copyPastePrefix: '-mobile' },
];
devices.forEach( ( item ) => {
// border width
attributes[ prefix + 'BorderTopWidth' + item.devicePrefix ] = {
type: 'number',
default: defaults[ `borderTopWidth${ item.devicePrefix }` ],
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-top-width' + item.copyPastePrefix,
},
};
attributes[ prefix + 'BorderLeftWidth' + item.devicePrefix ] = {
type: 'number',
default: defaults[ `borderLeftWidth${ item.devicePrefix }` ],
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-left-width' + item.copyPastePrefix,
},
};
attributes[ prefix + 'BorderRightWidth' + item.devicePrefix ] = {
type: 'number',
default: defaults[ `borderRightWidth${ item.devicePrefix }` ],
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-right-width' + item.copyPastePrefix,
},
};
attributes[ prefix + 'BorderBottomWidth' + item.devicePrefix ] = {
type: 'number',
default: defaults[ `borderBottomWidth${ item.devicePrefix }` ],
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-bottom-width' + item.copyPastePrefix,
},
};
// border radius
attributes[ prefix + 'BorderTopLeftRadius' + item.devicePrefix ] = {
type: 'number',
default: defaults[ `borderTopLeftRadius${ item.devicePrefix }` ],
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-top-left-radius' + item.copyPastePrefix,
},
};
attributes[ prefix + 'BorderTopRightRadius' + item.devicePrefix ] = {
type: 'number',
default: defaults[ `borderTopRightRadius${ item.devicePrefix }` ],
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-top-right-radius' + item.copyPastePrefix,
},
};
attributes[ prefix + 'BorderBottomLeftRadius' + item.devicePrefix ] = {
type: 'number',
default: defaults[ `borderBottomLeftRadius${ item.devicePrefix }` ],
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-bottom-left-radius' + item.copyPastePrefix,
},
};
attributes[ prefix + 'BorderBottomRightRadius' + item.devicePrefix ] = {
type: 'number',
default: defaults[ `borderBottomRightRadius${ item.devicePrefix }` ],
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-bottom-right-radius' + item.copyPastePrefix,
},
};
// radius unit
attributes[ prefix + 'BorderRadiusUnit' + item.devicePrefix ] = {
type: 'string',
default: defaults[ `borderRadiusUnit${ item.devicePrefix }` ],
UAGCopyPaste: {
styleType: prefix + '-border-radius-unit' + item.copyPastePrefix,
},
};
} );
attributes[ prefix + 'BorderLink' ] = {
type: 'boolean',
default: true,
UAGCopyPaste: {
styleType: prefix + '-border-link',
},
};
attributes[ prefix + 'BorderRadiusLink' ] = {
type: 'boolean',
default: true,
UAGCopyPaste: {
styleType: prefix + '-border-radius-link',
},
};
attributes[ prefix + 'BorderStyle' ] = {
type: 'string',
default: defaults.borderStyle,
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-style',
},
};
attributes[ prefix + 'BorderColor' ] = {
type: 'string',
default: defaults.borderColor,
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-color',
},
};
attributes[ prefix + 'BorderHColor' ] = {
type: 'string',
default: defaults.borderHColor,
isGBSStyle: true,
UAGCopyPaste: {
styleType: prefix + '-border-hover-color',
},
};
return attributes;
};
export const migrateBorderAttributes = (
prefix,
borderWidth,
borderRadius,
color = {},
hoverColor = {},
borderStyle = {},
setAttributes,
attributes = {}
) => {
if ( 'default' !== attributes[ prefix + 'BorderStyle' ] ) {
if ( ! isNaN( borderWidth.value ) ) {
if ( '' === attributes[ prefix + 'BorderTopWidth' ] ) {
setAttributes( { [ prefix + 'BorderTopWidth' ]: borderWidth.value } );
}
if ( '' === attributes[ prefix + 'BorderLeftWidth' ] ) {
setAttributes( { [ prefix + 'BorderLeftWidth' ]: borderWidth.value } );
}
if ( '' === attributes[ prefix + 'BorderRightWidth' ] ) {
setAttributes( { [ prefix + 'BorderRightWidth' ]: borderWidth.value } );
}
if ( '' === attributes[ prefix + 'BorderBottomWidth' ] ) {
setAttributes( { [ prefix + 'BorderBottomWidth' ]: borderWidth.value } );
}
// reset
attributes[ borderWidth.label ] = '';
}
if ( ! isNaN( borderRadius.value ) ) {
if ( '' === attributes[ prefix + 'BorderTopLeftRadius' ] ) {
setAttributes( { [ prefix + 'BorderTopLeftRadius' ]: borderRadius.value } );
}
if ( '' === attributes[ prefix + 'BorderTopRightRadius' ] ) {
setAttributes( { [ prefix + 'BorderTopRightRadius' ]: borderRadius.value } );
}
if ( '' === attributes[ prefix + 'BorderBottomLeftRadius' ] ) {
setAttributes( { [ prefix + 'BorderBottomLeftRadius' ]: borderRadius.value } );
}
if ( '' === attributes[ prefix + 'BorderBottomRightRadius' ] ) {
setAttributes( { [ prefix + 'BorderBottomRightRadius' ]: borderRadius.value } );
}
// reset
attributes[ borderRadius.label ] = '';
}
if ( color.value ) {
if ( '' === attributes[ prefix + 'BorderColor' ] ) {
setAttributes( { [ prefix + 'BorderColor' ]: color.value } );
}
// reset
attributes[ color.label ] = '';
}
if ( hoverColor.value ) {
if ( '' === attributes[ prefix + 'BorderHColor' ] ) {
setAttributes( { [ prefix + 'BorderHColor' ]: hoverColor.value } );
}
// reset
attributes[ hoverColor.label ] = '';
}
if ( borderStyle.value ) {
if ( '' === attributes[ prefix + 'BorderStyle' ] ) {
setAttributes( { [ prefix + 'BorderStyle' ]: borderStyle.value } );
}
// reset
attributes[ borderStyle.label ] = '';
}
}
return attributes;
};

View File

@@ -0,0 +1,247 @@
import generateCSSUnit from '@Controls/generateCSSUnit';
const generateBackgroundCSS = ( backgroundAttributes, pseudoElementOverlay = {} ) => {
const {
backgroundType,
backgroundImage,
backgroundColor,
gradientValue,
backgroundRepeat,
backgroundPosition,
backgroundSize,
backgroundAttachment,
backgroundCustomSize,
backgroundCustomSizeType,
backgroundImageColor,
overlayType,
overlayOpacity,
backgroundVideoColor,
backgroundVideo,
customPosition,
centralizedPosition,
xPosition,
xPositionType,
yPosition,
yPositionType,
gradientColor1,
gradientColor2,
gradientLocation1,
gradientLocation2,
gradientType,
gradientAngle,
selectGradient,
//image overlay
backgroundOverlayImage,
backgroundOverlayRepeat,
backgroundOverlayPosition,
backgroundOverlaySize,
backgroundOverlayAttachment,
backgroundCustomOverlaySize,
backgroundCustomOverlaySizeType,
customOverlayPosition,
xPositionOverlay,
xPositionOverlayType,
yPositionOverlay,
yPositionOverlayType,
blendMode,
globalBlockStyleId,
} = backgroundAttributes;
const bgCSS = {};
const bgOverlayCSS = {};
const xPositionValue = isNaN( xPosition ) || '' === xPosition ? 0 : xPosition;
const xPositionTypeValue = undefined !== xPositionType ? xPositionType : '';
const yPositionValue = isNaN( yPosition ) || '' === yPosition ? 0 : yPosition;
const yPositionTypeValue = undefined !== yPositionType ? yPositionType : '';
const xPositionOverlayValue = ( 'number' !== typeof xPositionOverlay ) ? 0 : xPositionOverlay;
const xPositionOverlayTypeValue = undefined !== xPositionOverlayType ? xPositionOverlayType : '';
const yPositionOverlayValue = ( 'number' !== typeof yPositionOverlay ) ? 0 : yPositionOverlay;
const yPositionOverlayTypeValue = undefined !== yPositionOverlayType ? yPositionOverlayType : '';
const customXPosition = generateCSSUnit( xPositionValue, xPositionTypeValue );
const customYPosition = generateCSSUnit( yPositionValue, yPositionTypeValue );
// Handle the Overlay Opacity.
const applyOverlayOpacity = () => {
if ( undefined !== overlayOpacity && '' !== overlayOpacity ) {
bgOverlayCSS.opacity = `${ overlayOpacity }`;
}
};
// Handle the Gradient Properties.
let gradient;
switch ( selectGradient ) {
case 'basic':
gradient = gradientValue;
break;
case 'advanced':
switch ( gradientType ) {
case 'linear':
gradient = `linear-gradient(${ gradientAngle }deg, ${ gradientColor1 } ${ gradientLocation1 }%, ${ gradientColor2 } ${ gradientLocation2 }%)`;
break;
case 'radial':
gradient = `radial-gradient( at center center, ${ gradientColor1 } ${ gradientLocation1 }%, ${ gradientColor2 } ${ gradientLocation2 }%)`;
break;
default:
gradient = '';
break;
}
break;
default:
gradient = '';
break;
}
// Handle the Background Size Properties.
let backgroundSizeValue = backgroundSize;
if ( 'custom' === backgroundSize ) {
backgroundSizeValue = backgroundCustomSize + backgroundCustomSizeType;
}
// Handle the Background Properties along with Overlay if Needed.
if ( undefined !== backgroundType && '' !== backgroundType ) {
if ( 'color' === backgroundType ) {
if (
'' !== backgroundColor &&
undefined !== backgroundColor &&
'unset' !== backgroundColor &&
backgroundImage?.url
) {
bgCSS[ 'background-image' ] =
'linear-gradient(to right, ' +
backgroundColor +
', ' +
backgroundColor +
'), url(' +
backgroundImage?.url +
');';
} else if ( undefined === backgroundImage || '' === backgroundImage || 'unset' === backgroundImage ) {
bgCSS[ 'background-color' ] = backgroundColor;
}
// globalBlockStyleId
if ( globalBlockStyleId ) {
// We have added overlay for container block only that's why we are checking for pseudoElementOverlay?.blockName in future we will implement overlay for all blocks then we will remove this condition.
bgCSS[ 'background-image' ] = `unset;`;
}
} else if ( 'image' === backgroundType ) {
if (
'color' === overlayType &&
'' !== backgroundImageColor &&
undefined !== backgroundImageColor &&
'unset' !== backgroundImageColor &&
backgroundImage?.url
) {
if ( pseudoElementOverlay?.hasPseudo ) {
bgCSS[ 'background-image' ] = `url(${ backgroundImage.url });`;
bgOverlayCSS.background = backgroundImageColor;
applyOverlayOpacity();
} else if ( 'container' === pseudoElementOverlay?.blockName ) {
// We have added overlay for container block only that's why we are checking for pseudoElementOverlay?.blockName in future we will implement overlay for all blocks then we will remove this condition.
bgCSS[ 'background-image' ] = `url(${ backgroundImage.url });`;
} else {
bgCSS[ 'background-image' ] =
'linear-gradient(to right, ' +
backgroundImageColor +
', ' +
backgroundImageColor +
'), url(' +
backgroundImage.url +
');';
}
}
if (
'gradient' === overlayType &&
gradient &&
backgroundImage?.url
) {
if ( pseudoElementOverlay?.hasPseudo ) {
bgCSS[ 'background-image' ] = `url(${ backgroundImage.url });`;
bgOverlayCSS[ 'background-image' ] = gradient;
applyOverlayOpacity();
} else if ( 'container' === pseudoElementOverlay?.blockName ) {
// We have added overlay for container block only that's why we are checking for pseudoElementOverlay?.blockName in future we will implement overlay for all blocks then we will remove this condition.
bgCSS[ 'background-image' ] = `url(${ backgroundImage.url });`;
} else {
bgCSS[ 'background-image' ] = gradient + ', url(' + backgroundImage?.url + ');';
}
}
if ( ['image', 'none', ''].includes( overlayType ) && backgroundImage?.url ) {
bgCSS[ 'background-image' ] = 'url(' + backgroundImage?.url + ');';
}
bgCSS[ 'background-repeat' ] = backgroundRepeat;
if ( 'custom' !== customPosition && backgroundPosition?.x && backgroundPosition?.y ) {
bgCSS[ 'background-position' ] = `${ backgroundPosition?.x * 100 }% ${ backgroundPosition?.y * 100 }%`;
} else if ( 'custom' === customPosition ) {
bgCSS[
'background-position'
] = centralizedPosition === false ? `${ customXPosition } ${ customYPosition }` : `calc(50% + ${ customXPosition }) calc(50% + ${ customYPosition })` ;
}
bgCSS[ 'background-size' ] = backgroundSizeValue;
bgCSS[ 'background-attachment' ] = backgroundAttachment;
bgCSS[ 'background-clip' ] = 'padding-box';
} else if ( 'gradient' === backgroundType ) {
if ( '' !== gradient && 'unset' !== gradient ) {
bgCSS.background = gradient;
bgCSS[ 'background-clip' ] = 'padding-box';
}
} else if ( 'video' === backgroundType ) {
if (
'color' === overlayType &&
'' !== backgroundVideo &&
'' !== backgroundVideoColor &&
undefined !== backgroundVideoColor &&
'unset' !== backgroundVideoColor
) {
bgCSS.background = backgroundVideoColor;
}
if ( 'gradient' === overlayType && '' !== backgroundVideo && backgroundVideo && gradient ) {
bgCSS[ 'background-image' ] = gradient + ';';
}
}
}
//Handle background overlay image css
if ( 'image' === overlayType ) {
if ( '' !== backgroundOverlayImage && backgroundOverlayImage?.url ) {
bgOverlayCSS[ 'background-image' ] = `url(${ backgroundOverlayImage.url } );`;
}
bgOverlayCSS[ 'background-repeat' ] = backgroundOverlayRepeat;
if ( 'custom' !== customOverlayPosition && backgroundOverlayPosition?.x && backgroundOverlayPosition?.y ) {
bgOverlayCSS[ 'background-position' ] = `${ backgroundOverlayPosition.x * 100 }% ${
backgroundOverlayPosition.y * 100
}%`;
} else if ( 'custom' === customOverlayPosition ) {
bgOverlayCSS[
'background-position'
] = `${ xPositionOverlayValue }${ xPositionOverlayTypeValue } ${ yPositionOverlayValue }${ yPositionOverlayTypeValue }`;
}
let backgroundOverlaySizeValue = backgroundOverlaySize;
if ( 'custom' === backgroundOverlaySize ) {
backgroundOverlaySizeValue = backgroundCustomOverlaySize + backgroundCustomOverlaySizeType;
}
bgOverlayCSS[ 'background-size' ] = backgroundOverlaySizeValue;
bgOverlayCSS[ 'background-attachment' ] = backgroundOverlayAttachment;
bgOverlayCSS[ 'background-clip' ] = 'padding-box';
bgOverlayCSS[ 'mix-blend-mode' ] = blendMode;
bgOverlayCSS.opacity = overlayOpacity;
}
return pseudoElementOverlay?.forStyleSheet ? bgOverlayCSS : bgCSS;
}
export default generateBackgroundCSS;

View File

@@ -0,0 +1,62 @@
import generateCSSUnit from '@Controls/generateCSSUnit';
const generateBorderCSS = ( attributes, prefix, deviceType = 'desktop' ) => {
if ( 'default' !== attributes[ prefix + 'BorderStyle' ] ) {
switch ( deviceType ) {
case 'tablet':
deviceType = 'Tablet';
break;
case 'mobile':
deviceType = 'Mobile';
break;
default:
deviceType = '';
}
const borderCSS = {};
const borderStyle = attributes[ prefix + 'BorderStyle' ];
const borderColor = attributes[ prefix + 'BorderColor' ];
const borderTopWidth = generateCSSUnit( attributes[ prefix + 'BorderTopWidth' + deviceType ], 'px' );
const borderRightWidth = generateCSSUnit( attributes[ prefix + 'BorderRightWidth' + deviceType ], 'px' );
const borderBottomWidth = generateCSSUnit( attributes[ prefix + 'BorderBottomWidth' + deviceType ], 'px' );
const borderLeftWidth = generateCSSUnit( attributes[ prefix + 'BorderLeftWidth' + deviceType ], 'px' );
const unitFallback = attributes[ prefix + 'BorderRadiusUnit' + deviceType ] || 'px';
const borderTopLeftRadius = generateCSSUnit(
attributes[ prefix + 'BorderTopLeftRadius' + deviceType ],
unitFallback
);
const borderTopRightRadius = generateCSSUnit(
attributes[ prefix + 'BorderTopRightRadius' + deviceType ],
unitFallback
);
const borderBottomRightRadius = generateCSSUnit(
attributes[ prefix + 'BorderBottomRightRadius' + deviceType ],
unitFallback
);
const borderBottomLeftRadius = generateCSSUnit(
attributes[ prefix + 'BorderBottomLeftRadius' + deviceType ],
unitFallback
);
if ( 'none' !== attributes[ prefix + 'BorderStyle' ] && '' !== attributes[ prefix + 'BorderStyle' ] ) {
borderCSS[ 'border-top-width' ] = borderTopWidth;
borderCSS[ 'border-right-width' ] = borderRightWidth;
borderCSS[ 'border-bottom-width' ] = borderBottomWidth;
borderCSS[ 'border-left-width' ] = borderLeftWidth;
borderCSS[ 'border-color' ] = borderColor;
}
borderCSS[ 'border-style' ] = borderStyle;
borderCSS[ 'border-top-left-radius' ] = borderTopLeftRadius;
borderCSS[ 'border-top-right-radius' ] = borderTopRightRadius;
borderCSS[ 'border-bottom-right-radius' ] = borderBottomRightRadius;
borderCSS[ 'border-bottom-left-radius' ] = borderBottomLeftRadius;
return borderCSS;
}
// In case of 'default' border style, we return an empty object.
return {};
};
export default generateBorderCSS;

View File

@@ -0,0 +1,18 @@
/* eslint-disable no-nested-ternary */
import generateCSSUnit from './generateCSSUnit';
export default function generateBorderRadius( unit, topLeft, topRight = NaN, bottomRight = NaN, bottomLeft = NaN ) {
return ! Number.isNaN( topRight )
? ! Number.isNaN( bottomRight )
? ! Number.isNaN( bottomLeft )
? `${ generateCSSUnit( topLeft, unit ) } ${ generateCSSUnit( topRight, unit ) } ${ generateCSSUnit(
bottomRight,
unit
) } ${ generateCSSUnit( bottomLeft, unit ) }`
: `${ generateCSSUnit( topLeft, unit ) } ${ generateCSSUnit( topRight, unit ) } ${ generateCSSUnit(
bottomRight,
unit
) }`
: `${ generateCSSUnit( topLeft, unit ) } ${ generateCSSUnit( topRight, unit ) }`
: generateCSSUnit( topLeft, unit );
}

View File

@@ -0,0 +1,60 @@
function generateCSS(
selectorsObj,
id,
isResponsive = false, // eslint-disable-line no-unused-vars
responsiveType = '' // eslint-disable-line no-unused-vars
) {
let gen_styling_css = '';
for ( const selector in selectorsObj ) {
const cssProps = selectorsObj[ selector ];
let css = '';
for ( const property in cssProps ) {
if (
typeof cssProps[ property ] === 'undefined' ||
cssProps[ property ] === null ||
cssProps[ property ]?.length === 0
) {
continue;
}
const propertyValue = cssProps[ property ];
if ( 'font-family' === property && 'Default' === propertyValue ) {
continue;
}
if ( 'font-family' === property ) {
css += property + ': ' + "'" + propertyValue + "'" + ';';
} else {
css += property + ': ' + propertyValue + ';';
}
}
if ( css.length !== 0 ) {
if ( responsiveType === 'tablet' ) {
gen_styling_css += '@media only screen and (max-width: ' + uagb_blocks_info.tablet_breakpoint + 'px) {';
gen_styling_css += id;
gen_styling_css += selector + '{';
gen_styling_css += css;
gen_styling_css += '}}';
} else if ( responsiveType === 'mobile' ) {
gen_styling_css += '@media only screen and (max-width: ' + uagb_blocks_info.mobile_breakpoint + 'px) {';
gen_styling_css += id;
gen_styling_css += selector + '{';
gen_styling_css += css;
gen_styling_css += '}}';
} else {
gen_styling_css += id;
gen_styling_css += selector + '{';
gen_styling_css += css;
gen_styling_css += '}';
}
}
}
return gen_styling_css;
}
export default generateCSS;

View File

@@ -0,0 +1,9 @@
function generateCSSUnit( value, unit = '', isImportant = false ) {
if ( isNaN( value ) || value === '' ) {
return '';
}
return value + unit + ( isImportant ? ' !important' : '' );
}
export default generateCSSUnit;

View File

@@ -0,0 +1,81 @@
import generateCSSUnit from '@Controls/generateCSSUnit';
/**
* Generate the Box Shadow or Text Shadow CSS.
*
* For Text Shadow CSS:
* { spread, position } should not be sent as params during the function call.
* { spreadUnit } will have no effect.
*
* For Box/Text Shadow Hover CSS:
* { altColor } should be set as the attribute used for { color } in Box/Text Shadow Normal CSS.
*
* @param {Object} shadowProperties The object of properties used to generate the Box/Text Shadow CSS.
* @param {number|undefined} shadowProperties.horizontal The horizontal value.
* @param {number|undefined} shadowProperties.vertical The vertical value.
* @param {number|undefined} shadowProperties.blur The blur value.
* @param {number|undefined} shadowProperties.spread The spread value.
* @param {string} shadowProperties.horizontalUnit The horizontal unit, defaults to 'px'.
* @param {string} shadowProperties.verticalUnit The vertical unit, defaults to 'px'.
* @param {string} shadowProperties.blurUnit The blur unit, defaults to 'px'.
* @param {string} shadowProperties.spreadUnit The spread unit, defaults to 'px'.
* @param {string|undefined} shadowProperties.color The shadow color.
* @param {string} shadowProperties.position The inset/outset position.
* @param {string} shadowProperties.altColor An alternate color to use for hover if color is undefined.
* @return {string} The generated css, or empty string if required properties aren't set.
*
* @since 2.5.0
*/
const generateShadowCSS = ( shadowProperties ) => {
let {
horizontal,
vertical,
blur,
spread = undefined,
horizontalUnit = 'px',
verticalUnit = 'px',
blurUnit = 'px',
spreadUnit = 'px',
color,
position = 'outset',
altColor = '',
} = shadowProperties;
// Although optional, color is required for Sarafi on PC. Return early if color isn't set.
if ( ! color && ! altColor ) {
return '';
}
// Get the CSS units for the number properties.
horizontal = generateCSSUnit( horizontal, horizontalUnit );
if ( '' === horizontal ) {
horizontal = 0;
}
vertical = generateCSSUnit( vertical, verticalUnit );
if ( '' === vertical ) {
vertical = 0;
}
blur = generateCSSUnit( blur, blurUnit );
if ( '' === blur ) {
blur = 0;
}
spread = generateCSSUnit( spread, spreadUnit );
if ( '' === spread ) {
spread = 0;
}
// If all numeric unit values are exactly 0, don't render the CSS.
if ( 0 === horizontal && 0 === vertical && 0 === blur && 0 === spread ) {
return '';
}
// Return the CSS with horizontal, vertical, blur, and color - and conditionally render spread and position.
return `${ horizontal } ${ vertical } ${ blur }${ spread ? ` ${ spread }` : '' } ${ color ? color : altColor }${
'outset' === position ? '' : ` ${ position }`
}`;
};
export default generateShadowCSS;

View File

@@ -0,0 +1,18 @@
/* eslint-disable no-nested-ternary */
import generateCSSUnit from './generateCSSUnit';
export default function generateSpacing( unit, top, right = NaN, bottom = NaN, left = NaN ) {
return ! Number.isNaN( right )
? ! Number.isNaN( bottom )
? ! Number.isNaN( left )
? `${ generateCSSUnit( top, unit ) } ${ generateCSSUnit( right, unit ) } ${ generateCSSUnit(
bottom,
unit
) } ${ generateCSSUnit( left, unit ) }`
: `${ generateCSSUnit( top, unit ) } ${ generateCSSUnit( right, unit ) } ${ generateCSSUnit(
bottom,
unit
) }`
: `${ generateCSSUnit( top, unit ) } ${ generateCSSUnit( right, unit ) }`
: generateCSSUnit( top, unit );
}

View File

@@ -0,0 +1,45 @@
// Import the apiFetch function from the '@wordpress/api-fetch' package
import apiFetch from '@wordpress/api-fetch';
import { __ } from '@wordpress/i18n';
import { isObjectNotEmpty } from '../utils/Helpers'
/**
* A function to send form data via API fetch.
*
* @async
* @function
*
* @param {Object} params - The parameters object.
* @param {string} params.url - The URL to send the data.
* @param {string} params.action - The action to take with the data.
* @param {Object} params.data - The data to send.
*
* @return {Promise} Returns a Promise that resolves to an object containing the API response.
*/
const getApiData = async ( { url, action, data } ) => {
if ( !isObjectNotEmpty( data ) ) {
return Promise.reject( new Error( __( 'data object is empty', 'ultimate-addons-for-gutenberg' ) ) );
}
// Create a new instance of the FormData class
const formData = new window.FormData();
// Append an 'action' property to the formData object
formData.append( 'action', action );
// If the 'data' object is not empty, iterate over its key-value pairs and append them to the formData object
for( const dataKey in data ){
const dataValue = data[dataKey];
formData.append( dataKey, dataValue );
}
// Make a POST request using the apiFetch function, passing in the url, method, and body properties
return await apiFetch( {
url,
method: 'POST',
body: formData,
} );
};
// Export the getApiData function as the default export of the module
export default getApiData;

View File

@@ -0,0 +1,19 @@
import { blocksAttributes } from '@Attributes/getBlocksDefaultAttributes';
import { applyFilters } from '@wordpress/hooks';
// Parameters for these methods:
// currentValue - The variable/attribute that is altered by settings.
// key - The key of the default attribute for that setting.
// blockName - The name of the block.
const getAttributeFallback = ( currentValue, key, blockName ) => {
const allBlocksAttributes = applyFilters( 'uagb.blocksAttributes', blocksAttributes );
return currentValue ? currentValue : allBlocksAttributes[ blockName ][ key ].default;
}
export const getFallbackNumber = ( currentValue, key, blockName ) => {
const allBlocksAttributes = applyFilters( 'uagb.blocksAttributes', blocksAttributes );
return isNaN( currentValue ) ? allBlocksAttributes[ blockName ][ key ].default : currentValue;
}
export default getAttributeFallback;

View File

@@ -0,0 +1,15 @@
const getGBSEditorStyles = ( globalBlockStyles, globalBlockStyleId ) => {
if ( ! globalBlockStyles || ! globalBlockStyleId ) {
return '';
}
let editorStyles = '';
for ( const style of globalBlockStyles ) {
if ( style?.value === globalBlockStyleId ) {
editorStyles = style?.editorStyles
break;
}
}
return editorStyles;
};
export default getGBSEditorStyles;

View File

@@ -0,0 +1,29 @@
async function getImageHeightWidth( url, setAttributes, onlyHas = null ) {
// onlyHas is an object with the following properties:
// onlyHas: {
// type: 'width' || 'height',
// value: attributeValue,
// }
/* eslint-disable no-undef */
const img = new Image();
img.addEventListener( 'load', function () {
const imgTagWidth =
'height' === onlyHas?.type
? parseInt( ( onlyHas.value * this?.naturalWidth ) / this?.naturalHeight )
: this?.naturalWidth;
const imgTagHeight =
'width' === onlyHas?.type
? parseInt( ( onlyHas.value * this?.naturalHeight ) / this?.naturalWidth )
: this?.naturalHeight;
setAttributes( {
// eslint-disable-next-line no-nested-ternary
imgTagHeight: isNaN( imgTagHeight ) ? ( onlyHas !== null ? onlyHas?.value : imgTagHeight ) : imgTagHeight,
} );
setAttributes( {
// eslint-disable-next-line no-nested-ternary
imgTagWidth: isNaN( imgTagWidth ) ? ( onlyHas !== null ? onlyHas?.value : imgTagWidth ) : imgTagWidth,
} );
} );
img.src = url;
}
export default getImageHeightWidth;

View File

@@ -0,0 +1,18 @@
export default function getMatrixAlignment( attribute, position, format = '' ) {
let requiredAlignment = attribute.split( ' ' )[ position - 1 ];
switch ( format ) {
case 'flex':
switch ( requiredAlignment ) {
case 'top':
case 'left':
requiredAlignment = 'flex-start';
break;
case 'bottom':
case 'right':
requiredAlignment = 'flex-end';
break;
}
break;
}
return requiredAlignment;
}

View File

@@ -0,0 +1,4 @@
export default function getPrecisePercentage( divisions ) {
const matchedPercent = parseFloat( ( 100 / divisions ).toString().match( /^-?\d+(?:\.\d{0,2})?/ )[ 0 ] );
return `${ matchedPercent }%`;
}

View File

@@ -0,0 +1,92 @@
import { useSelect, dispatch } from '@wordpress/data';
import { store as spectraStore } from '@Store';
import { isCustomizerPage } from '@Utils/Helpers';
export const useDeviceType = () => {
const deviceType = useSelect( ( select ) => {
const getDeviceFromStore = select( 'core/editor' )?.getDeviceType() ||
select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType() || select( spectraStore )?.getDeviceType();
return getDeviceFromStore || 'Desktop'
}, [] );
return deviceType || '';
};
/**
* Sets the preview device type for the Gutenberg editor.
*
* @param {string} device - The value representing the device type.
* @param {boolean} updateInCustomizer - Whether to update the device type in the customizer preview.
*/
export const setDeviceType = ( device, updateInCustomizer = true ) => {
const setPreviewDeviceType = dispatch( 'core/editor' )?.setDeviceType ||
dispatch( 'core/edit-post' )?.__experimentalSetPreviewDeviceType ||
dispatch( spectraStore )?.setDeviceType;
// Verify setPreviewDeviceType is available and setPreviewDeviceType should be function.
if( ! setPreviewDeviceType || typeof setPreviewDeviceType !== 'function' ){
return;
}
setPreviewDeviceType( device );
// If we don't want to update the device type in the customizer preview, return.
if ( ! updateInCustomizer ) {
return;
}
// This code sets the device type in the customizer preview. It's particularly useful when not using a Full Site Editing (FSE) theme.
setCustomizerPreview( device );
};
/**
* This function is used to set previewedDevice in customizer if it is customizer page.
*
* @param {string} deviceType deviceType should be string e.g. 'desktop', 'tablet', 'mobile' may be 'Desktop', 'Tablet', 'Mobile'.
*/
export const setCustomizerPreview = ( deviceType ) => {
if ( ! isCustomizerPage() ) {
return;
}
// deviceType should be string.
if ( typeof deviceType !== 'string' ) {
return;
}
const deviceTypeLower = deviceType.toLowerCase();
// Check deviceType is valid.
if ( ! [ 'desktop', 'tablet', 'mobile' ].includes( deviceTypeLower ) ) {
return;
}
wp.customize.previewedDevice.set( deviceTypeLower );
}
/**
* This function is used to set deviceType in customizer get previewedDevice if it is customizer page and set deviceType gutenberg store.
*/
export const setDeviceOnCustomizerAction = () => {
if ( ! isCustomizerPage() ) {
return;
}
window.wp.customize.bind( 'ready', () => {
window.wp.customize.previewedDevice.bind( ( device ) => {
if ( ! device ) {
return;
}
// Check device type only mobile, tablet and desktop.
if ( ! [ 'mobile', 'tablet', 'desktop' ].includes( device ) ) {
return;
}
const deviceTypeFirstLetterUpper = device.charAt( 0 ).toUpperCase() + device.slice( 1 );
setDeviceType( deviceTypeFirstLetterUpper, false );
} );
} );
}

View File

@@ -0,0 +1,19 @@
const getUAGEditorStateLocalStorage = ( key = false ) => {
if ( ! window.localStorage ) {
return null;
}
if ( ! key ) {
return localStorage;
}
const uagLastOpenedSettingState = localStorage.getItem( key );
if ( uagLastOpenedSettingState ) {
return JSON.parse( uagLastOpenedSettingState );
}
return null;
};
export default getUAGEditorStateLocalStorage;

View File

@@ -0,0 +1,77 @@
/**
* Creates a CSS grid layout string from a given grid object.
*
* @param {Array} gridObject - An array of objects, each representing a grid column or row.
* Each object can have a 'default' property set to 'custom' or 'minmax', and corresponding properties:
* - 'custom': An object with 'value' and 'unit' properties.
* - 'minmax': An object with 'min' and 'max' properties, each having 'value' and 'unit'.
*
* @return {string} A CSS grid layout string. For example: "1fr 1fr 1fr 1fr".
*/
export const gridCssCreator = ( gridObject ) => {
let gridCss = '';
gridObject.forEach( ( grid ) => {
// Add space if the column is not the last column.
if( gridCss ){
gridCss = gridCss + ' ';
}
let createCss = '';
if( 'custom' === grid?.default && ( grid?.custom?.value || 0 === grid?.custom?.value ) ){
createCss = `minmax(1px, ${ grid.custom.value }${ grid.custom.unit })`;
} else if( 'minmax' === grid.default ){
createCss = `minmax(${ grid.min.value }${ grid.min.unit }, ${ grid.max.value }${ grid.max.unit })`;
}else if( 'auto' === grid.default ){
createCss = 'minmax(1px, auto)';
}
gridCss += createCss + ' ';
} );
// Grid css will as a result look like: "1fr 1fr 1fr 1fr"
return gridCss;
}
/**
* Creates a CSS object for a grid layout from given attributes and device type.
*
* @param {Object} attr - This object contains
* @param {string} [deviceType='Desktop'] - Device type for the layout. Ex: Desktop, Tablet, Mobile.
*
* `attr` properties include `gridColumn<deviceType>`, `gridRow<deviceType>`, `gridAlignItems<deviceType>`,
* `gridJustifyItems<deviceType>`, `gridAlignContent<deviceType>`, `gridJustifyContent<deviceType>`.
*
* @return {Object} CSS object for styling a grid layout.
*/
const gridCssObject = ( attr, deviceType = 'Desktop' ) => {
const grid_css = {};
// Check attribute is not empty and should be array.
if( attr[ 'gridColumn' + deviceType ]?.length ){
grid_css[ 'grid-template-columns' ] = gridCssCreator( attr[ 'gridColumn' + deviceType ] );
}
if( attr[ 'gridRow' + deviceType ]?.length ){
grid_css[ 'grid-template-rows' ] = gridCssCreator( attr[ 'gridRow' + deviceType ] );
}
if( attr[ 'gridAlignItems' + deviceType ] ){
grid_css[ 'align-items' ] = attr[ 'gridAlignItems' + deviceType ];
}
if( attr[ 'gridJustifyItems' + deviceType ] ){
grid_css[ 'justify-items' ] = attr[ 'gridJustifyItems' + deviceType ];
}
if( attr[ 'gridAlignContent' + deviceType ] ){
grid_css[ 'align-content' ] = attr[ 'gridAlignContent' + deviceType ];
}
if( attr[ 'gridJustifyContent' + deviceType ] ){
grid_css[ 'justify-content' ] = attr[ 'gridJustifyContent' + deviceType ];
}
return grid_css;
}
export default gridCssObject;

View File

@@ -0,0 +1,44 @@
/**
* Get HEX color and return RGBA. Default return RGB color.
*
* @param {string} color - The color string.
* @return {boolean} opacity The inline CSS class.
*/
function hexToRgba( color, opacity ) {
if ( ! color ) {
return '';
}
if ( 'undefined' === typeof opacity || '' === opacity ) {
opacity = 100;
}
color = color.replace( '#', '' );
opacity = typeof opacity !== 'undefined' ? opacity / 100 : 1;
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
color = color.replace( shorthandRegex, function ( m, r, g, b ) {
return r + r + g + g + b + b;
} );
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( color );
const parsed_color = result
? {
r: parseInt( result[ 1 ], 16 ),
g: parseInt( result[ 2 ], 16 ),
b: parseInt( result[ 3 ], 16 ),
}
: null;
if ( parsed_color ) {
return 'rgba(' + parsed_color.r + ',' + parsed_color.g + ',' + parsed_color.b + ',' + opacity + ')';
}
return '';
}
export default hexToRgba;

View File

@@ -0,0 +1,15 @@
const isInvalid = ( block ) => {
const { name, isValid, validationIssues } = block;
if ( ! name || ! name.match( /^uagb\// ) ) {
return false;
}
if ( isValid || ! validationIssues.length ) {
return false;
}
return true;
};
export default isInvalid;

View File

@@ -0,0 +1,23 @@
const maybeGetColorForVariable = ( color ) => {
// This external condition handles the following color format:
// `var(--paletteColor7)`
if ( color && color.includes( 'var' ) ) {
const style = window.getComputedStyle( document.body );
// Slice off `var(` and the slice off the `)` bracket at the end.
color = color.slice( 4 ).slice( 0, -1 );
// This nested condition handles the following color format:
// `var(--paletteColor7, #FBFBFB)`
if ( color.includes( ',' ) ) {
color = color.split( ',' ).pop().trim();
return color;
}
color = style.getPropertyValue( color ).trim();
}
return color;
};
export default maybeGetColorForVariable;

View File

@@ -0,0 +1,11 @@
function parseSVG( svg ) {
svg = svg.replace( 'far ', '' );
svg = svg.replace( 'fas ', '' );
svg = svg.replace( 'fab ', '' );
svg = svg.replace( 'fa-', '' );
svg = svg.replace( 'fa ', '' );
return svg;
}
export default parseSVG;

View File

@@ -0,0 +1,15 @@
const PreviewImage = ( { image, isChildren = false } ) => {
if ( ! image ) {
console.error( __( 'Please add preview image.', 'ultimate-addons-for-gutenberg' ) ); // eslint-disable-line
}
let imgUrl = uagb_blocks_info.uagb_url;
imgUrl += '/assets/images/block-previews/';
if ( isChildren ) {
imgUrl += 'children/';
}
imgUrl += image + '.svg';
return <img width="100%" src={ imgUrl } alt="" />;
};
export default PreviewImage;

View File

@@ -0,0 +1,366 @@
function renderCustomIcon( svg ) {
let customSVG = '';
switch ( svg ) {
// Align
case 'align-center':
customSVG = (
<svg id="icon-format_align_center" viewBox="0 0 24 24">
<path d="M3 3h18v2.016h-18v-2.016zM6.984 6.984h10.031v2.016h-10.031v-2.016zM3 12.984v-1.969h18v1.969h-18zM3 21v-2.016h18v2.016h-18zM6.984 15h10.031v2.016h-10.031v-2.016z"></path>
</svg>
);
break;
case 'align-left':
customSVG = (
<svg id="icon-format_align_left" viewBox="0 0 24 24">
<path d="M3 3h18v2.016h-18v-2.016zM3 21v-2.016h18v2.016h-18zM3 12.984v-1.969h18v1.969h-18zM15 6.984v2.016h-12v-2.016h12zM15 15v2.016h-12v-2.016h12z"></path>
</svg>
);
break;
case 'align-right':
customSVG = (
<svg id="icon-format_align_right" viewBox="0 0 24 24">
<path d="M3 3h18v2.016h-18v-2.016zM9 9v-2.016h12v2.016h-12zM3 12.984v-1.969h18v1.969h-18zM9 17.016v-2.016h12v2.016h-12zM3 21v-2.016h18v2.016h-18z"></path>
</svg>
);
break;
// Flex Row
case 'flex-row-start':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 0C1.55228 0 2 0.447715 2 1V30.5C2 31.0523 1.55228 31.5 1 31.5C0.447715 31.5 0 31.0523 0 30.5V1C0 0.447715 0.447715 0 1 0Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31 0C31.5523 0 32 0.447715 32 1V30.5C32 31.0523 31.5523 31.5 31 31.5C30.4477 31.5 30 31.0523 30 30.5V1C30 0.447715 30.4477 0 31 0Z"
/>
<path d="M5 6L9 6C9.53027 6.00053 10.0387 6.21141 10.4136 6.58637C10.7886 6.96133 10.9995 7.46973 11 8L11 23C10.9995 23.5303 10.7886 24.0387 10.4136 24.4136C10.0387 24.7886 9.53027 24.9995 9 25H5C4.46973 24.9995 3.96133 24.7886 3.58637 24.4136C3.21141 24.0387 3.00053 23.5303 3 23L3 8C3.00053 7.46973 3.21141 6.96133 3.58637 6.58637C3.96133 6.21141 4.46973 6.00053 5 6Z" />
<path d="M14 6L18 6C18.5303 6.00053 19.0387 6.21141 19.4136 6.58637C19.7886 6.96133 19.9995 7.46973 20 8L20 23C19.9995 23.5303 19.7886 24.0387 19.4136 24.4136C19.0387 24.7886 18.5303 24.9995 18 25H14C13.4697 24.9995 12.9613 24.7886 12.5864 24.4136C12.2114 24.0387 12.0005 23.5303 12 23L12 8C12.0005 7.46973 12.2114 6.96133 12.5864 6.58637C12.9613 6.21141 13.4697 6.00053 14 6Z" />
</svg>
);
break;
case 'flex-row-end':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M14 6L18 6C18.5303 6.00053 19.0387 6.21141 19.4136 6.58637C19.7886 6.96133 19.9995 7.46973 20 8L20 23C19.9995 23.5303 19.7886 24.0387 19.4136 24.4136C19.0387 24.7886 18.5303 24.9995 18 25H14C13.4697 24.9995 12.9613 24.7886 12.5864 24.4136C12.2114 24.0387 12.0005 23.5303 12 23L12 8C12.0005 7.46973 12.2114 6.96133 12.5864 6.58637C12.9613 6.21141 13.4697 6.00053 14 6Z" />
<path d="M23 6L27 6C27.5303 6.00053 28.0387 6.21141 28.4136 6.58637C28.7886 6.96133 28.9995 7.46973 29 8L29 23C28.9995 23.5303 28.7886 24.0387 28.4136 24.4136C28.0387 24.7886 27.5303 24.9995 27 25H23C22.4697 24.9995 21.9613 24.7886 21.5864 24.4136C21.2114 24.0387 21.0005 23.5303 21 23L21 8C21.0005 7.46973 21.2114 6.96133 21.5864 6.58637C21.9613 6.21141 22.4697 6.00053 23 6Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 0C1.55228 0 2 0.447715 2 1V30.5C2 31.0523 1.55228 31.5 1 31.5C0.447715 31.5 0 31.0523 0 30.5V1C0 0.447715 0.447715 0 1 0Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31 0C31.5523 0 32 0.447715 32 1V30.5C32 31.0523 31.5523 31.5 31 31.5C30.4477 31.5 30 31.0523 30 30.5V1C30 0.447715 30.4477 0 31 0Z"
/>
</svg>
);
break;
case 'flex-row-center':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 0C1.55228 0 2 0.447715 2 1V30.5C2 31.0523 1.55228 31.5 1 31.5C0.447715 31.5 0 31.0523 0 30.5V1C0 0.447715 0.447715 0 1 0Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31 0C31.5523 0 32 0.447715 32 1V30.5C32 31.0523 31.5523 31.5 31 31.5C30.4477 31.5 30 31.0523 30 30.5V1C30 0.447715 30.4477 0 31 0Z"
/>
<path d="M9 6L13 6C13.5303 6.00053 14.0387 6.21141 14.4136 6.58637C14.7886 6.96133 14.9995 7.46973 15 8L15 23C14.9995 23.5303 14.7886 24.0387 14.4136 24.4136C14.0387 24.7886 13.5303 24.9995 13 25H9C8.46973 24.9995 7.96133 24.7886 7.58637 24.4136C7.21141 24.0387 7.00053 23.5303 7 23L7 8C7.00053 7.46973 7.21141 6.96133 7.58637 6.58637C7.96133 6.21141 8.46973 6.00053 9 6Z" />
<path d="M19 6L23 6C23.5303 6.00053 24.0387 6.21141 24.4136 6.58637C24.7886 6.96133 24.9995 7.46973 25 8L25 23C24.9995 23.5303 24.7886 24.0387 24.4136 24.4136C24.0387 24.7886 23.5303 24.9995 23 25H19C18.4697 24.9995 17.9613 24.7886 17.5864 24.4136C17.2114 24.0387 17.0005 23.5303 17 23L17 8C17.0005 7.46973 17.2114 6.96133 17.5864 6.58637C17.9613 6.21141 18.4697 6.00053 19 6Z" />
</svg>
);
break;
case 'flex-row-strech':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6L26.9988 6C27.5291 6.00053 28.0375 6.21141 28.4125 6.58637C28.7874 6.96133 28.9983 7.46973 28.9988 8L28.9988 23C28.9983 23.5303 28.7874 24.0387 28.4125 24.4136C28.0375 24.7886 27.5291 24.9995 26.9988 25L19 25C18.4698 24.9995 17.9614 24.7886 17.5864 24.4136C17.2114 24.0387 17.0006 23.5303 17 23L17 8C17.0006 7.46973 17.2114 6.96133 17.5864 6.58637C17.9614 6.21141 18.4698 6.00053 19 6Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 0C1.55228 0 2 0.447715 2 1V30.5C2 31.0523 1.55228 31.5 1 31.5C0.447715 31.5 0 31.0523 0 30.5V1C0 0.447715 0.447715 0 1 0Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31 0C31.5523 0 32 0.447715 32 1V30.5C32 31.0523 31.5523 31.5 31 31.5C30.4477 31.5 30 31.0523 30 30.5V1C30 0.447715 30.4477 0 31 0Z"
/>
<path d="M5.00021 6L12.999 6C13.5293 6.00053 14.0377 6.21141 14.4127 6.58637C14.7876 6.96133 14.9985 7.46973 14.999 8L14.999 23C14.9985 23.5303 14.7876 24.0387 14.4127 24.4136C14.0377 24.7886 13.5293 24.9995 12.999 25L5.00021 25C4.46993 24.9995 3.96153 24.7886 3.58658 24.4136C3.21162 24.0387 3.00073 23.5303 3.00021 23L3.00021 8C3.00074 7.46973 3.21162 6.96133 3.58658 6.58637C3.96153 6.21141 4.46994 6.00053 5.00021 6Z" />
</svg>
);
break;
case 'flex-row-space-between':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 0C1.55228 0 2 0.447715 2 1V30.5C2 31.0523 1.55228 31.5 1 31.5C0.447715 31.5 0 31.0523 0 30.5V1C0 0.447715 0.447715 0 1 0Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31 0C31.5523 0 32 0.447715 32 1V30.5C32 31.0523 31.5523 31.5 31 31.5C30.4477 31.5 30 31.0523 30 30.5V1C30 0.447715 30.4477 0 31 0Z"
/>
<path d="M5 6L9 6C9.53027 6.00053 10.0387 6.21141 10.4136 6.58637C10.7886 6.96133 10.9995 7.46973 11 8L11 23C10.9995 23.5303 10.7886 24.0387 10.4136 24.4136C10.0387 24.7886 9.53027 24.9995 9 25L5 25C4.46973 24.9995 3.96133 24.7886 3.58637 24.4136C3.21141 24.0387 3.00053 23.5303 3 23L3 8C3.00053 7.46973 3.21141 6.96133 3.58637 6.58637C3.96133 6.21141 4.46973 6.00053 5 6Z" />
<path d="M23 6L27 6C27.5303 6.00053 28.0387 6.21141 28.4136 6.58637C28.7886 6.96133 28.9995 7.46973 29 8L29 23C28.9995 23.5303 28.7886 24.0387 28.4136 24.4136C28.0387 24.7886 27.5303 24.9995 27 25L23 25C22.4697 24.9995 21.9613 24.7886 21.5864 24.4136C21.2114 24.0387 21.0005 23.5303 21 23L21 8C21.0005 7.46973 21.2114 6.96133 21.5864 6.58637C21.9613 6.21141 22.4697 6.00053 23 6Z" />
</svg>
);
break;
case 'flex-row-space-around':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 0C1.55228 0 2 0.447715 2 1V30.5C2 31.0523 1.55228 31.5 1 31.5C0.447715 31.5 0 31.0523 0 30.5V1C0 0.447715 0.447715 0 1 0Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31 0C31.5523 0 32 0.447715 32 1V30.5C32 31.0523 31.5523 31.5 31 31.5C30.4477 31.5 30 31.0523 30 30.5V1C30 0.447715 30.4477 0 31 0Z"
/>
<path d="M7 6L11 6C11.5303 6.00053 12.0387 6.21141 12.4136 6.58637C12.7886 6.96133 12.9995 7.46973 13 8L13 23C12.9995 23.5303 12.7886 24.0387 12.4136 24.4136C12.0387 24.7886 11.5303 24.9995 11 25L7 25C6.46973 24.9995 5.96133 24.7886 5.58637 24.4136C5.21141 24.0387 5.00053 23.5303 5 23L5 8C5.00053 7.46973 5.21141 6.96133 5.58637 6.58637C5.96133 6.21141 6.46973 6.00053 7 6Z" />
<path d="M21 6L25 6C25.5303 6.00053 26.0387 6.21141 26.4136 6.58637C26.7886 6.96133 26.9995 7.46973 27 8L27 23C26.9995 23.5303 26.7886 24.0387 26.4136 24.4136C26.0387 24.7886 25.5303 24.9995 25 25L21 25C20.4697 24.9995 19.9613 24.7886 19.5864 24.4136C19.2114 24.0387 19.0005 23.5303 19 23L19 8C19.0005 7.46973 19.2114 6.96133 19.5864 6.58637C19.9613 6.21141 20.4697 6.00053 21 6Z" />
</svg>
);
break;
case 'flex-row-space-evenly':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31 31.5C30.4477 31.5 30 31.0523 30 30.5L30 1C30 0.447716 30.4477 -1.35705e-07 31 -8.74228e-08C31.5523 -3.91405e-08 32 0.447716 32 1L32 30.5C32 31.0523 31.5523 31.5 31 31.5Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 31.5C0.447715 31.5 3.91405e-08 31.0523 8.74228e-08 30.5L2.66639e-06 1C2.71468e-06 0.447716 0.447718 -1.35705e-07 1 -8.74228e-08C1.55229 -3.91405e-08 2 0.447716 2 1L2 30.5C2 31.0523 1.55228 31.5 1 31.5Z"
/>
<path d="M12 25.5L8 25.5C7.46973 25.4995 6.96133 25.2886 6.58637 24.9136C6.21141 24.5387 6.00053 24.0303 6 23.5L6 8.5C6.00053 7.96973 6.21141 7.46133 6.58637 7.08637C6.96133 6.71141 7.46973 6.50053 8 6.5L12 6.5C12.5303 6.50053 13.0387 6.71141 13.4136 7.08637C13.7886 7.46133 13.9995 7.96973 14 8.5L14 23.5C13.9995 24.0303 13.7886 24.5387 13.4136 24.9136C13.0387 25.2886 12.5303 25.4995 12 25.5Z" />
<path d="M24 25.5L20 25.5C19.4697 25.4995 18.9613 25.2886 18.5864 24.9136C18.2114 24.5387 18.0005 24.0303 18 23.5L18 8.5C18.0005 7.96973 18.2114 7.46133 18.5864 7.08637C18.9613 6.71141 19.4697 6.50053 20 6.5L24 6.5C24.5303 6.50053 25.0387 6.71141 25.4136 7.08637C25.7886 7.46133 25.9995 7.96973 26 8.5L26 23.5C25.9995 24.0303 25.7886 24.5387 25.4136 24.9136C25.0387 25.2886 24.5303 25.4995 24 25.5Z" />
</svg>
);
break;
// Flex Column
case 'flex-column-start':
customSVG = (
<svg width="32" height="33" viewBox="0 0 32 33" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5 1.75C31.5 2.30228 31.0523 2.75 30.5 2.75L1 2.75C0.447716 2.75 -6.78525e-08 2.30228 -4.37114e-08 1.75C-1.95703e-08 1.19771 0.447716 0.749999 1 0.749999L30.5 0.75C31.0523 0.75 31.5 1.19772 31.5 1.75Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5 31.75C31.5 32.3023 31.0523 32.75 30.5 32.75L1 32.75C0.447716 32.75 -6.78525e-08 32.3023 -4.37114e-08 31.75C-1.95703e-08 31.1977 0.447716 30.75 1 30.75L30.5 30.75C31.0523 30.75 31.5 31.1977 31.5 31.75Z"
/>
<path d="M25.5 5.75L25.5 9.75C25.4995 10.2803 25.2886 10.7887 24.9136 11.1636C24.5387 11.5386 24.0303 11.7495 23.5 11.75L8.5 11.75C7.96973 11.7495 7.46133 11.5386 7.08637 11.1636C6.71141 10.7887 6.50053 10.2803 6.5 9.75L6.5 5.75C6.50053 5.21973 6.71141 4.71133 7.08637 4.33637C7.46133 3.96141 7.96973 3.75053 8.5 3.75L23.5 3.75C24.0303 3.75053 24.5387 3.96141 24.9136 4.33637C25.2886 4.71133 25.4995 5.21973 25.5 5.75Z" />
<path d="M25.5 14.75L25.5 18.75C25.4995 19.2803 25.2886 19.7887 24.9136 20.1636C24.5387 20.5386 24.0303 20.7495 23.5 20.75L8.5 20.75C7.96973 20.7495 7.46133 20.5386 7.08637 20.1636C6.71141 19.7887 6.50053 19.2803 6.5 18.75L6.5 14.75C6.50053 14.2197 6.71141 13.7113 7.08637 13.3364C7.46133 12.9614 7.96973 12.7505 8.5 12.75L23.5 12.75C24.0303 12.7505 24.5387 12.9614 24.9136 13.3364C25.2886 13.7113 25.4995 14.2197 25.5 14.75Z" />
</svg>
);
break;
case 'flex-column-end':
customSVG = (
<svg width="32" height="33" viewBox="0 0 32 33" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.5 2.75C31.0523 2.75 31.5 2.30228 31.5 1.75C31.5 1.19772 31.0523 0.75 30.5 0.75H1C0.447716 0.75 0 1.19771 0 1.75C0 2.30228 0.447716 2.75 1 2.75L30.5 2.75ZM30.5 32.75C31.0523 32.75 31.5 32.3023 31.5 31.75C31.5 31.1977 31.0523 30.75 30.5 30.75L1 30.75C0.447716 30.75 0 31.1977 0 31.75C0 32.3023 0.447716 32.75 1 32.75L30.5 32.75ZM25.5 14.75V18.75C25.4995 19.2803 25.2886 19.7887 24.9136 20.1636C24.5387 20.5386 24.0303 20.7495 23.5 20.75L8.5 20.75C7.96973 20.7495 7.46133 20.5386 7.08637 20.1636C6.71141 19.7887 6.50053 19.2803 6.5 18.75L6.5 14.75C6.50053 14.2197 6.71141 13.7113 7.08637 13.3364C7.46133 12.9614 7.96973 12.7505 8.5 12.75L23.5 12.75C24.0303 12.7505 24.5387 12.9614 24.9136 13.3364C25.2886 13.7113 25.4995 14.2197 25.5 14.75ZM25.5 27.75V23.75C25.4995 23.2197 25.2886 22.7113 24.9136 22.3364C24.5387 21.9614 24.0303 21.7505 23.5 21.75L8.5 21.75C7.96973 21.7505 7.46133 21.9614 7.08637 22.3364C6.71141 22.7113 6.50053 23.2197 6.5 23.75L6.5 27.75C6.50053 28.2803 6.71141 28.7887 7.08637 29.1636C7.46133 29.5386 7.96973 29.7495 8.5 29.75L23.5 29.75C24.0303 29.7495 24.5387 29.5386 24.9136 29.1636C25.2886 28.7887 25.4995 28.2803 25.5 27.75Z"
/>
</svg>
);
break;
case 'flex-column-center':
customSVG = (
<svg width="32" height="33" viewBox="0 0 32 33" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5 1.75C31.5 2.30228 31.0523 2.75 30.5 2.75L1 2.75C0.447716 2.75 -6.78525e-08 2.30228 -4.37114e-08 1.75C-1.95703e-08 1.19771 0.447716 0.749999 1 0.749999L30.5 0.75C31.0523 0.75 31.5 1.19772 31.5 1.75Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5 31.75C31.5 32.3023 31.0523 32.75 30.5 32.75L1 32.75C0.447716 32.75 -6.78525e-08 32.3023 -4.37114e-08 31.75C-1.95703e-08 31.1977 0.447716 30.75 1 30.75L30.5 30.75C31.0523 30.75 31.5 31.1977 31.5 31.75Z"
/>
<path d="M25.5 9.75L25.5 13.75C25.4995 14.2803 25.2886 14.7887 24.9136 15.1636C24.5387 15.5386 24.0303 15.7495 23.5 15.75L8.5 15.75C7.96973 15.7495 7.46133 15.5386 7.08637 15.1636C6.71141 14.7887 6.50053 14.2803 6.5 13.75L6.5 9.75C6.50053 9.21973 6.71141 8.71133 7.08637 8.33637C7.46133 7.96141 7.96973 7.75053 8.5 7.75L23.5 7.75C24.0303 7.75053 24.5387 7.96141 24.9136 8.33637C25.2886 8.71133 25.4995 9.21973 25.5 9.75Z" />
<path d="M25.5 19.75L25.5 23.75C25.4995 24.2803 25.2886 24.7887 24.9136 25.1636C24.5387 25.5386 24.0303 25.7495 23.5 25.75L8.5 25.75C7.96973 25.7495 7.46133 25.5386 7.08637 25.1636C6.71141 24.7887 6.50053 24.2803 6.5 23.75L6.5 19.75C6.50053 19.2197 6.71141 18.7113 7.08637 18.3364C7.46133 17.9614 7.96973 17.7505 8.5 17.75L23.5 17.75C24.0303 17.7505 24.5387 17.9614 24.9136 18.3364C25.2886 18.7113 25.4995 19.2197 25.5 19.75Z" />
</svg>
);
break;
case 'flex-column-strech':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.5 2C31.0523 2 31.5 1.55228 31.5 1C31.5 0.447715 31.0523 0 30.5 0H1C0.447716 0 0 0.447714 0 0.999999C0 1.55228 0.447716 2 1 2L30.5 2ZM30.5 32C31.0523 32 31.5 31.5523 31.5 31C31.5 30.4477 31.0523 30 30.5 30L1 30C0.447716 30 0 30.4477 0 31C0 31.5523 0.447716 32 1 32L30.5 32ZM25.5 5.00018V12.999C25.4995 13.5293 25.2886 14.0377 24.9136 14.4126C24.5387 14.7876 24.0303 14.9985 23.5 14.999L8.5 14.999C7.96973 14.9985 7.46133 14.7876 7.08637 14.4126C6.71141 14.0377 6.50053 13.5293 6.5 12.999L6.5 5.00017C6.50053 4.4699 6.71141 3.9615 7.08637 3.58654C7.46133 3.21159 7.96973 3.0007 8.5 3.00017L23.5 3.00018C24.0303 3.0007 24.5387 3.21159 24.9136 3.58655C25.2886 3.9615 25.4995 4.4699 25.5 5.00018ZM25.5 18.9999V26.9987C25.4995 27.529 25.2886 28.0374 24.9136 28.4124C24.5387 28.7873 24.0303 28.9982 23.5 28.9987L8.5 28.9987C7.96973 28.9982 7.46133 28.7873 7.08637 28.4124C6.71141 28.0374 6.50053 27.529 6.5 26.9987L6.5 18.9999C6.50053 18.4697 6.71141 17.9613 7.08637 17.5863C7.46133 17.2113 7.96973 17.0005 8.5 16.9999L23.5 16.9999C24.0303 17.0005 24.5387 17.2113 24.9136 17.5863C25.2886 17.9613 25.4995 18.4697 25.5 18.9999Z"
/>
</svg>
);
break;
case 'flex-column-space-between':
customSVG = (
<svg width="32" height="33" viewBox="0 0 32 33" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5 1.75C31.5 2.30228 31.0523 2.75 30.5 2.75L1 2.75C0.447716 2.75 -6.78525e-08 2.30228 -4.37114e-08 1.75C-1.95703e-08 1.19771 0.447716 0.749999 1 0.749999L30.5 0.75C31.0523 0.75 31.5 1.19772 31.5 1.75Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5 31.75C31.5 32.3023 31.0523 32.75 30.5 32.75L1 32.75C0.447716 32.75 -6.78525e-08 32.3023 -4.37114e-08 31.75C-1.95703e-08 31.1977 0.447716 30.75 1 30.75L30.5 30.75C31.0523 30.75 31.5 31.1977 31.5 31.75Z"
/>
<path d="M25.5 5.75L25.5 9.75C25.4995 10.2803 25.2886 10.7887 24.9136 11.1636C24.5387 11.5386 24.0303 11.7495 23.5 11.75L8.5 11.75C7.96973 11.7495 7.46133 11.5386 7.08637 11.1636C6.71141 10.7887 6.50053 10.2803 6.5 9.75L6.5 5.75C6.50053 5.21973 6.71141 4.71133 7.08637 4.33637C7.46133 3.96141 7.96973 3.75053 8.5 3.75L23.5 3.75C24.0303 3.75053 24.5387 3.96141 24.9136 4.33637C25.2886 4.71133 25.4995 5.21973 25.5 5.75Z" />
<path d="M25.5 23.75L25.5 27.75C25.4995 28.2803 25.2886 28.7887 24.9136 29.1636C24.5387 29.5386 24.0303 29.7495 23.5 29.75L8.5 29.75C7.96973 29.7495 7.46133 29.5386 7.08637 29.1636C6.71141 28.7887 6.50053 28.2803 6.5 27.75L6.5 23.75C6.50053 23.2197 6.71141 22.7113 7.08637 22.3364C7.46133 21.9614 7.96973 21.7505 8.5 21.75L23.5 21.75C24.0303 21.7505 24.5387 21.9614 24.9136 22.3364C25.2886 22.7113 25.4995 23.2197 25.5 23.75Z" />
</svg>
);
break;
case 'flex-column-space-around':
customSVG = (
<svg width="32" height="33" viewBox="0 0 32 33" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5 1.75C31.5 2.30228 31.0523 2.75 30.5 2.75L1 2.75C0.447716 2.75 -6.78525e-08 2.30228 -4.37114e-08 1.75C-1.95703e-08 1.19771 0.447716 0.749999 1 0.749999L30.5 0.75C31.0523 0.75 31.5 1.19772 31.5 1.75Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5 31.75C31.5 32.3023 31.0523 32.75 30.5 32.75L1 32.75C0.447716 32.75 -6.78525e-08 32.3023 -4.37114e-08 31.75C-1.95703e-08 31.1977 0.447716 30.75 1 30.75L30.5 30.75C31.0523 30.75 31.5 31.1977 31.5 31.75Z"
/>
<path d="M25.5 7.75L25.5 11.75C25.4995 12.2803 25.2886 12.7887 24.9136 13.1636C24.5387 13.5386 24.0303 13.7495 23.5 13.75L8.5 13.75C7.96973 13.7495 7.46133 13.5386 7.08637 13.1636C6.71141 12.7887 6.50053 12.2803 6.5 11.75L6.5 7.75C6.50053 7.21973 6.71141 6.71133 7.08637 6.33637C7.46133 5.96141 7.96973 5.75053 8.5 5.75L23.5 5.75C24.0303 5.75053 24.5387 5.96141 24.9136 6.33637C25.2886 6.71133 25.4995 7.21973 25.5 7.75Z" />
<path d="M25.5 21.75L25.5 25.75C25.4995 26.2803 25.2886 26.7887 24.9136 27.1636C24.5387 27.5386 24.0303 27.7495 23.5 27.75L8.5 27.75C7.96973 27.7495 7.46133 27.5386 7.08637 27.1636C6.71141 26.7887 6.50053 26.2803 6.5 25.75L6.5 21.75C6.50053 21.2197 6.71141 20.7113 7.08637 20.3364C7.46133 19.9614 7.96973 19.7505 8.5 19.75L23.5 19.75C24.0303 19.7505 24.5387 19.9614 24.9136 20.3364C25.2886 20.7113 25.4995 21.2197 25.5 21.75Z" />
</svg>
);
break;
case 'flex-column-space-evenly':
customSVG = (
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.31134e-07 31C2.03558e-07 30.4477 0.447715 30 1 30L30.5 30C31.0523 30 31.5 30.4477 31.5 31C31.5 31.5523 31.0523 32 30.5 32L1 32C0.447715 32 5.87108e-08 31.5523 1.31134e-07 31Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.31134e-07 0.999996C2.03558e-07 0.447711 0.447715 -3.75599e-06 1 -3.68356e-06L30.5 1.84895e-07C31.0523 2.57318e-07 31.5 0.447716 31.5 1C31.5 1.55229 31.0523 2 30.5 2L1 2C0.447715 2 5.87108e-08 1.55228 1.31134e-07 0.999996Z"
/>
<path d="M6 24L6 20C6.00053 19.4697 6.21141 18.9613 6.58637 18.5864C6.96133 18.2114 7.46973 18.0005 8 18L23 18C23.5303 18.0005 24.0387 18.2114 24.4136 18.5864C24.7886 18.9613 24.9995 19.4697 25 20L25 24C24.9995 24.5303 24.7886 25.0387 24.4136 25.4136C24.0387 25.7886 23.5303 25.9995 23 26L8 26C7.46973 25.9995 6.96133 25.7886 6.58637 25.4136C6.21141 25.0387 6.00053 24.5303 6 24Z" />
<path d="M6 12L6 8C6.00053 7.46973 6.21141 6.96132 6.58637 6.58637C6.96133 6.21141 7.46973 6.00053 8 6L23 6C23.5303 6.00053 24.0387 6.21141 24.4136 6.58637C24.7886 6.96133 24.9995 7.46973 25 8L25 12C24.9995 12.5303 24.7886 13.0387 24.4136 13.4136C24.0387 13.7886 23.5303 13.9995 23 14L8 14C7.46973 13.9995 6.96133 13.7886 6.58637 13.4136C6.21141 13.0387 6.00053 12.5303 6 12Z" />
</svg>
);
break;
// Flex Direction
case 'flex-direction-row':
customSVG = (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 1.01587C2 0.454822 1.55228 0 1 0C0.447715 0 0 0.454822 0 1.01587V30.9841C0 31.5452 0.447715 32 1 32C1.55228 32 2 31.5452 2 30.9841V1.01587ZM32 1.01587C32 0.454822 31.5523 0 31 0C30.4477 0 30 0.454822 30 1.01587V30.9841C30 31.5452 30.4477 32 31 32C31.5523 32 32 31.5452 32 30.9841V1.01587ZM23.0355 5.29289L26.6213 8.87864C27.0118 9.26916 27.0118 9.90233 26.6213 10.2929L23.0355 13.8786C22.645 14.2691 22.0118 14.2691 21.6213 13.8786C21.2308 13.4881 21.2308 12.8549 21.6213 12.4644L23.5 10.5857H6C5.44772 10.5857 5 10.138 5 9.58574C5 9.03346 5.44772 8.58574 6 8.58574H23.5L21.6213 6.70711C21.2308 6.31658 21.2308 5.68342 21.6213 5.29289C22.0118 4.90237 22.645 4.90237 23.0355 5.29289ZM26.6213 21.5L23.0355 17.9143C22.645 17.5238 22.0118 17.5238 21.6213 17.9143C21.2308 18.3048 21.2308 18.938 21.6213 19.3285L23.5 21.2071H6C5.44771 21.2071 5 21.6548 5 22.2071C5 22.7594 5.44771 23.2071 6 23.2071H23.5L21.6213 25.0858C21.2308 25.4763 21.2308 26.1095 21.6213 26.5C22.0118 26.8905 22.645 26.8905 23.0355 26.5L26.6213 22.9142C27.0118 22.5237 27.0118 21.8905 26.6213 21.5Z"
/>
</svg>
);
break;
case 'flex-direction-column':
customSVG = (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.9841 2C31.5452 2 32 1.55228 32 1C32 0.447715 31.5452 -1.98809e-08 30.9841 -4.44052e-08L1.01587 -1.35436e-06C0.454821 -1.37888e-06 -1.95703e-08 0.447714 -4.37114e-08 0.999999C-6.78525e-08 1.55228 0.454821 2 1.01587 2L30.9841 2ZM30.9841 32C31.5452 32 32 31.5523 32 31C32 30.4477 31.5452 30 30.9841 30L1.01587 30C0.454819 30 -1.33091e-06 30.4477 -1.35505e-06 31C-1.37919e-06 31.5523 0.454819 32 1.01587 32L30.9841 32ZM26.7071 23.0355L23.1214 26.6213C22.7308 27.0118 22.0977 27.0118 21.7071 26.6213L18.1214 23.0355C17.7309 22.645 17.7309 22.0118 18.1214 21.6213C18.5119 21.2308 19.1451 21.2308 19.5356 21.6213L21.4143 23.5L21.4143 6C21.4143 5.44771 21.862 5 22.4143 5C22.9665 5 23.4143 5.44771 23.4143 6L23.4143 23.5L25.2929 21.6213C25.6834 21.2308 26.3166 21.2308 26.7071 21.6213C27.0976 22.0118 27.0976 22.645 26.7071 23.0355ZM10.5 26.6213L14.0857 23.0355C14.4762 22.645 14.4762 22.0118 14.0857 21.6213C13.6952 21.2308 13.062 21.2308 12.6715 21.6213L10.7929 23.5L10.7929 6C10.7929 5.44771 10.3452 5 9.79287 5C9.24059 5 8.79287 5.44771 8.79287 6L8.79287 23.5L6.91422 21.6213C6.52369 21.2308 5.89053 21.2308 5.5 21.6213C5.10948 22.0118 5.10948 22.645 5.5 23.0355L9.08576 26.6213C9.47629 27.0118 10.1095 27.0118 10.5 26.6213Z"
/>
</svg>
);
break;
case 'flex-direction-row-reverse':
customSVG = (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30 30.9841C30 31.5452 30.4477 32 31 32C31.5523 32 32 31.5452 32 30.9841L32 1.01587C32 0.454821 31.5523 -3.91405e-08 31 -8.74228e-08C30.4477 -1.35705e-07 30 0.45482 30 1.01587L30 30.9841ZM8.88104e-08 30.9841C3.97618e-08 31.5452 0.447716 32 1 32C1.55228 32 2 31.5452 2 30.9841L2 1.01587C2 0.454818 1.55229 -2.66182e-06 1 -2.71011e-06C0.447719 -2.75839e-06 2.75777e-06 0.454818 2.70872e-06 1.01587L8.88104e-08 30.9841ZM8.96449 26.7071L5.37868 23.1214C4.98816 22.7308 4.98816 22.0977 5.37868 21.7071L8.96449 18.1214C9.35501 17.7309 9.98818 17.7309 10.3787 18.1214C10.7692 18.5119 10.7692 19.1451 10.3787 19.5356L8.5 21.4143L26 21.4143C26.5523 21.4143 27 21.862 27 22.4143C27 22.9665 26.5523 23.4143 26 23.4143L8.5 23.4143L10.3787 25.2929C10.7692 25.6834 10.7692 26.3166 10.3787 26.7071C9.98818 27.0976 9.35501 27.0976 8.96449 26.7071ZM5.37868 10.5L8.96449 14.0857C9.35502 14.4762 9.98818 14.4762 10.3787 14.0857C10.7692 13.6952 10.7692 13.062 10.3787 12.6715L8.5 10.7929L26 10.7929C26.5523 10.7929 27 10.3452 27 9.79287C27 9.24059 26.5523 8.79287 26 8.79287L8.5 8.79287L10.3787 6.91422C10.7692 6.52369 10.7692 5.89053 10.3787 5.5C9.98818 5.10948 9.35502 5.10948 8.96449 5.5L5.37868 9.08576C4.98816 9.47629 4.98816 10.1095 5.37868 10.5Z"
/>
</svg>
);
break;
case 'flex-direction-column-reverse':
customSVG = (
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.01587 30C0.454822 30 -6.78525e-08 30.4477 -4.37113e-08 31C-1.95702e-08 31.5523 0.454822 32 1.01587 32L30.9841 32C31.5452 32 32 31.5523 32 31C32 30.4477 31.5452 30 30.9841 30L1.01587 30ZM1.01587 -4.44052e-08C0.45482 -1.98809e-08 -1.37919e-06 0.447716 -1.35505e-06 1C-1.33091e-06 1.55228 0.454821 2 1.01587 2L30.9841 2C31.5452 2 32 1.55228 32 0.999999C32 0.447714 31.5452 -1.37888e-06 30.9841 -1.35436e-06L1.01587 -4.44052e-08ZM5.29289 8.96449L8.87863 5.37868C9.26916 4.98815 9.90233 4.98815 10.2928 5.37868L13.8786 8.96449C14.2691 9.35501 14.2691 9.98818 13.8786 10.3787C13.4881 10.7692 12.8549 10.7692 12.4644 10.3787L10.5857 8.5L10.5857 26C10.5857 26.5523 10.138 27 9.58574 27C9.03346 27 8.58574 26.5523 8.58574 26L8.58574 8.5L6.70711 10.3787C6.31658 10.7692 5.68342 10.7692 5.29289 10.3787C4.90237 9.98818 4.90237 9.35501 5.29289 8.96449ZM21.5 5.37868L17.9143 8.96449C17.5238 9.35501 17.5238 9.98818 17.9143 10.3787C18.3048 10.7692 18.938 10.7692 19.3285 10.3787L21.2071 8.5L21.2071 26C21.2071 26.5523 21.6548 27 22.2071 27C22.7594 27 23.2071 26.5523 23.2071 26L23.2071 8.5L25.0858 10.3787C25.4763 10.7692 26.1095 10.7692 26.5 10.3787C26.8905 9.98818 26.8905 9.35501 26.5 8.96449L22.9142 5.37868C22.5237 4.98815 21.8905 4.98815 21.5 5.37868Z"
/>
</svg>
);
break;
// Flex Wrap
case 'flex-wrap':
customSVG = (
<svg viewBox="0 0 33 32" xmlns="http://www.w3.org/2000/svg">
<path d="M1.33984 0C1.89213 0 2.33984 0.447715 2.33984 1V30.5C2.33984 31.0523 1.89213 31.5 1.33984 31.5C0.787559 31.5 0.339844 31.0523 0.339844 30.5V1C0.339844 0.447715 0.787559 0 1.33984 0Z" />
<path d="M31.3398 0C31.8921 0 32.3398 0.447715 32.3398 1V30.5C32.3398 31.0523 31.8921 31.5 31.3398 31.5C30.7876 31.5 30.3398 31.0523 30.3398 30.5V1C30.3398 0.447715 30.7876 0 31.3398 0Z" />
<path d="M27.3398 5C27.8921 5 28.3398 5.44772 28.3398 6V22C28.3398 22.0022 28.3398 22.0043 28.3398 22.0065C28.3363 22.5558 27.89 23 27.3398 23L10.8398 23L12.7185 24.8786C13.1091 25.2692 13.1091 25.9023 12.7185 26.2929C12.328 26.6834 11.6949 26.6834 11.3043 26.2929L7.71852 22.7071C7.328 22.3166 7.328 21.6834 7.71852 21.2929L11.3043 17.7071C11.6949 17.3166 12.328 17.3166 12.7185 17.7071C13.1091 18.0977 13.1091 18.7308 12.7185 19.1213L10.8398 21L26.3398 21V7L5.33984 7C4.78756 7 4.33984 6.55228 4.33984 6C4.33984 5.44771 4.78756 5 5.33984 5H27.3398Z" />
</svg>
);
break;
case 'flex-no-wrap':
customSVG = (
<svg viewBox="0 0 33 32" xmlns="http://www.w3.org/2000/svg">
<path d="M1.33984 0C1.89213 0 2.33984 0.447715 2.33984 1V30.5C2.33984 31.0523 1.89213 31.5 1.33984 31.5C0.787559 31.5 0.339844 31.0523 0.339844 30.5V1C0.339844 0.447715 0.787559 0 1.33984 0Z" />
<path d="M31.3398 0C31.8921 0 32.3398 0.447715 32.3398 1V30.5C32.3398 31.0523 31.8921 31.5 31.3398 31.5C30.7876 31.5 30.3398 31.0523 30.3398 30.5V1C30.3398 0.447715 30.7876 0 31.3398 0Z" />
<path d="M24.3754 11.2929L27.9612 14.8786C28.3517 15.2692 28.3517 15.9023 27.9612 16.2929L24.3754 19.8786C23.9848 20.2691 23.3517 20.2691 22.9611 19.8786C22.5706 19.4881 22.5706 18.8549 22.9611 18.4644L24.8398 16.5857L5.33984 16.5857C4.78756 16.5857 4.33984 16.138 4.33984 15.5857C4.33984 15.0334 4.78756 14.5857 5.33984 14.5857L24.8398 14.5857L22.9611 12.7071C22.5706 12.3166 22.5706 11.6834 22.9611 11.2929C23.3517 10.9024 23.9848 10.9024 24.3754 11.2929Z" />
</svg>
);
break;
case 'flex-wrap-reverse':
customSVG = (
<svg viewBox="0 0 33 32" xmlns="http://www.w3.org/2000/svg">
<path d="M1.33984 32C1.89213 32 2.33984 31.5452 2.33984 30.9841V1.01587C2.33984 0.454821 1.89213 0 1.33984 0C0.787559 0 0.339844 0.454821 0.339844 1.01587V30.9841C0.339844 31.5452 0.787559 32 1.33984 32Z" />
<path d="M31.3398 32C31.8921 32 32.3398 31.5452 32.3398 30.9841V1.01587C32.3398 0.454821 31.8921 0 31.3398 0C30.7876 0 30.3398 0.454821 30.3398 1.01587V30.9841C30.3398 31.5452 30.7876 32 31.3398 32Z" />
<path d="M27.3398 26.5C27.8921 26.5 28.3398 26.0523 28.3398 25.5V9.5C28.3398 9.49784 28.3398 9.49569 28.3398 9.49353C28.3363 8.94422 27.89 8.5 27.3398 8.5L10.8398 8.5L12.7185 6.62136C13.1091 6.23084 13.1091 5.59767 12.7185 5.20715C12.328 4.81663 11.6949 4.81663 11.3043 5.20715L7.71852 8.79289C7.328 9.18342 7.328 9.81658 7.71852 10.2071L11.3043 13.7929C11.6949 14.1834 12.328 14.1834 12.7185 13.7929C13.1091 13.4023 13.1091 12.7692 12.7185 12.3787L10.8398 10.5L26.3398 10.5V24.5H5.33984C4.78756 24.5 4.33984 24.9477 4.33984 25.5C4.33984 26.0523 4.78756 26.5 5.33984 26.5H27.3398Z" />
</svg>
);
break;
case 'start-order':
customSVG = (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3V21M21 12H7M7 12L14 19M7 12L14 5" stroke="#1E1E1E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
break;
case 'end-order':
customSVG = (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 21V3M3 12H17M17 12L10 5M17 12L10 19" stroke="#1E1E1E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
break;
case 'custom-order':
customSVG = (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5L12 5.01M12 12L12 12.01M12 19L12 19.01M12 6C11.4477 6 11 5.55228 11 5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5C13 5.55228 12.5523 6 12 6ZM12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13ZM12 20C11.4477 20 11 19.5523 11 19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19C13 19.5523 12.5523 20 12 20Z" stroke="#111827" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
break;
}
return customSVG;
}
export default renderCustomIcon;

View File

@@ -0,0 +1,15 @@
import GlobalBlockStyles from '@Components/global-block-link';
const renderGBSSettings = ( styling, setAttributes, attributes ) => {
if ( ! uagb_blocks_info?.spectra_pro_status || 'enabled' !== uagb_blocks_info?.uag_enable_gbs_extension ) {
return null;
}
return (
<GlobalBlockStyles
{ ...{ setAttributes, styling, attributes } }
/>
)
};
export default renderGBSSettings;

View File

@@ -0,0 +1,63 @@
/**
* Set inline CSS class.
*
* @param {Object} props - The block object.
* @return {Array} The inline CSS class.
*/
import parseSVG from './parseIcon';
function renderSVG( svg, setAttributes = false, extraProps = {} ) {
svg = parseSVG( svg );
let fontAwesome;
// Load Polyfiller Array if needed.
if ( 0 !== uagb_blocks_info.font_awesome_5_polyfill.length ) {
fontAwesome = uagb_blocks_info.uagb_svg_icons[ svg ];
if ( ! fontAwesome ) {
fontAwesome = uagb_blocks_info.uagb_svg_icons[ uagb_blocks_info.font_awesome_5_polyfill?.[ svg ] ];
}
}
if ( ! fontAwesome ) {
return null;
}
const fontAwesomeSvg = fontAwesome.svg?.brands ? fontAwesome.svg.brands : fontAwesome.svg.solid;
const viewBox = `0 0 ${fontAwesomeSvg.width} ${fontAwesomeSvg.height}`;
const path = fontAwesomeSvg.path;
let align = null;
switch ( svg ) {
case 'align-center':
align = { fillRule:'evenodd', clipRule:'evenodd', d : 'M4 2H14V0H4V2ZM0 7H18V5H0V7ZM4 12H14V10H4V12Z' };
break;
case 'align-left':
align = { fillRule:'evenodd', clipRule:'evenodd', d : 'M10 2H0V0H10V2ZM18 7H0V5H18V7ZM10 12H0V10H10V12Z' };
break;
case 'align-right':
align = { fillRule:'evenodd', clipRule:'evenodd', d : 'M8 2H18V0H8V2ZM0 7H18V5H0V7ZM8 12H18V10H8V12Z' };
break;
case 'align-justify':
align = { d : 'M0 0H18V2H0V0ZM0 5.00001H18V7.00001H0V5.00001ZM0 10H18V12H0V10Z' };
break;
}
if ( align ) {
return <svg width="18" height="12" viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">
<path { ...align } />
</svg>
}
return ! setAttributes || 'not_set' === setAttributes ? (
<svg xmlns="https://www.w3.org/2000/svg" viewBox={ viewBox } {...extraProps}>
<path d={ path }></path>
</svg>
) : (
<svg width="20" height="20" xmlns="https://www.w3.org/2000/svg" viewBox={ viewBox } {...extraProps}>
<path d={ path }></path>
</svg>
);
}
export default renderSVG;

View File

@@ -0,0 +1,92 @@
const responsiveConditionPreview = ( props ) => {
// Desktop.
const element = document.getElementById( 'block-' + props.clientId );
const desktopStyle = document.getElementById( props.clientId + '-desktop-hide-block' );
if ( props.attributes.UAGHideDesktop ) {
if ( null !== element && undefined !== element ) {
if ( null === desktopStyle || undefined === desktopStyle ) {
const $style = document.createElement( 'style' );
$style.setAttribute( 'id', props.clientId + '-desktop-hide-block' );
$style.innerHTML =
'.uagb-block-' +
props.clientId.substr( 0, 8 ) +
'.uagb-editor-preview-mode-desktop{ background:repeating-linear-gradient(125deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 2px, transparent 9px); border: 1px solid rgba(0, 0, 0, 0.15); } ';
$style.innerHTML +=
'.uagb-block-' +
props.clientId.substr( 0, 8 ) +
'.uagb-editor-preview-mode-desktop:before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); z-index: 9997; } ';
document.head.appendChild( $style );
}
}
} else if ( null !== desktopStyle && undefined !== desktopStyle ) {
desktopStyle.remove();
}
const tabletPreview = document.getElementsByClassName( 'is-tablet-preview' );
const mobilePreview = document.getElementsByClassName( 'is-mobile-preview' );
if ( 0 !== tabletPreview.length || 0 !== mobilePreview.length ) {
const preview = tabletPreview[ 0 ] || mobilePreview[ 0 ];
let iframe = false;
if ( preview ) {
iframe = preview.getElementsByTagName( 'iframe' )[ 0 ];
}
const iframeDocument = iframe?.contentWindow.document || iframe?.contentDocument;
if ( ! iframe || ! iframeDocument ) {
return;
}
const iframeTabletElement = iframeDocument.getElementById( props.clientId + '-tablet-hide-block' );
if ( props.attributes.UAGHideTab ) {
if ( null === iframeTabletElement || undefined === iframeTabletElement ) {
const $style = document.createElement( 'style' );
$style.setAttribute( 'id', props.clientId + '-tablet-hide-block' );
$style.innerHTML =
'.uagb-block-' +
props.clientId.substr( 0, 8 ) +
'.uagb-editor-preview-mode-tablet{ background:repeating-linear-gradient(125deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 2px, transparent 9px); border: 1px solid rgba(0, 0, 0, 0.15); } ';
$style.innerHTML +=
'.uagb-block-' +
props.clientId.substr( 0, 8 ) +
'.uagb-editor-preview-mode-tablet:before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); z-index: 9997; } ';
setTimeout( () => {
iframeDocument.head.appendChild( $style );
}, 500 );
}
} else if ( null !== iframeTabletElement && undefined !== iframeTabletElement ) {
iframeTabletElement.remove();
}
const iframeMobileElement = iframeDocument.getElementById( props.clientId + '-mobile-hide-block' );
if ( props.attributes.UAGHideMob ) {
if ( null === iframeMobileElement || undefined === iframeMobileElement ) {
const $style = document.createElement( 'style' );
$style.setAttribute( 'id', props.clientId + '-mobile-hide-block' );
$style.innerHTML =
'.uagb-block-' +
props.clientId.substr( 0, 8 ) +
'.uagb-editor-preview-mode-mobile{ background:repeating-linear-gradient(125deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 2px, transparent 9px); border: 1px solid rgba(0, 0, 0, 0.15); } ';
$style.innerHTML +=
'.uagb-block-' +
props.clientId.substr( 0, 8 ) +
'.uagb-editor-preview-mode-mobile:before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); z-index: 9997; } ';
setTimeout( () => {
iframeDocument.head.appendChild( $style );
}, 500 );
}
} else if ( null !== iframeMobileElement && undefined !== iframeMobileElement ) {
iframeMobileElement.remove();
}
}
};
export default responsiveConditionPreview;

View File

@@ -0,0 +1,43 @@
import { select } from '@wordpress/data';
const scrollBlockToView = () => {
// Scroll the view to the selected block after device type change in editor.
const { getSelectedBlock } = select( 'core/block-editor' );
const selectedBlockID = getSelectedBlock()?.clientId ? `block-${ getSelectedBlock()?.clientId }` : false;
if ( ! selectedBlockID ) {
return;
}
setTimeout( () => {
const currentDocument = getCurrentDocument();
const selectedBlockElementToScroll = currentDocument.getElementById( selectedBlockID );
if ( selectedBlockElementToScroll ) {
selectedBlockElementToScroll.scrollIntoView( { behavior: 'smooth', block: 'center', inline: 'center' } );
}
}, 500 );
};
const getCurrentDocument = () => {
const tabletPreview = document.getElementsByClassName( 'is-tablet-preview' );
const mobilePreview = document.getElementsByClassName( 'is-mobile-preview' );
if ( 0 !== tabletPreview.length || 0 !== mobilePreview.length ) {
const preview = tabletPreview[ 0 ] || mobilePreview[ 0 ];
let iframe = false;
if ( preview ) {
iframe = preview.getElementsByTagName( 'iframe' )[ 0 ];
}
const iframeDocument = iframe?.contentWindow.document || iframe?.contentDocument;
if ( iframeDocument ) {
return iframeDocument;
}
}
return document;
};
export default scrollBlockToView;

View File

@@ -0,0 +1,24 @@
import { setCustomizerPreview } from '@Utils/customizer-preview-device';
import { dispatch } from '@wordpress/data';
/**
* Sets the preview device type for the Gutenberg editor.
*
* @param {string} device - The value representing the device type.
*/
const setDeviceType = ( device ) => {
const setPreviewDeviceType = dispatch( 'core/edit-site' )?.__experimentalSetPreviewDeviceType || dispatch( 'core/edit-post' )?.__experimentalSetPreviewDeviceType;
// Verify setPreviewDeviceType is available and setPreviewDeviceType should be function.
if( ! setPreviewDeviceType || typeof setPreviewDeviceType !== 'function' ){
return;
}
setPreviewDeviceType( device );
// This code sets the device type in the customizer preview. It's particularly useful when not using a Full Site Editing (FSE) theme.
setCustomizerPreview( device );
};
// Export the function.
export default setDeviceType;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,31 @@
import { useDeviceType } from '@Controls/getPreviewType';
export const limitMax = ( unitVal, props, isResponsiveMinMax ) => {
let max = 0;
if ( isResponsiveMinMax ) {
const deviceType = useDeviceType(); // eslint-disable-line react-hooks/rules-of-hooks
const responsiveUnit = unitVal ? unitVal : props.data[ deviceType.toLowerCase() ].value;
max =
responsiveUnit && props.data[ deviceType.toLowerCase() ]?.max
? props.data[ deviceType.toLowerCase() ].max
: props.max;
} else {
max = unitVal && props.limitMax ? props.limitMax[ unitVal ] : props.max;
}
return max;
};
export const limitMin = ( unitVal, props, isResponsiveMinMax ) => {
let min = 0;
if ( isResponsiveMinMax ) {
const deviceType = useDeviceType(); // eslint-disable-line react-hooks/rules-of-hooks
const responsiveUnit = unitVal ? unitVal : props.data[ deviceType.toLowerCase() ].value;
min =
responsiveUnit && props.data[ deviceType.toLowerCase() ]?.min
? props.data[ deviceType.toLowerCase() ].min
: props.min;
} else {
min = unitVal && props.limitMin ? props.limitMin[ unitVal ] : props.min;
}
return min;
};

View File

@@ -0,0 +1,247 @@
/**
* Get Image Sizes and return an array of Size.
*
* @param {Object} sizes - The sizes object.
* @return {Object} sizeArr - The sizeArr object.
*/
export function getImageSize( sizes ) {
const sizeArr = [];
for ( const size in sizes ) {
if ( sizes.hasOwnProperty( size ) ) {
const p = { value: size, label: size };
sizeArr.push( p );
}
}
return sizeArr;
}
export function getIdFromString( label ) {
return label
? label
.toLowerCase()
.replace( /[^a-zA-Z ]/g, '' )
.replace( /\s+/g, '-' )
: '';
}
export function getPanelIdFromRef( ref ) {
if ( ref.current ) {
if ( ref.current?.parentElement?.dataset?.panelId ){
return ref.current.parentElement.dataset.panelId;
}
const parentElement = ref.current.parentElement.closest( '.components-panel__body' );
if ( parentElement && parentElement.querySelector( '.components-panel__body-title' ) ) {
return getIdFromString( parentElement.querySelector( '.components-panel__body-title' ).textContent );
}
}
return null;
}
export function getNumber( input ) {
if ( input.includes( '#' ) ) {
// Handeling special case for padding controls
return '';
}
const regex = /\d+(\.\d+)?/;
const match = input.match( regex );
if ( match ) {
const numberString = match[0];
const isFloat = numberString.includes( '.' );
return isFloat ? parseFloat( numberString ) : parseInt( numberString, 10 );
}
return parseInt( '' );
}
export function getUnit( input ) {
if ( typeof input !== 'string' ) {
return 'px';
}
const regex = /(px|em|rem|%)/;
const match = input.match( regex );
if ( match ) {
const unit = match[0];
if ( ['px', 'em', '%'].includes( unit ) ) {
return unit;
} else if ( unit === 'rem' ) {
return 'em';
}
}
return 'px';
}
export function getUnitDimension( input ) {
const regex = /(px|%)$/;
const match = input.match( regex );
if ( match ) {
return match[1];
}
return 'px';
}
// Get 2 version strings, and do a comparison based on the operator parsed.
export function compareVersions( version1, version2, sign = '=' ) {
// Function to normalize the given version string.
// Split the version string at every hyphen and dot, then convert the parts to integers, then pad with zeros if necessary, and take only the first three parts.
const normalizeVersion = ( version ) =>
version.split( '-' )[0].split( '.' ).map( part => parseInt( part, 10 ) || 0 ).concat( 0, 0, 0 ).slice( 0, 3 );
// Normalize both input versions and get the resulting normalized values.
const [ v1, v2 ] = [ normalizeVersion( version1 ), normalizeVersion( version2 ) ];
// Compare the normalized versions using reduce.
const comparison = v1.reduce( ( acc, part, i ) => acc || ( part - ( v2[ i ] || 0 ) ), 0 );
// Check the comparison result based on the provided operator
switch ( sign ) {
case '<':
// Return true if v1 is less than v2.
return comparison < 0;
case '<=':
// Return true if v1 is less than or equal to v2.
return comparison <= 0;
case '>':
// Return true if v1 is greater than v2.
return comparison > 0;
case '>=':
// Return true if v1 is greater than or equal to v2.
return comparison >= 0;
default:
// Default: return true if v1 equals v2.
return comparison === 0;
}
}
export function convertToPixel( lengthString ) {
const regex = /\bspacing\s*\|\s*(\d+)\b/;
const noUnitSlider = lengthString.match( regex );
if( noUnitSlider ){
return parseInt( noUnitSlider[1] );
}
const match = lengthString.match( /^(\d+(\.\d+)?)\s*(px|rem|em)$/i );
return match ? parseFloat( match[1] ) * ( match[3].toLowerCase() === 'rem' || match[3].toLowerCase() === 'em' ? 16 : 1 ) : 10;
}
export function parseHeightAttributes( value ) {
const parts = value ? value.split( '|' ) : [];
const variablePart = parts.length === 3 ? parts[2].trim() : '';
return variablePart;
}
export const uagbClassNames = ( classes ) => ( classes.filter( Boolean ).join( ' ' ) );
/**
* Check if object is empty.
*
* @param {Object} obj - The object.
* @return {boolean} - The result.
*/
export const isEmptyObject = ( obj ) => Object.keys( obj ).length === 0 && obj.constructor === Object;
/**
* This variable is used as a placeholder kind of value which is used to identify the attribute is a GBS style attribute.
*/
export const GBS_RANDOM_NUMBER = 0.001020304;
/**
* A function to check if an object is not empty.
*
* @function
*
* @param {Object} obj - The object to check.
*
* @return {boolean} Returns true if the object is not empty, otherwise returns false.
*/
export const isObjectNotEmpty = ( obj ) => {
return (
obj &&
Object.keys( obj ).length > 0 &&
Object.getPrototypeOf( obj ) === Object.prototype
);
}
export const uagbDeepClone = ( arrayOrObject ) => JSON.parse( JSON.stringify( arrayOrObject ) );
export const updateUAGDay = ( UAGDay, value ) => {
const filteredArray = UAGDay.filter( ( i ) => i !== value );
return filteredArray?.length > 0 ? filteredArray : undefined;
};
/**
* Retrieves the value at a specified path within an object.
*
* This function allows you to access nested properties of an object using a dot-separated path
* or an array of keys. If the specified path is not valid or the property does not exist,
* the function returns a default value.
*
* @param {Object} getObjectValue - The object from which to retrieve the value.
* @param {string|Array} path - The path to the desired property, specified as a dot-separated string
* or an array of keys.
* @param {*} defaultValue - The value to return if the specified path is not valid or the property
* does not exist. This value is returned when the path traversal encounters
* an undefined or null property.
* @return {*} - The value at the specified path, or the default value if the path is not valid
* or the property does not exist.
*
* @example
* const obj = { a: { b: { c: 42 } } };
*
* // Using a dot-separated string as the path
* const value = get(obj, 'a.b.c'); // Returns 42
*
* // Using an array of keys as the path
* const valueArray = get(obj, ['a', 'b', 'c']); // Returns 42
*
* // Providing a default value
* const nonExistentValue = get(obj, 'x.y.z', 'Default'); // Returns 'Default'
*/
export const uagbGetValue = ( getObjectValue, path, defaultValue ) => {
const keys = Array.isArray( path ) ? path : path.split( '.' );
let result = getObjectValue;
for ( const key of keys ) {
if ( result?.hasOwnProperty( key ) ) {
result = result[key];
} else {
return defaultValue;
}
}
return result;
};
/**
* Check if current page is customizer page.
*
* @return {boolean} - The result.
*/
export const isCustomizerPage = () => {
// We need to run this script only on customizer page.
if ( ! window.location.href.includes( '/customize.php' ) ) {
return false;
}
if ( ! window?.wp?.customize ) {
return false;
}
return true;
}
/**
*
* @param {Function} func function to be debounced.
* @param {number} delay time in milliseconds.
* @return {Function} - that will be debounced.
*/
export const debounce = ( func, delay ) => {
let timeout;
return ( ...args ) => {
clearTimeout( timeout );
timeout = setTimeout( () => {
func( ...args );
}, delay );
};
};