feat: initial ACRIB WordPress deployment
- WordPress 6.9.4 (es_ES) with Kadence theme - Homepage: Hero, La Asociación, Pilares, Beneficios, Eventos, Miembros, Hazte Miembro, Contacto - Brand identity: #13294b navy, #a12932 burgundy, #c69c48 gold - Fonts: Raleway (headings) + Source Sans 3 (body) + Lato (UI) - Plugins: Kadence Blocks, Polylang, Contact Form 7 - Custom CSS with full brand styling and responsive layout - HTTPS enforced via wp-config.php proxy detection
This commit is contained in:
Malin
@@ -0,0 +1,574 @@
|
||||
<?php
|
||||
/**
|
||||
* Abstract Class to Build Blocks.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Abstract class to register blocks, build CSS, and enqueue scripts.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Block namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $namespace = 'kadence';
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = '';
|
||||
|
||||
/**
|
||||
* Block determines if style needs to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = true;
|
||||
|
||||
/**
|
||||
* Block determines if scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Cache for a blocks attributes with defaults based on uniqueId
|
||||
* Stored as: uniqueId => attributes
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $attributes_with_defaults = [];
|
||||
|
||||
/**
|
||||
* Cache for default attributes by block name.
|
||||
* Stored as: blockName => attributes
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $default_attributes_cache = [];
|
||||
|
||||
/**
|
||||
* Allow us to enable merged defaults on blocks individually.
|
||||
* Considered setting this as a property within each block, but it's easier to see an exhaustive list here.
|
||||
* Eventually all blocks will be supported.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $supports_merged_defaults = [
|
||||
'navigation',
|
||||
'navigation-link',
|
||||
'header',
|
||||
'navigation-list',
|
||||
'singlebtn',
|
||||
'header-row',
|
||||
'off-canvas-trigger',
|
||||
'off-canvas',
|
||||
'header-column',
|
||||
'search',
|
||||
'identity',
|
||||
'table',
|
||||
'vector',
|
||||
'select',
|
||||
'email',
|
||||
'text',
|
||||
'textarea',
|
||||
'number',
|
||||
'date',
|
||||
'time',
|
||||
'radio',
|
||||
'checkbox',
|
||||
'file',
|
||||
'telephone',
|
||||
'accept',
|
||||
'captcha',
|
||||
'submit',
|
||||
];
|
||||
|
||||
/**
|
||||
* Allow us to enable merged defaults on blocks individually.
|
||||
* Considered setting this as a property within each block, but it's easier to see an exhaustive list here.
|
||||
* Eventually all blocks will be supported.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $is_cpt_block = [
|
||||
'navigation',
|
||||
'header',
|
||||
'advanced-form',
|
||||
];
|
||||
|
||||
/**
|
||||
* Class Constructor.
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'init', [ $this, 'on_init' ], 20 );
|
||||
add_filter( 'kadence_blocks_blocks_to_generate_post_css', [ $this, 'add_block_to_post_generate_css' ] );
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
if ( $this->should_register() ) {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/' . $this->block_name . '/block.json',
|
||||
[
|
||||
'render_callback' => [ $this, 'render_css' ],
|
||||
'editor_script' => 'kadence-blocks-' . $this->block_name,
|
||||
'editor_style' => 'kadence-blocks-' . $this->block_name,
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add Class name to list of blocks to render in header.
|
||||
*
|
||||
* @param array $block_class_array the blocks that are registered to be rendered.
|
||||
*/
|
||||
public function add_block_to_post_generate_css( $block_class_array ) {
|
||||
if ( $this->should_register() ) {
|
||||
if ( ! isset( $block_class_array[ $this->namespace . '/' . $this->block_name ] ) ) {
|
||||
$block_class_array[ $this->namespace . '/' . $this->block_name ] = 'Kadence_Blocks_' . str_replace( ' ', '_', ucwords( str_replace( '-', ' ', $this->block_name ) ) ) . '_Block';
|
||||
}
|
||||
}
|
||||
|
||||
return $block_class_array;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if block stylesheet should render inline.
|
||||
*
|
||||
* @param string $name the stylesheet name.
|
||||
*/
|
||||
public function should_render_inline_stylesheet( $name ) {
|
||||
if ( apply_filters( 'kadence_blocks_force_render_inline_stylesheet', false, $name ) || ( ! is_admin() && ! wp_style_is( $name, 'done' ) && ! is_feed() ) ) {
|
||||
if ( function_exists( 'wp_is_block_theme' ) ) {
|
||||
if ( ! doing_filter( 'the_content' ) && ! wp_is_block_theme() && 1 === did_action( 'wp_head' ) ) {
|
||||
wp_print_styles( $name );
|
||||
}
|
||||
} elseif ( ! doing_filter( 'the_content' ) && 1 === did_action( 'wp_head' ) ) {
|
||||
wp_print_styles( $name );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render styles in the footer.
|
||||
*
|
||||
* @param string $name the stylesheet name.
|
||||
*/
|
||||
public function render_styles_footer( $name, $css ) {
|
||||
if ( ! is_admin() && ! wp_style_is( $name, 'done' ) && ! is_feed() ) {
|
||||
wp_register_style( $name, false, [], false );
|
||||
wp_add_inline_style( $name, $css );
|
||||
wp_enqueue_style( $name );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if block should render inline.
|
||||
*
|
||||
* @param string $name the blocks name.
|
||||
* @param string $unique_id the blocks unique id.
|
||||
*/
|
||||
public function should_render_inline( $name, $unique_id ) {
|
||||
if ( ( doing_filter( 'the_content' ) && ! is_feed() ) || apply_filters( 'kadence_blocks_force_render_inline_css_in_content', false, $name, $unique_id ) || is_customize_preview() ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render Block CSS in Page Head.
|
||||
*
|
||||
* @param array $block the block data.
|
||||
*/
|
||||
public function output_head_data( $block ) {
|
||||
if ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) {
|
||||
$attributes = $block['attrs'];
|
||||
if ( in_array( $this->block_name, $this->is_cpt_block ) ) {
|
||||
$unique_id = ! empty( $attributes['id'] ) ? strval( $attributes['id'] ) . '-cpt-id' : '';
|
||||
if ( empty( $unique_id ) ) {
|
||||
$unique_id = ! empty( $attributes['uniqueID'] ) ? $attributes['uniqueID'] : '';
|
||||
}
|
||||
} else {
|
||||
$unique_id = ! empty( $attributes['uniqueID'] ) ? $attributes['uniqueID'] : '';
|
||||
}
|
||||
if ( ! empty( $unique_id ) ) {
|
||||
$unique_id = str_replace( '/', '-', $unique_id );
|
||||
if ( in_array( $this->block_name, $this->supports_merged_defaults ) ) {
|
||||
$attributes = $this->get_attributes_with_defaults( $unique_id, $attributes );
|
||||
}
|
||||
// Check and enqueue stylesheets and scripts if needed.
|
||||
$this->render_scripts( $attributes, false );
|
||||
|
||||
$css_class = Kadence_Blocks_CSS::get_instance();
|
||||
if ( ! $css_class->has_styles( 'kb-' . $this->block_name . $unique_id ) && apply_filters( 'kadence_blocks_render_head_css', true, $this->block_name, $attributes ) ) {
|
||||
// Filter attributes for easier dynamic css.
|
||||
$attributes = apply_filters( 'kadence_blocks_' . $this->block_name . '_render_block_attributes', $attributes );
|
||||
$this->build_css( $attributes, $css_class, $unique_id, $unique_id );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Render for block scripts block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param boolean $inline true or false based on when called.
|
||||
*/
|
||||
public function render_scripts( $attributes, $inline = false ) {
|
||||
if ( $this->has_style ) {
|
||||
if ( ! wp_style_is( 'kadence-blocks-' . $this->block_name, 'enqueued' ) ) {
|
||||
$this->enqueue_style( 'kadence-blocks-' . $this->block_name );
|
||||
if ( $inline ) {
|
||||
$this->should_render_inline_stylesheet( 'kadence-blocks-' . $this->block_name );
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( $this->has_script ) {
|
||||
if ( ! wp_script_is( 'kadence-blocks-' . $this->block_name, 'enqueued' ) ) {
|
||||
$this->enqueue_script( 'kadence-blocks-' . $this->block_name );
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Render Block CSS
|
||||
*
|
||||
* @param array $attributes the blocks attribtues.
|
||||
* @param string $content the blocks content.
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*/
|
||||
public function render_css( $attributes, $content, $block_instance ) {
|
||||
$this->render_scripts( $attributes, true );
|
||||
if ( in_array( $this->block_name, $this->is_cpt_block ) ) {
|
||||
$unique_id = ! empty( $attributes['id'] ) ? strval( $attributes['id'] ) . '-cpt-id' : '';
|
||||
if ( empty( $unique_id ) ) {
|
||||
$unique_id = ! empty( $attributes['uniqueID'] ) ? $attributes['uniqueID'] : '';
|
||||
}
|
||||
} else {
|
||||
$unique_id = ! empty( $attributes['uniqueID'] ) ? $attributes['uniqueID'] : '';
|
||||
}
|
||||
if ( ! empty( $unique_id ) ) {
|
||||
$unique_id = str_replace( '/', '-', $unique_id );
|
||||
$unique_style_id = apply_filters( 'kadence_blocks_build_render_unique_id', $unique_id, $this->block_name, $attributes );
|
||||
$css_class = Kadence_Blocks_CSS::get_instance();
|
||||
|
||||
if ( in_array( $this->block_name, $this->supports_merged_defaults ) ) {
|
||||
$attributes = $this->get_attributes_with_defaults( $unique_id . get_locale(), $attributes, false );
|
||||
}
|
||||
|
||||
// If filter didn't run in header (which would have enqueued the specific css id ) then filter attributes for easier dynamic css.
|
||||
$attributes = apply_filters( 'kadence_blocks_' . str_replace( '-', '_', $this->block_name ) . '_render_block_attributes', $attributes, $block_instance );
|
||||
|
||||
$content = $this->build_html( $attributes, $unique_id, $content, $block_instance );
|
||||
if ( ! $css_class->has_styles( 'kb-' . $this->block_name . $unique_style_id ) && ! is_feed() && apply_filters( 'kadence_blocks_render_inline_css', true, $this->block_name, $unique_id ) ) {
|
||||
$css = $this->build_css( $attributes, $css_class, $unique_id, $unique_style_id );
|
||||
if ( ! empty( $css ) && ! wp_is_block_theme() ) {
|
||||
$this->do_inline_styles( $content, $unique_style_id, $css );
|
||||
}
|
||||
} elseif ( ! wp_is_block_theme() && ! $css_class->has_header_styles( 'kb-' . $this->block_name . $unique_style_id ) && ! is_feed() && apply_filters( 'kadence_blocks_render_inline_css', true, $this->block_name, $unique_id ) ) {
|
||||
// Some plugins run render block without outputing the content, this makes it so css can be rebuilt.
|
||||
$css = $this->build_css( $attributes, $css_class, $unique_id, $unique_style_id );
|
||||
if ( ! empty( $css ) ) {
|
||||
$this->do_inline_styles( $content, $unique_style_id, $css );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Potentially prepend inline style to the content, unless it needs to get moved off to the footer.
|
||||
*/
|
||||
public function do_inline_styles( &$content, $unique_style_id, $css ) {
|
||||
if ( apply_filters( 'kadence_blocks_render_styles_footer', $this->block_name == 'data' || $this->block_name == 'slide' ) ) {
|
||||
$this->render_styles_footer( 'kb-' . $this->block_name . $unique_style_id, $css );
|
||||
} else {
|
||||
$content = '<style>' . $css . '</style>' . $content;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for dynamic blocks
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_style( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'dist/style-blocks-' . $this->block_name . '.css', [], KADENCE_BLOCKS_VERSION );
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers and enqueue's script.
|
||||
*
|
||||
* @param string $handle the handle for the script.
|
||||
*/
|
||||
public function enqueue_script( $handle ) {
|
||||
if ( ! wp_script_is( $handle, 'registered' ) ) {
|
||||
$this->register_scripts();
|
||||
}
|
||||
wp_enqueue_script( $handle );
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers and enqueue's styles.
|
||||
*
|
||||
* @param string $handle the handle for the script.
|
||||
*/
|
||||
public function enqueue_style( $handle ) {
|
||||
if ( ! wp_style_is( $handle, 'registered' ) ) {
|
||||
$this->register_scripts();
|
||||
}
|
||||
wp_enqueue_style( $handle );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Gets the HTML tag from the attributes.
|
||||
* If the tag provided isn't allowed, return the default value.
|
||||
*
|
||||
* @param array $attributes Array of the blocks attributes.
|
||||
* @param string $tag_key Offest on $attributes where the tag is set.
|
||||
* @param string $default Default tag to use if $tag_key attribue is undefined or invalid.
|
||||
* @param array $allowed_tags Array of allowed tags.
|
||||
* @param string $level_key If defined, we'll assume heading tags are allowed.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function get_html_tag( $attributes, $tag_key, $default, $allowed_tags = [], $level_key = '' ) {
|
||||
|
||||
if ( ! empty( $attributes[ $tag_key ] ) && in_array( $attributes[ $tag_key ], $allowed_tags ) ) {
|
||||
|
||||
if ( $attributes[ $tag_key ] === 'heading' ) {
|
||||
$level = ! empty( $attributes[ $level_key ] ) ? $attributes[ $level_key ] : 2;
|
||||
return 'h' . $level;
|
||||
}
|
||||
|
||||
return $attributes[ $tag_key ];
|
||||
}
|
||||
|
||||
return $default;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Get this blocks attributes merged with defaults from the registration.
|
||||
*
|
||||
* @param string $cache_key The cache key (usually unique id).
|
||||
* @param array $attributes The block's attributes.
|
||||
* @param string $block_name The name of the block.
|
||||
* @return array
|
||||
*/
|
||||
public function get_attributes_with_defaults( $cache_key, $attributes, $cache = true ) {
|
||||
if ( ! empty( $this->attributes_with_defaults[ $cache_key ] ) ) {
|
||||
return $this->attributes_with_defaults[ $cache_key ];
|
||||
}
|
||||
|
||||
$default_attributes = $this->get_block_default_attributes();
|
||||
$merged_attributes = $this->merge_attributes_with_defaults( $attributes, $default_attributes );
|
||||
|
||||
if ( $cache ) {
|
||||
$this->attributes_with_defaults[ $cache_key ] = $merged_attributes;
|
||||
}
|
||||
return $merged_attributes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get default attributes for a block.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
protected function get_block_default_attributes() {
|
||||
$block_name = 'kadence/' . $this->block_name;
|
||||
if ( ! isset( $this->default_attributes_cache[ $block_name ] ) ) {
|
||||
$registry = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
|
||||
$default_attributes = [];
|
||||
|
||||
if ( $registry && property_exists( $registry, 'attributes' ) && ! empty( $registry->attributes ) ) {
|
||||
foreach ( $registry->attributes as $key => $value ) {
|
||||
if ( isset( $value['default'] ) ) {
|
||||
$default_attributes[ $key ] = $value['default'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$this->default_attributes_cache[ $block_name ] = $default_attributes;
|
||||
}
|
||||
|
||||
return $this->default_attributes_cache[ $block_name ];
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge attributes with defaults.
|
||||
*
|
||||
* @param array $attributes The block's attributes.
|
||||
* @param array $default_attributes The default attributes.
|
||||
* @return array
|
||||
*/
|
||||
protected function merge_attributes_with_defaults( $attributes, $default_attributes ) {
|
||||
$merged_attributes = $default_attributes;
|
||||
|
||||
foreach ( $attributes as $key => $value ) {
|
||||
if ( isset( $merged_attributes[ $key ] ) && is_array( $merged_attributes[ $key ] ) &&
|
||||
count( $merged_attributes[ $key ] ) == 1 && isset( $merged_attributes[ $key ][0] ) &&
|
||||
is_array( $merged_attributes[ $key ][0] ) &&
|
||||
is_array( $value ) && count( $value ) == 1 && isset( $value[0] ) ) {
|
||||
// Handle attributes that are an array with a single object
|
||||
$merged_attributes[ $key ][0] = array_merge( $merged_attributes[ $key ][0], $value[0] );
|
||||
} else {
|
||||
$merged_attributes[ $key ] = $value;
|
||||
}
|
||||
}
|
||||
|
||||
return $merged_attributes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get this blocks attributes merged with defaults from the registration for post type based blocks.
|
||||
*
|
||||
* @param int $post_id Post ID.
|
||||
* @param string $cpt_name Custom post type name.
|
||||
* @param string $meta_prefix Meta prefix.
|
||||
* @return array
|
||||
*/
|
||||
public function get_attributes_with_defaults_cpt( $post_id, $cpt_name, $meta_prefix ) {
|
||||
if ( ! empty( $this->attributes_with_defaults[ $post_id ] ) ) {
|
||||
return $this->attributes_with_defaults[ $post_id ];
|
||||
}
|
||||
|
||||
$default_attributes = $this->get_cpt_default_attributes( $cpt_name, $meta_prefix );
|
||||
$post_meta = get_post_meta( $post_id );
|
||||
$attributes = [];
|
||||
if ( ! empty( $post_meta ) && is_array( $post_meta ) ) {
|
||||
foreach ( $post_meta as $meta_key => $meta_value ) {
|
||||
if ( strpos( $meta_key, $meta_prefix ) === 0 && isset( $meta_value[0] ) ) {
|
||||
$attributes[ str_replace( $meta_prefix, '', $meta_key ) ] = maybe_unserialize( $meta_value[0] );
|
||||
}
|
||||
}
|
||||
}
|
||||
$merged_attributes = $this->merge_attributes_with_defaults( $attributes, $default_attributes );
|
||||
|
||||
$this->attributes_with_defaults[ $post_id ] = $merged_attributes;
|
||||
return $merged_attributes;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get default attributes for a custom post type.
|
||||
*
|
||||
* @param string $cpt_name Custom post type name.
|
||||
* @param string $meta_prefix Meta prefix.
|
||||
* @return array
|
||||
*/
|
||||
protected function get_cpt_default_attributes( $cpt_name, $meta_prefix ) {
|
||||
$cache_key = $cpt_name . '_' . $meta_prefix;
|
||||
|
||||
if ( ! isset( $this->default_attributes_cache[ $cache_key ] ) ) {
|
||||
$meta_keys = get_registered_meta_keys( 'post', $cpt_name );
|
||||
$default_attributes = [];
|
||||
|
||||
foreach ( $meta_keys as $key => $value ) {
|
||||
if ( str_starts_with( $key, $meta_prefix ) && array_key_exists( 'default', $value ) ) {
|
||||
$attr_name = str_replace( $meta_prefix, '', $key );
|
||||
$default_attributes[ $attr_name ] = $value['default'];
|
||||
}
|
||||
}
|
||||
|
||||
$this->default_attributes_cache[ $cache_key ] = $default_attributes;
|
||||
}
|
||||
|
||||
return $this->default_attributes_cache[ $cache_key ];
|
||||
}
|
||||
|
||||
/**
|
||||
* Retuurn if this block should register itself. (can override for things like blocks in two plugins)
|
||||
*
|
||||
* @return boolean
|
||||
*/
|
||||
public function should_register() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current blocks pro version. Useful for mocking in tests that rely the on KBP_VERSION constant.
|
||||
*
|
||||
* @return string|null
|
||||
*/
|
||||
protected function get_pro_version() {
|
||||
return defined( 'KBP_VERSION' ) ? KBP_VERSION : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build escaped HTML attributes to be placed in an HTML tag.
|
||||
*
|
||||
* @param array<string, string|int|float|bool> $attributes The html attributes to render to a tag.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
protected function build_escaped_html_attributes( array $attributes ): string {
|
||||
$html = '';
|
||||
|
||||
foreach ( $attributes as $key => $value ) {
|
||||
if ( is_bool( $value ) ) {
|
||||
if ( $value ) {
|
||||
$html .= sprintf( ' %s', esc_attr( $key ) );
|
||||
}
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
$html .= sprintf( ' %s="%s"', esc_attr( $key ), esc_attr( $value ) );
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Accordion Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Accordion Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Accordion_Block extends Kadence_Blocks_Abstract_Block {
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'accordion';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-inner-wrap' );
|
||||
$css->render_gap( $attributes, 'columnGap', 'column-gap', 'columnGapUnit' );
|
||||
if ( isset( $attributes['titleStyles'][0]['marginTop'] ) ) {
|
||||
$css->render_range( $attributes['titleStyles'][0], 'marginTop', 'row-gap' );
|
||||
}
|
||||
if ( ! empty( $attributes['columnLayout'][0] ) && 'row' !== $attributes['columnLayout'][0] ) {
|
||||
switch ( $attributes['columnLayout'][0] ) {
|
||||
case 'two-column':
|
||||
$css->add_property( 'display', 'grid' );
|
||||
$css->add_property( 'grid-template-columns', 'repeat(2, minmax(0, 1fr))' );
|
||||
break;
|
||||
case 'three-column':
|
||||
$css->add_property( 'display', 'grid' );
|
||||
$css->add_property( 'grid-template-columns', 'repeat(3, minmax(0, 1fr))' );
|
||||
break;
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( ! empty( $attributes['columnLayout'][1] ) ) {
|
||||
switch ( $attributes['columnLayout'][1] ) {
|
||||
case 'row':
|
||||
$css->add_property( 'display', 'block' ); // removes row-gap from one column tablet layouts
|
||||
if ( isset( $attributes['titleStyles'][0]['marginTop'] ) ) { // adds margin top to panes for one column layouts
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-inner-wrap .kt-accordion-pane:not(:first-child)' );
|
||||
$css->render_range( $attributes['titleStyles'][0], 'marginTop', 'margin-top' );
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-inner-wrap' );
|
||||
}
|
||||
break;
|
||||
case 'two-column':
|
||||
$css->add_property( 'display', 'grid' );
|
||||
$css->add_property( 'grid-template-columns', 'repeat(2, minmax(0, 1fr))' );
|
||||
break;
|
||||
case 'three-column':
|
||||
$css->add_property( 'display', 'grid' );
|
||||
$css->add_property( 'grid-template-columns', 'repeat(3, minmax(0, 1fr))' );
|
||||
break;
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( ! empty( $attributes['columnLayout'][2] ) ) {
|
||||
switch ( $attributes['columnLayout'][2] ) {
|
||||
case 'row':
|
||||
$css->add_property( 'display', 'block' ); // removes row gap from one column mobile layouts
|
||||
if ( isset( $attributes['titleStyles'][0]['marginTop'] ) ) { // adds margin top to panes for one column layouts
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-inner-wrap .kt-accordion-pane:not(:first-child)' );
|
||||
$css->render_range( $attributes['titleStyles'][0], 'marginTop', 'margin-top' );
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-inner-wrap' );
|
||||
}
|
||||
break;
|
||||
case 'two-column':
|
||||
$css->add_property( 'display', 'grid' );
|
||||
$css->add_property( 'grid-template-columns', 'repeat(2, minmax(0, 1fr))' );
|
||||
break;
|
||||
case 'three-column':
|
||||
$css->add_property( 'display', 'grid' );
|
||||
$css->add_property( 'grid-template-columns', 'repeat(3, minmax(0, 1fr))' );
|
||||
break;
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner' );
|
||||
// Support legacy non-responsive broder widths
|
||||
if ( ! empty( $attributes['contentBorder'] ) && $attributes['contentBorder'] !== array( '', '', '', '' ) ) {
|
||||
$css->render_measure_range( $attributes, 'contentBorder', 'border-width' );
|
||||
$css->render_color_output( $attributes, 'contentBorderColor', 'border-color' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'contentBorderStyle' );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'contentBorderRadius', 'border-radius', array( 'unit_key' => 'contentBorderRadiusUnit' ) );
|
||||
$css->render_color_output( $attributes, 'contentBgColor', 'background' );
|
||||
$content_padding_args = array(
|
||||
'desktop_key' => 'contentPadding',
|
||||
'tablet_key' => 'contentTabletPadding',
|
||||
'mobile_key' => 'contentMobilePadding',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'contentPadding', 'padding', $content_padding_args );
|
||||
// Title Styles.
|
||||
if ( isset( $attributes['titleStyles'] ) && is_array( $attributes['titleStyles'] ) && is_array( $attributes['titleStyles'][0] ) ) {
|
||||
$title_styles = $attributes['titleStyles'][0];
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header' );
|
||||
|
||||
// Support legacy non-responsive broder widths
|
||||
if ( ! empty( $title_styles['borderWidth'] ) && $title_styles['borderWidth'] !== array( '', '', '', '' ) ) {
|
||||
$css->render_border_color( $title_styles, 'border' );
|
||||
$css->render_measure_range( $title_styles, 'borderWidth', 'border-width' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'titleBorder', true );
|
||||
}
|
||||
// Support legacy non-responsive broder radius
|
||||
if ( ! empty( $title_styles['borderRadius'] ) && $title_styles['borderRadius'] !== array( '', '', '', '' ) ) {
|
||||
$css->render_border_radius( $title_styles, 'borderRadius', 'px' );
|
||||
} else {
|
||||
$css->render_measure_output( $attributes, 'titleBorderRadius', 'border-radius', array( 'unit_key' => 'titleBorderRadiusUnit' ) );
|
||||
}
|
||||
$css->render_color_output( $title_styles, 'background', 'background' );
|
||||
$css->render_typography( $title_styles, '' );
|
||||
$padding_args = array(
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
);
|
||||
$css->render_measure_output( $title_styles, 'padding', 'padding', $padding_args );
|
||||
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .wp-block-kadence-pane .kt-accordion-header-wrap .kt-blocks-accordion-header' );
|
||||
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:before' );
|
||||
if ( ! empty( $attributes['iconColor']['standard'] ) ) {
|
||||
$css->render_color_output( $attributes['iconColor'], 'standard', 'background' );
|
||||
} elseif ( ! empty( $title_styles['color'] ) ) {
|
||||
$css->render_color_output( $title_styles, 'color', 'background' );
|
||||
}
|
||||
// Text Colors.
|
||||
if ( isset( $attributes['textColor'] ) ) {
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner, .kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner h1, .kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner h2, .kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner h3, .kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner h4, .kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner h5, .kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner h6' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['textColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['linkColor'] ) ) {
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner a' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['linkColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['linkHoverColor'] ) ) {
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ' .kt-accordion-panel-inner a:hover' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['linkHoverColor'] ) );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger' );
|
||||
if ( ! empty( $attributes['iconColor']['standard'] ) ) {
|
||||
$css->render_color_output( $attributes['iconColor'], 'standard', 'background' );
|
||||
} elseif ( ! empty( $title_styles['color'] ) ) {
|
||||
$css->render_color_output( $title_styles, 'color', 'background' );
|
||||
}
|
||||
// Hover Styles.
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:before' );
|
||||
$css->render_color_output( $title_styles, 'background', 'background' );
|
||||
$css->set_selector(
|
||||
'.kt-accordion-id' . $unique_id . ' > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover,
|
||||
body:not(.hide-focus-outline) .kt-accordion-id' . $unique_id . ' .kt-blocks-accordion-header:focus-visible'
|
||||
);
|
||||
$css->render_color_output( $title_styles, 'colorHover', 'color' );
|
||||
$css->render_color_output( $title_styles, 'backgroundHover', 'background' );
|
||||
|
||||
// Support legacy non-responsive broder widths
|
||||
if ( ! empty( $title_styles['borderWidth'] ) && $title_styles['borderWidth'] !== array( '', '', '', '' ) ) {
|
||||
$css->render_border_color( $title_styles, 'borderHover' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'titleBorderHover', true );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['iconColor']['hover'] ) || ! empty( $title_styles['colorHover'] ) ) {
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion--visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before' );
|
||||
if ( ! empty( $attributes['iconColor']['hover'] ) ) {
|
||||
$css->render_color_output( $attributes['iconColor'], 'hover', 'background' );
|
||||
} elseif ( ! empty( $title_styles['colorHover'] ) ) {
|
||||
$css->render_color_output( $title_styles, 'colorHover', 'background' );
|
||||
}
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, body:not(.hide-focus-outline) .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger' );
|
||||
if ( ! empty( $attributes['iconColor']['hover'] ) ) {
|
||||
$css->render_color_output( $attributes['iconColor'], 'hover', 'background' );
|
||||
} elseif ( ! empty( $title_styles['colorHover'] ) ) {
|
||||
$css->render_color_output( $title_styles, 'colorHover', 'background' );
|
||||
}
|
||||
}
|
||||
if ( ! empty( $title_styles['backgroundHover'] ) ) {
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before' );
|
||||
$css->render_color_output( $title_styles, 'backgroundHover', 'background' );
|
||||
}
|
||||
// Active styles.
|
||||
$css->set_selector(
|
||||
'.kt-accordion-id' . $unique_id . ' .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,
|
||||
.kt-accordion-id' . $unique_id . ' > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active'
|
||||
);
|
||||
$css->render_color_output( $title_styles, 'colorActive', 'color' );
|
||||
$css->render_color_output( $title_styles, 'backgroundActive', 'background' );
|
||||
|
||||
// Support legacy non-responsive broder widths
|
||||
if ( ! empty( $title_styles['borderWidth'] ) && $title_styles['borderWidth'] !== array( '', '', '', '' ) ) {
|
||||
$css->render_border_color( $title_styles, 'borderActive' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'titleBorderActive', true );
|
||||
}
|
||||
if ( ! empty( $attributes['iconColor']['active'] ) || ! empty( $title_styles['colorActive'] ) ) {
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before' );
|
||||
if ( ! empty( $attributes['iconColor']['active'] ) ) {
|
||||
$css->render_color_output( $attributes['iconColor'], 'active', 'background' );
|
||||
} elseif ( ! empty( $title_styles['colorActive'] ) ) {
|
||||
$css->render_color_output( $title_styles, 'colorActive', 'background' );
|
||||
}
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger' );
|
||||
if ( ! empty( $attributes['iconColor']['active'] ) ) {
|
||||
$css->render_color_output( $attributes['iconColor'], 'active', 'background' );
|
||||
} elseif ( ! empty( $title_styles['colorActive'] ) ) {
|
||||
$css->render_color_output( $title_styles, 'colorActive', 'background' );
|
||||
}
|
||||
}
|
||||
if ( ! empty( $title_styles['backgroundActive'] ) ) {
|
||||
$css->set_selector( '.kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id' . $unique_id . ':not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before' );
|
||||
$css->render_color_output( $title_styles, 'backgroundActive', 'background' );
|
||||
}
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
return str_replace('<div class="kt-accordion-panel">', '<div class="kt-accordion-panel kt-accordion-panel-hidden">', $content );
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
if ( $this->has_script ) {
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kt-accordion.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render Block CSS in Page Head.
|
||||
*
|
||||
* @param array $block the block data.
|
||||
*/
|
||||
public function output_head_data( $block ) {
|
||||
parent::output_head_data( $block );
|
||||
if ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) {
|
||||
$attributes = $block['attrs'];
|
||||
if ( isset( $attributes['uniqueID'] ) ) {
|
||||
$unique_id = $attributes['uniqueID'];
|
||||
if ( isset( $attributes['faqSchema'] ) && $attributes['faqSchema'] ) {
|
||||
$faq_script_id = 'kb-faq' . esc_attr( $unique_id );
|
||||
$frontend_class = Kadence_Blocks_Frontend::get_instance();
|
||||
if ( is_null( $frontend_class::$faq_schema ) ) {
|
||||
$frontend_class::$faq_schema = '<script type="application/ld+json" class="kadence-faq-schema-graph kadence-faq-schema-graph--' . $faq_script_id . '">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[]}</script>';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Accordion_Block::get_instance();
|
||||
@@ -0,0 +1,516 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Accordion Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Advanced_Form_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'advanced-form';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
protected $form_attributes = array();
|
||||
|
||||
protected $form_fields = array();
|
||||
|
||||
/**
|
||||
* Block determines if style needs to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = true;
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $seen_refs = array();
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
if ( ! isset( $attributes['id'] ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// $form_fields = $this->get_form_fields( $attributes['id'] );
|
||||
$form_attributes = $this->get_form_attributes( $attributes['id'] );
|
||||
|
||||
$form_attributes = json_decode( json_encode( $form_attributes ), true );
|
||||
//print_r( $form_attributes );
|
||||
$field_style = isset( $form_attributes['style'] ) ? $form_attributes['style'] : array();
|
||||
$background_style = isset( $form_attributes['background'] ) ? $form_attributes['background'] : array();
|
||||
$label_style = isset( $form_attributes['labelFont'] ) ? $form_attributes['labelFont'] : array();
|
||||
$radio_label_font = isset( $form_attributes['radioLabelFont'] ) ? $form_attributes['radioLabelFont'] : array();
|
||||
$input_font = isset( $form_attributes['inputFont'] ) ? $form_attributes['inputFont'] : array();
|
||||
$help_style = isset( $form_attributes['helpFont'] ) ? $form_attributes['helpFont'] : array();
|
||||
$submit_style = isset( $form_attributes['submit'] ) ? $form_attributes['submit'] : array();
|
||||
$submit_font = isset( $form_attributes['submitFont'] ) ? $form_attributes['submitFont'] : array();
|
||||
$message_font = isset( $form_attributes['messageFont'] ) ? $form_attributes['messageFont'] : array();
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
// Container.
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ', .wp-block-kadence-advanced-form' . $unique_id . '.kb-form-has-background' );
|
||||
$css->render_measure_output( $form_attributes, 'padding', 'padding', array( 'desktop_key' => 'padding', 'tablet_key' => 'tabletPadding', 'mobile_key' => 'mobilePadding' ) );
|
||||
$css->render_measure_output( $form_attributes, 'margin', 'margin', array( 'desktop_key' => 'margin', 'tablet_key' => 'tabletMargin', 'mobile_key' => 'mobileMargin' ) );
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id );
|
||||
if ( isset( $background_style['backgroundType'] ) && $background_style['backgroundType'] === 'gradient' ) {
|
||||
$css->add_property( 'background', $background_style['gradient'] );
|
||||
} else {
|
||||
$css->render_color_output( $background_style, 'background', 'background' );
|
||||
}
|
||||
$css->render_responsive_range( $form_attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
|
||||
// Input Styles.
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form' );
|
||||
$css->render_gap( $field_style );
|
||||
|
||||
/*
|
||||
*
|
||||
* Field Inputs
|
||||
*
|
||||
*/
|
||||
$css->set_selector(
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form input[type=text],' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form input[type=tel],' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form input[type=number],' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form input[type=date],' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form input[type=time],' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form input[type=email],' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form input[type=file],' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form select,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' .kb-advanced-form textarea'
|
||||
);
|
||||
|
||||
$css->render_typography( $form_attributes, 'inputFont' );
|
||||
|
||||
$border_style = array(
|
||||
'fieldBorderStyle' => array( ! empty( $form_attributes['fieldBorderStyle'] ) ? $form_attributes['fieldBorderStyle'] : array() ),
|
||||
'tabletFieldBorderStyle' => array( ! empty( $form_attributes['tabletFieldBorderStyle'] ) ? $form_attributes['tabletFieldBorderStyle'] : array() ),
|
||||
'mobileFieldBorderStyle' => array( ! empty( $form_attributes['mobileFieldBorderStyle'] ) ? $form_attributes['mobileFieldBorderStyle'] : array() ),
|
||||
);
|
||||
$css->render_border_styles( $border_style, 'fieldBorderStyle' );
|
||||
$css->render_measure_output( $form_attributes, 'fieldBorderRadius', 'border-radius' );
|
||||
|
||||
if ( ! empty( $field_style['boxShadow'][0] ) && $field_style['boxShadow'][0] === true ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $field_style['boxShadow'][7] ) && true === $field_style['boxShadow'][7] ? 'inset ' : '' ) . ( isset( $field_style['boxShadow'][3] ) && is_numeric( $field_style['boxShadow'][3] ) ? $field_style['boxShadow'][3] : '2' ) . 'px ' . ( isset( $field_style['boxShadow'][4] ) && is_numeric( $field_style['boxShadow'][4] ) ? $field_style['boxShadow'][4] : '2' ) . 'px ' . ( isset( $field_style['boxShadow'][5] ) && is_numeric( $field_style['boxShadow'][5] ) ? $field_style['boxShadow'][5] : '3' ) . 'px ' . ( isset( $field_style['boxShadow'][6] ) && is_numeric( $field_style['boxShadow'][6] ) ? $field_style['boxShadow'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $field_style['boxShadow'][1] ) && ! empty( $field_style['boxShadow'][1] ) ? $field_style['boxShadow'][1] : '#000000' ), ( isset( $field_style['boxShadow'][2] ) && is_numeric( $field_style['boxShadow'][2] ) ? $field_style['boxShadow'][2] : 0.4 ) ) );
|
||||
}
|
||||
|
||||
$css->render_measure_output( $field_style, 'padding', 'padding', array( 'unit_key' => 'paddingUnit' ) );
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id );
|
||||
if ( isset( $field_style['isDark'] ) && $field_style['isDark'] === true ) {
|
||||
$css->add_property( 'color-scheme', 'dark' );
|
||||
}
|
||||
if ( ! empty( $form_attributes['inputFont']['color'] ) ) {
|
||||
$css->render_color_output( $form_attributes['inputFont'], 'color', '--kb-form-text-color' );
|
||||
}
|
||||
$css->render_color_output( $field_style, 'color', '--kb-form-text-focus-color' );
|
||||
if ( isset( $field_style['backgroundType'] ) && $field_style['backgroundType'] === 'gradient' ) {
|
||||
$css->add_property( '--kb-form-background-color', $field_style['gradient'] );
|
||||
} else {
|
||||
$css->render_color_output( $field_style, 'background', '--kb-form-background-color' );
|
||||
}
|
||||
$border_args = array(
|
||||
'desktop_key' => 'fieldBorderStyle',
|
||||
'tablet_key' => 'tabletFieldBorderStyle',
|
||||
'mobile_key' => 'mobileFieldBorderStyle',
|
||||
'unit_key' => 'unit',
|
||||
'first_prop' => 'border-top',
|
||||
'second_prop' => 'border-right',
|
||||
'third_prop' => 'border-bottom',
|
||||
'fourth_prop' => 'border-left',
|
||||
);
|
||||
$desktop_border_width = $css->get_border_value( $border_style, $border_args, 'top', 'desktop', 'width', true );
|
||||
if ( ! empty( $desktop_border_width ) ) {
|
||||
$css->add_property( '--kb-form-border-width', $desktop_border_width );
|
||||
}
|
||||
$desktop_border_color = $css->get_border_value( $border_style, $border_args, 'top', 'desktop', 'color', true );
|
||||
if ( ! empty( $desktop_border_color ) ) {
|
||||
$css->add_property( '--kb-form-border-color', $desktop_border_color );
|
||||
}
|
||||
|
||||
/*
|
||||
* Field Placeholder text
|
||||
*/
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id );
|
||||
$css->render_color_output( $field_style, 'placeholderColor', '--kb-form-placeholder-color' );
|
||||
|
||||
/*
|
||||
*
|
||||
* Field Inputs on Focus
|
||||
*
|
||||
*/
|
||||
$css->set_selector(
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' input[type=text]:focus,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' input[type=email]:focus,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' input[type=tel]:focus,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' input[type=date]:focus,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' input[type=number]:focus,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' input[type=time]:focus,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' input[type=file]:focus,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' select:focus,' .
|
||||
'.wp-block-kadence-advanced-form' . $unique_id . ' textarea:focus'
|
||||
);
|
||||
|
||||
$css->render_color_output( $input_font, 'colorActive', 'color' );
|
||||
|
||||
if ( ! empty( $field_style['borderActive'] ) ) {
|
||||
$css->add_property( 'border-color', $css->sanitize_color( $field_style['borderActive'] ) );
|
||||
}
|
||||
|
||||
if ( ! empty( $field_style['boxShadowActive'][0] ) && $field_style['boxShadowActive'][0] === true ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $field_style['boxShadowActive'][7] ) && true === $field_style['boxShadowActive'][7] ? 'inset ' : '' ) . ( isset( $field_style['boxShadowActive'][3] ) && is_numeric( $field_style['boxShadowActive'][3] ) ? $field_style['boxShadowActive'][3] : '2' ) . 'px ' . ( isset( $field_style['boxShadowActive'][4] ) && is_numeric( $field_style['boxShadowActive'][4] ) ? $field_style['boxShadowActive'][4] : '2' ) . 'px ' . ( isset( $field_style['boxShadowActive'][5] ) && is_numeric( $field_style['boxShadowActive'][5] ) ? $field_style['boxShadowActive'][5] : '3' ) . 'px ' . ( isset( $field_style['boxShadowActive'][6] ) && is_numeric( $field_style['boxShadowActive'][6] ) ? $field_style['boxShadowActive'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $field_style['boxShadowActive'][1] ) && ! empty( $field_style['boxShadowActive'][1] ) ? $field_style['boxShadowActive'][1] : '#000000' ), ( isset( $field_style['boxShadowActive'][2] ) && is_numeric( $field_style['boxShadowActive'][2] ) ? $field_style['boxShadowActive'][2] : 0.4 ) ) );
|
||||
}
|
||||
|
||||
|
||||
if ( isset( $field_style['backgroundActiveType'] ) && $field_style['backgroundActiveType'] === 'gradient' ) {
|
||||
$css->add_property( 'background', $field_style['gradientActive'] );
|
||||
} else {
|
||||
$css->render_color_output( $field_style, 'backgroundActive', 'background' );
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* Labels
|
||||
*
|
||||
*/
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ' .kb-adv-form-field .kb-adv-form-label' );
|
||||
|
||||
$css->render_measure_output( $label_style, 'padding', 'padding', array( 'unit_key' => 'paddingUnit' ) );
|
||||
$css->render_measure_output( $label_style, 'margin', 'margin' );
|
||||
|
||||
$tmp_label_style = array( 'typography' => $label_style );
|
||||
$css->render_typography( $tmp_label_style, 'typography' );
|
||||
|
||||
/*
|
||||
*
|
||||
* Label Required
|
||||
*
|
||||
*/
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ' .kb-adv-form-label .kb-adv-form-required' );
|
||||
$css->render_color_output( $field_style, 'requiredColor', 'color' );
|
||||
|
||||
/*
|
||||
*
|
||||
* Radio Labels
|
||||
*
|
||||
*/
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ' .kb-radio-check-item label' );
|
||||
$css->render_color_output( $radio_label_font, 'color', 'color' );
|
||||
$tmp_radio_label_style = array( 'typography' => $radio_label_font );
|
||||
$css->render_typography( $tmp_radio_label_style, 'typography' );
|
||||
/*
|
||||
*
|
||||
* Help Text
|
||||
*
|
||||
*/
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ' .kb-adv-form-help' );
|
||||
$tmp_help_font = array( 'typography' => $help_style );
|
||||
$css->render_typography( $tmp_help_font, 'typography' );
|
||||
$css->render_measure_output( $help_style, 'padding', 'padding' );
|
||||
$css->render_measure_output( $help_style, 'margin', 'margin' );
|
||||
if( !empty( $help_style['style'] ) && $help_style['style'] === 'normal' ) {
|
||||
$css->add_property('font-style', 'normal');
|
||||
}
|
||||
/*
|
||||
*
|
||||
* Message Styles
|
||||
*
|
||||
*/
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ' .kb-adv-form-message' );
|
||||
$padding_array = array(
|
||||
'messagePadding' => !empty( $form_attributes['messagePadding'] ) ? $form_attributes['messagePadding'] : array(),
|
||||
'messagePaddingType' => !empty( $form_attributes['messagePaddingUnit'] ) ? $form_attributes['messagePaddingUnit'] : 'px'
|
||||
);
|
||||
$css->render_measure_output( $padding_array, 'messagePadding', 'padding' );
|
||||
|
||||
$margin_array = array(
|
||||
'messageMargin' => !empty( $form_attributes['messageMargin'] ) ? $form_attributes['messageMargin'] : array(),
|
||||
'messageMarginType' => !empty( $form_attributes['messageMarginUnit'] ) ? $form_attributes['messageMarginUnit'] : 'px'
|
||||
);
|
||||
$css->render_measure_output( $margin_array, 'messageMargin', 'margin' );
|
||||
|
||||
$message_font[0]['sizeType'] = !empty( $message_font[0]['sizetype'] ) ? $message_font[0]['sizetype'] : 'px';
|
||||
$tmp_message_font = array( 'typography' => $message_font );
|
||||
$css->render_typography( $tmp_message_font, 'typography' );
|
||||
$css->render_measure_output( $form_attributes, 'messageBorderRadius', 'border-radius' );
|
||||
// Success.
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ' .kb-adv-form-success' );
|
||||
$border_style = array(
|
||||
'messageBorderSuccess' => array( ! empty( $form_attributes['messageBorderSuccess'] ) ? $form_attributes['messageBorderSuccess'] : array() ),
|
||||
'tabletMessageBorderSuccess' => array( ! empty( $form_attributes['tabletMessageBorderSuccess'] ) ? $form_attributes['tabletMessageBorderSuccess'] : array() ),
|
||||
'mobileMessageBorderSuccess' => array( ! empty( $form_attributes['mobileMessageBorderSuccess'] ) ? $form_attributes['mobileMessageBorderSuccess'] : array() ),
|
||||
);
|
||||
$css->render_border_styles( $border_style, 'messageBorderSuccess' );
|
||||
$css->render_color_output( $form_attributes, 'messageColor', 'color' );
|
||||
$css->render_color_output( $form_attributes, 'messageBackground', 'background' );
|
||||
// Error.
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form' . $unique_id . ' .kb-adv-form-warning' );
|
||||
$border_style = array(
|
||||
'messageBorderError' => array( ! empty( $form_attributes['messageBorderError'] ) ? $form_attributes['messageBorderError'] : array() ),
|
||||
'tabletMessageBorderError' => array( ! empty( $form_attributes['tabletMessageBorderError'] ) ? $form_attributes['tabletMessageBorderError'] : array() ),
|
||||
'mobileMessageBorderError' => array( ! empty( $form_attributes['mobileMessageBorderError'] ) ? $form_attributes['mobileMessageBorderError'] : array() ),
|
||||
);
|
||||
$css->render_border_styles( $border_style, 'messageBorderError' );
|
||||
$css->render_color_output( $form_attributes, 'messageColorError', 'color' );
|
||||
$css->render_color_output( $form_attributes, 'messageBackgroundError', 'background' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if ( empty( $attributes['id'] ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$form_block = get_post( $attributes['id'] );
|
||||
if ( ! $form_block || 'kadence_form' !== $form_block->post_type ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( 'publish' !== $form_block->post_status || ! empty( $form_block->post_password ) ) {
|
||||
return '';
|
||||
}
|
||||
// Prevent a form block from being rendered inside itself.
|
||||
if ( isset( self::$seen_refs[ $attributes['id'] ] ) ) {
|
||||
// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
|
||||
// is set in `wp_debug_mode()`.
|
||||
$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
|
||||
|
||||
return $is_debug ?
|
||||
// translators: Visible only in the front end, this warning takes the place of a faulty block.
|
||||
__( '[block rendering halted]', 'kadence-blocks' ) :
|
||||
'';
|
||||
}
|
||||
self::$seen_refs[ $attributes['id'] ] = true;
|
||||
// Remove the advanced form block so it doesn't try and render.
|
||||
$content = preg_replace( '/<!-- wp:kadence\/advanced-form {.*?} -->/', '', $form_block->post_content );
|
||||
$content = str_replace( '<!-- wp:kadence/advanced-form -->', '', $content );
|
||||
$content = str_replace( '<!-- wp:kadence/advanced-form -->', '', $content );
|
||||
$content = str_replace( '<!-- /wp:kadence/advanced-form -->', '', $content );
|
||||
|
||||
// Handle embeds for form block.
|
||||
global $wp_embed;
|
||||
$content = $wp_embed->run_shortcode( $content );
|
||||
$content = $wp_embed->autoembed( $content );
|
||||
$content = do_blocks( $content );
|
||||
|
||||
unset( self::$seen_refs[ $attributes['id'] ] );
|
||||
$form_attributes = $this->get_form_attributes( $attributes['id'] );
|
||||
$form_attributes = json_decode( json_encode( $form_attributes ), true );
|
||||
$field_style = isset( $form_attributes['style'] ) ? $form_attributes['style'] : array();
|
||||
$background_style = isset( $form_attributes['background'] ) ? $form_attributes['background'] : array();
|
||||
$outer_classes = array( 'wp-block-kadence-advanced-form', 'wp-block-kadence-advanced-form' . $unique_id );
|
||||
if ( ! empty( $field_style['labelStyle'] ) ) {
|
||||
$outer_classes[] = 'kb-adv-form-label-style-' . $field_style['labelStyle'];
|
||||
}
|
||||
if ( ! empty( $field_style['size'] ) ) {
|
||||
$outer_classes[] = 'kb-adv-form-input-size-' . $field_style['size'];
|
||||
}
|
||||
if ( ! isset( $field_style['basicStyles'] ) || ( isset( $field_style['basicStyles'] ) && $field_style['basicStyles'] ) ) {
|
||||
$outer_classes[] = 'kb-form-basic-style';
|
||||
}
|
||||
if ( ( isset( $field_style['showRequired'] ) && false === $field_style['showRequired'] ) ) {
|
||||
$outer_classes[] = 'kb-form-hide-required-asterisk';
|
||||
}
|
||||
if ( isset( $field_style['isDark'] ) && $field_style['isDark'] ) {
|
||||
$outer_classes[] = 'kb-form-is-dark';
|
||||
}
|
||||
if( ! empty( $form_attributes['className'] ) ) {
|
||||
$outer_classes[] = $form_attributes['className'];
|
||||
}
|
||||
$background_type = ( ! empty( $background_style['backgroundType'] ) ? $background_style['backgroundType'] : 'normal' );
|
||||
$has_background = false;
|
||||
if ( 'normal' === $background_type && ! empty( $background_style['background'] ) ) {
|
||||
$has_background = true;
|
||||
} else if ( 'gradient' === $background_type && ! empty( $background_style['gradient'] ) ) {
|
||||
$has_background = true;
|
||||
}
|
||||
if ( $has_background ) {
|
||||
$outer_classes[] = 'kb-form-has-background';
|
||||
}
|
||||
$inner_classes = array( 'kb-advanced-form' );
|
||||
$wrapper_args = array(
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
);
|
||||
if ( ! empty( $form_attributes['anchor'] ) ) {
|
||||
$wrapper_args['id'] = $form_attributes['anchor'];
|
||||
}
|
||||
$inner_args = array(
|
||||
'id' => 'kb-adv-form-' . $unique_id,
|
||||
'class' => implode( ' ', $inner_classes ),
|
||||
'method' => 'post',
|
||||
);
|
||||
if ( isset( $form_attributes['messages']['preError'] ) && ! empty( $form_attributes['messages']['preError'] ) ) {
|
||||
$inner_args['data-error-message'] = $form_attributes['messages']['preError'];
|
||||
}
|
||||
if ( isset( $form_attributes['enableAnalytics'] ) && $form_attributes['enableAnalytics'] && class_exists( 'Kadence_Blocks_Pro' ) ) {
|
||||
$inner_args['data-kb-events'] = 'yes';
|
||||
}
|
||||
if ( isset( $form_attributes['browserValidation'] ) && ! $form_attributes['browserValidation'] ) {
|
||||
$inner_args['novalidate'] = 'true';
|
||||
}
|
||||
$inner_wrap_attributes = array();
|
||||
foreach ( $inner_args as $key => $value ) {
|
||||
$inner_wrap_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_wrapper_attributes = implode( ' ', $inner_wrap_attributes );
|
||||
$form_fields = '';
|
||||
if ( ! empty( $attributes['id'] ) ) {
|
||||
$form_fields .= '<input type="hidden" name="_kb_adv_form_post_id" value="' . esc_attr( $attributes['id'] ) . '">';
|
||||
}
|
||||
$form_fields .= '<input type="hidden" name="action" value="kb_process_advanced_form_submit">';
|
||||
$form_fields .= '<input type="hidden" name="_kb_adv_form_id" value="' . esc_attr( $unique_id ) . '">';
|
||||
$content = sprintf( '<div %1$s><form %2$s>%3$s%4$s</form></div>', $wrapper_attributes, $inner_wrapper_attributes, $content, $form_fields );
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get form fields.
|
||||
*
|
||||
* @param int $post_id Post ID.
|
||||
* @return array
|
||||
*/
|
||||
private function get_form_fields( $post_id ) {
|
||||
|
||||
if ( ! empty( $this->form_fields ) ) {
|
||||
return $this->form_fields;
|
||||
}
|
||||
|
||||
$post_content = get_post( $post_id );
|
||||
|
||||
if ( $post_content instanceof WP_Post ) {
|
||||
$parsed_block = parse_blocks( $post_content->post_content );
|
||||
} else {
|
||||
$parsed_block = array();
|
||||
}
|
||||
|
||||
if ( ! empty( $parsed_block[0]['innerBlocks'] ) ) {
|
||||
$this->form_fields = $parsed_block[0]['innerBlocks'];
|
||||
}
|
||||
|
||||
return $this->form_fields;
|
||||
}
|
||||
/**
|
||||
* Get form attributes.
|
||||
*
|
||||
* @param int $post_id Post ID.
|
||||
* @return array
|
||||
*/
|
||||
private function get_form_attributes( $post_id ) {
|
||||
|
||||
if ( ! empty( $this->form_attributes[ $post_id ] ) ) {
|
||||
return $this->form_attributes[ $post_id ];
|
||||
}
|
||||
|
||||
$post_meta = get_post_meta( $post_id );
|
||||
$form_meta = array();
|
||||
if ( is_array( $post_meta ) ) {
|
||||
foreach ( $post_meta as $meta_key => $meta_value ) {
|
||||
if ( strpos( $meta_key, '_kad_form_' ) === 0 && isset( $meta_value[0] ) ) {
|
||||
$form_meta[ str_replace( '_kad_form_', '', $meta_key ) ] = maybe_unserialize( $meta_value[0] );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( $this->form_attributes[ $post_id ] = $form_meta ) {
|
||||
return $this->form_attributes[ $post_id ];
|
||||
}
|
||||
|
||||
return array();
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-advanced-form-block.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
wp_localize_script(
|
||||
'kadence-blocks-' . $this->block_name,
|
||||
'kb_adv_form_params',
|
||||
array(
|
||||
'ajaxurl' => admin_url( 'admin-ajax.php' ),
|
||||
'error_message' => __( 'Please fix the errors to proceed', 'kadence-blocks' ),
|
||||
'nonce' => wp_create_nonce( 'kb_form_nonce' ),
|
||||
'required' => __( 'is required', 'kadence-blocks' ),
|
||||
'mismatch' => __( 'does not match', 'kadence-blocks' ),
|
||||
'validation' => __( 'is not valid', 'kadence-blocks' ),
|
||||
'duplicate' => __( 'requires a unique entry and this value has already been used', 'kadence-blocks' ),
|
||||
'item' => __( 'Item', 'kadence-blocks' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Advanced_Form_Block::get_instance();
|
||||
@@ -0,0 +1,913 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Heading Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Advanced Heading Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Advancedheading_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'advancedheading';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Allowed HTML tags for front end output.
|
||||
*
|
||||
* @var string[]
|
||||
*/
|
||||
protected $allowed_html_tags = array( 'heading', 'p', 'span', 'div' );
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . ', .wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"]' );
|
||||
// Issue with span tag.
|
||||
if ( isset( $attributes['htmlTag'] ) && 'span' === $attributes['htmlTag'] ) {
|
||||
$css->add_property( 'display', 'block' );
|
||||
}
|
||||
// Support old margins.
|
||||
if ( isset( $attributes['topMargin'] ) && is_numeric( $attributes['topMargin'] ) ) {
|
||||
$css->add_property( 'margin-top', $attributes['topMargin'] . ( ! isset( $attributes['marginType'] ) ? 'px' : $attributes['marginType'] ) );
|
||||
// This fixes an issue where the background doesn't show over the top of the item that is above it.
|
||||
if ( $attributes['topMargin'] < 0 && isset( $attributes['background'] ) && ! empty( $attributes['background'] ) ) {
|
||||
$css->add_property( 'position', 'relative' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['rightMargin'] ) && is_numeric( $attributes['rightMargin'] ) ) {
|
||||
$css->add_property( 'margin-right', $attributes['rightMargin'] . ( ! isset( $attributes['marginType'] ) ? 'px' : $attributes['marginType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['bottomMargin'] ) && is_numeric( $attributes['bottomMargin'] ) ) {
|
||||
$css->add_property( 'margin-bottom', $attributes['bottomMargin'] . ( ! isset( $attributes['marginType'] ) ? 'px' : $attributes['marginType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['leftMargin'] ) && is_numeric( $attributes['leftMargin'] ) ) {
|
||||
$css->add_property( 'margin-left', $attributes['leftMargin'] . ( ! isset( $attributes['marginType'] ) ? 'px' : $attributes['marginType'] ) );
|
||||
}
|
||||
// Spacing.
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width' );
|
||||
if ( ! empty( $attributes['maxWidth'][0] ) && ! empty( $attributes['align'] ) && 'center' === $attributes['align'] ) {
|
||||
$css->add_property( 'margin-right', 'auto' );
|
||||
$css->add_property( 'margin-left', 'auto' );
|
||||
}
|
||||
if ( ! empty( $attributes['maxWidth'][0] ) && ! empty( $attributes['align'] ) && 'right' === $attributes['align'] ) {
|
||||
$css->add_property( 'margin-right', '0px' );
|
||||
$css->add_property( 'margin-left', 'auto' );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding' );
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin' );
|
||||
|
||||
// Style.
|
||||
if ( isset( $attributes['align'] ) && ! empty( $attributes['align'] ) ) {
|
||||
$css->add_property( 'text-align', $attributes['align'] );
|
||||
}
|
||||
// Old size first.
|
||||
if ( ! empty( $attributes['size'] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['size'] . ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) );
|
||||
} else if ( ! empty( $attributes['fontSize'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['fontSize'][0], ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) ) );
|
||||
}
|
||||
// Old line height first.
|
||||
if ( isset( $attributes['lineHeight'] ) && ! empty( $attributes['lineHeight'] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['lineHeight'] . ( empty( $attributes['lineType'] ) ? 'px' : $attributes['lineType'] ) );
|
||||
} else if ( ! empty( $attributes['fontHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['fontHeight'][0] . ( empty( $attributes['fontHeightType'] ) ? '' : $attributes['fontHeightType'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['fontWeight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $attributes['fontWeight'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['fontStyle'] ) ) {
|
||||
$css->add_property( 'font-style', $attributes['fontStyle'] );
|
||||
}
|
||||
if ( ! empty( $attributes['typography'] ) ) {
|
||||
$google = isset( $attributes['googleFont'] ) && $attributes['googleFont'] ? true : false;
|
||||
$google = $google && ( isset( $attributes['loadGoogleFont'] ) && $attributes['loadGoogleFont'] || ! isset( $attributes['loadGoogleFont'] ) ) ? true : false;
|
||||
$variant = ! empty( $attributes['fontVariant'] ) ? $attributes['fontVariant'] : null;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $attributes['typography'], $google, $variant ) );
|
||||
}
|
||||
if ( ! empty( $attributes['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $attributes['textTransform'] );
|
||||
}
|
||||
if ( isset( $attributes['letterSpacing'] ) && is_numeric( $attributes['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $attributes['letterSpacing'] . ( ! isset( $attributes['letterSpacingType'] ) ? 'px' : $attributes['letterSpacingType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['tabletLetterSpacing'] ) && is_numeric( $attributes['tabletLetterSpacing'] ) ) {
|
||||
$css->set_media_state('tablet');
|
||||
$css->add_property( 'letter-spacing', $attributes['tabletLetterSpacing'] . ( ! isset( $attributes['letterSpacingType'] ) ? 'px' : $attributes['letterSpacingType'] ) );
|
||||
$css->set_media_state('desktop');
|
||||
}
|
||||
if ( isset( $attributes['mobileLetterSpacing'] ) && is_numeric( $attributes['mobileLetterSpacing'] ) ) {
|
||||
$css->set_media_state('mobile');
|
||||
$css->add_property( 'letter-spacing', $attributes['mobileLetterSpacing'] . ( ! isset( $attributes['letterSpacingType'] ) ? 'px' : $attributes['letterSpacingType'] ) );
|
||||
$css->set_media_state('desktop');
|
||||
}
|
||||
if ( ! empty( $attributes['color'] ) && empty( $attributes['enableTextGradient'] ) ) {
|
||||
if ( class_exists( 'Kadence\Theme' ) ) {
|
||||
if ( isset( $attributes['colorClass'] ) && empty( $attributes['colorClass'] ) || ! isset( $attributes['colorClass'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['color'] ) );
|
||||
}
|
||||
} else if ( strpos( $attributes['color'], 'palette' ) === 0 ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['color'] ) );
|
||||
} else if ( isset( $attributes['colorClass'] ) && empty( $attributes['colorClass'] ) || ! isset( $attributes['colorClass'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['color'] ) );
|
||||
}
|
||||
}
|
||||
if( !empty( $attributes['textGradient'] ) && ! empty( $attributes['enableTextGradient'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . ', .wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] .kb-adv-text-inner' );
|
||||
$css->add_property( 'background-image', $attributes['textGradient'] );
|
||||
$css->add_property( 'background-clip', 'text' );
|
||||
$css->add_property( '-webkit-box-decoration-break', 'clone' );
|
||||
$css->add_property( 'box-decoration-break', 'clone' );
|
||||
$css->add_property( '-webkit-background-clip', 'text' );
|
||||
$css->add_property( '-webkit-text-fill-color', 'transparent' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . ', .wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"]' );
|
||||
|
||||
}
|
||||
if ( ! empty( $attributes['background'] ) && empty( $attributes['enableTextGradient'] ) ) {
|
||||
if ( class_exists( 'Kadence\Theme' ) ) {
|
||||
if ( isset( $attributes['backgroundColorClass'] ) && empty( $attributes['backgroundColorClass'] ) || ! isset( $attributes['backgroundColorClass'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['background'] ) );
|
||||
}
|
||||
} else if ( strpos( $attributes['background'], 'palette' ) === 0 ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['background'] ) );
|
||||
} else if ( isset( $attributes['backgroundColorClass'] ) && empty( $attributes['backgroundColorClass'] ) || ! isset( $attributes['backgroundColorClass'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['background'] ) );
|
||||
}
|
||||
}
|
||||
if ((isset($attributes['enableTextShadow']) && !empty($attributes['enableTextShadow']))
|
||||
|| (isset($attributes['textShadow']) && !empty($attributes['textShadow'][0]['enable']))) {
|
||||
|
||||
if (empty($attributes['textShadow'])) {
|
||||
$attributes['textShadow'] = [
|
||||
[
|
||||
'hOffset' => 1,
|
||||
'vOffset' => 1,
|
||||
'blur' => 1,
|
||||
'color' => '#000000',
|
||||
'opacity' => 0.2,
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
$this->render_text_shadow( $attributes, $css ); // This should be all that is required.
|
||||
$css->set_media_state('desktop');
|
||||
}
|
||||
|
||||
if (isset($attributes['textOrientation'])) {
|
||||
$this->handle_text_orientation($css, $attributes['textOrientation']);
|
||||
$this->handle_max_height($css, $attributes, 0, 'textOrientation');
|
||||
}
|
||||
|
||||
if (isset($attributes['tabletTextOrientation'])) {
|
||||
$css->set_media_state('tablet');
|
||||
$this->handle_text_orientation($css, $attributes['tabletTextOrientation']);
|
||||
$this->handle_max_height($css, $attributes, 1, 'tabletTextOrientation');
|
||||
}
|
||||
|
||||
if (isset($attributes['mobileTextOrientation'])) {
|
||||
$css->set_media_state('mobile');
|
||||
$this->handle_text_orientation($css, $attributes['mobileTextOrientation']);
|
||||
$this->handle_max_height($css, $attributes, 2, 'mobileTextOrientation');
|
||||
}
|
||||
|
||||
$css->set_media_state( 'tablet' );
|
||||
// Old size first.
|
||||
if ( ! empty( $attributes['tabSize'] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['tabSize'] . ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) );
|
||||
} else if ( ! empty( $attributes['fontSize'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['fontSize'][1], ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) ) );
|
||||
}
|
||||
// Old line height first.
|
||||
if ( ! empty( $attributes['tabLineHeight'] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['tabLineHeight'] . ( empty( $attributes['lineType'] ) ? 'px' : $attributes['lineType'] ) );
|
||||
} else if ( ! empty( $attributes['fontHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['fontHeight'][1] . ( empty( $attributes['fontHeightType'] ) ? '' : $attributes['fontHeightType'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['tabletAlign'] ) ) {
|
||||
$css->add_property( 'text-align', $attributes['tabletAlign'] . '!important' );
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
// Old size first.
|
||||
if ( ! empty( $attributes['mobileSize'] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['mobileSize'] . ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) );
|
||||
} else if ( ! empty( $attributes['fontSize'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['fontSize'][2], ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) ) );
|
||||
}
|
||||
// Old line height first.
|
||||
if ( ! empty( $attributes['mobileLineHeight'] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['mobileLineHeight'] . ( empty( $attributes['lineType'] ) ? 'px' : $attributes['lineType'] ) );
|
||||
} else if ( ! empty( $attributes['fontHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['fontHeight'][2] . ( empty( $attributes['fontHeightType'] ) ? '' : $attributes['fontHeightType'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['mobileAlign'] ) ) {
|
||||
$css->add_property( 'text-align', $attributes['mobileAlign'] . '!important' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
|
||||
$css->render_border_styles( $attributes, 'borderStyle');
|
||||
$css->render_border_radius( $attributes, 'borderRadius', ( !empty( $attributes['borderRadiusUnit']) ? $attributes['borderRadiusUnit'] : 'px' ) );
|
||||
|
||||
$css->set_media_state('tablet');
|
||||
$css->render_border_radius( $attributes, 'tabletBorderRadius', ( !empty( $attributes['borderRadiusUnit']) ? $attributes['borderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state('desktop');
|
||||
|
||||
$css->set_media_state('mobile');
|
||||
$css->render_border_radius( $attributes, 'mobileBorderRadius', ( !empty( $attributes['borderRadiusUnit']) ? $attributes['borderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state('desktop');
|
||||
|
||||
// SVG.
|
||||
if ( ! empty( $attributes['icon'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"]' );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->add_property( 'gap', '0.25em' );
|
||||
if ( isset( $attributes['align'] ) ) {
|
||||
$css->add_property( 'justify-content', $attributes['align'] );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['tabletAlign'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'justify-content', $attributes['tabletAlign'] );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['mobileAlign'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'justify-content', $attributes['mobileAlign'] );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['iconVerticalAlign'] ) ) {
|
||||
$css->add_property( 'align-items', $attributes['iconVerticalAlign'] );
|
||||
} else {
|
||||
$css->add_property( 'align-items', 'center' );
|
||||
}
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] .kb-adv-heading-icon svg' );
|
||||
$css->add_property( 'width', '1em');
|
||||
$css->add_property( 'height', '1em');
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] .kb-adv-heading-icon' );
|
||||
$css->render_color_output( $attributes, 'iconColor', 'color' );
|
||||
$css->render_responsive_range( $attributes, 'iconSize', 'font-size', 'iconSizeUnit' );
|
||||
$css->render_measure_output( $attributes, 'iconPadding', 'padding', array( 'unit_key' => 'iconPaddingUnit' ) );
|
||||
if ( isset( $attributes['lineHeight'] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['lineHeight'] . ( empty( $attributes['lineType'] ) ? 'px' : $attributes['lineType'] ) );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['iconColorHover'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"]:hover .kb-adv-heading-icon' );
|
||||
$css->render_color_output( $attributes, 'iconColorHover', 'color' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Highlight.
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . ' mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] mark.kt-highlight' );
|
||||
if ( isset( $attributes['markLetterSpacing'] ) && ! empty( $attributes['markLetterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $attributes['markLetterSpacing'] . ( ! isset( $attributes['markLetterSpacingType'] ) ? 'px' : $attributes['markLetterSpacingType'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markSize'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][0], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markLineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['markLineHeight'][0] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markTypography'] ) ) {
|
||||
$google = isset( $attributes['markGoogleFont'] ) && $attributes['markGoogleFont'] ? true : false;
|
||||
$google = $google && ( isset( $attributes['markLoadGoogleFont'] ) && $attributes['markLoadGoogleFont'] || ! isset( $attributes['markLoadGoogleFont'] ) ) ? true : false;
|
||||
$variant = ! empty( $attributes['markFontVariant'] ) ? $attributes['markFontVariant'] : null;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $attributes['markTypography'], $google, $variant ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markFontWeight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $attributes['markFontWeight'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markFontStyle'] ) ) {
|
||||
$css->add_property( 'font-style', $attributes['markFontStyle'] );
|
||||
}
|
||||
if( !empty( $attributes['textGradient'] ) && ! empty( $attributes['enableTextGradient'] ) ) {
|
||||
$css->add_property( '-webkit-text-fill-color', 'initial !important' );
|
||||
$css->add_property( '-webkit-background-clip', 'initial !important' );
|
||||
$css->add_property( 'background-clip', 'initial !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['markColor'] ) && empty( $attributes['enableMarkGradient'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['markColor'] ) );
|
||||
} else if ( !empty( $attributes['markGradient'] ) && ! empty( $attributes['enableMarkGradient'] ) ) {
|
||||
$css->add_property( 'background-image', $attributes['markGradient'] );
|
||||
$css->add_property( '-webkit-background-clip', 'text' );
|
||||
$css->add_property( 'background-clip', 'text' );
|
||||
$css->add_property( '-webkit-text-fill-color', 'transparent' );
|
||||
}
|
||||
if ( ! empty($attributes['enableMarkBackgroundGradient']) && ! empty($attributes['markBackgroundGradient']) ) {
|
||||
$css->add_property( 'background-image', $attributes['markBackgroundGradient'] );
|
||||
}
|
||||
if ( ! empty( $attributes['markTextTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $attributes['markTextTransform'] );
|
||||
}
|
||||
if ( ! empty( $attributes['markBG'] ) && empty( $attributes['enableMarkGradient'] ) && empty( $attributes['enableMarkBackgroundGradient'] ) ) {
|
||||
$alpha = ( isset( $attributes['markBGOpacity'] ) && ! empty( $attributes['markBGOpacity'] ) ? $attributes['markBGOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $attributes['markBG'], $alpha ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markBorder'] ) ) {
|
||||
$alpha = ( isset( $attributes['markBorderOpacity'] ) && ! empty( $attributes['markBorderOpacity'] ) ? $attributes['markBorderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['markBorder'], $alpha ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markBorderWidth'] ) ) {
|
||||
$css->add_property( 'border-width', $attributes['markBorderWidth'] . 'px' );
|
||||
}
|
||||
if ( ! empty( $attributes['markBorderStyle'] ) && 'solid' !== $attributes['markBorderStyle'] ) {
|
||||
$css->add_property( 'border-style', $attributes['markBorderStyle'] );
|
||||
}
|
||||
$css->render_border_styles( $attributes, 'markBorderStyles' );
|
||||
$css->render_border_radius( $attributes, 'markBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
|
||||
$css->add_property( '-webkit-box-decoration-break', 'clone' );
|
||||
$css->add_property( 'box-decoration-break', 'clone' );
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->render_border_radius( $attributes, 'tabletMarkBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->render_border_radius( $attributes, 'mobileMarkBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
$mark_padding_args = array(
|
||||
'desktop_key' => 'markPadding',
|
||||
'tablet_key' => 'markTabPadding',
|
||||
'mobile_key' => 'markMobilePadding',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'markPadding', 'padding', $mark_padding_args );
|
||||
|
||||
// Inline Image.
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . ' img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] img.kb-inline-image' );
|
||||
// Ensure default value if inlineImageWidth desktop value is not set or empty.
|
||||
if ( empty( $attributes['inlineImageWidth'] ) || ! is_array( $attributes['inlineImageWidth'] ) || ! isset( $attributes['inlineImageWidth'][0] ) || ! is_numeric( $attributes['inlineImageWidth'][0] ) ) {
|
||||
$css->add_property( 'width', '150px' );
|
||||
$css->add_property( 'display', 'inline-block' );
|
||||
}
|
||||
// Render responsive range will handle desktop, tablet, and mobile if values are set.
|
||||
$css->render_responsive_range( $attributes, 'inlineImageWidth', 'width' );
|
||||
if ( ! empty( $attributes['inlineImageVerticalAlign'] ) ) {
|
||||
$css->add_property( 'vertical-align', $attributes['inlineImageVerticalAlign'] );
|
||||
}
|
||||
// Add aspect-ratio if useRatio is enabled.
|
||||
if ( ! empty( $attributes['useRatio'] ) && ! empty( $attributes['ratio'] ) ) {
|
||||
$aspect_ratio = '';
|
||||
switch ( $attributes['ratio'] ) {
|
||||
case 'land43':
|
||||
$aspect_ratio = '4 / 3';
|
||||
break;
|
||||
case 'land32':
|
||||
$aspect_ratio = '3 / 2';
|
||||
break;
|
||||
case 'land169':
|
||||
$aspect_ratio = '16 / 9';
|
||||
break;
|
||||
case 'land21':
|
||||
$aspect_ratio = '2 / 1';
|
||||
break;
|
||||
case 'land31':
|
||||
$aspect_ratio = '3 / 1';
|
||||
break;
|
||||
case 'land41':
|
||||
$aspect_ratio = '4 / 1';
|
||||
break;
|
||||
case 'port34':
|
||||
$aspect_ratio = '3 / 4';
|
||||
break;
|
||||
case 'port23':
|
||||
$aspect_ratio = '2 / 3';
|
||||
break;
|
||||
case 'port916':
|
||||
$aspect_ratio = '9 / 16';
|
||||
break;
|
||||
case 'square':
|
||||
$aspect_ratio = '1 / 1';
|
||||
break;
|
||||
}
|
||||
if ( ! empty( $aspect_ratio ) ) {
|
||||
$css->add_property( 'aspect-ratio', $aspect_ratio );
|
||||
$css->add_property( 'object-fit', 'cover' );
|
||||
}
|
||||
}
|
||||
$css->render_border_styles( $attributes, 'inlineImageBorderStyles' );
|
||||
$css->render_border_radius( $attributes, 'inlineImageBorderRadius', ( ! empty( $attributes['inlineImageBorderRadiusUnit'] ) ? $attributes['inlineImageBorderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->render_border_radius( $attributes, 'tabletInlineImageBorderRadius', ( ! empty( $attributes['inlineImageBorderRadiusUnit'] ) ? $attributes['inlineImageBorderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->render_border_radius( $attributes, 'mobileInlineImageBorderRadius', ( ! empty( $attributes['inlineImageBorderRadiusUnit'] ) ? $attributes['inlineImageBorderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
// Link.
|
||||
if ( ! empty( $attributes['linkColor'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] a, .kt-adv-heading-link' . $unique_id . ', .kt-adv-heading-link' . $unique_id . ' .kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"]' );
|
||||
if ( ! empty( $attributes['linkColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['linkColor'] ) );
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['linkHoverColor'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] a:hover, .kt-adv-heading-link' . $unique_id . ':hover, .kt-adv-heading-link' . $unique_id . ':hover .kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"]' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['linkHoverColor'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['linkStyle'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] a, a.kb-advanced-heading-link.kt-adv-heading-link' . $unique_id );
|
||||
if ( 'none' === $attributes['linkStyle'] ) {
|
||||
$css->add_property( 'text-decoration', 'none' );
|
||||
} else if ( $attributes['linkStyle'] === 'underline' ) {
|
||||
$css->add_property( 'text-decoration', 'underline' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] a:hover, a.kb-advanced-heading-link.kt-adv-heading-link' . $unique_id . ':hover' );
|
||||
$css->add_property( 'text-decoration', 'underline' );
|
||||
} else if ( $attributes['linkStyle'] === 'hover_underline' ) {
|
||||
$css->add_property( 'text-decoration', 'none' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] a:hover, a.kb-advanced-heading-link.kt-adv-heading-link' . $unique_id . ':hover' );
|
||||
$css->add_property( 'text-decoration', 'underline' );
|
||||
}
|
||||
}
|
||||
// Tablet.
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . ' mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading' . $unique_id . '[data-kb-block="kb-adv-heading' . $unique_id . '"] mark.kt-highlight' );
|
||||
if ( ! empty( $attributes['markSize'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][1], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markLineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['markLineHeight'][1] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( ! empty( $attributes['markSize'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][2], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markLineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['markLineHeight'][2] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* This block is conditionally dynamic. It's only rendered dynamically if the heading includes an icon.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
if ( strpos( $content, 'kt-typed-text') !== false ) {
|
||||
$this->enqueue_script( 'kadence-blocks-' . $this->block_name );
|
||||
}
|
||||
if ( strpos( $content, 'kb-tooltips') !== false || ( ! empty( $attributes['icon'] ) && ! empty( $attributes['iconTooltip'] ) ) ) {
|
||||
$this->enqueue_script( 'kadence-blocks-tippy' );
|
||||
}
|
||||
|
||||
$should_wrap_content = ! empty( $attributes['icon'] ) ||
|
||||
( ! empty( $attributes['enableTextGradient'] ) && strpos( $content, 'kt-typed-text' ) === false );
|
||||
|
||||
if ( $should_wrap_content ) {
|
||||
$tag_name = $this->get_html_tag( $attributes, 'htmlTag', 'h2', $this->allowed_html_tags, 'level' );
|
||||
$text_content = $this->get_inner_content( $content, $tag_name );
|
||||
// Start empty.
|
||||
$content = '';
|
||||
$reveal_animation = ( ! empty( $attributes['kadenceAnimation'] ) && ( 'reveal-left' === $attributes['kadenceAnimation'] || 'reveal-right' === $attributes['kadenceAnimation'] || 'reveal-up' === $attributes['kadenceAnimation'] || 'reveal-down' === $attributes['kadenceAnimation'] ) ? true : false );
|
||||
$wrapper = $reveal_animation ? true : false;
|
||||
$icon_side = ! empty( $attributes['iconSide'] ) ? $attributes['iconSide'] : 'left';
|
||||
$classes = array( 'kt-adv-heading' . $unique_id, 'wp-block-kadence-advancedheading' );
|
||||
if ( ! empty( $attributes['icon'] ) ) {
|
||||
$classes[] = 'kt-adv-heading-has-icon';
|
||||
}
|
||||
if ( ! empty( $attributes['link'] ) && ! empty( $attributes['linkStyle'] ) ) {
|
||||
$classes[] = 'hls-' . $attributes['linkStyle'];
|
||||
}
|
||||
if ( ! empty( $attributes['className'] ) && ! $wrapper && empty( $attributes['link'] ) ) {
|
||||
$classes[] = $attributes['className'];
|
||||
}
|
||||
if ( ! empty( $attributes['colorClass'] ) ) {
|
||||
$classes[] = 'has-' . $attributes['colorClass'] . '-color';
|
||||
$classes[] = 'has-text-color';
|
||||
}
|
||||
if ( ! empty( $attributes['backgroundColorClass'] ) ) {
|
||||
$classes[] = 'has-' . $attributes['backgroundColorClass'] . '-background-color';
|
||||
$classes[] = 'has-background';
|
||||
}
|
||||
$content_args = array(
|
||||
'class' => implode( ' ', $classes ),
|
||||
'data-kb-block' => 'kb-adv-heading' . $unique_id,
|
||||
);
|
||||
if ( ! empty( $attributes['anchor'] ) ) {
|
||||
$content_args['id'] = $attributes['anchor'];
|
||||
}
|
||||
$content_args = kadence_apply_aos_wrapper_args( $attributes, $content_args );
|
||||
$inner_content_attributes = array();
|
||||
foreach ( $content_args as $key => $value ) {
|
||||
$inner_content_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$inner_content_attributes = implode( ' ', $inner_content_attributes );
|
||||
$icon_left = '';
|
||||
$icon_right = '';
|
||||
if ( ! empty( $attributes['icon'] ) ) {
|
||||
if ( 'left' === $icon_side ) {
|
||||
$icon_left = $this->get_icon( $attributes );
|
||||
}
|
||||
if ( 'right' === $icon_side ) {
|
||||
$icon_right = $this->get_icon( $attributes );
|
||||
}
|
||||
}
|
||||
$content = sprintf( '<%1$s %2$s>%3$s<span class="kb-adv-text-inner">%4$s</span>%5$s</%1$s>', $tag_name, $inner_content_attributes, $icon_left, $text_content, $icon_right );
|
||||
if ( ! empty( $attributes['link'] ) ) {
|
||||
$link_classes = array( 'kb-advanced-heading-link', 'kt-adv-heading-link' . $unique_id );
|
||||
if ( ! empty( $attributes['linkStyle'] ) ) {
|
||||
$link_classes[] = 'hls-' . $attributes['linkStyle'];
|
||||
}
|
||||
if( ! $wrapper && !empty( $attributes['className'] ) ){
|
||||
$link_classes[] = $attributes['className'];
|
||||
}
|
||||
if ( ! empty( $attributes['class'] ) && ! $wrapper ) {
|
||||
$link_classes[] = $attributes['class'];
|
||||
}
|
||||
$link_args = array(
|
||||
'class' => implode( ' ', $link_classes ),
|
||||
);
|
||||
$link_args['href'] = esc_url( do_shortcode( $attributes['link'] ) );
|
||||
$rel_add = '';
|
||||
if ( ! empty( $attributes['linkTarget'] ) && $attributes['linkTarget'] ) {
|
||||
$link_args['target'] = '_blank';
|
||||
$rel_add .= 'noreferrer noopener';
|
||||
}
|
||||
if ( isset( $attributes['linkNoFollow'] ) && $attributes['linkNoFollow'] ) {
|
||||
if ( ! empty( $rel_add ) ) {
|
||||
$rel_add .= ' nofollow';
|
||||
} else {
|
||||
$rel_add .= 'nofollow';
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['linkSponsored'] ) && $attributes['linkSponsored'] ) {
|
||||
if ( ! empty( $rel_add ) ) {
|
||||
$rel_add .= ' sponsored';
|
||||
} else {
|
||||
$rel_add .= 'sponsored';
|
||||
}
|
||||
}
|
||||
if ( ! empty( $rel_add ) ) {
|
||||
$link_args['rel'] = $rel_add;
|
||||
}
|
||||
$link_attributes = array();
|
||||
foreach ( $link_args as $key => $value ) {
|
||||
$link_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$link_attributes = implode( ' ', $link_attributes );
|
||||
$content = sprintf( '<a %1$s>%2$s</a>', $link_attributes, $content );
|
||||
}
|
||||
if ( $wrapper ) {
|
||||
$wrapper_classes = array( 'kb-adv-heading-wrap' . $unique_id, 'kadence-advanced-heading-wrapper' );
|
||||
if ( $reveal_animation ) {
|
||||
$wrapper_classes[] = 'kadence-heading-clip-animation';
|
||||
}
|
||||
if ( ! empty( $attributes['class'] ) && $wrapper ) {
|
||||
$wrapper_classes[] = $attributes['class'];
|
||||
}
|
||||
$wrapper_args = array(
|
||||
'class' => implode( ' ', $wrapper_classes ),
|
||||
);
|
||||
$wrapper_attributes = array();
|
||||
foreach ( $wrapper_args as $key => $value ) {
|
||||
$wrapper_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$wrapper_attributes = implode( ' ', $wrapper_attributes );
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $content );
|
||||
}
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
|
||||
// Skip calling parent because this block does not have a dedicated CSS file.
|
||||
// parent::register_scripts();
|
||||
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_style( 'kadence-blocks-' . $this->block_name, false );
|
||||
$heading_css = <<<'CSS'
|
||||
.wp-block-kadence-advancedheading mark{background:transparent;border-style:solid;border-width:0}
|
||||
.wp-block-kadence-advancedheading mark.kt-highlight{color:#f76a0c;}
|
||||
.kb-adv-heading-icon{display: inline-flex;justify-content: center;align-items: center;}
|
||||
.is-layout-constrained > .kb-advanced-heading-link {display: block;}
|
||||
CSS;
|
||||
|
||||
// Style to prevent padding conflict with WordPress core style for headings and paragraphs.
|
||||
// Reference: https://stellarwp.atlassian.net/browse/KAD-5283
|
||||
$heading_css .= '.wp-block-kadence-advancedheading.has-background{padding: 0;}';
|
||||
|
||||
// Short term fix for an issue with heading wrapping.
|
||||
if ( class_exists( '\Kadence\Theme' ) ) {
|
||||
$heading_css .= <<<'CSS'
|
||||
.single-content .kadence-advanced-heading-wrapper h1,
|
||||
.single-content .kadence-advanced-heading-wrapper h2,
|
||||
.single-content .kadence-advanced-heading-wrapper h3,
|
||||
.single-content .kadence-advanced-heading-wrapper h4,
|
||||
.single-content .kadence-advanced-heading-wrapper h5,
|
||||
.single-content .kadence-advanced-heading-wrapper h6 {margin: 1.5em 0 .5em;}
|
||||
.single-content .kadence-advanced-heading-wrapper+* { margin-top:0;}
|
||||
CSS;
|
||||
}
|
||||
|
||||
// Add screen reader text styles
|
||||
$heading_css .= '.kb-screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);}';
|
||||
wp_add_inline_style( 'kadence-blocks-' . $this->block_name, $heading_css );
|
||||
|
||||
wp_register_script( 'kadence-blocks-typed-js', KADENCE_BLOCKS_URL . 'includes/assets/js/typed.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-advanced-heading.min.js', array( 'kadence-blocks-typed-js' ), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
wp_register_script( 'kadence-blocks-popper', KADENCE_BLOCKS_URL . 'includes/assets/js/popper.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-tippy', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-tippy.min.js', array( 'kadence-blocks-popper' ), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
/**
|
||||
* Get the text content.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
*/
|
||||
private function get_inner_content( $string, $tagname ) {
|
||||
$pattern = "#<\s*?$tagname\b[^>]*>(.*?)</$tagname\b[^>]*>#s";
|
||||
preg_match( $pattern, $string, $matches );
|
||||
if ( isset( $matches[1] ) ) {
|
||||
return $matches[1];
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the Icon.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
*/
|
||||
private function get_icon( $attributes ) {
|
||||
$svg_icon = '';
|
||||
$icon_side = ! empty( $attributes['iconSide'] ) ? $attributes['iconSide'] : 'left';
|
||||
if ( ! empty( $attributes['icon'] ) ) {
|
||||
$type = substr( $attributes['icon'], 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = 2;
|
||||
}
|
||||
$title = ( ! empty ( $attributes['iconTitle'] ) ? $attributes['iconTitle'] : '' );
|
||||
$hidden = ( empty( $title ) ? true : false );
|
||||
$svg_icon = Kadence_Blocks_Svg_Render::render( $attributes['icon'], $fill, $stroke_width, $title, $hidden );
|
||||
}
|
||||
$tooltip_placement = '';
|
||||
if ( ! empty( $attributes['iconTooltip'] ) && ! empty( $attributes['iconTooltipPlacement'] ) ) {
|
||||
$tooltip_placement = ' data-tooltip-placement="' . esc_attr( $attributes['iconTooltipPlacement'] ) . '"';
|
||||
}
|
||||
if ( ! empty( $attributes['iconTooltip'] ) && isset( $attributes['iconTooltipDash'] ) && $attributes['iconTooltipDash'] ) {
|
||||
$tooltip_placement = ' data-kb-tooltip-dash="border"';
|
||||
}
|
||||
return '<span class="kb-svg-icon-wrap kb-adv-heading-icon kb-svg-icon-' . esc_attr( $attributes['icon'] ) . ' kb-adv-heading-icon-side-' . esc_attr( $icon_side ) . '"' . ( ! empty( $attributes['iconTooltip'] ) ? ' data-kb-tooltip-content="' . esc_attr( $attributes['iconTooltip'] ) . '" tabindex="0"' . $tooltip_placement : '' ) . '>' . $svg_icon . '</span>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the text orientation by updating CSS properties based on the specified orientation.
|
||||
*
|
||||
* @param object $css The CSS processor object used to apply properties.
|
||||
* @param string $textOrientation The specified text orientation. Possible values are 'horizontal', 'stacked', 'sideways-down', and 'sideways-up'.
|
||||
* @return void
|
||||
*/
|
||||
private function handle_text_orientation($css, $textOrientation) {
|
||||
switch ($textOrientation) {
|
||||
case 'horizontal':
|
||||
$css->add_property('writing-mode', 'horizontal-tb');
|
||||
$css->add_property('text-orientation', 'mixed');
|
||||
break;
|
||||
case 'stacked':
|
||||
$css->add_property('writing-mode', 'vertical-lr');
|
||||
$css->add_property('text-orientation', 'upright');
|
||||
break;
|
||||
case 'sideways-down':
|
||||
$css->add_property('writing-mode', 'vertical-lr');
|
||||
$css->add_property('text-orientation', 'sideways');
|
||||
break;
|
||||
case 'sideways-up':
|
||||
$css->add_property('writing-mode', 'sideways-lr');
|
||||
$css->add_property('text-orientation', 'sideways');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the max-height property for CSS generation based on block attributes.
|
||||
*
|
||||
* @param object $css The CSS generator object.
|
||||
* @param array $attributes The block attributes.
|
||||
* @param int $deviceIndex The index representing the current device context.
|
||||
* @param string $orientationKey The key that defines the orientation for the current context.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
private function handle_max_height($css, $attributes, $deviceIndex, $orientationKey) {
|
||||
if (
|
||||
isset($attributes['maxHeight']) &&
|
||||
is_array($attributes['maxHeight']) &&
|
||||
!empty($attributes['maxHeight'][$deviceIndex]) &&
|
||||
$attributes[$orientationKey] !== 'horizontal'
|
||||
) {
|
||||
$css->add_property(
|
||||
'max-height',
|
||||
$attributes['maxHeight'][$deviceIndex] .
|
||||
( !isset($attributes['maxHeightType'][$deviceIndex]) ? 'px' : $attributes['maxHeightType'][$deviceIndex] )
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the text shadow styles across desktop, tablet, and mobile devices based on the provided attributes.
|
||||
*
|
||||
* @param array $attributes An array of attributes containing text shadow properties for different breakpoints (desktop, tablet, and mobile).
|
||||
* @return void
|
||||
*/
|
||||
public function render_text_shadow( $attributes, $css ) {
|
||||
|
||||
if (!empty($attributes['textShadow']) &&
|
||||
is_array($attributes['textShadow'][0]) &&
|
||||
(!empty($attributes['enableTextShadow']) || !empty($attributes['textShadow'][0]['enable']))
|
||||
) {
|
||||
$textShadow = $attributes['textShadow'][0] ?? [];
|
||||
$textShadow['hOffset'] = $textShadow['hOffset'] ?? 1;
|
||||
$textShadow['vOffset'] = $textShadow['vOffset'] ?? 1;
|
||||
$textShadow['blur'] = $textShadow['blur'] ?? 1;
|
||||
$textShadow['color'] = $textShadow['color'] ?? null;
|
||||
$textShadow['opacity'] = $textShadow['opacity'] ?? 1.0; // Default is 0.2, but if it's undefed they set it at a time when the block defaults it to 1.0
|
||||
}
|
||||
|
||||
if (!empty($attributes['textShadowTablet']) && is_array($attributes['textShadowTablet'][0])) {
|
||||
$textShadowTablet = $attributes['textShadowTablet'][0] ?? [];
|
||||
$textShadowTablet['hOffset'] = $this->get_cascading_value(
|
||||
null, // No mobile value is considered here for tablet logic
|
||||
$textShadowTablet['hOffset'] ?? null,
|
||||
$attributes['textShadow'][0]['hOffset'] ?? null,
|
||||
1
|
||||
);
|
||||
$textShadowTablet['vOffset'] = $this->get_cascading_value(
|
||||
null,
|
||||
$textShadowTablet['vOffset'] ?? null,
|
||||
$attributes['textShadow'][0]['vOffset'] ?? null,
|
||||
1
|
||||
);
|
||||
$textShadowTablet['blur'] = $this->get_cascading_value(
|
||||
null,
|
||||
$textShadowTablet['blur'] ?? null,
|
||||
$attributes['textShadow'][0]['blur'] ?? null,
|
||||
1
|
||||
);
|
||||
$textShadowTablet['color'] = $this->get_cascading_value(
|
||||
null,
|
||||
$textShadowTablet['color'] ?? null,
|
||||
$attributes['textShadow'][0]['color'] ?? null,
|
||||
null // Default fallback value for color
|
||||
);
|
||||
$textShadowTablet['opacity'] = $this->get_cascading_value(
|
||||
null,
|
||||
$textShadowTablet['opacity'] ?? null,
|
||||
$attributes['textShadow'][0]['opacity'] ?? null,
|
||||
1
|
||||
);
|
||||
}
|
||||
if (!empty($attributes['textShadowMobile']) && is_array($attributes['textShadowMobile'][0])) {
|
||||
$textShadowMobile = $attributes['textShadowMobile'][0] ?? [];
|
||||
$textShadowMobile['hOffset'] = $this->get_cascading_value(
|
||||
$textShadowMobile['hOffset'] ?? null,
|
||||
$attributes['textShadowTablet'][0]['hOffset'] ?? null,
|
||||
$attributes['textShadow'][0]['hOffset'] ?? null,
|
||||
1
|
||||
);
|
||||
$textShadowMobile['vOffset'] = $this->get_cascading_value(
|
||||
$textShadowMobile['vOffset'] ?? null,
|
||||
$attributes['textShadowTablet'][0]['vOffset'] ?? null,
|
||||
$attributes['textShadow'][0]['vOffset'] ?? null,
|
||||
1
|
||||
);
|
||||
$textShadowMobile['blur'] = $this->get_cascading_value(
|
||||
$textShadowMobile['blur'] ?? null,
|
||||
$attributes['textShadowTablet'][0]['blur'] ?? null,
|
||||
$attributes['textShadow'][0]['blur'] ?? null,
|
||||
1
|
||||
);
|
||||
$textShadowMobile['color'] = $this->get_cascading_value(
|
||||
$textShadowMobile['color'] ?? null,
|
||||
$attributes['textShadowTablet'][0]['color'] ?? null,
|
||||
$attributes['textShadow'][0]['color'] ?? null,
|
||||
null
|
||||
);
|
||||
$textShadowMobile['opacity'] = $this->get_cascading_value(
|
||||
$textShadowMobile['opacity'] ?? null,
|
||||
$attributes['textShadowTablet'][0]['opacity'] ?? null,
|
||||
$attributes['textShadow'][0]['opacity'] ?? null,
|
||||
1
|
||||
);
|
||||
}
|
||||
|
||||
$responsiveTextShadow = [$textShadow, $textShadowTablet ?? null, $textShadowMobile ?? null];
|
||||
|
||||
foreach ($responsiveTextShadow as $key => $textShadow) {
|
||||
if (!empty($textShadow)) {
|
||||
if ( strpos($textShadow['color'], 'rgba') !== false ) {
|
||||
$shadow_string = ( ! empty( $textShadow['hOffset'] ) ? $textShadow['hOffset'] : '0' ) . 'px '
|
||||
. ( ! empty( $textShadow['vOffset'] ) ? $textShadow['vOffset'] : '0' ) . 'px '
|
||||
. ( ! empty( $textShadow['blur'] ) ? $textShadow['blur'] : '0' ) . 'px '
|
||||
. ( ! empty( $textShadow['color'] )
|
||||
? $css->render_color( $textShadow['color'] )
|
||||
: $css->render_color( '#000000', $textShadow['opacity'] )
|
||||
);
|
||||
} else {
|
||||
$shadow_string = ( ! empty( $textShadow['hOffset'] ) ? $textShadow['hOffset'] : '0' ) . 'px '
|
||||
. ( ! empty( $textShadow['vOffset'] ) ? $textShadow['vOffset'] : '0' ) . 'px '
|
||||
. ( ! empty( $textShadow['blur'] ) ? $textShadow['blur'] : '0' ) . 'px '
|
||||
. ( ! empty( $textShadow['color'] )
|
||||
? $css->render_color( $textShadow['color'], $textShadow['opacity'] )
|
||||
: $css->render_color( '#000000', $textShadow['opacity'] )
|
||||
);
|
||||
}
|
||||
|
||||
switch ($key) {
|
||||
case 0: $css->set_media_state('desktop'); break;
|
||||
case 1: $css->set_media_state('tablet'); break;
|
||||
case 2: $css->set_media_state('mobile'); break;
|
||||
}
|
||||
|
||||
$css->add_property('text-shadow', $shadow_string);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve the cascading value based on device-specific settings.
|
||||
*
|
||||
* @param mixed $mobile The value specifically set for mobile devices.
|
||||
* @param mixed $tablet The value specifically set for tablet devices.
|
||||
* @param mixed $default The default value if mobile and tablet values are not provided.
|
||||
* @param mixed $fallback The fallback value if none of the other values are set.
|
||||
*/
|
||||
public function get_cascading_value($mobile, $tablet, $default, $fallback) {
|
||||
if (isset($mobile) && $mobile !== '') {
|
||||
return $mobile;
|
||||
} elseif (isset($tablet) && $tablet !== '') {
|
||||
return $tablet;
|
||||
} elseif (isset($default) && $default !== '') {
|
||||
return $default;
|
||||
}
|
||||
return $fallback;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Advancedheading_Block::get_instance();
|
||||
@@ -0,0 +1,549 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Button Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Advanced Button.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Advancedbtn_Block extends Kadence_Blocks_Abstract_Block {
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'advancedbtn';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ', .site .entry-content .wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ', .wp-block-kadence-advancedbtn.kb-btns' . $unique_id . ', .site .entry-content .wp-block-kadence-advancedbtn.kb-btns' . $unique_id );
|
||||
|
||||
//the margin attribute on this block is non standard and should be updated
|
||||
if ( isset( $attributes['margin'][0] ) && is_array( $attributes['margin'][0] ) ) {
|
||||
$margin_unit = ( !empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' );
|
||||
$css->render_measure_output(
|
||||
array_merge( $attributes['margin'][0], array( 'marginType' => $margin_unit) ),
|
||||
'margin',
|
||||
'margin',
|
||||
array(
|
||||
'desktop_key' => 'desk',
|
||||
'tablet_key' => 'tablet',
|
||||
'mobile_key' => 'mobile',
|
||||
)
|
||||
);
|
||||
}
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kb-btns' . $unique_id );
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', array( 'unit_key' => 'paddingUnit' ) );
|
||||
$css->render_gap( $attributes );
|
||||
$h_property = 'justify-content';
|
||||
$v_property = 'align-items';
|
||||
if ( ! empty( $attributes['orientation'][0] ) ) {
|
||||
$css->add_property( 'flex-direction', $attributes['orientation'][0] );
|
||||
if ( $attributes['orientation'][0] === 'column' || $attributes['orientation'][0] === 'column-reverse' ) {
|
||||
$h_property = 'align-items';
|
||||
$v_property = 'justify-content';
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['hAlign'] ) ) {
|
||||
switch ( $attributes['hAlign'] ) {
|
||||
case 'left':
|
||||
$css->add_property( $h_property, 'flex-start' );
|
||||
break;
|
||||
case 'center':
|
||||
$css->add_property( $h_property, 'center' );
|
||||
break;
|
||||
case 'right':
|
||||
$css->add_property( $h_property, 'flex-end' );
|
||||
break;
|
||||
case 'space-between':
|
||||
if ( 'align-items' === $h_property ) {
|
||||
$css->add_property( $h_property, 'center' );
|
||||
} else {
|
||||
$css->add_property( $h_property, 'space-between' );
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['vAlign'] ) ) {
|
||||
switch ( $attributes['vAlign'] ) {
|
||||
case 'top':
|
||||
$css->add_property( $v_property, 'flex-start' );
|
||||
break;
|
||||
case 'center':
|
||||
$css->add_property( $v_property, 'center' );
|
||||
break;
|
||||
case 'bottom':
|
||||
$css->add_property( $v_property, 'flex-end' );
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Tablet.
|
||||
$css->set_media_state( 'tablet' );
|
||||
$update_align = false;
|
||||
if ( ! empty( $attributes['orientation'][1] ) ) {
|
||||
$update_align = true;
|
||||
$css->add_property( 'flex-direction', $attributes['orientation'][1] );
|
||||
if ( $attributes['orientation'][1] === 'column' || $attributes['orientation'][1] === 'column-reverse' ) {
|
||||
$h_property = 'align-items';
|
||||
$v_property = 'justify-content';
|
||||
} else if ( $attributes['orientation'][1] === 'row' || $attributes['orientation'][1] === 'row-reverse' ) {
|
||||
$h_property = 'justify-content';
|
||||
$v_property = 'align-items';
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['thAlign'] ) || $update_align ) {
|
||||
$align = ! empty( $attributes['thAlign'] ) ? $attributes['thAlign'] : '';
|
||||
if ( empty( $align ) ) {
|
||||
$align = ! empty( $attributes['hAlign'] ) ? $attributes['hAlign'] : 'center';
|
||||
}
|
||||
switch ( $align ) {
|
||||
case 'left':
|
||||
$css->add_property( $h_property, 'flex-start' );
|
||||
break;
|
||||
case 'center':
|
||||
$css->add_property( $h_property, 'center' );
|
||||
break;
|
||||
case 'right':
|
||||
$css->add_property( $h_property, 'flex-end' );
|
||||
break;
|
||||
case 'space-between':
|
||||
if ( 'align-items' === $h_property ) {
|
||||
$css->add_property( $h_property, 'center' );
|
||||
} else {
|
||||
$css->add_property( $h_property, 'space-between' );
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['tvAlign'] ) || $update_align ) {
|
||||
$align = ! empty( $attributes['tvAlign'] ) ? $attributes['tvAlign'] : '';
|
||||
if ( empty( $align ) ) {
|
||||
$align = ! empty( $attributes['vAlign'] ) ? $attributes['vAlign'] : 'center';
|
||||
}
|
||||
switch ( $align ) {
|
||||
case 'top':
|
||||
$css->add_property( $v_property, 'flex-start' );
|
||||
break;
|
||||
case 'center':
|
||||
$css->add_property( $v_property, 'center' );
|
||||
break;
|
||||
case 'bottom':
|
||||
$css->add_property( $v_property, 'flex-end' );
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Mobile.
|
||||
$css->set_media_state( 'mobile' );
|
||||
$update_align = false;
|
||||
if ( ! empty( $attributes['orientation'][2] ) ) {
|
||||
$update_align = true;
|
||||
$css->add_property( 'flex-direction', $attributes['orientation'][2] );
|
||||
if ( $attributes['orientation'][2] === 'column' || $attributes['orientation'][2] === 'column-reverse' ) {
|
||||
$h_property = 'align-items';
|
||||
$v_property = 'justify-content';
|
||||
} else if ( $attributes['orientation'][2] === 'row' || $attributes['orientation'][2] === 'row-reverse' ) {
|
||||
$h_property = 'justify-content';
|
||||
$v_property = 'align-items';
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['mhAlign'] ) || $update_align ) {
|
||||
$align = ! empty( $attributes['mhAlign'] ) ? $attributes['mhAlign'] : '';
|
||||
if ( empty( $align ) ) {
|
||||
$align = ! empty( $attributes['thAlign'] ) ? $attributes['thAlign'] : '';
|
||||
}
|
||||
if ( empty( $align ) ) {
|
||||
$align = ! empty( $attributes['hAlign'] ) ? $attributes['hAlign'] : 'center';
|
||||
}
|
||||
switch ( $align ) {
|
||||
case 'left':
|
||||
$css->add_property( $h_property, 'flex-start' );
|
||||
break;
|
||||
case 'center':
|
||||
$css->add_property( $h_property, 'center' );
|
||||
break;
|
||||
case 'right':
|
||||
$css->add_property( $h_property, 'flex-end' );
|
||||
break;
|
||||
case 'space-between':
|
||||
if ( 'align-items' === $h_property ) {
|
||||
$css->add_property( $h_property, 'center' );
|
||||
} else {
|
||||
$css->add_property( $h_property, 'space-between' );
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['mvAlign'] ) || $update_align ) {
|
||||
$align = ! empty( $attributes['mvAlign'] ) ? $attributes['mvAlign'] : '';
|
||||
if ( empty( $align ) ) {
|
||||
$align = ! empty( $attributes['tvAlign'] ) ? $attributes['tvAlign'] : '';
|
||||
}
|
||||
if ( empty( $align ) ) {
|
||||
$align = ! empty( $attributes['vAlign'] ) ? $attributes['vAlign'] : 'center';
|
||||
}
|
||||
switch ( $align ) {
|
||||
case 'top':
|
||||
$css->add_property( $v_property, 'flex-start' );
|
||||
break;
|
||||
case 'center':
|
||||
$css->add_property( $v_property, 'center' );
|
||||
break;
|
||||
case 'bottom':
|
||||
$css->add_property( $v_property, 'flex-end' );
|
||||
break;
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
// Old CSS for backwards support.
|
||||
if ( isset( $attributes['btns'] ) && is_array( $attributes['btns'] ) ) {
|
||||
foreach ( $attributes['btns'] as $btnkey => $btnvalue ) {
|
||||
if ( is_array( $btnvalue ) ) {
|
||||
if ( isset( $btnvalue['target'] ) && ! empty( $btnvalue['target'] ) && 'video' == $btnvalue['target'] ) {
|
||||
$this->enqueue_style( 'kadence-simplelightbox-css' );
|
||||
$this->enqueue_script( 'kadence-blocks-videolight-js' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['typography'] ) || isset( $attributes['textTransform'] ) || isset( $attributes['fontWeight'] ) || isset( $attributes['fontStyle'] ) ) {
|
||||
$css->set_selector( '.kt-btns' . $unique_id . ' .kt-button' );
|
||||
if ( isset( $attributes['typography'] ) && ! empty( $attributes['typography'] ) ) {
|
||||
$css->add_property( 'font-family', $css->render_font_family( $attributes['typography'] ) );
|
||||
}
|
||||
if ( isset( $attributes['fontWeight'] ) && ! empty( $attributes['fontWeight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $attributes['fontWeight'] ) );
|
||||
}
|
||||
if ( isset( $attributes['fontStyle'] ) && ! empty( $attributes['fontStyle'] ) ) {
|
||||
$css->add_property( 'font-style', $attributes['fontStyle'] );
|
||||
}
|
||||
if ( isset( $attributes['textTransform'] ) && ! empty( $attributes['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $attributes['textTransform'] );
|
||||
}
|
||||
}
|
||||
|
||||
if ( isset( $attributes['btns'] ) && is_array( $attributes['btns'] ) ) {
|
||||
foreach ( $attributes['btns'] as $btnkey => $btnvalue ) {
|
||||
if ( is_array( $btnvalue ) ) {
|
||||
$this->enqueue_style( 'kb-button-deprecated-styles' );
|
||||
if ( isset( $btnvalue['gap'] ) && is_numeric( $btnvalue['gap'] ) ) {
|
||||
$css->set_selector( '.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey );
|
||||
$css->add_property( 'margin-right', $btnvalue['gap'] . 'px' );
|
||||
|
||||
if ( is_rtl() ) {
|
||||
$css->set_selector( '.rtl .kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey );
|
||||
$css->add_property( 'margin-left', $btnvalue['gap'] . 'px' );
|
||||
$css->add_property( 'margin-right', '0px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $btnvalue['backgroundType'] ) && 'gradient' === $btnvalue['backgroundType'] || isset( $btnvalue['backgroundHoverType'] ) && 'gradient' === $btnvalue['backgroundHoverType'] ) {
|
||||
$bgtype = 'gradient';
|
||||
} else {
|
||||
$bgtype = 'solid';
|
||||
}
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button' );
|
||||
if ( isset( $attributes['widthType'] ) && 'fixed' === $attributes['widthType'] && isset( $btnvalue['width'] ) && is_array( $btnvalue['width'] ) && isset( $btnvalue['width'][0] ) && ! empty( $btnvalue['width'][0] ) ) {
|
||||
$css->add_property( 'width', $btnvalue['width'][0] . 'px' );
|
||||
}
|
||||
if ( ! isset( $btnvalue['btnSize'] ) || ( isset( $btnvalue['btnSize'] ) && 'custom' === $btnvalue['btnSize'] ) ) {
|
||||
if ( isset( $btnvalue['paddingLR'] ) && is_numeric( $btnvalue['paddingLR'] ) ) {
|
||||
$css->add_property( 'padding-left', $btnvalue['paddingLR'] . 'px' );
|
||||
$css->add_property( 'padding-right', $btnvalue['paddingLR'] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['paddingBT'] ) && is_numeric( $btnvalue['paddingBT'] ) ) {
|
||||
$css->add_property( 'padding-top', $btnvalue['paddingBT'] . 'px' );
|
||||
$css->add_property( 'padding-bottom', $btnvalue['paddingBT'] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $btnvalue['color'] ) && ! empty( $btnvalue['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $btnvalue['color'] ) );
|
||||
}
|
||||
if ( isset( $btnvalue['size'] ) && ! empty( $btnvalue['size'] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $btnvalue['size'], ( isset( $btnvalue['sizeType'] ) && ! empty( $btnvalue['sizeType'] ) ? $btnvalue['sizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $btnvalue['backgroundType'] ) && 'gradient' === $btnvalue['backgroundType'] ) {
|
||||
$bg1 = ( ! isset( $btnvalue['background'] ) || 'transparent' === $btnvalue['background'] ? 'rgba(255,255,255,0)' : $css->render_color( $btnvalue['background'], ( isset( $btnvalue['backgroundOpacity'] ) && is_numeric( $btnvalue['backgroundOpacity'] ) ? $btnvalue['backgroundOpacity'] : 1 ) ) );
|
||||
$bg2 = ( isset( $btnvalue['gradient'][0] ) && ! empty( $btnvalue['gradient'][0] ) ? $css->render_color( $btnvalue['gradient'][0], ( isset( $btnvalue['gradient'][1] ) && is_numeric( $btnvalue['gradient'][1] ) ? $btnvalue['gradient'][1] : 1 ) ) : $css->render_color( '#999999', ( isset( $btnvalue['gradient'][1] ) && is_numeric( $btnvalue['gradient'][1] ) ? $btnvalue['gradient'][1] : 1 ) ) );
|
||||
if ( isset( $btnvalue['gradient'][4] ) && 'radial' === $btnvalue['gradient'][4] ) {
|
||||
$css->add_property( 'background', 'radial-gradient(at ' . ( isset( $btnvalue['gradient'][6] ) && ! empty( $btnvalue['gradient'][6] ) ? $btnvalue['gradient'][6] : 'center center' ) . ', ' . $bg1 . ' ' . ( isset( $btnvalue['gradient'][2] ) && is_numeric( $btnvalue['gradient'][2] ) ? $btnvalue['gradient'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $btnvalue['gradient'][3] ) && is_numeric( $btnvalue['gradient'][3] ) ? $btnvalue['gradient'][3] : '100' ) . '%)' );
|
||||
} else if ( ! isset( $btnvalue['gradient'][4] ) || 'radial' !== $btnvalue['gradient'][4] ) {
|
||||
$css->add_property( 'background', 'linear-gradient(' . ( isset( $btnvalue['gradient'][5] ) && ! empty( $btnvalue['gradient'][5] ) ? $btnvalue['gradient'][5] : '180' ) . 'deg, ' . $bg1 . ' ' . ( isset( $btnvalue['gradient'][2] ) && is_numeric( $btnvalue['gradient'][2] ) ? $btnvalue['gradient'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $btnvalue['gradient'][3] ) && is_numeric( $btnvalue['gradient'][3] ) ? $btnvalue['gradient'][3] : '100' ) . '%)' );
|
||||
}
|
||||
} else if ( isset( $btnvalue['background'] ) && ! empty( $btnvalue['background'] ) && 'transparent' === $btnvalue['background'] ) {
|
||||
$css->add_property( 'background', 'transparent' );
|
||||
} else if ( isset( $btnvalue['background'] ) && ! empty( $btnvalue['background'] ) ) {
|
||||
$alpha = ( isset( $btnvalue['backgroundOpacity'] ) && is_numeric( $btnvalue['backgroundOpacity'] ) ? $btnvalue['backgroundOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $btnvalue['background'], $alpha ) );
|
||||
}
|
||||
if ( isset( $btnvalue['border'] ) && ! empty( $btnvalue['border'] ) ) {
|
||||
$alpha = ( isset( $btnvalue['borderOpacity'] ) && is_numeric( $btnvalue['borderOpacity'] ) ? $btnvalue['borderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $btnvalue['border'], $alpha ) );
|
||||
}
|
||||
if ( ! empty( $btnvalue['borderStyle'] ) ) {
|
||||
$css->add_property( 'border-style', $btnvalue['borderStyle'] );
|
||||
} elseif ( ! empty( $btnvalue['borderWidth'] ) ) {
|
||||
$css->add_property( 'border-style', 'solid' );
|
||||
}
|
||||
if ( isset( $btnvalue['boxShadow'] ) && is_array( $btnvalue['boxShadow'] ) && isset( $btnvalue['boxShadow'][0] ) && true === $btnvalue['boxShadow'][0] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $btnvalue['boxShadow'][7] ) && true === $btnvalue['boxShadow'][7] ? 'inset ' : '' ) . ( isset( $btnvalue['boxShadow'][3] ) && is_numeric( $btnvalue['boxShadow'][3] ) ? $btnvalue['boxShadow'][3] : '1' ) . 'px ' . ( isset( $btnvalue['boxShadow'][4] ) && is_numeric( $btnvalue['boxShadow'][4] ) ? $btnvalue['boxShadow'][4] : '1' ) . 'px ' . ( isset( $btnvalue['boxShadow'][5] ) && is_numeric( $btnvalue['boxShadow'][5] ) ? $btnvalue['boxShadow'][5] : '2' ) . 'px ' . ( isset( $btnvalue['boxShadow'][6] ) && is_numeric( $btnvalue['boxShadow'][6] ) ? $btnvalue['boxShadow'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $btnvalue['boxShadow'][1] ) && ! empty( $btnvalue['boxShadow'][1] ) ? $btnvalue['boxShadow'][1] : '#000000' ), ( isset( $btnvalue['boxShadow'][2] ) && is_numeric( $btnvalue['boxShadow'][2] ) ? $btnvalue['boxShadow'][2] : 0.2 ) ) );
|
||||
}
|
||||
|
||||
$css->render_measure_output( $btnvalue, 'margin', 'margin', [ 'unit_key' => 'marginUnit' ] );
|
||||
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button:focus' );
|
||||
if ( isset( $btnvalue['colorHover'] ) && ! empty( $btnvalue['colorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $btnvalue['colorHover'] ) );
|
||||
}
|
||||
if ( isset( $btnvalue['borderHover'] ) && ! empty( $btnvalue['borderHover'] ) ) {
|
||||
$alpha = ( isset( $btnvalue['borderHoverOpacity'] ) && is_numeric( $btnvalue['borderHoverOpacity'] ) ? $btnvalue['borderHoverOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $btnvalue['borderHover'], $alpha ) );
|
||||
}
|
||||
if ( isset( $btnvalue['boxShadowHover'] ) && is_array( $btnvalue['boxShadowHover'] ) && isset( $btnvalue['boxShadowHover'][0] ) && true === $btnvalue['boxShadowHover'][0] && isset( $btnvalue['boxShadowHover'][7] ) && true !== $btnvalue['boxShadowHover'][7] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $btnvalue['boxShadowHover'][7] ) && true === $btnvalue['boxShadowHover'][7] ? 'inset ' : '' ) . ( isset( $btnvalue['boxShadowHover'][3] ) && is_numeric( $btnvalue['boxShadowHover'][3] ) ? $btnvalue['boxShadowHover'][3] : '2' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][4] ) && is_numeric( $btnvalue['boxShadowHover'][4] ) ? $btnvalue['boxShadowHover'][4] : '2' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][5] ) && is_numeric( $btnvalue['boxShadowHover'][5] ) ? $btnvalue['boxShadowHover'][5] : '3' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][6] ) && is_numeric( $btnvalue['boxShadowHover'][6] ) ? $btnvalue['boxShadowHover'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $btnvalue['boxShadowHover'][1] ) && ! empty( $btnvalue['boxShadowHover'][1] ) ? $btnvalue['boxShadowHover'][1] : '#000000' ), ( isset( $btnvalue['boxShadowHover'][2] ) && is_numeric( $btnvalue['boxShadowHover'][2] ) ? $btnvalue['boxShadowHover'][2] : 0.4 ) ) );
|
||||
}
|
||||
if ( 'gradient' === $bgtype ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button::before' );
|
||||
$css->add_property( 'transition', 'opacity .3s ease-in-out' );
|
||||
if ( isset( $btnvalue['backgroundHoverType'] ) && 'gradient' === $btnvalue['backgroundHoverType'] ) {
|
||||
$bg1 = ( ! isset( $btnvalue['backgroundHover'] ) ? $css->render_color( '#444444', ( isset( $btnvalue['backgroundHoverOpacity'] ) && is_numeric( $btnvalue['backgroundHoverOpacity'] ) ? $btnvalue['backgroundHoverOpacity'] : 1 ) ) : $css->render_color( $btnvalue['backgroundHover'], ( isset( $btnvalue['backgroundHoverOpacity'] ) && is_numeric( $btnvalue['backgroundHoverOpacity'] ) ? $btnvalue['backgroundHoverOpacity'] : 1 ) ) );
|
||||
$bg2 = ( isset( $btnvalue['gradientHover'][0] ) && ! empty( $btnvalue['gradientHover'][0] ) ? $css->render_color( $btnvalue['gradientHover'][0], ( isset( $btnvalue['gradientHover'][1] ) && is_numeric( $btnvalue['gradientHover'][1] ) ? $btnvalue['gradientHover'][1] : 1 ) ) : $css->render_color( '#999999', ( isset( $btnvalue['gradientHover'][1] ) && is_numeric( $btnvalue['gradientHover'][1] ) ? $btnvalue['gradientHover'][1] : 1 ) ) );
|
||||
if ( isset( $btnvalue['gradientHover'][4] ) && 'radial' === $btnvalue['gradientHover'][4] ) {
|
||||
$css->add_property( 'background', 'radial-gradient(at ' . ( isset( $btnvalue['gradientHover'][6] ) && ! empty( $btnvalue['gradientHover'][6] ) ? $btnvalue['gradientHover'][6] : 'center center' ) . ', ' . $bg1 . ' ' . ( isset( $btnvalue['gradientHover'][2] ) && is_numeric( $btnvalue['gradientHover'][2] ) ? $btnvalue['gradientHover'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $btnvalue['gradientHover'][3] ) && is_numeric( $btnvalue['gradientHover'][3] ) ? $btnvalue['gradientHover'][3] : '100' ) . '%)' );
|
||||
} else if ( ! isset( $btnvalue['gradientHover'][4] ) || 'radial' !== $btnvalue['gradientHover'][4] ) {
|
||||
$css->add_property( 'background', 'linear-gradient(' . ( isset( $btnvalue['gradientHover'][5] ) && ! empty( $btnvalue['gradientHover'][5] ) ? $btnvalue['gradientHover'][5] : '180' ) . 'deg, ' . $bg1 . ' ' . ( isset( $btnvalue['gradientHover'][2] ) && is_numeric( $btnvalue['gradientHover'][2] ) ? $btnvalue['gradientHover'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $btnvalue['gradientHover'][3] ) && is_numeric( $btnvalue['gradientHover'][3] ) ? $btnvalue['gradientHover'][3] : '100' ) . '%)' );
|
||||
}
|
||||
} else if ( isset( $btnvalue['backgroundHover'] ) && ! empty( $btnvalue['backgroundHover'] ) ) {
|
||||
$alpha = ( isset( $btnvalue['backgroundHoverOpacity'] ) && is_numeric( $btnvalue['backgroundHoverOpacity'] ) ? $btnvalue['backgroundHoverOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $btnvalue['backgroundHover'], $alpha ) );
|
||||
}
|
||||
if ( isset( $btnvalue['boxShadowHover'] ) && is_array( $btnvalue['boxShadowHover'] ) && isset( $btnvalue['boxShadowHover'][0] ) && true === $btnvalue['boxShadowHover'][0] && isset( $btnvalue['boxShadowHover'][7] ) && true === $btnvalue['boxShadowHover'][7] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $btnvalue['boxShadowHover'][7] ) && true === $btnvalue['boxShadowHover'][7] ? 'inset ' : '' ) . ( isset( $btnvalue['boxShadowHover'][3] ) && is_numeric( $btnvalue['boxShadowHover'][3] ) ? $btnvalue['boxShadowHover'][3] : '2' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][4] ) && is_numeric( $btnvalue['boxShadowHover'][4] ) ? $btnvalue['boxShadowHover'][4] : '2' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][5] ) && is_numeric( $btnvalue['boxShadowHover'][5] ) ? $btnvalue['boxShadowHover'][5] : '3' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][6] ) && is_numeric( $btnvalue['boxShadowHover'][6] ) ? $btnvalue['boxShadowHover'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $btnvalue['boxShadowHover'][1] ) && ! empty( $btnvalue['boxShadowHover'][1] ) ? $btnvalue['boxShadowHover'][1] : '#000000' ), ( isset( $btnvalue['boxShadowHover'][2] ) && is_numeric( $btnvalue['boxShadowHover'][2] ) ? $btnvalue['boxShadowHover'][2] : 0.4 ) ) );
|
||||
$css->add_property( 'border-radius', ( isset( $btnvalue['borderRadius'] ) && is_numeric( $btnvalue['borderRadius'] ) ? $btnvalue['borderRadius'] : '3' ) . 'px' );
|
||||
}
|
||||
} else {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button::before' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button:focus' );
|
||||
if ( isset( $btnvalue['backgroundHover'] ) && ! empty( $btnvalue['backgroundHover'] ) ) {
|
||||
$alpha = ( isset( $btnvalue['backgroundHoverOpacity'] ) && is_numeric( $btnvalue['backgroundHoverOpacity'] ) ? $btnvalue['backgroundHoverOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $btnvalue['backgroundHover'], $alpha ) );
|
||||
} else {
|
||||
$alpha = ( isset( $btnvalue['backgroundHoverOpacity'] ) && is_numeric( $btnvalue['backgroundHoverOpacity'] ) ? $btnvalue['backgroundHoverOpacity'] : 1 );
|
||||
if ( ! isset( $btnvalue['inheritStyles'] ) || ( isset( $btnvalue['inheritStyles'] ) && 'inherit' !== $btnvalue['inheritStyles'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( '#444444', $alpha ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $btnvalue['boxShadowHover'] ) && is_array( $btnvalue['boxShadowHover'] ) && isset( $btnvalue['boxShadowHover'][0] ) && true === $btnvalue['boxShadowHover'][0] && isset( $btnvalue['boxShadowHover'][7] ) && true === $btnvalue['boxShadowHover'][7] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $btnvalue['boxShadowHover'][7] ) && true === $btnvalue['boxShadowHover'][7] ? 'inset ' : '' ) . ( isset( $btnvalue['boxShadowHover'][3] ) && is_numeric( $btnvalue['boxShadowHover'][3] ) ? $btnvalue['boxShadowHover'][3] : '2' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][4] ) && is_numeric( $btnvalue['boxShadowHover'][4] ) ? $btnvalue['boxShadowHover'][4] : '2' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][5] ) && is_numeric( $btnvalue['boxShadowHover'][5] ) ? $btnvalue['boxShadowHover'][5] : '3' ) . 'px ' . ( isset( $btnvalue['boxShadowHover'][6] ) && is_numeric( $btnvalue['boxShadowHover'][6] ) ? $btnvalue['boxShadowHover'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $btnvalue['boxShadowHover'][1] ) && ! empty( $btnvalue['boxShadowHover'][1] ) ? $btnvalue['boxShadowHover'][1] : '#000000' ), ( isset( $btnvalue['boxShadowHover'][2] ) && is_numeric( $btnvalue['boxShadowHover'][2] ) ? $btnvalue['boxShadowHover'][2] : 0.4 ) ) );
|
||||
}
|
||||
}
|
||||
// Tablet CSS.
|
||||
if ( isset( $btnvalue['tabletGap'] ) && is_numeric( $btnvalue['tabletGap'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey );
|
||||
$css->add_property( 'margin-right', $btnvalue['tabletGap'] . 'px' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $btnvalue['responsiveSize'] ) && is_array( $btnvalue['responsiveSize'] ) && isset( $btnvalue['responsiveSize'][0] ) && is_numeric( $btnvalue['responsiveSize'][0] ) ) || ( isset( $attributes['widthType'] ) && 'fixed' === $attributes['widthType'] && isset( $btnvalue['width'] ) && is_array( $btnvalue['width'] ) && isset( $btnvalue['width'][1] ) && ! empty( $btnvalue['width'][1] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button' );
|
||||
if ( isset( $btnvalue['responsiveSize'] ) && is_array( $btnvalue['responsiveSize'] ) && isset( $btnvalue['responsiveSize'][0] ) && is_numeric( $btnvalue['responsiveSize'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $btnvalue['responsiveSize'][0], ( isset( $btnvalue['sizeType'] ) && ! empty( $btnvalue['sizeType'] ) ? $btnvalue['sizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $attributes['widthType'] ) && 'fixed' === $attributes['widthType'] && isset( $btnvalue['width'] ) && is_array( $btnvalue['width'] ) && isset( $btnvalue['width'][1] ) && ! empty( $btnvalue['width'][1] ) ) {
|
||||
$css->add_property( 'width', $btnvalue['width'][1] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $btnvalue['btnSize'] ) && 'custom' === $btnvalue['btnSize'] && ( ( isset( $btnvalue['responsivePaddingBT'] ) && is_array( $btnvalue['responsivePaddingBT'] ) && isset( $btnvalue['responsivePaddingBT'][0] ) && is_numeric( $btnvalue['responsivePaddingBT'][0] ) ) || ( isset( $btnvalue['responsivePaddingLR'] ) && is_array( $btnvalue['responsivePaddingLR'] ) && isset( $btnvalue['responsivePaddingLR'][0] ) && is_numeric( $btnvalue['responsivePaddingLR'][0] ) ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button' );
|
||||
if ( isset( $btnvalue['responsivePaddingLR'] ) && is_array( $btnvalue['responsivePaddingLR'] ) && isset( $btnvalue['responsivePaddingLR'][0] ) && is_numeric( $btnvalue['responsivePaddingLR'][0] ) ) {
|
||||
$css->add_property( 'padding-left', $btnvalue['responsivePaddingLR'][0] . 'px' );
|
||||
$css->add_property( 'padding-right', $btnvalue['responsivePaddingLR'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['responsivePaddingBT'] ) && is_array( $btnvalue['responsivePaddingBT'] ) && isset( $btnvalue['responsivePaddingBT'][0] ) && is_numeric( $btnvalue['responsivePaddingBT'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $btnvalue['responsivePaddingBT'][0] . 'px' );
|
||||
$css->add_property( 'padding-bottom', $btnvalue['responsivePaddingBT'][0] . 'px' );
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
// Mobile CSS.
|
||||
if ( isset( $btnvalue['mobileGap'] ) && is_numeric( $btnvalue['mobileGap'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey );
|
||||
$css->add_property( 'margin-right', $btnvalue['mobileGap'] . 'px' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $btnvalue['responsiveSize'] ) && is_array( $btnvalue['responsiveSize'] ) && isset( $btnvalue['responsiveSize'][1] ) && is_numeric( $btnvalue['responsiveSize'][1] ) ) || ( isset( $attributes['widthType'] ) && 'fixed' === $attributes['widthType'] && isset( $btnvalue['width'] ) && is_array( $btnvalue['width'] ) && isset( $btnvalue['width'][2] ) && ! empty( $btnvalue['width'][2] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button' );
|
||||
if ( isset( $btnvalue['responsiveSize'] ) && is_array( $btnvalue['responsiveSize'] ) && isset( $btnvalue['responsiveSize'][1] ) && is_numeric( $btnvalue['responsiveSize'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $btnvalue['responsiveSize'][1], ( isset( $btnvalue['sizeType'] ) && ! empty( $btnvalue['sizeType'] ) ? $btnvalue['sizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $attributes['widthType'] ) && 'fixed' === $attributes['widthType'] && isset( $btnvalue['width'] ) && is_array( $btnvalue['width'] ) && isset( $btnvalue['width'][2] ) && ! empty( $btnvalue['width'][2] ) ) {
|
||||
$css->add_property( 'width', $btnvalue['width'][2] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $btnvalue['btnSize'] ) && 'custom' === $btnvalue['btnSize'] && ( ( isset( $btnvalue['responsivePaddingLR'] ) && is_array( $btnvalue['responsivePaddingLR'] ) && isset( $btnvalue['responsivePaddingLR'][1] ) && is_numeric( $btnvalue['responsivePaddingLR'][1] ) ) || ( isset( $btnvalue['responsivePaddingBT'] ) && is_array( $btnvalue['responsivePaddingBT'] ) && isset( $btnvalue['responsivePaddingBT'][1] ) && is_numeric( $btnvalue['responsivePaddingBT'][1] ) ) ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button' );
|
||||
if ( isset( $btnvalue['responsivePaddingLR'] ) && is_array( $btnvalue['responsivePaddingLR'] ) && isset( $btnvalue['responsivePaddingLR'][1] ) && is_numeric( $btnvalue['responsivePaddingLR'][1] ) ) {
|
||||
$css->add_property( 'padding-left', $btnvalue['responsivePaddingLR'][1] . 'px' );
|
||||
$css->add_property( 'padding-right', $btnvalue['responsivePaddingLR'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['responsivePaddingBT'] ) && is_array( $btnvalue['responsivePaddingBT'] ) && isset( $btnvalue['responsivePaddingBT'][1] ) && is_numeric( $btnvalue['responsivePaddingBT'][1] ) ) {
|
||||
$css->add_property( 'padding-top', $btnvalue['responsivePaddingBT'][1] . 'px' );
|
||||
$css->add_property( 'padding-bottom', $btnvalue['responsivePaddingBT'][1] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
// Icons CSS.
|
||||
if ( isset( $btnvalue['icon'] ) && ! empty( $btnvalue['icon'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button .kt-btn-svg-icon' );
|
||||
if ( isset( $btnvalue['iconColor'] ) && ! empty( $btnvalue['iconColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $btnvalue['iconColor'] ) );
|
||||
}
|
||||
if ( isset( $btnvalue['iconSize'] ) && isset( $btnvalue['iconSize'][0] ) && is_numeric( $btnvalue['iconSize'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $btnvalue['iconSize'][0], ( isset( $btnvalue['iconSizeType'] ) && ! empty( $btnvalue['iconSizeType'] ) ? $btnvalue['iconSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $btnvalue['iconColorHover'] ) && ! empty( $btnvalue['iconColorHover'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button .kt-btn-svg-icon' );
|
||||
$css->add_property( 'transition', 'all .3s ease-in-out' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button:hover .kt-btn-svg-icon' );
|
||||
$css->add_property( 'color', $css->render_color( $btnvalue['iconColorHover'] ) );
|
||||
}
|
||||
if ( isset( $btnvalue['iconPadding'] ) && is_array( $btnvalue['iconPadding'] ) ) {
|
||||
$css->set_selector( '.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-btn-svg-icon' );
|
||||
if ( isset( $btnvalue['iconPadding'][0] ) && is_numeric( $btnvalue['iconPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $btnvalue['iconPadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconPadding'][1] ) && is_numeric( $btnvalue['iconPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $btnvalue['iconPadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconPadding'][2] ) && is_numeric( $btnvalue['iconPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $btnvalue['iconPadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconPadding'][3] ) && is_numeric( $btnvalue['iconPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $btnvalue['iconPadding'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( ( isset( $btnvalue['iconTabletPadding'] ) && is_array( $btnvalue['iconTabletPadding'] ) ) || ( isset( $btnvalue['iconSize'] ) && isset( $btnvalue['iconSize'][1] ) && is_numeric( $btnvalue['iconSize'][1] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( isset( $btnvalue['iconSize'] ) && isset( $btnvalue['iconSize'][1] ) && is_numeric( $btnvalue['iconSize'][1] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button .kt-btn-svg-icon' );
|
||||
$css->add_property( 'font-size', $css->get_font_size( $btnvalue['iconSize'][1], ( isset( $btnvalue['iconSizeType'] ) && ! empty( $btnvalue['iconSizeType'] ) ? $btnvalue['iconSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $btnvalue['iconTabletPadding'] ) && is_array( $btnvalue['iconTabletPadding'] ) ) {
|
||||
$css->set_selector( '.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-btn-svg-icon' );
|
||||
if ( isset( $btnvalue['iconTabletPadding'][0] ) && is_numeric( $btnvalue['iconTabletPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $btnvalue['iconTabletPadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconTabletPadding'][1] ) && is_numeric( $btnvalue['iconTabletPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $btnvalue['iconTabletPadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconTabletPadding'][2] ) && is_numeric( $btnvalue['iconTabletPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $btnvalue['iconTabletPadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconTabletPadding'][3] ) && is_numeric( $btnvalue['iconTabletPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $btnvalue['iconTabletPadding'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $btnvalue['iconMobilePadding'] ) && is_array( $btnvalue['iconMobilePadding'] ) ) || ( isset( $btnvalue['iconSize'] ) && isset( $btnvalue['iconSize'][2] ) && is_numeric( $btnvalue['iconSize'][2] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( isset( $btnvalue['iconSize'] ) && isset( $btnvalue['iconSize'][2] ) && is_numeric( $btnvalue['iconSize'][2] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-button .kt-btn-svg-icon' );
|
||||
$css->add_property( 'font-size', $css->get_font_size( $btnvalue['iconSize'][2], ( isset( $btnvalue['iconSizeType'] ) && ! empty( $btnvalue['iconSizeType'] ) ? $btnvalue['iconSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $btnvalue['iconMobilePadding'] ) && is_array( $btnvalue['iconMobilePadding'] ) ) {
|
||||
$css->set_selector( '.kt-btns' . $unique_id . ' .kt-btn-wrap-' . $btnkey . ' .kt-btn-svg-icon' );
|
||||
if ( isset( $btnvalue['iconMobilePadding'][0] ) && is_numeric( $btnvalue['iconMobilePadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $btnvalue['iconMobilePadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconMobilePadding'][1] ) && is_numeric( $btnvalue['iconMobilePadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $btnvalue['iconMobilePadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconMobilePadding'][2] ) && is_numeric( $btnvalue['iconMobilePadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $btnvalue['iconMobilePadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $btnvalue['iconMobilePadding'][3] ) && is_numeric( $btnvalue['iconMobilePadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $btnvalue['iconMobilePadding'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_style( 'kb-button-deprecated-styles', KADENCE_BLOCKS_URL . 'includes/assets/css/kb-button-deprecated-style.min.css', array(), KADENCE_BLOCKS_VERSION );
|
||||
wp_register_style( 'kadence-simplelightbox-css', KADENCE_BLOCKS_URL . 'includes/assets/css/simplelightbox.min.css', array(), KADENCE_BLOCKS_VERSION );
|
||||
wp_register_script( 'kadence-simplelightbox', KADENCE_BLOCKS_URL . 'includes/assets/js/simplelightbox.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
wp_register_script( 'kadence-blocks-videolight-js', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-init-video-popup.min.js', array( 'kadence-simplelightbox' ), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Advancedbtn_Block::get_instance();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,992 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Column Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Column Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Column_Block extends Kadence_Blocks_Abstract_Block {
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'column';
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
// Style.
|
||||
$is_version_two = ( isset( $attributes['kbVersion'] ) && 1 < $attributes['kbVersion'] ? true : false );
|
||||
$desktop_vertical_align = ! empty( $attributes['verticalAlignment'] ) ? $attributes['verticalAlignment'] : '';
|
||||
$tablet_vertical_align = ! empty( $attributes['verticalAlignmentTablet'] ) ? $attributes['verticalAlignmentTablet'] : $desktop_vertical_align;
|
||||
$mobile_vertical_align = ! empty( $attributes['verticalAlignmentMobile'] ) ? $attributes['verticalAlignmentMobile'] : $tablet_vertical_align;
|
||||
$desktop_horizontal_align = ! empty( $attributes['justifyContent'][0] ) ? $attributes['justifyContent'][0] : '';
|
||||
$tablet_horizontal_align = ! empty( $attributes['justifyContent'][1] ) ? $attributes['justifyContent'][1] : $desktop_horizontal_align;
|
||||
$mobile_horizontal_align = ! empty( $attributes['justifyContent'][2] ) ? $attributes['justifyContent'][2] : $tablet_horizontal_align;
|
||||
$desktop_flex_wrap = ! empty( $attributes['wrapContent'][0] ) ? $attributes['wrapContent'][0] : '';
|
||||
$tablet_flex_wrap = ! empty( $attributes['wrapContent'][1] ) ? $attributes['wrapContent'][1] : $desktop_flex_wrap;
|
||||
$mobile_flex_wrap = ! empty( $attributes['wrapContent'][2] ) ? $attributes['wrapContent'][2] : $tablet_flex_wrap;
|
||||
$desktop_direction = ! empty( $attributes['direction'][0] ) ? $attributes['direction'][0] : 'vertical';
|
||||
$tablet_direction = ! empty( $attributes['direction'][1] ) ? $attributes['direction'][1] : $desktop_direction;
|
||||
$mobile_direction = ! empty( $attributes['direction'][2] ) ? $attributes['direction'][2] : $tablet_direction;
|
||||
$desktop_text_align = ! empty( $attributes['textAlign'][0] ) ? $attributes['textAlign'][0] : '';
|
||||
$tablet_text_align = ! empty( $attributes['textAlign'][1] ) ? $attributes['textAlign'][1] : $desktop_text_align;
|
||||
$mobile_text_align = ! empty( $attributes['textAlign'][2] ) ? $attributes['textAlign'][2] : $tablet_text_align;
|
||||
$is_desktop_flex = in_array( $desktop_direction, array( 'horizontal', 'horizontal-reverse', 'vertical-reverse' ) ) || ! empty( $desktop_vertical_align ) || ! empty( $desktop_horizontal_align ) || ! empty( $attributes['rowGapVariable'][0] ) ? true : false;
|
||||
$is_tablet_flex = false;
|
||||
$is_mobile_flex = false;
|
||||
// Max Width.
|
||||
$max_width_unit = ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px';
|
||||
$tablet_max_width_unit = ! empty( $attributes['maxWidthTabletUnit'] ) ? $attributes['maxWidthTabletUnit'] : $max_width_unit;
|
||||
$mobile_max_width_unit = ! empty( $attributes['maxWidthMobileUnit'] ) ? $attributes['maxWidthMobileUnit'] : $tablet_max_width_unit;
|
||||
if ( $is_desktop_flex ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
}
|
||||
if ( ! $is_desktop_flex ) {
|
||||
$is_tablet_flex = in_array( $tablet_direction, array( 'horizontal', 'horizontal-reverse', 'vertical-reverse' ) ) || ! empty( $tablet_vertical_align ) || ! empty( $tablet_horizontal_align ) || ! empty( $attributes['rowGapVariable'][1] ) ? true : false;
|
||||
if ( $is_tablet_flex ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( ! $is_desktop_flex && ! $is_tablet_flex ) {
|
||||
$is_mobile_flex = in_array( $mobile_direction, array( 'horizontal', 'horizontal-reverse', 'vertical-reverse' ) ) || ! empty( $mobile_vertical_align ) || ! empty( $mobile_horizontal_align ) || ! empty( $attributes['rowGapVariable'][2] ) ? true : false;
|
||||
if ( $is_mobile_flex ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['flexGrow'][0] ) && $css->is_number( $attributes['flexGrow'][0] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ', .wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > .kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex-grow', $attributes['flexGrow'][0] );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'height', '100%' );
|
||||
}
|
||||
if ( isset( $attributes['flexGrow'][1] ) && $css->is_number( $attributes['flexGrow'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ', .wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > .kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex-grow', $attributes['flexGrow'][1] );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'height', '100%' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['flexGrow'][2] ) && $css->is_number( $attributes['flexGrow'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ', .wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > .kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex-grow', $attributes['flexGrow'][2] );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'height', '100%' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['maxWidth'][0] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( 'max-width', $attributes['maxWidth'][0] . $max_width_unit );
|
||||
$css->add_property( 'margin-left', 'auto' );
|
||||
$css->add_property( 'margin-right', 'auto' );
|
||||
//Section inside Section compatablity.
|
||||
// $css->set_selector( '.wp-block-kadence-column>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
// $css->add_property( 'flex', '1 ' . $attributes['maxWidth'][0] . ( isset( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal:not(.kb-section-md-dir-vertical)>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex', '0 1 ' . $attributes['maxWidth'][0] . $max_width_unit );
|
||||
$css->add_property( 'max-width', 'unset' );
|
||||
$css->add_property( 'margin-left', 'unset' );
|
||||
$css->add_property( 'margin-right', 'unset' );
|
||||
if ( apply_filters( 'kadence_blocks_css_output_media_queries', true ) ) {
|
||||
$css->set_media_state( 'desktopOnly' );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex', '0 1 ' . $attributes['maxWidth'][0] . $max_width_unit );
|
||||
$css->add_property( 'max-width', 'unset' );
|
||||
$css->add_property( 'margin-left', 'unset' );
|
||||
$css->add_property( 'margin-right', 'unset' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['sticky'] ) && true === $attributes['sticky'] ) {
|
||||
$css->set_selector( '#wrapper.site' );
|
||||
$css->add_property( 'overflow', 'clip' );
|
||||
if ( ! empty( $attributes['stickyOffset'][0] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( '--kb-section-setting-offset', $attributes['stickyOffset'][0] . ( isset( $attributes['stickyOffsetUnit'] ) ? $attributes['stickyOffsetUnit'] : 'px' ) );
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['stickyOffset'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( '--kb-section-setting-offset', $attributes['stickyOffset'][1] . ( isset( $attributes['stickyOffsetUnit'] ) ? $attributes['stickyOffsetUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['stickyOffset'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( '--kb-section-setting-offset', $attributes['stickyOffset'][2] . ( isset( $attributes['stickyOffsetUnit'] ) ? $attributes['stickyOffsetUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
// Padding, check old first.
|
||||
if ( $css->is_number( $attributes['topPadding'] ) || $css->is_number( $attributes['bottomPadding'] ) || $css->is_number( $attributes['leftPadding'] ) || $css->is_number( $attributes['rightPadding'] ) || $css->is_number( $attributes['topPaddingT'] ) || $css->is_number( $attributes['bottomPaddingT'] ) || $css->is_number( $attributes['leftPaddingT'] ) || $css->is_number( $attributes['rightPaddingT'] ) || $css->is_number( $attributes['topPaddingM'] ) || $css->is_number( $attributes['bottomPaddingM'] ) || $css->is_number( $attributes['leftPaddingM'] ) || $css->is_number( $attributes['rightPaddingM'] ) ) {
|
||||
if ( $css->is_number( $attributes['topPadding'] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['topPadding'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['bottomPadding'] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['bottomPadding'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['leftPadding'] ) ) {
|
||||
$css->add_property( 'padding-left', $attributes['leftPadding'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['rightPadding'] ) ) {
|
||||
$css->add_property( 'padding-right', $attributes['rightPadding'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( $css->is_number( $attributes['topPaddingT'] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['topPaddingT'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['bottomPaddingT'] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['bottomPaddingT'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['leftPaddingT'] ) ) {
|
||||
$css->add_property( 'padding-left', $attributes['leftPaddingT'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['rightPaddingT'] ) ) {
|
||||
$css->add_property( 'padding-right', $attributes['rightPaddingT'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( $css->is_number( $attributes['topPaddingM'] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['topPaddingM'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['bottomPaddingM'] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['bottomPaddingM'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['leftPaddingM'] ) ) {
|
||||
$css->add_property( 'padding-left', $attributes['leftPaddingM'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['rightPaddingM'] ) ) {
|
||||
$css->add_property( 'padding-right', $attributes['rightPaddingM'] . ( ! empty( $attributes['paddingType'] ) ? $attributes['paddingType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
} else {
|
||||
$css->render_measure_output(
|
||||
$attributes,
|
||||
'padding',
|
||||
'padding',
|
||||
array(
|
||||
'unit_key' => 'paddingType',
|
||||
)
|
||||
);
|
||||
}
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
if ( isset( $attributes['height'][0] ) && $css->is_number( $attributes['height'][0] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['height'][0] . ( ! empty( $attributes['heightUnit'] ) ? $attributes['heightUnit'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( isset( $attributes['height'][1] ) && $css->is_number( $attributes['height'][1] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['height'][1] . ( ! empty( $attributes['heightUnit'] ) ? $attributes['heightUnit'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( isset( $attributes['height'][2] ) && $css->is_number( $attributes['height'][2] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['height'][2] . ( ! empty( $attributes['heightUnit'] ) ? $attributes['heightUnit'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
if ( isset( $attributes['displayShadow'] ) && true == $attributes['displayShadow'] ) {
|
||||
if ( isset( $attributes['shadow'] ) && is_array( $attributes['shadow'] ) && isset( $attributes['shadow'][0] ) && is_array( $attributes['shadow'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadow'][0]['inset'] ) && true === $attributes['shadow'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadow'][0]['hOffset'] ) && is_numeric( $attributes['shadow'][0]['hOffset'] ) ? $attributes['shadow'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadow'][0]['vOffset'] ) && is_numeric( $attributes['shadow'][0]['vOffset'] ) ? $attributes['shadow'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadow'][0]['blur'] ) && is_numeric( $attributes['shadow'][0]['blur'] ) ? $attributes['shadow'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadow'][0]['spread'] ) && is_numeric( $attributes['shadow'][0]['spread'] ) ? $attributes['shadow'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadow'][0]['color'] ) && ! empty( $attributes['shadow'][0]['color'] ) ? $attributes['shadow'][0]['color'] : '#000000' ), ( isset( $attributes['shadow'][0]['opacity'] ) && is_numeric( $attributes['shadow'][0]['opacity'] ) ? $attributes['shadow'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', 'rgba(0, 0, 0, 0.2) 0px 0px 14px 0px' );
|
||||
}
|
||||
}
|
||||
// Border, check old first.
|
||||
if ( ! empty( $attributes['border'] ) || $css->is_number( $attributes['borderWidth'][0] ) || $css->is_number( $attributes['borderWidth'][1] ) || $css->is_number( $attributes['borderWidth'][2] ) || $css->is_number( $attributes['borderWidth'][3] ) || $css->is_number( $attributes['tabletBorderWidth'][0] ) || $css->is_number( $attributes['tabletBorderWidth'][1] ) || $css->is_number( $attributes['tabletBorderWidth'][2] ) || $css->is_number( $attributes['tabletBorderWidth'][3] ) || $css->is_number( $attributes['mobileBorderWidth'][0] ) || $css->is_number( $attributes['mobileBorderWidth'][1] ) || $css->is_number( $attributes['mobileBorderWidth'][2] ) || $css->is_number( $attributes['mobileBorderWidth'][3] ) ) {
|
||||
if ( ! empty( $attributes['border'] ) ) {
|
||||
$alpha = ( isset( $attributes['borderOpacity'] ) && is_numeric( $attributes['borderOpacity'] ) ? $attributes['borderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['border'], $alpha ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderWidth', 'border-width' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'borderStyle' );
|
||||
}
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col,.kadence-column' . $unique_id . ' > .kt-inside-inner-col:before' );
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) );
|
||||
// Border Hover Styles, check old first.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover > .kt-inside-inner-col' );
|
||||
if ( ! empty( $attributes['borderHover'] ) || $css->is_number( $attributes['borderHoverWidth'][0] ) || $css->is_number( $attributes['borderHoverWidth'][1] ) || $css->is_number( $attributes['borderHoverWidth'][2] ) || $css->is_number( $attributes['borderHoverWidth'][3] ) || $css->is_number( $attributes['tabletBorderHoverWidth'][0] ) || $css->is_number( $attributes['tabletBorderHoverWidth'][1] ) || $css->is_number( $attributes['tabletBorderHoverWidth'][2] ) || $css->is_number( $attributes['tabletBorderHoverWidth'][3] ) || $css->is_number( $attributes['mobileBorderHoverWidth'][0] ) || $css->is_number( $attributes['mobileBorderHoverWidth'][1] ) || $css->is_number( $attributes['mobileBorderHoverWidth'][2] ) || $css->is_number( $attributes['mobileBorderHoverWidth'][3] ) ) {
|
||||
if ( ! empty( $attributes['borderHover'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['borderHover'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderHoverWidth', 'border-width' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'borderHoverStyle' );
|
||||
}
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover > .kt-inside-inner-col,.kadence-column' . $unique_id . ':hover > .kt-inside-inner-col:before' );
|
||||
$css->render_measure_output( $attributes, 'borderHoverRadius', 'border-radius', array( 'unit_key' => 'borderHoverRadiusUnit' ) );
|
||||
if ( isset( $attributes['displayHoverShadow'] ) && true == $attributes['displayHoverShadow'] ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover > .kt-inside-inner-col' );
|
||||
if ( isset( $attributes['shadowHover'] ) && is_array( $attributes['shadowHover'] ) && isset( $attributes['shadowHover'][0] ) && is_array( $attributes['shadowHover'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadowHover'][0]['inset'] ) && true === $attributes['shadowHover'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadowHover'][0]['hOffset'] ) && is_numeric( $attributes['shadowHover'][0]['hOffset'] ) ? $attributes['shadowHover'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['vOffset'] ) && is_numeric( $attributes['shadowHover'][0]['vOffset'] ) ? $attributes['shadowHover'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['blur'] ) && is_numeric( $attributes['shadowHover'][0]['blur'] ) ? $attributes['shadowHover'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['spread'] ) && is_numeric( $attributes['shadowHover'][0]['spread'] ) ? $attributes['shadowHover'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadowHover'][0]['color'] ) && ! empty( $attributes['shadowHover'][0]['color'] ) ? $attributes['shadowHover'][0]['color'] : '#000000' ), ( isset( $attributes['shadowHover'][0]['opacity'] ) && is_numeric( $attributes['shadowHover'][0]['opacity'] ) ? $attributes['shadowHover'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', 'rgba(0, 0, 0, 0.2) 0px 0px 14px 0px' );
|
||||
}
|
||||
}
|
||||
// Gap.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
if ( ! $is_version_two && 'horizontal' === $desktop_direction ) {
|
||||
$gutter = isset( $attributes['gutter'] ) && is_array( $attributes['gutter'] ) && isset( $attributes['gutter'][0] ) && is_numeric( $attributes['gutter'][0] ) ? $attributes['gutter'][0] : null;
|
||||
if ( null === $gutter ) {
|
||||
$attributes['gutter'][0] = 10;
|
||||
}
|
||||
if ( empty( $attributes['gutterVariable'] ) ) {
|
||||
$attributes['gutterVariable'] = array( 'custom', 'custom', 'custom' );
|
||||
}
|
||||
$css->render_row_gap( $attributes, 'gutterVariable', 'gap', 'gutter', 'gutterUnit' );
|
||||
} else {
|
||||
if ( empty( $attributes['gutterVariable'][0] ) ) {
|
||||
$attributes['gutterVariable'][0] = 'sm';
|
||||
}
|
||||
$css->render_row_gap( $attributes, 'rowGapVariable', 'row-gap', 'rowGap', 'rowGapUnit' );
|
||||
$css->render_row_gap( $attributes, 'gutterVariable', 'column-gap', 'gutter', 'gutterUnit' );
|
||||
}
|
||||
|
||||
// Direction Styles.
|
||||
if ( 'vertical' === $desktop_direction || 'vertical-reverse' === $desktop_direction ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'flex-direction', ( 'vertical-reverse' === $desktop_direction ? 'column-reverse' : 'column' ) );
|
||||
if ( ! empty( $desktop_vertical_align ) ) {
|
||||
$align = $desktop_vertical_align;
|
||||
switch ( $align ) {
|
||||
case 'top':
|
||||
$align = 'flex-start';
|
||||
break;
|
||||
case 'bottom':
|
||||
$align = 'flex-end';
|
||||
break;
|
||||
case 'space-between':
|
||||
$align = 'space-between';
|
||||
break;
|
||||
case 'space-around':
|
||||
$align = 'space-around';
|
||||
break;
|
||||
case 'space-evenly':
|
||||
$align = 'space-evenly';
|
||||
break;
|
||||
case 'stretch':
|
||||
$align = 'stretch';
|
||||
break;
|
||||
default:
|
||||
$align = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'justify-content', $align );
|
||||
}
|
||||
if ( ! empty( $desktop_horizontal_align ) ) {
|
||||
$css->add_property( 'align-items', $desktop_horizontal_align );
|
||||
// Handle Ratio Images.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .kb-image-is-ratio-size' );
|
||||
$css->add_property( 'align-self', 'stretch' );
|
||||
// Handle Advanced Gallery
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .wp-block-kadence-advancedgallery' );
|
||||
$css->add_property( 'align-self', 'stretch' );
|
||||
}
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .aligncenter' );
|
||||
$css->add_property( 'width', '100%' );
|
||||
} elseif ( 'horizontal' === $desktop_direction || 'horizontal-reverse' === $desktop_direction ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'flex-direction', ( 'horizontal-reverse' === $desktop_direction ? 'row-reverse' : 'row' ) );
|
||||
$css->add_property( 'flex-wrap', 'wrap' );
|
||||
$align = ! empty( $desktop_vertical_align ) ? $desktop_vertical_align : 'center';
|
||||
switch ( $align ) {
|
||||
case 'top':
|
||||
$align = 'flex-start';
|
||||
break;
|
||||
case 'bottom':
|
||||
$align = 'flex-end';
|
||||
break;
|
||||
case 'space-between':
|
||||
$align = 'space-between';
|
||||
break;
|
||||
case 'space-around':
|
||||
$align = 'space-around';
|
||||
break;
|
||||
case 'space-evenly':
|
||||
$align = 'space-evenly';
|
||||
break;
|
||||
case 'stretch':
|
||||
$align = 'stretch';
|
||||
break;
|
||||
default:
|
||||
$align = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'align-items', $align );
|
||||
if ( ! empty( $desktop_horizontal_align ) ) {
|
||||
$css->add_property( 'justify-content', $desktop_horizontal_align );
|
||||
} elseif ( ! $is_version_two && ! empty( $desktop_text_align ) ) {
|
||||
// Fall Back for the old way of doing things.
|
||||
switch ( $desktop_text_align ) {
|
||||
case 'left':
|
||||
$justify = 'flex-start';
|
||||
break;
|
||||
case 'right':
|
||||
$justify = 'flex-end';
|
||||
break;
|
||||
default:
|
||||
$justify = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'justify-content', $justify );
|
||||
}
|
||||
if ( ! empty( $desktop_flex_wrap ) ) {
|
||||
$css->add_property( 'flex-wrap', $desktop_flex_wrap );
|
||||
}
|
||||
// Handle Margin issues.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *, .kadence-column' . $unique_id . ' > .kt-inside-inner-col > figure.wp-block-image, .kadence-column' . $unique_id . ' > .kt-inside-inner-col > figure.wp-block-kadence-image' );
|
||||
$css->add_property( 'margin-top', '0px' );
|
||||
$css->add_property( 'margin-bottom', '0px' );
|
||||
// Handle Ratio Images.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .kb-image-is-ratio-size' );
|
||||
$css->add_property( 'flex-grow', 1 );
|
||||
if ( ! empty( $attributes['flexBasis'][0] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *' );
|
||||
$basis_unit = ! empty( $attributes['flexBasisUnit'] ) ? $attributes['flexBasisUnit'] : 'px';
|
||||
$css->add_property( 'flex-basis', $attributes['flexBasis'][0] . $basis_unit );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .wp-block-kadence-infobox' );
|
||||
$css->add_property( 'width', '0px' );
|
||||
}
|
||||
}
|
||||
// inside of Row.
|
||||
$alignments = [
|
||||
'desktop' => ['vertical_align' => $desktop_vertical_align, 'direction' => $desktop_direction],
|
||||
'tablet' => ['vertical_align' => $tablet_vertical_align, 'direction' => $tablet_direction],
|
||||
'mobile' => ['vertical_align' => $mobile_vertical_align, 'direction' => $mobile_direction],
|
||||
];
|
||||
foreach ($alignments as $media_state => $align) {
|
||||
if ( ! empty($align['vertical_align']) ) {
|
||||
$this->set_vertical_align($media_state, $align['vertical_align'], $align['direction'], $css, $unique_id);
|
||||
}
|
||||
}
|
||||
$css->set_media_state('desktop');
|
||||
// Background.
|
||||
$background_type = ! empty( $attributes['backgroundType'] ) ? $attributes['backgroundType'] : 'normal';
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
switch ( $background_type ) {
|
||||
case 'normal':
|
||||
if ( ! empty( $attributes['background'] ) ) {
|
||||
$alpha = ( $css->is_number( $attributes['backgroundOpacity'] ) ? $attributes['backgroundOpacity'] : 1 );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['background'], $alpha ) );
|
||||
}
|
||||
if ( ! empty( $attributes['backgroundImg'][0]['bgImg'] ) ) {
|
||||
$css->add_property( 'background-image', sprintf( "url('%s')", $attributes['backgroundImg'][0]['bgImg'] ) );
|
||||
$css->add_property( 'background-size', ( ! empty( $attributes['backgroundImg'][0]['bgImgSize'] ) ? $attributes['backgroundImg'][0]['bgImgSize'] : 'cover' ) );
|
||||
$css->add_property( 'background-position', ( ! empty( $attributes['backgroundImg'][0]['bgImgPosition'] ) ? $attributes['backgroundImg'][0]['bgImgPosition'] : 'center center' ) );
|
||||
$css->add_property( 'background-attachment', ( ! empty( $attributes['backgroundImg'][0]['bgImgAttachment'] ) ? $attributes['backgroundImg'][0]['bgImgAttachment'] : 'scroll' ) );
|
||||
$css->add_property( 'background-repeat', ( ! empty( $attributes['backgroundImg'][0]['bgImgRepeat'] ) ? $attributes['backgroundImg'][0]['bgImgRepeat'] : 'no-repeat' ) );
|
||||
if ( ! empty( $attributes['backgroundImg'][0]['bgImgAttachment'] ) && 'fixed' === $attributes['backgroundImg'][0]['bgImgAttachment'] && ! apply_filters( 'kadence_blocks_attachment_fixed_on_mobile', false ) ) {
|
||||
$css->set_media_state( 'tabletPro' );
|
||||
$css->add_property( 'background-attachment', 'scroll' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'gradient':
|
||||
if ( ! empty( $attributes['gradient'] ) ) {
|
||||
$css->add_property( 'background-image', $attributes['gradient'] );
|
||||
}
|
||||
break;
|
||||
}
|
||||
// Background Hover.
|
||||
$hover_type = ! empty( $attributes['backgroundHoverType'] ) ? $attributes['backgroundHoverType'] : 'normal';
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover > .kt-inside-inner-col' );
|
||||
switch ( $hover_type ) {
|
||||
case 'normal':
|
||||
if ( ! empty( $attributes['backgroundHover'] ) ) {
|
||||
$css->render_color_output( $attributes, 'backgroundHover', 'background-color' );
|
||||
$css->add_property( 'background-image', 'none' );
|
||||
}
|
||||
if ( ! empty( $attributes['backgroundImgHover'][0]['bgImg'] ) ) {
|
||||
$css->add_property( 'background-image', sprintf( "url('%s')", $attributes['backgroundImgHover'][0]['bgImg'] ) );
|
||||
$css->add_property( 'background-size', ( ! empty( $attributes['backgroundImgHover'][0]['bgImgSize'] ) ? $attributes['backgroundImgHover'][0]['bgImgSize'] : 'cover' ) );
|
||||
$css->add_property( 'background-position', ( ! empty( $attributes['backgroundImgHover'][0]['bgImgPosition'] ) ? $attributes['backgroundImgHover'][0]['bgImgPosition'] : 'center center' ) );
|
||||
$css->add_property( 'background-attachment', ( ! empty( $attributes['backgroundImgHover'][0]['bgImgAttachment'] ) ? $attributes['backgroundImgHover'][0]['bgImgAttachment'] : 'scroll' ) );
|
||||
$css->add_property( 'background-repeat', ( ! empty( $attributes['backgroundImgHover'][0]['bgImgRepeat'] ) ? $attributes['backgroundImgHover'][0]['bgImgRepeat'] : 'no-repeat' ) );
|
||||
if ( ! empty( $attributes['backgroundImgHover'][0]['bgImgAttachment'] ) && 'fixed' === $attributes['backgroundImgHover'][0]['bgImgAttachment'] && ! apply_filters( 'kadence_blocks_attachment_fixed_on_mobile', false ) ) {
|
||||
$css->set_media_state( 'tabletPro' );
|
||||
$css->add_property( 'background-attachment', 'scroll' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'gradient':
|
||||
if ( ! empty( $attributes['gradientHover'] ) ) {
|
||||
$css->add_property( 'background-image', $attributes['gradientHover'] );
|
||||
}
|
||||
break;
|
||||
}
|
||||
// Backdrop Filter (pro)
|
||||
if ( ! empty( $attributes['backdropFilterType'] ) && $attributes['backdropFilterType'] !== 'none' ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col');
|
||||
$css->add_property( '-webkit-backdrop-filter', $attributes['backdropFilterString'] );
|
||||
$css->add_property( 'backdrop-filter', $attributes['backdropFilterString'] );
|
||||
}
|
||||
// Overlay.
|
||||
$overlay_type = ! empty( $attributes['overlayType'] ) ? $attributes['overlayType'] : 'normal';
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col:before' );
|
||||
if ( $css->is_number( $attributes['overlayOpacity'] ) ) {
|
||||
$css->add_property( 'opacity', $attributes['overlayOpacity'] );
|
||||
}
|
||||
if ( ! empty( $attributes['overlayBlendMode'] ) ) {
|
||||
$css->add_property( 'mix-blend-mode', $attributes['overlayBlendMode'] );
|
||||
}
|
||||
switch ( $overlay_type ) {
|
||||
case 'normal':
|
||||
if ( ! empty( $attributes['overlay'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['overlay'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['overlayImg'][0]['bgImg'] ) ) {
|
||||
$bg_img = $attributes['overlayImg'][0];
|
||||
$css->add_property( 'background-image', sprintf( "url('%s')", $bg_img['bgImg'] ) );
|
||||
$css->add_property( 'background-size', ( ! empty( $bg_img['bgImgSize'] ) ? $bg_img['bgImgSize'] : 'cover' ) );
|
||||
$css->add_property( 'background-position', ( ! empty( $bg_img['bgImgPosition'] ) ? $bg_img['bgImgPosition'] : 'center center' ) );
|
||||
$css->add_property( 'background-attachment', ( ! empty( $bg_img['bgImgAttachment'] ) ? $bg_img['bgImgAttachment'] : 'scroll' ) );
|
||||
$css->add_property( 'background-repeat', ( ! empty( $bg_img['bgImgRepeat'] ) ? $bg_img['bgImgRepeat'] : 'no-repeat' ) );
|
||||
if ( ! empty( $bg_img['bgImgAttachment'] ) && 'fixed' === $bg_img['bgImgAttachment'] && ! apply_filters( 'kadence_blocks_attachment_fixed_on_mobile', false ) ) {
|
||||
$css->set_media_state( 'tabletPro' );
|
||||
$css->add_property( 'background-attachment', 'scroll' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'gradient':
|
||||
if ( ! empty( $attributes['overlayGradient'] ) ) {
|
||||
$css->add_property( 'background-image', $attributes['overlayGradient'] );
|
||||
}
|
||||
break;
|
||||
}
|
||||
// Overlay Hover.
|
||||
$overlay_hover_type = ! empty( $attributes['overlayHoverType'] ) ? $attributes['overlayHoverType'] : 'normal';
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover > .kt-inside-inner-col:before' );
|
||||
if ( $css->is_number( $attributes['overlayHoverOpacity'] ) ) {
|
||||
$css->add_property( 'opacity', $attributes['overlayHoverOpacity'] );
|
||||
}
|
||||
if ( ! empty( $attributes['hoverOverlayBlendMode'] ) ) {
|
||||
$css->add_property( 'mix-blend-mode', $attributes['hoverOverlayBlendMode'] );
|
||||
}
|
||||
switch ( $overlay_hover_type ) {
|
||||
case 'normal':
|
||||
if ( ! empty( $attributes['overlayHover'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['overlayHover'] ) );
|
||||
$css->add_property( 'background-image', 'none' );
|
||||
}
|
||||
if ( ! empty( $attributes['overlayImgHover'][0]['bgImg'] ) ) {
|
||||
$bg_img_hover = $attributes['overlayImgHover'][0];
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover > .kt-inside-inner-col:before' );
|
||||
$css->add_property( 'background-image', sprintf( "url('%s')", $bg_img_hover['bgImg'] ) );
|
||||
$css->add_property( 'background-size', ( ! empty( $bg_img_hover['bgImgSize'] ) ? $bg_img_hover['bgImgSize'] : 'cover' ) );
|
||||
$css->add_property( 'background-position', ( ! empty( $bg_img_hover['bgImgPosition'] ) ? $bg_img_hover['bgImgPosition'] : 'center center' ) );
|
||||
$css->add_property( 'background-attachment', ( ! empty( $bg_img_hover['bgImgAttachment'] ) ? $bg_img_hover['bgImgAttachment'] : 'scroll' ) );
|
||||
$css->add_property( 'background-repeat', ( ! empty( $bg_img_hover['bgImgRepeat'] ) ? $bg_img_hover['bgImgRepeat'] : 'no-repeat' ) );
|
||||
if ( ! empty( $bg_img_hover['bgImgAttachment'] ) && 'fixed' === $bg_img_hover['bgImgAttachment'] && ! apply_filters( 'kadence_blocks_attachment_fixed_on_mobile', false ) ) {
|
||||
$css->set_media_state( 'tabletPro' );
|
||||
$css->add_property( 'background-attachment', 'scroll' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'gradient':
|
||||
if ( ! empty( $attributes['overlayGradientHover'] ) ) {
|
||||
$css->add_property( 'background-image', $attributes['overlayGradientHover'] );
|
||||
}
|
||||
break;
|
||||
}
|
||||
// Text Align.
|
||||
if ( ! empty( $desktop_text_align ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( 'text-align', $desktop_text_align );
|
||||
}
|
||||
// Text Colors.
|
||||
if ( isset( $attributes['textColor'] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ', .kadence-column' . $unique_id . ' h1, .kadence-column' . $unique_id . ' h2, .kadence-column' . $unique_id . ' h3, .kadence-column' . $unique_id . ' h4, .kadence-column' . $unique_id . ' h5, .kadence-column' . $unique_id . ' h6' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['textColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['linkColor'] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' a' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['linkColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['linkHoverColor'] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' a:hover' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['linkHoverColor'] ) );
|
||||
}
|
||||
// Hover Text colors.
|
||||
if ( isset( $attributes['textColorHover'] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover, .kadence-column' . $unique_id . ':hover h1, .kadence-column' . $unique_id . ':hover h2, .kadence-column' . $unique_id . ':hover h3, .kadence-column' . $unique_id . ':hover h4, .kadence-column' . $unique_id . ':hover h5, .kadence-column' . $unique_id . ':hover h6' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['textColorHover'] ) );
|
||||
}
|
||||
if ( isset( $attributes['linkColorHover'] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover a' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['linkColorHover'] ) );
|
||||
}
|
||||
if ( isset( $attributes['linkHoverColorHover'] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ':hover a:hover' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['linkHoverColorHover'] ) );
|
||||
}
|
||||
if ( isset( $attributes['zIndex'] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
if ( $attributes['zIndex'] === 0 ) {
|
||||
$css->add_property( 'z-index', 'auto' );
|
||||
} else {
|
||||
$css->add_property( 'z-index', $attributes['zIndex'] );
|
||||
}
|
||||
$css->add_property( 'position', 'relative' );
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( ! empty( $attributes['maxWidth'][1] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( 'max-width', $attributes['maxWidth'][1] . $tablet_max_width_unit );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal:not(.kb-section-md-dir-vertical)>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex', '0 1 ' . $attributes['maxWidth'][1] . $tablet_max_width_unit );
|
||||
|
||||
if ( apply_filters( 'kadence_blocks_css_output_media_queries', true ) ) {
|
||||
$css->set_media_state( 'tabletOnly' );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex', '0 1 ' . $attributes['maxWidth'][1] . $tablet_max_width_unit );
|
||||
$css->add_property( 'max-width', 'unset' );
|
||||
$css->add_property( 'margin-left', 'unset' );
|
||||
$css->add_property( 'margin-right', 'unset' );
|
||||
$css->set_media_state( 'tablet' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['collapseOrder'] ) ) {
|
||||
$css->set_selector( '.kt-row-column-wrap.kt-tab-layout-three-grid > .kadence-column' . $unique_id . ', .kt-row-column-wrap.kt-tab-layout-two-grid > .kadence-column' . $unique_id . ', .kt-row-column-wrap.kt-tab-layout-row > .kadence-column' . $unique_id );
|
||||
$css->add_property( 'order', $attributes['collapseOrder'] );
|
||||
}
|
||||
// Tablet Text Align.
|
||||
if ( ! empty( $attributes['textAlign'][1] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( 'text-align', $attributes['textAlign'][1] );
|
||||
}
|
||||
// Tablet Direction.
|
||||
if ( 'vertical' === $tablet_direction || 'vertical-reverse' === $tablet_direction ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'flex-direction', ( 'vertical-reverse' === $tablet_direction ? 'column-reverse' : 'column' ) );
|
||||
$justify = ! empty( $tablet_vertical_align ) ? $tablet_vertical_align : 'center';
|
||||
switch ( $justify ) {
|
||||
case 'top':
|
||||
$justify = 'flex-start';
|
||||
break;
|
||||
case 'bottom':
|
||||
$justify = 'flex-end';
|
||||
break;
|
||||
case 'space-between':
|
||||
$justify = 'space-between';
|
||||
break;
|
||||
case 'space-around':
|
||||
$justify = 'space-around';
|
||||
break;
|
||||
case 'space-evenly':
|
||||
$justify = 'space-evenly';
|
||||
break;
|
||||
case 'stretch':
|
||||
$justify = 'stretch';
|
||||
break;
|
||||
default:
|
||||
$justify = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'justify-content', $justify );
|
||||
if ( ( 'horizontal' === $desktop_direction || 'horizontal-reverse' === $desktop_direction ) && empty( $attributes['justifyContent'][1] ) ) {
|
||||
$css->add_property( 'align-items', 'stretch' );
|
||||
} elseif ( ! empty( $tablet_horizontal_align ) ) {
|
||||
$css->add_property( 'align-items', $tablet_horizontal_align );
|
||||
}
|
||||
if ( ( 'horizontal' === $desktop_direction || 'horizontal-reverse' === $desktop_direction ) ) {
|
||||
$css->add_property( 'flex-wrap', 'nowrap' );
|
||||
}
|
||||
if ( ( 'horizontal' === $desktop_direction || 'horizontal-reverse' === $desktop_direction ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *' );
|
||||
$css->add_property( 'flex', 'unset' );
|
||||
}
|
||||
if ( ( 'horizontal' === $desktop_direction || 'horizontal-reverse' === $desktop_direction ) && ! empty( $attributes['flexBasis'][0] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *' );
|
||||
$css->add_property( 'flex', '1' );
|
||||
$css->add_property( 'max-width', '100%' );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .wp-block-kadence-infobox' );
|
||||
$css->add_property( 'width', 'auto' );
|
||||
}
|
||||
if ( ( 'horizontal' === $desktop_direction || 'horizontal-reverse' === $desktop_direction ) && ! empty( $attributes['direction'][1] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .wp-block-kadence-infobox' );
|
||||
$css->add_property( 'align-self', 'unset' );
|
||||
}
|
||||
} elseif ( 'horizontal' === $tablet_direction || 'horizontal-reverse' === $tablet_direction ) {
|
||||
if ( ! empty( $attributes['flexBasis'][1] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *' );
|
||||
$basis_unit = ! empty( $attributes['flexBasisUnit'] ) ? $attributes['flexBasisUnit'] : 'px';
|
||||
$css->add_property( 'flex-basis', $attributes['flexBasis'][1] . $basis_unit );
|
||||
}
|
||||
if ( ( 'vertical' === $desktop_direction || 'vertical-reverse' === $desktop_direction ) && ! empty( $tablet_vertical_align ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'justify-content', 'inherit' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .aligncenter' );
|
||||
$css->add_property( 'width', 'auto' );
|
||||
}
|
||||
// If desktop vertical lets add the horizontal css.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'flex-direction', ( 'horizontal-reverse' === $tablet_direction ? 'row-reverse' : 'row' ) );
|
||||
$css->add_property( 'flex-wrap', 'wrap' );
|
||||
$align = $tablet_vertical_align;
|
||||
switch ( $align ) {
|
||||
case 'top':
|
||||
$align = 'flex-start';
|
||||
break;
|
||||
case 'bottom':
|
||||
$align = 'flex-end';
|
||||
break;
|
||||
case 'stretch':
|
||||
$align = 'stretch';
|
||||
break;
|
||||
default:
|
||||
$align = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'align-items', $align );
|
||||
if ( ! empty( $tablet_horizontal_align ) ) {
|
||||
$css->add_property( 'justify-content', $tablet_horizontal_align );
|
||||
} elseif ( ! $is_version_two && ! empty( $tablet_text_align ) ) {
|
||||
switch ( $tablet_text_align ) {
|
||||
case 'left':
|
||||
$justify = 'flex-start';
|
||||
break;
|
||||
case 'right':
|
||||
$justify = 'flex-end';
|
||||
break;
|
||||
default:
|
||||
$justify = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'justify-content', $justify );
|
||||
}
|
||||
if ( ! empty( $tablet_flex_wrap ) ) {
|
||||
$css->add_property( 'flex-wrap', $tablet_flex_wrap );
|
||||
}
|
||||
$css->set_media_state( 'tabletOnly' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *, .kadence-column' . $unique_id . ' > .kt-inside-inner-col > figure.wp-block-image, .kadence-column' . $unique_id . ' > .kt-inside-inner-col > figure.wp-block-kadence-image' );
|
||||
$css->add_property( 'margin-top', '0px' );
|
||||
$css->add_property( 'margin-bottom', '0px' );
|
||||
// Handle Ratio Images.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .kb-image-is-ratio-size' );
|
||||
$css->add_property( 'flex-grow', 1 );
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( ! empty( $attributes['maxWidth'][2] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( 'max-width', $attributes['maxWidth'][2] . $mobile_max_width_unit );
|
||||
$css->add_property( 'margin-left', 'auto' );
|
||||
$css->add_property( 'margin-right', 'auto' );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-sm-dir-vertical:not(.kb-section-sm-dir-horizontal):not(.kb-section-sm-dir-specificity)>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex', '0 1 ' . $attributes['maxWidth'][2] . $mobile_max_width_unit );
|
||||
$css->set_selector( '.wp-block-kadence-column>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex', '1 ' . $attributes['maxWidth'][2] . $mobile_max_width_unit );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-sm-dir-horizontal>.kt-inside-inner-col>.kadence-column' . $unique_id . ', .wp-block-kadence-column.kb-section-dir-horizontal:not(.kb-section-sm-dir-vertical):not(.kb-section-md-dir-vertical) >.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'flex', '0 1 ' . $attributes['maxWidth'][2] . $mobile_max_width_unit );
|
||||
$css->add_property( 'max-width', 'unset' );
|
||||
$css->add_property( 'margin-left', 'unset' );
|
||||
$css->add_property( 'margin-right', 'unset' );
|
||||
} elseif ( ! empty( $attributes['maxWidth'][1] ) ) {
|
||||
// Tablet fallback.
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-sm-dir-vertical:not(.kb-section-sm-dir-horizontal):not(.kb-section-sm-dir-specificity)>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'max-width', $attributes['maxWidth'][1] . $tablet_max_width_unit );
|
||||
$css->add_property( 'flex', '1' );
|
||||
$css->add_property( 'margin-left', 'auto' );
|
||||
$css->add_property( 'margin-right', 'auto' );
|
||||
} elseif ( ! empty( $attributes['maxWidth'][0] ) ) {
|
||||
// Desktop fallback.
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-sm-dir-vertical:not(.kb-section-sm-dir-horizontal):not(.kb-section-sm-dir-specificity)>.kt-inside-inner-col>.kadence-column' . $unique_id );
|
||||
$css->add_property( 'max-width', $attributes['maxWidth'][0] . $max_width_unit );
|
||||
$css->add_property( 'flex', '1' );
|
||||
$css->add_property( 'margin-left', 'auto' );
|
||||
$css->add_property( 'margin-right', 'auto' );
|
||||
}
|
||||
if ( isset( $attributes['collapseOrder'] ) ) {
|
||||
$css->set_selector( '.kt-row-column-wrap.kt-mobile-layout-three-grid > .kadence-column' . $unique_id . ', .kt-row-column-wrap.kt-mobile-layout-two-grid > .kadence-column' . $unique_id . ', .kt-row-column-wrap.kt-mobile-layout-row > .kadence-column' . $unique_id );
|
||||
$css->add_property( 'order', $attributes['collapseOrder'] . ' !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['textAlign'][2] ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id );
|
||||
$css->add_property( 'text-align', $attributes['textAlign'][2] );
|
||||
}
|
||||
if ( 'vertical' === $mobile_direction || 'vertical-reverse' === $mobile_direction ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'flex-direction', ( 'vertical-reverse' === $mobile_direction ? 'column-reverse' : 'column' ) );
|
||||
$justify = ! empty( $mobile_vertical_align ) ? $mobile_vertical_align : 'center';
|
||||
switch ( $justify ) {
|
||||
case 'top':
|
||||
$justify = 'flex-start';
|
||||
break;
|
||||
case 'bottom':
|
||||
$justify = 'flex-end';
|
||||
break;
|
||||
case 'space-between':
|
||||
$justify = 'space-between';
|
||||
break;
|
||||
case 'space-around':
|
||||
$justify = 'space-around';
|
||||
break;
|
||||
case 'space-evenly':
|
||||
$justify = 'space-evenly';
|
||||
break;
|
||||
case 'stretch':
|
||||
$justify = 'stretch';
|
||||
break;
|
||||
default:
|
||||
$justify = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'justify-content', $justify );
|
||||
if ( ( ( 'horizontal' === $tablet_direction || 'horizontal-reverse' === $tablet_direction ) && empty( $attributes['justifyContent'][2] ) ) || ( ( 'horizontal' === $desktop_direction || 'horizontal-reverse' === $desktop_direction ) && empty( $attributes['justifyContent'][1] ) && empty( $attributes['justifyContent'][2] ) ) ) {
|
||||
$css->add_property( 'align-items', 'stretch' );
|
||||
} elseif ( ! empty( $mobile_horizontal_align ) ) {
|
||||
$css->add_property( 'align-items', $mobile_horizontal_align );
|
||||
}
|
||||
if ( ( 'horizontal' === $tablet_direction || 'horizontal-reverse' === $tablet_direction ) ) {
|
||||
$css->add_property( 'flex-wrap', 'nowrap' );
|
||||
}
|
||||
if ( ( 'horizontal' === $tablet_direction || 'horizontal-reverse' === $tablet_direction ) && ( ! empty( $attributes['flexBasis'][0] ) || ! empty( $attributes['flexBasis'][1] ) ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *,.wp-block-kadence-column.kb-section-md-dir-vertical.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *' );
|
||||
$css->add_property( 'flex', '1' );
|
||||
$css->add_property( 'max-width', '100%' );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .wp-block-kadence-infobox' );
|
||||
$css->add_property( 'width', 'auto' );
|
||||
$css->add_property( 'align-self', 'unset' );
|
||||
}
|
||||
if ( ( 'horizontal' === $tablet_direction || 'horizontal-reverse' === $tablet_direction ) && ! empty( $attributes['direction'][2] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .wp-block-kadence-infobox' );
|
||||
$css->add_property( 'align-self', 'unset' );
|
||||
}
|
||||
} elseif ( 'horizontal' === $mobile_direction || 'horizontal-reverse' === $mobile_direction ) {
|
||||
|
||||
if ( ! empty( $attributes['flexBasis'][2] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *' );
|
||||
$basis_unit = ! empty( $attributes['flexBasisUnit'] ) ? $attributes['flexBasisUnit'] : 'px';
|
||||
$css->add_property( 'flex-basis', $attributes['flexBasis'][2] . $basis_unit );
|
||||
}
|
||||
|
||||
if ( 'vertical' === $tablet_direction && ! empty( $mobile_vertical_align ) ) {
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'justify-content', 'inherit' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .aligncenter' );
|
||||
$css->add_property( 'width', 'auto' );
|
||||
}
|
||||
// If tablet vertical lets add the horizontal css.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'flex-direction', ( 'horizontal-reverse' === $mobile_direction ? 'row-reverse' : 'row' ) );
|
||||
$css->add_property( 'flex-wrap', 'wrap' );
|
||||
$css->add_property( 'justify-content', 'flex-start' );
|
||||
if ( 'vertical' === $tablet_direction || 'vertical-reverse' === $tablet_direction ) {
|
||||
$align = $mobile_vertical_align;
|
||||
switch ( $align ) {
|
||||
case 'top':
|
||||
$align = 'flex-start';
|
||||
break;
|
||||
case 'bottom':
|
||||
$align = 'flex-end';
|
||||
break;
|
||||
case 'stretch':
|
||||
$align = 'stretch';
|
||||
break;
|
||||
default:
|
||||
$align = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'align-items', $align );
|
||||
}
|
||||
if ( ! empty( $mobile_horizontal_align ) ) {
|
||||
$css->add_property( 'justify-content', $mobile_horizontal_align );
|
||||
} elseif ( ! $is_version_two && ! empty( $mobile_text_align ) ) {
|
||||
switch ( $mobile_text_align ) {
|
||||
case 'left':
|
||||
$justify = 'flex-start';
|
||||
break;
|
||||
case 'right':
|
||||
$justify = 'flex-end';
|
||||
break;
|
||||
default:
|
||||
$justify = 'center';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'justify-content', $justify );
|
||||
}
|
||||
if ( ! empty( $mobile_flex_wrap ) ) {
|
||||
$css->add_property( 'flex-wrap', $mobile_flex_wrap );
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > *, .kadence-column' . $unique_id . ' > .kt-inside-inner-col > figure.wp-block-image, .kadence-column' . $unique_id . ' > .kt-inside-inner-col > figure.wp-block-kadence-image' );
|
||||
$css->add_property( 'margin-top', '0px' );
|
||||
$css->add_property( 'margin-bottom', '0px' );
|
||||
// Handle Ratio Images.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col > .kb-image-is-ratio-size' );
|
||||
$css->add_property( 'flex-grow', 1 );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
// Doing margin last so that it has priority.
|
||||
// Margin, check old first.
|
||||
if ( $css->is_number( $attributes['topMargin'] ) || $css->is_number( $attributes['bottomMargin'] ) || $css->is_number( $attributes['rightMargin'] ) || $css->is_number( $attributes['leftMargin'] ) || $css->is_number( $attributes['topMarginT'] ) || $css->is_number( $attributes['bottomMarginT'] ) || $css->is_number( $attributes['rightMarginT'] ) || $css->is_number( $attributes['leftMarginT'] ) || $css->is_number( $attributes['topMarginM'] ) || $css->is_number( $attributes['bottomMarginM'] ) || $css->is_number( $attributes['rightMarginM'] ) || $css->is_number( $attributes['leftMarginM'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
if ( $css->is_number( $attributes['topMargin'] ) ) {
|
||||
$css->add_property( 'margin-top', $attributes['topMargin'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['bottomMargin'] ) ) {
|
||||
$css->add_property( 'margin-bottom', $attributes['bottomMargin'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['rightMargin'] ) ) {
|
||||
$css->add_property( 'margin-right', $attributes['rightMargin'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['leftMargin'] ) ) {
|
||||
$css->add_property( 'margin-left', $attributes['leftMargin'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( $css->is_number( $attributes['topMarginT'] ) ) {
|
||||
$css->add_property( 'margin-top', $attributes['topMarginT'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['bottomMarginT'] ) ) {
|
||||
$css->add_property( 'margin-bottom', $attributes['bottomMarginT'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['rightMarginT'] ) ) {
|
||||
$css->add_property( 'margin-right', $attributes['rightMarginT'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['leftMarginT'] ) ) {
|
||||
$css->add_property( 'margin-left', $attributes['leftMarginT'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( $css->is_number( $attributes['topMarginM'] ) ) {
|
||||
$css->add_property( 'margin-top', $attributes['topMarginM'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['bottomMarginM'] ) ) {
|
||||
$css->add_property( 'margin-bottom', $attributes['bottomMarginM'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['rightMarginM'] ) ) {
|
||||
$css->add_property( 'margin-right', $attributes['rightMarginM'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['leftMarginM'] ) ) {
|
||||
$css->add_property( 'margin-left', $attributes['leftMarginM'] . ( ! empty( $attributes['marginType'] ) ? $attributes['marginType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
} else {
|
||||
// New margin intentially targets outer container, improvement and don't have to worry about issues with row layout.
|
||||
$css->set_selector( '.kadence-column' . $unique_id . ', .kt-inside-inner-col > .kadence-column' . $unique_id . ':not(.specificity)' );
|
||||
$css->render_measure_output(
|
||||
$attributes,
|
||||
'margin',
|
||||
'margin',
|
||||
array(
|
||||
'unit_key' => 'marginType',
|
||||
)
|
||||
);
|
||||
}
|
||||
if ( isset( $attributes['kadenceBlockCSS'] ) && ! empty( $attributes['kadenceBlockCSS'] ) ) {
|
||||
$css->add_css_string( str_replace( 'selector', '.kadence-column' . $unique_id, $attributes['kadenceBlockCSS'] ) );
|
||||
}
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$html = parent::build_html( $attributes, $unique_id, $content, $block_instance );
|
||||
|
||||
// Do not remove: The Optimizer uses this.
|
||||
return apply_filters( 'kadence_blocks_column_html', $html, $attributes, $unique_id, $block_instance );
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the vertical align.
|
||||
*
|
||||
* @param array $media_state The media query size.
|
||||
* @param string $media_vertical_align The alignment setting.
|
||||
* @param string $media_direction The direction setting.
|
||||
* @param object $css The css object.
|
||||
* @param string $unique_id The unique id.
|
||||
*/
|
||||
private function set_vertical_align( $media_state, $media_vertical_align, $media_direction, $css, $unique_id ) {
|
||||
// Restart $align variable to avoid inherit from above value assignment
|
||||
$align = 'center';
|
||||
$justify_content = '';
|
||||
switch ( $media_vertical_align ) {
|
||||
case 'top':
|
||||
$align = 'flex-start';
|
||||
$justify_content = 'flex-start';
|
||||
break;
|
||||
case 'bottom':
|
||||
$align = 'flex-end';
|
||||
$justify_content = 'flex-end';
|
||||
break;
|
||||
case 'space-between':
|
||||
$justify_content = 'space-between';
|
||||
break;
|
||||
case 'space-around':
|
||||
$justify_content = 'space-around';
|
||||
break;
|
||||
case 'space-evenly':
|
||||
$justify_content = 'space-evenly';
|
||||
break;
|
||||
case 'stretch':
|
||||
$justify_content = 'stretch';
|
||||
break;
|
||||
default:
|
||||
$justify_content = 'center';
|
||||
break;
|
||||
}
|
||||
$css->set_media_state( $media_state );
|
||||
if ( 'horizontal' === $media_direction || 'horizontal-reverse' === $media_direction ) {
|
||||
$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
|
||||
$css->add_property( 'align-self', $align );
|
||||
$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
|
||||
$css->add_property( 'align-self', 'auto' );
|
||||
$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'align-items', $align );
|
||||
} else {
|
||||
$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
|
||||
$css->add_property( 'align-self', $align );
|
||||
$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
|
||||
$css->add_property( 'align-self', 'auto' );
|
||||
$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
|
||||
$css->add_property( 'flex-direction', 'column' );
|
||||
$css->add_property( 'justify-content', $justify_content );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Column_Block::get_instance();
|
||||
@@ -0,0 +1,667 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Countdown Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Countdown Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Countdown_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'countdown';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
if ( isset( $attributes['background'] ) || isset( $attributes['border'] ) || ( isset( $attributes['borderRadius'] ) && is_array( $attributes['borderRadius'] ) ) || ( isset( $attributes['borderWidth'] ) && is_array( $attributes['borderWidth'] ) ) ) {
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id );
|
||||
if ( isset( $attributes['background'] ) && ! empty( $attributes['background'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['background'] ) );
|
||||
}
|
||||
if ( isset( $attributes['border'] ) && ! empty( $attributes['border'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['border'] ) );
|
||||
}
|
||||
if ( isset( $attributes['borderRadius'] ) && is_array( $attributes['borderRadius'] ) ) {
|
||||
if ( isset( $attributes['borderRadius'][0] ) && is_numeric( $attributes['borderRadius'][0] ) ) {
|
||||
$css->add_property( 'border-top-left-radius', $attributes['borderRadius'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['borderRadius'][1] ) && is_numeric( $attributes['borderRadius'][1] ) ) {
|
||||
$css->add_property( 'border-top-right-radius', $attributes['borderRadius'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['borderRadius'][2] ) && is_numeric( $attributes['borderRadius'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-right-radius', $attributes['borderRadius'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['borderRadius'][3] ) && is_numeric( $attributes['borderRadius'][3] ) ) {
|
||||
$css->add_property( 'border-bottom-left-radius', $attributes['borderRadius'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['borderWidth'] ) && is_array( $attributes['borderWidth'] ) ) {
|
||||
if ( isset( $attributes['borderWidth'][0] ) && is_numeric( $attributes['borderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['borderWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['borderWidth'][1] ) && is_numeric( $attributes['borderWidth'][1] ) ) {
|
||||
$css->add_property( 'border-right-width', $attributes['borderWidth'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['borderWidth'][2] ) && is_numeric( $attributes['borderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $attributes['borderWidth'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['borderWidth'][3] ) && is_numeric( $attributes['borderWidth'][3] ) ) {
|
||||
$css->add_property( 'border-left-width', $attributes['borderWidth'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['tabletBorderWidth'] ) && is_array( $attributes['tabletBorderWidth'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id );
|
||||
if ( isset( $attributes['tabletBorderWidth'][0] ) && is_numeric( $attributes['tabletBorderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['tabletBorderWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['tabletBorderWidth'][1] ) && is_numeric( $attributes['tabletBorderWidth'][1] ) ) {
|
||||
$css->add_property( 'border-right-width', $attributes['tabletBorderWidth'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['tabletBorderWidth'][2] ) && is_numeric( $attributes['tabletBorderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $attributes['tabletBorderWidth'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['tabletBorderWidth'][3] ) && is_numeric( $attributes['tabletBorderWidth'][3] ) ) {
|
||||
$css->add_property( 'border-left-width', $attributes['tabletBorderWidth'][3] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['mobileBorderWidth'] ) && is_array( $attributes['mobileBorderWidth'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id );
|
||||
if ( isset( $attributes['mobileBorderWidth'][0] ) && is_numeric( $attributes['mobileBorderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['mobileBorderWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['mobileBorderWidth'][1] ) && is_numeric( $attributes['mobileBorderWidth'][1] ) ) {
|
||||
$css->add_property( 'border-right-width', $attributes['mobileBorderWidth'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['mobileBorderWidth'][2] ) && is_numeric( $attributes['mobileBorderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $attributes['mobileBorderWidth'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['mobileBorderWidth'][3] ) && is_numeric( $attributes['mobileBorderWidth'][3] ) ) {
|
||||
$css->add_property( 'border-left-width', $attributes['mobileBorderWidth'][3] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id );
|
||||
$css->render_measure_output( $attributes, 'containerPadding', 'padding', [ 'unit_key' => 'paddingType', 'tablet_key' => 'containerTabletPadding', 'mobile_key' => 'containerMobilePadding' ] );
|
||||
|
||||
$css->render_measure_output( $attributes, 'containerMargin', 'margin', [ 'unit_key' => 'marginType', 'tablet_key' => 'containerTabletMargin', 'mobile_key' => 'containerMobileMargin' ] );
|
||||
|
||||
if ( isset( $attributes['itemBackground'] ) || isset( $attributes['itemBorder'] ) || ( isset( $attributes['itemBorderRadius'] ) && is_array( $attributes['itemBorderRadius'] ) ) || ( isset( $attributes['itemBorderWidth'] ) && is_array( $attributes['itemBorderWidth'] ) ) || ( isset( $attributes['itemPadding'] ) && is_array( $attributes['itemPadding'] ) ) ) {
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item:not( .kb-countdown-divider-item )' );
|
||||
if ( isset( $attributes['itemBackground'] ) && ! empty( $attributes['itemBackground'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['itemBackground'] ) );
|
||||
}
|
||||
if ( isset( $attributes['itemBorder'] ) && ! empty( $attributes['itemBorder'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['itemBorder'] ) );
|
||||
}
|
||||
if ( isset( $attributes['itemBorderRadius'] ) && is_array( $attributes['itemBorderRadius'] ) ) {
|
||||
if ( isset( $attributes['itemBorderRadius'][0] ) && is_numeric( $attributes['itemBorderRadius'][0] ) ) {
|
||||
$css->add_property( 'border-top-left-radius', $attributes['itemBorderRadius'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemBorderRadius'][1] ) && is_numeric( $attributes['itemBorderRadius'][1] ) ) {
|
||||
$css->add_property( 'border-top-right-radius', $attributes['itemBorderRadius'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemBorderRadius'][2] ) && is_numeric( $attributes['itemBorderRadius'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-right-radius', $attributes['itemBorderRadius'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemBorderRadius'][3] ) && is_numeric( $attributes['itemBorderRadius'][3] ) ) {
|
||||
$css->add_property( 'border-bottom-left-radius', $attributes['itemBorderRadius'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['itemBorderWidth'] ) && is_array( $attributes['itemBorderWidth'] ) ) {
|
||||
if ( isset( $attributes['itemBorderWidth'][0] ) && is_numeric( $attributes['itemBorderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['itemBorderWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemBorderWidth'][1] ) && is_numeric( $attributes['itemBorderWidth'][1] ) ) {
|
||||
$css->add_property( 'border-right-width', $attributes['itemBorderWidth'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemBorderWidth'][2] ) && is_numeric( $attributes['itemBorderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $attributes['itemBorderWidth'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemBorderWidth'][3] ) && is_numeric( $attributes['itemBorderWidth'][3] ) ) {
|
||||
$css->add_property( 'border-left-width', $attributes['itemBorderWidth'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['itemPadding'] ) && is_array( $attributes['itemPadding'] ) ) {
|
||||
if ( isset( $attributes['itemPadding'][0] ) && is_numeric( $attributes['itemPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['itemPadding'][0] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemPadding'][1] ) && is_numeric( $attributes['itemPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $attributes['itemPadding'][1] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemPadding'][2] ) && is_numeric( $attributes['itemPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['itemPadding'][2] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemPadding'][3] ) && is_numeric( $attributes['itemPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $attributes['itemPadding'][3] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
}
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item.kb-countdown-divider-item' );
|
||||
if ( isset( $attributes['itemPadding'] ) && is_array( $attributes['itemPadding'] ) ) {
|
||||
if ( isset( $attributes['itemPadding'][0] ) && is_numeric( $attributes['itemPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['itemPadding'][0] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemPadding'][2] ) && is_numeric( $attributes['itemPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['itemPadding'][2] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['itemBorderWidth'] ) && is_array( $attributes['itemBorderWidth'] ) ) {
|
||||
if ( isset( $attributes['itemBorderWidth'][0] ) && is_numeric( $attributes['itemBorderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['itemBorderWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemBorderWidth'][2] ) && is_numeric( $attributes['itemBorderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $attributes['itemBorderWidth'][2] . 'px' );
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( ( isset( $attributes['itemTabletBorderWidth'] ) && is_array( $attributes['itemTabletBorderWidth'] ) ) || ( isset( $attributes['itemTabletPadding'] ) && is_array( $attributes['itemTabletPadding'] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item:not( .kb-countdown-divider-item )' );
|
||||
if ( isset( $attributes['itemTabletPadding'] ) && is_array( $attributes['itemTabletPadding'] ) ) {
|
||||
if ( isset( $attributes['itemTabletPadding'][0] ) && is_numeric( $attributes['itemTabletPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['itemTabletPadding'][0] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemTabletPadding'][1] ) && is_numeric( $attributes['itemTabletPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $attributes['itemTabletPadding'][1] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemTabletPadding'][2] ) && is_numeric( $attributes['itemTabletPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['itemTabletPadding'][2] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemTabletPadding'][3] ) && is_numeric( $attributes['itemTabletPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $attributes['itemTabletPadding'][3] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['itemTabletBorderWidth'] ) && is_array( $attributes['itemTabletBorderWidth'] ) ) {
|
||||
if ( isset( $attributes['itemTabletBorderWidth'][0] ) && is_numeric( $attributes['itemTabletBorderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['itemTabletBorderWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemTabletBorderWidth'][1] ) && is_numeric( $attributes['itemTabletBorderWidth'][1] ) ) {
|
||||
$css->add_property( 'border-right-width', $attributes['itemTabletBorderWidth'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemTabletBorderWidth'][2] ) && is_numeric( $attributes['itemTabletBorderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $attributes['itemTabletBorderWidth'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemTabletBorderWidth'][3] ) && is_numeric( $attributes['itemTabletBorderWidth'][3] ) ) {
|
||||
$css->add_property( 'border-left-width', $attributes['itemTabletBorderWidth'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item.kb-countdown-divider-item' );
|
||||
if ( isset( $attributes['itemTabletPadding'] ) && is_array( $attributes['itemTabletPadding'] ) ) {
|
||||
if ( isset( $attributes['itemTabletPadding'][0] ) && is_numeric( $attributes['itemTabletPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['itemTabletPadding'][0] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemTabletPadding'][2] ) && is_numeric( $attributes['itemTabletPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['itemTabletPadding'][2] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['itemTabletBorderWidth'] ) && is_array( $attributes['itemTabletBorderWidth'] ) ) {
|
||||
if ( isset( $attributes['itemTabletBorderWidth'][0] ) && is_numeric( $attributes['itemTabletBorderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['itemTabletBorderWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemTabletBorderWidth'][2] ) && is_numeric( $attributes['itemTabletBorderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $attributes['itemTabletBorderWidth'][2] . 'px' );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $attributes['itemMobileBorderWidth'] ) && is_array( $attributes['itemMobileBorderWidth'] ) ) || ( isset( $attributes['itemMobilePadding'] ) && is_array( $attributes['itemMobilePadding'] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item:not( .kb-countdown-divider-item )' );
|
||||
if ( isset( $attributes['itemMobilePadding'] ) && is_array( $attributes['itemMobilePadding'] ) ) {
|
||||
if ( isset( $attributes['itemMobilePadding'][0] ) && is_numeric( $attributes['itemMobilePadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['itemMobilePadding'][0] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemMobilePadding'][1] ) && is_numeric( $attributes['itemMobilePadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $attributes['itemMobilePadding'][1] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemMobilePadding'][2] ) && is_numeric( $attributes['itemMobilePadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['itemMobilePadding'][2] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['itemMobilePadding'][3] ) && is_numeric( $attributes['itemMobilePadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $attributes['itemMobilePadding'][3] . ( isset( $attributes['itemPaddingType'] ) ? $attributes['itemPaddingType'] : 'px' ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['itemMobileBorderWidth'] ) && is_array( $attributes['itemMobileBorderWidth'] ) ) {
|
||||
if ( isset( $attributes['itemMobileBorderWidth'][0] ) && is_numeric( $attributes['itemMobileBorderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['itemMobileBorderWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemMobileBorderWidth'][1] ) && is_numeric( $attributes['itemMobileBorderWidth'][1] ) ) {
|
||||
$css->add_property( 'border-right-width', $attributes['itemMobileBorderWidth'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemMobileBorderWidth'][2] ) && is_numeric( $attributes['itemMobileBorderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $attributes['itemMobileBorderWidth'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['itemMobileBorderWidth'][3] ) && is_numeric( $attributes['itemMobileBorderWidth'][3] ) ) {
|
||||
$css->add_property( 'border-left-width', $attributes['itemMobileBorderWidth'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$number_font = ( isset( $attributes['numberFont'] ) && is_array( $attributes['numberFont'] ) && isset( $attributes['numberFont'][0] ) && is_array( $attributes['numberFont'][0] ) ? $attributes['numberFont'][0] : array() );
|
||||
if ( ! empty( $number_font ) || ( isset( $attributes['numberColor'] ) && ! empty( $attributes['numberColor'] ) ) ) {
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item .kb-countdown-number' );
|
||||
if ( isset( $attributes['numberColor'] ) && ! empty( $attributes['numberColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['numberColor'] ) );
|
||||
}
|
||||
if ( isset( $number_font['size'] ) && is_array( $number_font['size'] ) && isset( $number_font['size'][0] ) && ! empty( $number_font['size'][0] ) ) {
|
||||
if( $css->is_variable_font_size_value( $number_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $number_font['size'][0] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $number_font['size'][0] . ( ! isset( $number_font['sizeType'] ) ? 'px' : $number_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $number_font['lineHeight'] ) && is_array( $number_font['lineHeight'] ) && isset( $number_font['lineHeight'][0] ) && ! empty( $number_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $number_font['lineHeight'][0] . ( ! isset( $number_font['lineType'] ) ? 'px' : $number_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $number_font['letterSpacing'] ) && is_array( $number_font['letterSpacing'] ) && isset( $number_font['letterSpacing'][0] ) && ! empty( $number_font['letterSpacing'][0] ) ) {
|
||||
$css->add_property( 'letter-spacing', $number_font['letterSpacing'][0] . ( ! isset( $number_font['letterType'] ) ? 'px' : $number_font['letterType'] ) );
|
||||
}
|
||||
if ( isset( $number_font['textTransform'] ) && ! empty( $number_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $number_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $number_font['family'] ) && ! empty( $number_font['family'] ) ) {
|
||||
$google = isset( $number_font['google'] ) && $number_font['google'] ? true : false;
|
||||
$google = $google && ( isset( $number_font['loadGoogle'] ) && $number_font['loadGoogle'] || ! isset( $number_font['loadGoogle'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $number_font['family'], $google, ( isset( $number_font['variant'] ) ? $number_font['variant'] : '' ), ( isset( $number_font['subset'] ) ? $number_font['subset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $number_font['style'] ) && ! empty( $number_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $number_font['style'] );
|
||||
}
|
||||
if ( isset( $number_font['weight'] ) && ! empty( $number_font['weight'] ) && 'regular' !== $number_font['weight'] ) {
|
||||
$css->add_property( 'font-weight', $number_font['weight'] );
|
||||
}
|
||||
if ( isset( $number_font['size'] ) && is_array( $number_font['size'] ) && isset( $number_font['size'][0] ) && ! empty( $number_font['size'][0] ) ) {
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item' );
|
||||
if( $css->is_variable_font_size_value( $number_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $number_font['size'][0] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $number_font['size'][0] . ( ! isset( $number_font['sizeType'] ) ? 'px' : $number_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item .kb-countdown-number' );
|
||||
if ( isset( $number_font['size'] ) && is_array( $number_font['size'] ) && isset( $number_font['size'][1] ) && ! empty( $number_font['size'][1] ) ) {
|
||||
if( $css->is_variable_font_size_value( $number_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $number_font['size'][1] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $number_font['size'][1] . ( ! isset( $number_font['sizeType'] ) ? 'px' : $number_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $number_font['lineHeight'] ) && is_array( $number_font['lineHeight'] ) && isset( $number_font['lineHeight'][1] ) && ! empty( $number_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $number_font['lineHeight'][1] . ( ! isset( $number_font['lineType'] ) ? 'px' : $number_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $number_font['letterSpacing'] ) && is_array( $number_font['letterSpacing'] ) && isset( $number_font['letterSpacing'][1] ) && ! empty( $number_font['letterSpacing'][1] ) ) {
|
||||
$css->add_property( 'letter-spacing', $number_font['letterSpacing'][1] . ( ! isset( $number_font['letterType'] ) ? 'px' : $number_font['letterType'] ) );
|
||||
}
|
||||
if ( isset( $number_font['size'] ) && is_array( $number_font['size'] ) && isset( $number_font['size'][1] ) && ! empty( $number_font['size'][1] ) ) {
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item' );
|
||||
if( $css->is_variable_font_size_value( $number_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $number_font['size'][1] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $number_font['size'][1] . ( ! isset( $number_font['sizeType'] ) ? 'px' : $number_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item .kb-countdown-number' );
|
||||
if ( isset( $number_font['size'] ) && is_array( $number_font['size'] ) && isset( $number_font['size'][2] ) && ! empty( $number_font['size'][2] ) ) {
|
||||
if( $css->is_variable_font_size_value( $number_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $number_font['size'][2] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $number_font['size'][2] . ( ! isset( $number_font['sizeType'] ) ? 'px' : $number_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $number_font['lineHeight'] ) && is_array( $number_font['lineHeight'] ) && isset( $number_font['lineHeight'][2] ) && ! empty( $number_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $number_font['lineHeight'][2] . ( ! isset( $number_font['lineType'] ) ? 'px' : $number_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $number_font['letterSpacing'] ) && is_array( $number_font['letterSpacing'] ) && isset( $number_font['letterSpacing'][2] ) && ! empty( $number_font['letterSpacing'][2] ) ) {
|
||||
$css->add_property( 'letter-spacing', $number_font['letterSpacing'][2] . ( ! isset( $number_font['letterType'] ) ? 'px' : $number_font['letterType'] ) );
|
||||
}
|
||||
if ( isset( $number_font['size'] ) && is_array( $number_font['size'] ) && isset( $number_font['size'][2] ) && ! empty( $number_font['size'][2] ) ) {
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item' );
|
||||
if( $css->is_variable_font_size_value( $number_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $number_font['size'][2] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $number_font['size'][2] . ( ! isset( $number_font['sizeType'] ) ? 'px' : $number_font['sizeType'] ) );
|
||||
} }
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$label_font = ( isset( $attributes['labelFont'] ) && is_array( $attributes['labelFont'] ) && isset( $attributes['labelFont'][0] ) && is_array( $attributes['labelFont'][0] ) ? $attributes['labelFont'][0] : array() );
|
||||
if ( ! empty( $label_font ) || ( isset( $attributes['labelColor'] ) && ! empty( $attributes['labelColor'] ) ) ) {
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item .kb-countdown-label' );
|
||||
if ( isset( $attributes['labelColor'] ) && ! empty( $attributes['labelColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['labelColor'] ) );
|
||||
}
|
||||
if ( isset( $label_font['size'] ) && is_array( $label_font['size'] ) && isset( $label_font['size'][0] ) && ! empty( $label_font['size'][0] ) ) {
|
||||
if( $css->is_variable_font_size_value( $label_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $label_font['size'][0] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $label_font['size'][0] . ( ! isset( $label_font['sizeType'] ) ? 'px' : $label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $label_font['lineHeight'] ) && is_array( $label_font['lineHeight'] ) && isset( $label_font['lineHeight'][0] ) && ! empty( $label_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $label_font['lineHeight'][0] . ( ! isset( $label_font['lineType'] ) ? 'px' : $label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $label_font['letterSpacing'] ) && is_array( $label_font['letterSpacing'] ) && isset( $label_font['letterSpacing'][0] ) && ! empty( $label_font['letterSpacing'][0] ) ) {
|
||||
$css->add_property( 'letter-spacing', $label_font['letterSpacing'][0] . ( ! isset( $label_font['letterType'] ) ? 'px' : $label_font['letterType'] ) );
|
||||
}
|
||||
if ( isset( $label_font['textTransform'] ) && ! empty( $label_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $label_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $label_font['family'] ) && ! empty( $label_font['family'] ) ) {
|
||||
$google = isset( $label_font['google'] ) && $label_font['google'] ? true : false;
|
||||
$google = $google && ( isset( $label_font['loadGoogle'] ) && $label_font['loadGoogle'] || ! isset( $label_font['loadGoogle'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $label_font['family'], $google, ( isset( $label_font['variant'] ) ? $label_font['variant'] : '' ), ( isset( $label_font['subset'] ) ? $label_font['subset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $label_font['style'] ) && ! empty( $label_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $label_font['style'] );
|
||||
}
|
||||
if ( isset( $label_font['weight'] ) && ! empty( $label_font['weight'] ) && 'regular' !== $label_font['weight'] ) {
|
||||
$css->add_property( 'font-weight', $label_font['weight'] );
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item .kb-countdown-label' );
|
||||
if ( isset( $label_font['size'] ) && is_array( $label_font['size'] ) && isset( $label_font['size'][1] ) && ! empty( $label_font['size'][1] ) ) {
|
||||
if( $css->is_variable_font_size_value( $label_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $label_font['size'][1] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $label_font['size'][1] . ( ! isset( $label_font['sizeType'] ) ? 'px' : $label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $label_font['lineHeight'] ) && is_array( $label_font['lineHeight'] ) && isset( $label_font['lineHeight'][1] ) && ! empty( $label_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $label_font['lineHeight'][1] . ( ! isset( $label_font['lineType'] ) ? 'px' : $label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $label_font['letterSpacing'] ) && is_array( $label_font['letterSpacing'] ) && isset( $label_font['letterSpacing'][1] ) && ! empty( $label_font['letterSpacing'][1] ) ) {
|
||||
$css->add_property( 'letter-spacing', $label_font['letterSpacing'][1] . ( ! isset( $label_font['letterType'] ) ? 'px' : $label_font['letterType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-date-item .kb-countdown-label' );
|
||||
if ( isset( $label_font['size'] ) && is_array( $label_font['size'] ) && isset( $label_font['size'][2] ) && ! empty( $label_font['size'][2] ) ) {
|
||||
if( $css->is_variable_font_size_value( $label_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $label_font['size'][2] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $label_font['size'][2] . ( ! isset( $label_font['sizeType'] ) ? 'px' : $label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $label_font['lineHeight'] ) && is_array( $label_font['lineHeight'] ) && isset( $label_font['lineHeight'][2] ) && ! empty( $label_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $label_font['lineHeight'][2] . ( ! isset( $label_font['lineType'] ) ? 'px' : $label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $label_font['letterSpacing'] ) && is_array( $label_font['letterSpacing'] ) && isset( $label_font['letterSpacing'][2] ) && ! empty( $label_font['letterSpacing'][2] ) ) {
|
||||
$css->add_property( 'letter-spacing', $label_font['letterSpacing'][2] . ( ! isset( $label_font['letterType'] ) ? 'px' : $label_font['letterType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$pre_label_font = ( isset( $attributes['preLabelFont'] ) && is_array( $attributes['preLabelFont'] ) && isset( $attributes['preLabelFont'][0] ) && is_array( $attributes['preLabelFont'][0] ) ? $attributes['preLabelFont'][0] : array() );
|
||||
if ( ! empty( $pre_label_font ) || ( isset( $attributes['preLabelColor'] ) && ! empty( $attributes['preLabelColor'] ) ) ) {
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-item.kb-pre-timer' );
|
||||
if ( isset( $attributes['preLabelColor'] ) && ! empty( $attributes['preLabelColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['preLabelColor'] ) );
|
||||
}
|
||||
if ( isset( $pre_label_font['size'] ) && is_array( $pre_label_font['size'] ) && isset( $pre_label_font['size'][0] ) && ! empty( $pre_label_font['size'][0] ) ) {
|
||||
if( $css->is_variable_font_size_value( $pre_label_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $pre_label_font['size'][0] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $pre_label_font['size'][0] . ( ! isset( $pre_label_font['sizeType'] ) ? 'px' : $pre_label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $pre_label_font['lineHeight'] ) && is_array( $pre_label_font['lineHeight'] ) && isset( $pre_label_font['lineHeight'][0] ) && ! empty( $pre_label_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $pre_label_font['lineHeight'][0] . ( ! isset( $pre_label_font['lineType'] ) ? 'px' : $pre_label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $pre_label_font['letterSpacing'] ) && is_array( $pre_label_font['letterSpacing'] ) && isset( $pre_label_font['letterSpacing'][0] ) && ! empty( $pre_label_font['letterSpacing'][0] ) ) {
|
||||
$css->add_property( 'letter-spacing', $pre_label_font['letterSpacing'][0] . ( ! isset( $pre_label_font['letterType'] ) ? 'px' : $pre_label_font['letterType'] ) );
|
||||
}
|
||||
if ( isset( $pre_label_font['textTransform'] ) && ! empty( $pre_label_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $pre_label_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $pre_label_font['family'] ) && ! empty( $pre_label_font['family'] ) ) {
|
||||
$google = isset( $pre_label_font['google'] ) && $pre_label_font['google'] ? true : false;
|
||||
$google = $google && ( isset( $pre_label_font['loadGoogle'] ) && $pre_label_font['loadGoogle'] || ! isset( $pre_label_font['loadGoogle'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $pre_label_font['family'], $google, ( isset( $pre_label_font['variant'] ) ? $pre_label_font['variant'] : '' ), ( isset( $pre_label_font['subset'] ) ? $pre_label_font['subset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $pre_label_font['style'] ) && ! empty( $pre_label_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $pre_label_font['style'] );
|
||||
}
|
||||
if ( isset( $pre_label_font['weight'] ) && ! empty( $pre_label_font['weight'] ) && 'regular' !== $pre_label_font['weight'] ) {
|
||||
$css->add_property( 'font-weight', $pre_label_font['weight'] );
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-item.kb-pre-timer' );
|
||||
if ( isset( $pre_label_font['size'] ) && is_array( $pre_label_font['size'] ) && isset( $pre_label_font['size'][1] ) && ! empty( $pre_label_font['size'][1] ) ) {
|
||||
if( $css->is_variable_font_size_value( $pre_label_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $pre_label_font['size'][1] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $pre_label_font['size'][1] . ( ! isset( $pre_label_font['sizeType'] ) ? 'px' : $pre_label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $pre_label_font['lineHeight'] ) && is_array( $pre_label_font['lineHeight'] ) && isset( $pre_label_font['lineHeight'][1] ) && ! empty( $pre_label_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $pre_label_font['lineHeight'][1] . ( ! isset( $pre_label_font['lineType'] ) ? 'px' : $pre_label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $pre_label_font['letterSpacing'] ) && is_array( $pre_label_font['letterSpacing'] ) && isset( $pre_label_font['letterSpacing'][1] ) && ! empty( $pre_label_font['letterSpacing'][1] ) ) {
|
||||
$css->add_property( 'letter-spacing', $pre_label_font['letterSpacing'][1] . ( ! isset( $pre_label_font['letterType'] ) ? 'px' : $pre_label_font['letterType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-item.kb-pre-timer' );
|
||||
if ( isset( $pre_label_font['size'] ) && is_array( $pre_label_font['size'] ) && isset( $pre_label_font['size'][2] ) && ! empty( $pre_label_font['size'][2] ) ) {
|
||||
if( $css->is_variable_font_size_value( $pre_label_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $pre_label_font['size'][2] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $pre_label_font['size'][2] . ( ! isset( $pre_label_font['sizeType'] ) ? 'px' : $pre_label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $pre_label_font['lineHeight'] ) && is_array( $pre_label_font['lineHeight'] ) && isset( $pre_label_font['lineHeight'][2] ) && ! empty( $pre_label_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $pre_label_font['lineHeight'][2] . ( ! isset( $pre_label_font['lineType'] ) ? 'px' : $pre_label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $pre_label_font['letterSpacing'] ) && is_array( $pre_label_font['letterSpacing'] ) && isset( $pre_label_font['letterSpacing'][2] ) && ! empty( $pre_label_font['letterSpacing'][2] ) ) {
|
||||
$css->add_property( 'letter-spacing', $pre_label_font['letterSpacing'][2] . ( ! isset( $pre_label_font['letterType'] ) ? 'px' : $pre_label_font['letterType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$post_label_font = ( isset( $attributes['postLabelFont'] ) && is_array( $attributes['postLabelFont'] ) && isset( $attributes['postLabelFont'][0] ) && is_array( $attributes['postLabelFont'][0] ) ? $attributes['postLabelFont'][0] : array() );
|
||||
if ( ! empty( $post_label_font ) || ( isset( $attributes['postLabelColor'] ) && ! empty( $attributes['postLabelColor'] ) ) ) {
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-item.kb-post-timer' );
|
||||
if ( isset( $attributes['postLabelColor'] ) && ! empty( $attributes['postLabelColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['postLabelColor'] ) );
|
||||
}
|
||||
if ( isset( $post_label_font['size'] ) && is_array( $post_label_font['size'] ) && isset( $post_label_font['size'][0] ) && ! empty( $post_label_font['size'][0] ) ) {
|
||||
if( $css->is_variable_font_size_value( $post_label_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $post_label_font['size'][0] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $post_label_font['size'][0] . ( ! isset( $post_label_font['sizeType'] ) ? 'px' : $post_label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $post_label_font['lineHeight'] ) && is_array( $post_label_font['lineHeight'] ) && isset( $post_label_font['lineHeight'][0] ) && ! empty( $post_label_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $post_label_font['lineHeight'][0] . ( ! isset( $post_label_font['lineType'] ) ? 'px' : $post_label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $post_label_font['letterSpacing'] ) && is_array( $post_label_font['letterSpacing'] ) && isset( $post_label_font['letterSpacing'][0] ) && ! empty( $post_label_font['letterSpacing'][0] ) ) {
|
||||
$css->add_property( 'letter-spacing', $post_label_font['letterSpacing'][0] . ( ! isset( $post_label_font['letterType'] ) ? 'px' : $post_label_font['letterType'] ) );
|
||||
}
|
||||
if ( isset( $post_label_font['textTransform'] ) && ! empty( $post_label_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $post_label_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $post_label_font['family'] ) && ! empty( $post_label_font['family'] ) ) {
|
||||
$google = isset( $post_label_font['google'] ) && $post_label_font['google'] ? true : false;
|
||||
$google = $google && ( isset( $post_label_font['loadGoogle'] ) && $post_label_font['loadGoogle'] || ! isset( $post_label_font['loadGoogle'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $post_label_font['family'], $google, ( isset( $post_label_font['variant'] ) ? $post_label_font['variant'] : '' ), ( isset( $post_label_font['subset'] ) ? $post_label_font['subset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $post_label_font['style'] ) && ! empty( $post_label_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $post_label_font['style'] );
|
||||
}
|
||||
if ( isset( $post_label_font['weight'] ) && ! empty( $post_label_font['weight'] ) && 'regular' !== $post_label_font['weight'] ) {
|
||||
$css->add_property( 'font-weight', $post_label_font['weight'] );
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-item.kb-post-timer' );
|
||||
if ( isset( $post_label_font['size'] ) && is_array( $post_label_font['size'] ) && isset( $post_label_font['size'][1] ) && ! empty( $post_label_font['size'][1] ) ) {
|
||||
if( $css->is_variable_font_size_value( $post_label_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $post_label_font['size'][1] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $post_label_font['size'][1] . ( ! isset( $post_label_font['sizeType'] ) ? 'px' : $post_label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $post_label_font['lineHeight'] ) && is_array( $post_label_font['lineHeight'] ) && isset( $post_label_font['lineHeight'][1] ) && ! empty( $post_label_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $post_label_font['lineHeight'][1] . ( ! isset( $post_label_font['lineType'] ) ? 'px' : $post_label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $post_label_font['letterSpacing'] ) && is_array( $post_label_font['letterSpacing'] ) && isset( $post_label_font['letterSpacing'][1] ) && ! empty( $post_label_font['letterSpacing'][1] ) ) {
|
||||
$css->add_property( 'letter-spacing', $post_label_font['letterSpacing'][1] . ( ! isset( $post_label_font['letterType'] ) ? 'px' : $post_label_font['letterType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-countdown-container.kb-countdown-container-' . $unique_id . ' .kb-countdown-item.kb-post-timer' );
|
||||
if ( isset( $post_label_font['size'] ) && is_array( $post_label_font['size'] ) && isset( $post_label_font['size'][2] ) && ! empty( $post_label_font['size'][2] ) ) {
|
||||
if( $css->is_variable_font_size_value( $post_label_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_variable_font_size_value( $post_label_font['size'][2] ) );
|
||||
} else {
|
||||
$css->add_property( 'font-size', $post_label_font['size'][2] . ( ! isset( $post_label_font['sizeType'] ) ? 'px' : $post_label_font['sizeType'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $post_label_font['lineHeight'] ) && is_array( $post_label_font['lineHeight'] ) && isset( $post_label_font['lineHeight'][2] ) && ! empty( $post_label_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $post_label_font['lineHeight'][2] . ( ! isset( $post_label_font['lineType'] ) ? 'px' : $post_label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $post_label_font['letterSpacing'] ) && is_array( $post_label_font['letterSpacing'] ) && isset( $post_label_font['letterSpacing'][2] ) && ! empty( $post_label_font['letterSpacing'][2] ) ) {
|
||||
$css->add_property( 'letter-spacing', $post_label_font['letterSpacing'][2] . ( ! isset( $post_label_font['letterType'] ) ? 'px' : $post_label_font['letterType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
//$countdown should grow with each countdown that gets loaded to the page
|
||||
static $countdown = array();
|
||||
$campaign_id = ( ! empty( $attributes['campaignID'] ) ? $attributes['campaignID'] : $unique_id );
|
||||
$countdown_type = ( ! empty( $attributes['countdownType'] ) ? $attributes['countdownType'] : 'date' );
|
||||
$site_slug = apply_filters( 'kadence_blocks_countdown_site_slug', sanitize_title( get_bloginfo( 'name' ) ) );
|
||||
$reset_days = ( isset( $attributes['evergreenReset'] ) && ! empty( $attributes['evergreenReset'] ) ? $attributes['evergreenReset'] : 30 );
|
||||
$countdown[ $unique_id ] = array(
|
||||
'timestamp' => ( isset( $attributes['timestamp'] ) ? esc_attr( $attributes['timestamp'] ) : '' ),
|
||||
'type' => esc_attr( $countdown_type ),
|
||||
'revealOnLoad' => ( isset( $attributes['revealOnLoad'] ) && $attributes['revealOnLoad'] ? true : false ),
|
||||
'stopWatch' => ( isset( $attributes['timeNumbers'] ) && $attributes['timeNumbers'] ? true : false ),
|
||||
'dividers' => ( isset( $attributes['countdownDivider'] ) && $attributes['countdownDivider'] ? true : false ),
|
||||
'action' => ( isset( $attributes['expireAction'] ) ? esc_attr( $attributes['expireAction'] ) : 'none' ),
|
||||
'redirect' => ( isset( $attributes['redirectURL'] ) ? esc_url( $attributes['redirectURL'] ) : '' ),
|
||||
'repeat' => ( isset( $attributes['repeat'] ) && $attributes['repeat'] ? true : false ),
|
||||
'frequency' => ( isset( $attributes['frequency'] ) ? esc_attr( $attributes['frequency'] ) : '' ),
|
||||
'stopCount' => ( isset( $attributes['stopRepeating'] ) && $attributes['stopRepeating'] ? true : false ),
|
||||
'endDate' => ( isset( $attributes['endDate'] ) ? esc_attr( $attributes['endDate'] ) : '' ),
|
||||
'reset' => esc_attr( $reset_days ),
|
||||
'time_offset' => get_option( 'gmt_offset' ),
|
||||
'campaign_id' => esc_attr( $campaign_id ),
|
||||
'evergreen' => ( 'evergreen' === $countdown_type ? apply_filters( 'kadence_blocks_countdown_evergreen_config', 'query', $campaign_id, $site_slug, $reset_days ) : '' ),
|
||||
'strict' => ( isset( $attributes['evergreenStrict'] ) && $attributes['evergreenStrict'] ? true : false ),
|
||||
'hours' => ( isset( $attributes['evergreenHours'] ) ? esc_attr( $attributes['evergreenHours'] ) : '' ),
|
||||
'minutes' => ( isset( $attributes['evergreenMinutes'] ) ? esc_attr( $attributes['evergreenMinutes'] ) : '' ),
|
||||
'timer' => ( isset( $attributes['enableTimer'] ) && ! $attributes['enableTimer'] ? false : true ),
|
||||
'units' => array(
|
||||
array(
|
||||
'days' => ( isset( $attributes['units'][0]['days'] ) && ! $attributes['units'][0]['days'] ? false : true ),
|
||||
'hours' => ( isset( $attributes['units'][0]['hours'] ) && ! $attributes['units'][0]['hours'] ? false : true ),
|
||||
'minutes' => ( isset( $attributes['units'][0]['minutes'] ) && ! $attributes['units'][0]['minutes'] ? false : true ),
|
||||
'seconds' => ( isset( $attributes['units'][0]['seconds'] ) && ! $attributes['units'][0]['seconds'] ? false : true ),
|
||||
),
|
||||
),
|
||||
'preLabel' => ( ! empty( $attributes['preLabel'] ) ? sanitize_text_field( $attributes['preLabel'] ) : '' ),
|
||||
'postLabel' => ( ! empty( $attributes['postLabel'] ) ? sanitize_text_field( $attributes['postLabel'] ) : '' ),
|
||||
'daysLabel' => ( ! empty( $attributes['daysLabel'] ) ? sanitize_text_field( $attributes['daysLabel'] ) : esc_attr__( 'Days', 'kadence-blocks' ) ),
|
||||
'hoursLabel' => ( ! empty( $attributes['hoursLabel'] ) ? sanitize_text_field( $attributes['hoursLabel'] ) : esc_attr__( 'Hrs', 'kadence-blocks' ) ),
|
||||
'minutesLabel' => ( ! empty( $attributes['minutesLabel'] ) ? sanitize_text_field( $attributes['minutesLabel'] ) : esc_attr__( 'Mins', 'kadence-blocks' ) ),
|
||||
'secondsLabel' => ( ! empty( $attributes['secondsLabel'] ) ? sanitize_text_field( $attributes['secondsLabel'] ) : esc_attr__( 'Secs', 'kadence-blocks' ) ),
|
||||
);
|
||||
wp_localize_script(
|
||||
'kadence-blocks-countdown',
|
||||
'kadence_blocks_countdown',
|
||||
array(
|
||||
'ajax_url' => admin_url( 'admin-ajax.php' ),
|
||||
'ajax_nonce' => wp_create_nonce( 'kadence_blocks_countdown' ),
|
||||
'site_slug' => apply_filters( 'kadence_blocks_countdown_site_slug', sanitize_title( get_bloginfo( 'name' ) ) ),
|
||||
'timers' => wp_json_encode( $countdown ),
|
||||
)
|
||||
);
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-countdown', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-countdown.min.js', array( 'wp-i18n' ), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_set_script_translations( 'kadence-blocks-countdown', 'kadence-blocks' );
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Countdown_Block::get_instance();
|
||||
@@ -0,0 +1,285 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Countup Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Countup Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Countup_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'countup';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kb-count-up-' . $unique_id . ' .kb-count-up-title' );
|
||||
if ( ! empty( $attributes['titleColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['titleColor'] ) );
|
||||
}
|
||||
$css->render_typography( $attributes, 'titleFont' );
|
||||
$title_padding_args = [
|
||||
'desktop_key' => 'titlePadding',
|
||||
'tablet_key' => 'titleTabletPadding',
|
||||
'mobile_key' => 'titleMobilePadding',
|
||||
];
|
||||
$css->render_measure_output( $attributes, 'titlePadding', 'padding', $title_padding_args );
|
||||
$title_margin_args = [
|
||||
'desktop_key' => 'titleMargin',
|
||||
'tablet_key' => 'titleTabletMargin',
|
||||
'mobile_key' => 'titleMobileMargin',
|
||||
];
|
||||
$css->render_measure_output( $attributes, 'titleMargin', 'margin', $title_margin_args );
|
||||
|
||||
if ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][0] ) ) {
|
||||
if ( is_numeric( $attributes['titleMinHeight'][0] ) ) {
|
||||
$css->set_selector( '.kb-count-up-' . $unique_id . ' .kb-count-up-title' );
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['titleMinHeight'][1] ) && is_numeric( $attributes['titleMinHeight'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' ); // 767px) and (max-width: 1024px
|
||||
$css->set_selector( '.kb-count-up-' . $unique_id . ' .kb-count-up-title' );
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][1] . 'px' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['titleMinHeight'][2] ) && is_numeric( $attributes['titleMinHeight'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' ); // 767px
|
||||
$css->set_selector( '.kb-count-up-' . $unique_id . ' .kb-count-up-title' );
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][2] . 'px' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['titleAlign'] ) ) {
|
||||
$css->set_selector( '.kb-count-up-' . $unique_id . ' .kb-count-up-title' );
|
||||
|
||||
if ( ! empty( $attributes['titleAlign'][0] ) ) {
|
||||
$css->add_property( 'text-align', $attributes['titleAlign'][0] );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['titleAlign'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' ); // 767px) and (max-width: 1024px
|
||||
$css->add_property( 'text-align', $attributes['titleAlign'][1] );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['titleAlign'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' ); // 767px) and (max-width: 1024px
|
||||
$css->add_property( 'text-align', $attributes['titleAlign'][2] );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
$css->set_selector( '.kb-count-up-' . $unique_id . ' .kb-count-up-number' );
|
||||
|
||||
if ( ! empty( $attributes['numberColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['numberColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['numberFont'][0] ) && is_array( $attributes['numberFont'][0] ) ) {
|
||||
$css->render_typography( $attributes, 'numberFont' );
|
||||
// $number_font = $attributes['numberFont'][0];
|
||||
// if ( isset( $number_font['size'] ) && is_array( $number_font['size'] ) && ! empty( $number_font['size'][0] ) ) {
|
||||
// $css->add_property( 'font-size', $number_font['size'][0] . ( ! isset( $number_font['sizeType'] ) ? 'px' : $number_font['sizeType'] ) );
|
||||
// }
|
||||
// if ( isset( $number_font['lineHeight'] ) && is_array( $number_font['lineHeight'] ) && ! empty( $number_font['lineHeight'][0] ) ) {
|
||||
// $css->add_property( 'line-height', $number_font['lineHeight'][0] . ( ! isset( $number_font['lineType'] ) ? 'px' : $number_font['lineType'] ) );
|
||||
// }
|
||||
// if ( isset( $number_font['letterSpacing'] ) && ! empty( $number_font['letterSpacing'] ) ) {
|
||||
// $css->add_property( 'letter-spacing', $number_font['letterSpacing'] . 'px' );
|
||||
// }
|
||||
// if ( isset( $number_font['textTransform'] ) && ! empty( $number_font['textTransform'] ) ) {
|
||||
// $css->add_property( 'text-transform', $number_font['textTransform'] );
|
||||
// }
|
||||
// if ( isset( $number_font['family'] ) && ! empty( $number_font['family'] ) ) {
|
||||
// $css->add_property( 'font-family', $number_font['family'] );
|
||||
// }
|
||||
// if ( isset( $number_font['style'] ) && ! empty( $number_font['style'] ) ) {
|
||||
// $css->add_property( 'font-style', $number_font['style'] );
|
||||
// }
|
||||
// if ( isset( $number_font['weight'] ) && ! empty( $number_font['weight'] ) ) {
|
||||
// $css->add_property( 'font-weight', $number_font['weight'] );
|
||||
// }
|
||||
// if ( isset( $number_font['padding'] ) && is_array( $number_font['padding'] ) ) {
|
||||
// $css->add_property( 'padding', $number_font['padding'][0] . 'px ' . $number_font['padding'][1] . 'px ' . $number_font['padding'][2] . 'px ' . $number_font['padding'][3] . 'px' );
|
||||
// }
|
||||
// if ( isset( $number_font['margin'] ) && is_array( $number_font['margin'] ) ) {
|
||||
// $css->add_property( 'margin', $number_font['margin'][0] . 'px ' . $number_font['margin'][1] . 'px ' . $number_font['margin'][2] . 'px ' . $number_font['margin'][3] . 'px' );
|
||||
// }
|
||||
} else {
|
||||
$css->add_property( 'font-size', '50px' );
|
||||
}
|
||||
$css->set_selector( '.kb-count-up-' . $unique_id . ' .kb-count-up-number' );
|
||||
$number_padding_args = [
|
||||
'desktop_key' => 'numberPadding',
|
||||
'tablet_key' => 'numberTabletPadding',
|
||||
'mobile_key' => 'numberMobilePadding',
|
||||
];
|
||||
$css->render_measure_output( $attributes, 'numberPadding', 'padding', $number_padding_args );
|
||||
$number_margin_args = [
|
||||
'desktop_key' => 'numberMargin',
|
||||
'tablet_key' => 'numberTabletMargin',
|
||||
'mobile_key' => 'numberMobileMargin',
|
||||
];
|
||||
$css->render_measure_output( $attributes, 'numberMargin', 'margin', $number_margin_args );
|
||||
if ( isset( $attributes['numberAlign'] ) ) {
|
||||
if ( ! empty( $attributes['numberAlign'][0] ) ) {
|
||||
$css->add_property( 'text-align', $attributes['numberAlign'][0] );
|
||||
}
|
||||
if ( ! empty( $attributes['numberAlign'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' ); // 767px) and (max-width: 1024px
|
||||
$css->add_property( 'text-align', $attributes['numberAlign'][1] );
|
||||
}
|
||||
if ( ! empty( $attributes['numberAlign'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' ); // 767px) and (max-width: 1024px
|
||||
$css->add_property( 'text-align', $attributes['numberAlign'][2] );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$css->set_selector( '.kb-count-up-' . $unique_id . ' .kb-count-up-number' );
|
||||
if ( $css->is_number( $attributes['numberMinHeight'][0] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['numberMinHeight'][0] . 'px' );
|
||||
}
|
||||
if ( $css->is_number( $attributes['numberMinHeight'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'min-height', $attributes['numberMinHeight'][1] . 'px' );
|
||||
}
|
||||
if ( $css->is_number( $attributes['numberMinHeight'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'min-height', $attributes['numberMinHeight'][2] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Render for block scripts block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param boolean $inline true or false based on when called.
|
||||
*/
|
||||
public function render_scripts( $attributes, $inline = false ) {
|
||||
if ( $this->has_script ) {
|
||||
if ( ! wp_script_is( 'kadence-blocks-' . $this->block_name, 'enqueued' ) ) {
|
||||
$this->enqueue_script( 'kadence-blocks-' . $this->block_name );
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Builds HTML for block.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if ( apply_filters( 'kadence-blocks-countup-static', false, $attributes, $block_instance ) ) {
|
||||
$prefix = ( $attributes['prefix'] ?? '' );
|
||||
$suffix = ( $attributes['suffix'] ?? '' );
|
||||
$start = ( $attributes['start'] ?? 0 );
|
||||
$ending_number = ( $attributes['end'] ?? 100 );
|
||||
$separator = ( $attributes['separator'] ?? '' );
|
||||
$decimal = ( $attributes['decimal'] ?? '' );
|
||||
$decimal_spaces = ( $attributes['decimalSpaces'] ?? 2 );
|
||||
$duration = ( $attributes['duration'] ?? '2.5' );
|
||||
$countup_args = [
|
||||
'class' => 'wp-block-kadence-countup kb-count-up-' . $unique_id . ' kb-count-up',
|
||||
'data-start' => $start,
|
||||
'data-end' => $ending_number,
|
||||
'data-duration' => $duration,
|
||||
'data-prefix' => $prefix,
|
||||
'data-suffix' => $suffix,
|
||||
];
|
||||
if ( ! empty( $separator ) ) {
|
||||
$countup_args['data-separator'] = $separator;
|
||||
}
|
||||
if ( ! empty( $separator ) ) {
|
||||
$countup_args['data-separator'] = $separator;
|
||||
}
|
||||
if ( ! empty( $decimal ) ) {
|
||||
$countup_args['data-decimal'] = $decimal;
|
||||
$countup_args['data-decimal-spaces'] = $decimal_spaces;
|
||||
|
||||
}
|
||||
foreach ( $countup_args as $key => $value ) {
|
||||
$countup_div_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$countup_attributes = implode( ' ', $countup_div_attributes );
|
||||
$countup_content = '<div class="kb-count-up-process kb-count-up-number">' . esc_html( $prefix . $ending_number . $suffix ) . '</div>';
|
||||
$countup_title = '';
|
||||
if ( ! empty( $attributes['title'] ) && isset( $attributes['displayTitle'] ) && $attributes['displayTitle'] ) {
|
||||
$title_tag = ( ! empty( $attributes['titleFont'][0]['htmlTag'] ) && 'heading' !== $attributes['titleFont'][0]['htmlTag'] ? $attributes['titleFont'][0]['htmlTag'] : 'h' . $attributes['titleFont'][0]['level'] );
|
||||
$countup_title = '<' . esc_attr( $title_tag ) . ' class="kb-count-up-title">' . esc_html( $attributes['title'] ) . '</' . esc_attr( $title_tag ) . '>';
|
||||
}
|
||||
$content = sprintf( '<div %1$s>%2$s%3$s</div>', $countup_attributes, $countup_content, $countup_title );
|
||||
}
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
|
||||
// Skip calling parent because this block does not have a dedicated CSS file.
|
||||
// parent::register_scripts();
|
||||
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_script( 'kadence-countup', KADENCE_BLOCKS_URL . 'includes/assets/js/countUp.min.js', [], KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-countup', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-countup.min.js', [ 'kadence-countup' ], KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Countup_Block::get_instance();
|
||||
@@ -0,0 +1,831 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Form Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Form Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Form_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'form';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$this->enqueue_script( 'kadence-blocks-form' );
|
||||
|
||||
if ( isset( $attributes['recaptcha'] ) && $attributes['recaptcha'] ) {
|
||||
if ( isset( $attributes['recaptchaVersion'] ) && 'v2' === $attributes['recaptchaVersion'] ) {
|
||||
$this->enqueue_script( 'kadence-blocks-google-recaptcha-v2' );
|
||||
} else {
|
||||
$this->enqueue_script( 'kadence-blocks-google-recaptcha-v3' );
|
||||
}
|
||||
}
|
||||
|
||||
// Add Label heading font.
|
||||
if ( isset( $attributes['labelFont'] ) && is_array( $attributes['labelFont'] ) && isset( $attributes['labelFont'][0] ) && is_array( $attributes['labelFont'][0] ) && isset( $attributes['labelFont'][0]['google'] ) && $attributes['labelFont'][0]['google'] && ( ! isset( $attributes['labelFont'][0]['loadGoogle'] ) || true === $attributes['labelFont'][0]['loadGoogle'] ) && isset( $attributes['labelFont'][0]['family'] ) ) {
|
||||
$label_font = $attributes['labelFont'][0];
|
||||
|
||||
$font_family = ( isset( $label_font['family'] ) ? $label_font['family'] : '' );
|
||||
$font_variant = ( isset( $label_font['variant'] ) ? $label_font['variant'] : '' );
|
||||
$font_subset = ( isset( $label_font['subset'] ) ? $label_font['subset'] : '' );
|
||||
|
||||
$css->maybe_add_google_font( $font_family, $font_variant, $font_subset );
|
||||
}
|
||||
// Add submit font.
|
||||
if ( isset( $attributes['submitFont'] ) && is_array( $attributes['submitFont'] ) && isset( $attributes['submitFont'][0] ) && is_array( $attributes['submitFont'][0] ) && isset( $attributes['submitFont'][0]['google'] ) && $attributes['submitFont'][0]['google'] && ( ! isset( $attributes['submitFont'][0]['loadGoogle'] ) || true === $attributes['submitFont'][0]['loadGoogle'] ) && isset( $attributes['submitFont'][0]['family'] ) ) {
|
||||
$submit_font = $attributes['submitFont'][0];
|
||||
|
||||
$font_family = ( isset( $submit_font['family'] ) ? $submit_font['family'] : '' );
|
||||
$font_variant = ( isset( $submit_font['variant'] ) ? $submit_font['variant'] : '' );
|
||||
$font_subset = ( isset( $submit_font['subset'] ) ? $submit_font['subset'] : '' );
|
||||
|
||||
$css->maybe_add_google_font( $font_family, $font_variant, $font_subset );
|
||||
}
|
||||
// Add Message font.
|
||||
if ( isset( $attributes['messageFont'] ) && is_array( $attributes['messageFont'] ) && isset( $attributes['messageFont'][0] ) && is_array( $attributes['messageFont'][0] ) && isset( $attributes['messageFont'][0]['google'] ) && $attributes['messageFont'][0]['google'] && ( ! isset( $attributes['messageFont'][0]['loadGoogle'] ) || true === $attributes['messageFont'][0]['loadGoogle'] ) && isset( $attributes['messageFont'][0]['family'] ) ) {
|
||||
$message_font = $attributes['messageFont'][0];
|
||||
|
||||
$font_family = ( isset( $message_font['family'] ) ? $message_font['family'] : '' );
|
||||
$font_variant = ( isset( $message_font['variant'] ) ? $message_font['variant'] : '' );
|
||||
$font_subset = ( isset( $message_font['subset'] ) ? $message_font['subset'] : '' );
|
||||
|
||||
$css->maybe_add_google_font( $font_family, $font_variant, $font_subset );
|
||||
}
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-form.kadence-form-' . $unique_id . '.kb-form-wrap' );
|
||||
$css->render_measure_output( $attributes, 'containerMargin', 'margin');
|
||||
|
||||
if ( isset( $attributes['style'] ) && is_array( $attributes['style'] ) && isset( $attributes['style'][0] ) && is_array( $attributes['style'][0] ) ) {
|
||||
$style = $attributes['style'][0];
|
||||
if ( isset( $style['rowGap'] ) && is_numeric( $style['rowGap'] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field' );
|
||||
$css->add_property( 'margin-bottom', $style['rowGap'] . ( isset( $style['rowGapType'] ) && ! empty( $style['rowGapType'] ) ? $style['rowGapType'] : 'px' ) );
|
||||
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field.kb-submit-field' );
|
||||
$css->add_property( 'margin-bottom', 0 );
|
||||
}
|
||||
if ( isset( $style['gutter'] ) && is_numeric( $style['gutter'] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field' );
|
||||
$css->add_property( 'padding-right', floor( $style['gutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) );
|
||||
$css->add_property( 'padding-left', floor( $style['gutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) );
|
||||
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form' );
|
||||
$css->add_property( 'margin-right', '-' . floor( $style['gutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) );
|
||||
$css->add_property( 'margin-left', '-' . floor( $style['gutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) );
|
||||
|
||||
}
|
||||
if ( isset( $style['tabletRowGap'] ) && is_numeric( $style['tabletRowGap'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field' );
|
||||
$css->add_property( 'margin-bottom', $style['tabletRowGap'] . ( isset( $style['rowGapType'] ) && ! empty( $style['rowGapType'] ) ? $style['rowGapType'] : 'px' ) );
|
||||
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field.kb-submit-field' );
|
||||
$css->add_property( 'margin-bottom', 0 );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $style['tabletGutter'] ) && is_numeric( $style['tabletGutter'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field' );
|
||||
$css->add_property( 'padding-right', ( floor( $style['tabletGutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) ) );
|
||||
$css->add_property( 'padding-left', ( floor( $style['tabletGutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) ) );
|
||||
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form' );
|
||||
$css->add_property( 'margin-right', '-' . ( floor( $style['tabletGutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) ) );
|
||||
$css->add_property( 'margin-left', '-' . ( floor( $style['tabletGutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $style['mobileRowGap'] ) && is_numeric( $style['mobileRowGap'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field' );
|
||||
$css->add_property( 'margin-bottom', $style['mobileRowGap'] . ( isset( $style['rowGapType'] ) && ! empty( $style['rowGapType'] ) ? $style['rowGapType'] : 'px' ) );
|
||||
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field.kb-submit-field' );
|
||||
$css->add_property( 'margin-bottom', 0 );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $style['mobileGutter'] ) && is_numeric( $style['mobileGutter'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field' );
|
||||
$css->add_property( 'padding-right', ( floor( $style['mobileGutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) ) );
|
||||
$css->add_property( 'padding-left', ( floor( $style['mobileGutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) ) );
|
||||
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form' );
|
||||
$css->add_property( 'margin-right', '-' . ( floor( $style['mobileGutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) ) );
|
||||
$css->add_property( 'margin-left', '-' . ( floor( $style['mobileGutter'] / 2 ) . ( isset( $style['gutterType'] ) && ! empty( $style['gutterType'] ) ? $style['gutterType'] : 'px' ) ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $style['requiredColor'] ) && ! empty( $style['requiredColor'] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field label .required' );
|
||||
$css->add_property( 'color', $css->render_color( $style['requiredColor'] ) );
|
||||
|
||||
}
|
||||
if ( ( isset( $style['color'] ) && ! empty( $style['color'] ) ) || ( isset( $style['background'] ) && ! empty( $style['background'] ) ) || ( isset( $style['border'] ) && ! empty( $style['border'] ) ) || ( isset( $style['backgroundType'] ) && 'gradient' === $style['backgroundType'] ) || ( isset( $style['boxShadow'] ) && is_array( $style['boxShadow'] ) && isset( $style['boxShadow'][0] ) && true === $style['boxShadow'][0] ) || ( isset( $style['borderRadius'] ) && is_numeric( $style['borderRadius'] ) ) || ( isset( $style['fontSize'] ) && is_array( $style['fontSize'] ) ) || ( isset( $style['lineHeight'] ) && is_array( $style['lineHeight'] ) && is_numeric( $style['lineHeight'][0] ) ) || ( isset( $style['borderWidth'] ) && is_array( $style['borderWidth'] ) && is_numeric( $style['borderWidth'][0] ) ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-text-style-field, .kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-select-style-field' );
|
||||
if ( isset( $style['color'] ) && ! empty( $style['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $style['color'] ) );
|
||||
}
|
||||
if ( isset( $style['borderRadius'] ) && is_numeric( $style['borderRadius'] ) ) {
|
||||
$css->add_property( 'border-radius', $style['borderRadius'] . 'px' );
|
||||
}
|
||||
if ( !empty( $style['fontSize'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $style['fontSize'][0], ( isset( $style['fontSizeType'] ) && ! empty( $style['fontSizeType'] ) ? $style['fontSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $style['lineHeight'] ) && is_array( $style['lineHeight'] ) && is_numeric( $style['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $style['lineHeight'][0] . ( isset( $style['lineType'] ) && ! empty( $style['lineType'] ) ? $style['lineType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $style['borderWidth'] ) && is_array( $style['borderWidth'] ) && is_numeric( $style['borderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-width', $style['borderWidth'][0] . 'px ' . $style['borderWidth'][1] . 'px ' . $style['borderWidth'][2] . 'px ' . $style['borderWidth'][3] . 'px' );
|
||||
}
|
||||
if ( isset( $style['backgroundType'] ) && 'gradient' === $style['backgroundType'] ) {
|
||||
$bg1 = ( ! isset( $style['background'] ) || 'transparent' === $style['background'] ? 'rgba(255,255,255,0)' : $css->render_color( $style['background'], ( isset( $style['backgroundOpacity'] ) && is_numeric( $style['backgroundOpacity'] ) ? $style['backgroundOpacity'] : 1 ) ) );
|
||||
$bg2 = ( isset( $style['gradient'][0] ) && ! empty( $style['gradient'][0] ) ? $css->render_color( $style['gradient'][0], ( isset( $style['gradient'][1] ) && is_numeric( $style['gradient'][1] ) ? $style['gradient'][1] : 1 ) ) : $css->render_color( '#999999', ( isset( $style['gradient'][1] ) && is_numeric( $style['gradient'][1] ) ? $style['gradient'][1] : 1 ) ) );
|
||||
if ( isset( $style['gradient'][4] ) && 'radial' === $style['gradient'][4] ) {
|
||||
$css->add_property( 'background', 'radial-gradient(at ' . ( isset( $style['gradient'][6] ) && ! empty( $style['gradient'][6] ) ? $style['gradient'][6] : 'center center' ) . ', ' . $bg1 . ' ' . ( isset( $style['gradient'][2] ) && is_numeric( $style['gradient'][2] ) ? $style['gradient'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $style['gradient'][3] ) && is_numeric( $style['gradient'][3] ) ? $style['gradient'][3] : '100' ) . '%)' );
|
||||
} else if ( ! isset( $style['gradient'][4] ) || 'radial' !== $style['gradient'][4] ) {
|
||||
$css->add_property( 'background', 'linear-gradient(' . ( isset( $style['gradient'][5] ) && ! empty( $style['gradient'][5] ) ? $style['gradient'][5] : '180' ) . 'deg, ' . $bg1 . ' ' . ( isset( $style['gradient'][2] ) && is_numeric( $style['gradient'][2] ) ? $style['gradient'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $style['gradient'][3] ) && is_numeric( $style['gradient'][3] ) ? $style['gradient'][3] : '100' ) . '%)' );
|
||||
}
|
||||
} else if ( isset( $style['background'] ) && ! empty( $style['background'] ) ) {
|
||||
$alpha = ( isset( $style['backgroundOpacity'] ) && is_numeric( $style['backgroundOpacity'] ) ? $style['backgroundOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $style['background'], $alpha ) );
|
||||
}
|
||||
if ( isset( $style['border'] ) && ! empty( $style['border'] ) ) {
|
||||
$alpha = ( isset( $style['borderOpacity'] ) && is_numeric( $style['borderOpacity'] ) ? $style['borderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $style['border'], $alpha ) );
|
||||
}
|
||||
if ( isset( $style['boxShadow'] ) && is_array( $style['boxShadow'] ) && isset( $style['boxShadow'][0] ) && true === $style['boxShadow'][0] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $style['boxShadow'][7] ) && true === $style['boxShadow'][7] ? 'inset ' : '' ) . ( isset( $style['boxShadow'][3] ) && is_numeric( $style['boxShadow'][3] ) ? $style['boxShadow'][3] : '1' ) . 'px ' . ( isset( $style['boxShadow'][4] ) && is_numeric( $style['boxShadow'][4] ) ? $style['boxShadow'][4] : '1' ) . 'px ' . ( isset( $style['boxShadow'][5] ) && is_numeric( $style['boxShadow'][5] ) ? $style['boxShadow'][5] : '2' ) . 'px ' . ( isset( $style['boxShadow'][6] ) && is_numeric( $style['boxShadow'][6] ) ? $style['boxShadow'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $style['boxShadow'][1] ) && ! empty( $style['boxShadow'][1] ) ? $style['boxShadow'][1] : '#000000' ), ( isset( $style['boxShadow'][2] ) && is_numeric( $style['boxShadow'][2] ) ? $style['boxShadow'][2] : 0.2 ) ) );
|
||||
}
|
||||
|
||||
}
|
||||
if ( ( isset( $style['colorActive'] ) && ! empty( $style['colorActive'] ) ) || ( isset( $style['backgroundActive'] ) && ! empty( $style['backgroundActive'] ) ) || ( isset( $style['borderActive'] ) && ! empty( $style['borderActive'] ) ) || ( isset( $style['backgroundActiveType'] ) && 'gradient' === $style['backgroundActiveType'] ) || ( isset( $style['boxShadow'] ) && is_array( $style['boxShadow'] ) && isset( $style['boxShadow'][0] ) && true === $style['boxShadow'][0] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-text-style-field:focus, .kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-select-style-field:focus' );
|
||||
if ( isset( $style['colorActive'] ) && ! empty( $style['colorActive'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $style['colorActive'] ) );
|
||||
}
|
||||
if ( isset( $style['borderActive'] ) && ! empty( $style['borderActive'] ) ) {
|
||||
$alpha = ( isset( $style['borderActiveOpacity'] ) && is_numeric( $style['borderActiveOpacity'] ) ? $style['borderActiveOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $style['borderActive'], $alpha ) );
|
||||
}
|
||||
if ( isset( $style['boxShadowActive'] ) && is_array( $style['boxShadowActive'] ) && isset( $style['boxShadowActive'][0] ) && true === $style['boxShadowActive'][0] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $style['boxShadowActive'][7] ) && true === $style['boxShadowActive'][7] ? 'inset ' : '' ) . ( isset( $style['boxShadowActive'][3] ) && is_numeric( $style['boxShadowActive'][3] ) ? $style['boxShadowActive'][3] : '2' ) . 'px ' . ( isset( $style['boxShadowActive'][4] ) && is_numeric( $style['boxShadowActive'][4] ) ? $style['boxShadowActive'][4] : '2' ) . 'px ' . ( isset( $style['boxShadowActive'][5] ) && is_numeric( $style['boxShadowActive'][5] ) ? $style['boxShadowActive'][5] : '3' ) . 'px ' . ( isset( $style['boxShadowActive'][6] ) && is_numeric( $style['boxShadowActive'][6] ) ? $style['boxShadowActive'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $style['boxShadowActive'][1] ) && ! empty( $style['boxShadowActive'][1] ) ? $style['boxShadowActive'][1] : '#000000' ), ( isset( $style['boxShadowActive'][2] ) && is_numeric( $style['boxShadowActive'][2] ) ? $style['boxShadowActive'][2] : 0.4 ) ) );
|
||||
}
|
||||
if ( isset( $style['backgroundActiveType'] ) && 'gradient' === $style['backgroundActiveType'] ) {
|
||||
$bg1 = ( ! isset( $style['backgroundActive'] ) ? $css->render_color( '#444444', ( isset( $style['backgroundActiveOpacity'] ) && is_numeric( $style['backgroundActiveOpacity'] ) ? $style['backgroundActiveOpacity'] : 1 ) ) : $css->render_color( $style['backgroundActive'], ( isset( $style['backgroundActiveOpacity'] ) && is_numeric( $style['backgroundActiveOpacity'] ) ? $style['backgroundActiveOpacity'] : 1 ) ) );
|
||||
$bg2 = ( isset( $style['gradientActive'][0] ) && ! empty( $style['gradientActive'][0] ) ? $css->render_color( $style['gradientActive'][0], ( isset( $style['gradientActive'][1] ) && is_numeric( $style['gradientActive'][1] ) ? $style['gradientActive'][1] : 1 ) ) : $css->render_color( '#999999', ( isset( $style['gradientActive'][1] ) && is_numeric( $style['gradientActive'][1] ) ? $style['gradientActive'][1] : 1 ) ) );
|
||||
if ( isset( $style['gradientActive'][4] ) && 'radial' === $style['gradientActive'][4] ) {
|
||||
$css->add_property( 'background', 'radial-gradient(at ' . ( isset( $style['gradientActive'][6] ) && ! empty( $style['gradientActive'][6] ) ? $style['gradientActive'][6] : 'center center' ) . ', ' . $bg1 . ' ' . ( isset( $style['gradientActive'][2] ) && is_numeric( $style['gradientActive'][2] ) ? $style['gradientActive'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $style['gradientActive'][3] ) && is_numeric( $style['gradientActive'][3] ) ? $style['gradientActive'][3] : '100' ) . '%)' );
|
||||
} else if ( ! isset( $style['gradientActive'][4] ) || 'radial' !== $style['gradientActive'][4] ) {
|
||||
$css->add_property( 'background', 'linear-gradient(' . ( isset( $style['gradientActive'][5] ) && ! empty( $style['gradientActive'][5] ) ? $style['gradientActive'][5] : '180' ) . 'deg, ' . $bg1 . ' ' . ( isset( $style['gradientActive'][2] ) && is_numeric( $style['gradientActive'][2] ) ? $style['gradientActive'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $style['gradientActive'][3] ) && is_numeric( $style['gradientActive'][3] ) ? $style['gradientActive'][3] : '100' ) . '%)' );
|
||||
}
|
||||
} else if ( isset( $style['backgroundActive'] ) && ! empty( $style['backgroundActive'] ) ) {
|
||||
$alpha = ( isset( $style['backgroundActiveOpacity'] ) && is_numeric( $style['backgroundActiveOpacity'] ) ? $style['backgroundActiveOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $style['backgroundActive'], $alpha ) );
|
||||
}
|
||||
|
||||
}
|
||||
if ( ( isset( $style['fontSize'] ) && is_array( $style['fontSize'] ) && is_numeric( $style['fontSize'][1] ) ) || ( isset( $style['lineHeight'] ) && is_array( $style['lineHeight'] ) && is_numeric( $style['lineHeight'][1] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-text-style-field, .kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-select-style-field' );
|
||||
if ( !empty( $style['fontSize'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $style['fontSize'][1], ( isset( $style['fontSizeType'] ) && ! empty( $style['fontSizeType'] ) ? $style['fontSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $style['lineHeight'] ) && is_array( $style['lineHeight'] ) && is_numeric( $style['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $style['lineHeight'][1] . ( isset( $style['lineType'] ) && ! empty( $style['lineType'] ) ? $style['lineType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $style['fontSize'] ) && is_array( $style['fontSize'] ) && is_numeric( $style['fontSize'][2] ) ) || ( isset( $style['lineHeight'] ) && is_array( $style['lineHeight'] ) && is_numeric( $style['lineHeight'][2] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-text-style-field, .kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-select-style-field' );
|
||||
if ( !empty( $style['fontSize'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $style['fontSize'][2], ( isset( $style['fontSizeType'] ) && ! empty( $style['fontSizeType'] ) ? $style['fontSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $style['lineHeight'] ) && is_array( $style['lineHeight'] ) && is_numeric( $style['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $style['lineHeight'][2] . ( isset( $style['lineType'] ) && ! empty( $style['lineType'] ) ? $style['lineType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $style['size'] ) && 'custom' && $style['size'] && isset( $style['deskPadding'] ) && is_array( $style['deskPadding'] ) && isset( $style['deskPadding'][0] ) && is_numeric( $style['deskPadding'][0] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-text-style-field' );
|
||||
if ( isset( $style['deskPadding'][0] ) && is_numeric( $style['deskPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $style['deskPadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $style['deskPadding'][1] ) && is_numeric( $style['deskPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $style['deskPadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $style['deskPadding'][2] ) && is_numeric( $style['deskPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $style['deskPadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $style['deskPadding'][3] ) && is_numeric( $style['deskPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $style['deskPadding'][3] . 'px' );
|
||||
}
|
||||
|
||||
}
|
||||
if ( isset( $style['size'] ) && 'custom' && $style['size'] && isset( $style['tabletPadding'] ) && is_array( $style['tabletPadding'] ) && isset( $style['tabletPadding'][0] ) && is_numeric( $style['tabletPadding'][0] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-text-style-field' );
|
||||
if ( isset( $style['tabletPadding'][0] ) && is_numeric( $style['tabletPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $style['tabletPadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $style['tabletPadding'][1] ) && is_numeric( $style['tabletPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $style['tabletPadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $style['tabletPadding'][2] ) && is_numeric( $style['tabletPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $style['tabletPadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $style['tabletPadding'][3] ) && is_numeric( $style['tabletPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $style['tabletPadding'][3] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $style['size'] ) && 'custom' && $style['size'] && isset( $style['mobilePadding'] ) && is_array( $style['mobilePadding'] ) && isset( $style['mobilePadding'][0] ) && is_numeric( $style['mobilePadding'][0] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-text-style-field' );
|
||||
if ( isset( $style['mobilePadding'][0] ) && is_numeric( $style['mobilePadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $style['mobilePadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $style['mobilePadding'][1] ) && is_numeric( $style['mobilePadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $style['mobilePadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $style['mobilePadding'][2] ) && is_numeric( $style['mobilePadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $style['mobilePadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $style['mobilePadding'][3] ) && is_numeric( $style['mobilePadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $style['mobilePadding'][3] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['labelFont'] ) && is_array( $attributes['labelFont'] ) && isset( $attributes['labelFont'][0] ) && is_array( $attributes['labelFont'][0] ) ) {
|
||||
$label_font = $attributes['labelFont'][0];
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field > label' );
|
||||
if ( isset( $label_font['color'] ) && ! empty( $label_font['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $label_font['color'] ) );
|
||||
}
|
||||
if ( !empty( $label_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $label_font['size'][0], ( ! isset( $label_font['sizeType'] ) ? 'px' : $label_font['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $label_font['lineHeight'] ) && is_array( $label_font['lineHeight'] ) && is_numeric( $label_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $label_font['lineHeight'][0] . ( ! isset( $label_font['lineType'] ) ? 'px' : $label_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $label_font['letterSpacing'] ) && is_numeric( $label_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $label_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $label_font['textTransform'] ) && ! empty( $label_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $label_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $label_font['family'] ) && ! empty( $label_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $label_font['family'] );
|
||||
}
|
||||
if ( isset( $label_font['style'] ) && ! empty( $label_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $label_font['style'] );
|
||||
}
|
||||
if ( isset( $label_font['weight'] ) && ! empty( $label_font['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $label_font['weight'] );
|
||||
}
|
||||
if ( isset( $label_font['padding'] ) && is_array( $label_font['padding'] ) && is_numeric( $label_font['padding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $label_font['padding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $label_font['padding'] ) && is_array( $label_font['padding'] ) && is_numeric( $label_font['padding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $label_font['padding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $label_font['padding'] ) && is_array( $label_font['padding'] ) && is_numeric( $label_font['padding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $label_font['padding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $label_font['padding'] ) && is_array( $label_font['padding'] ) && is_numeric( $label_font['padding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $label_font['padding'][3] . 'px' );
|
||||
}
|
||||
if ( isset( $label_font['margin'] ) && is_array( $label_font['margin'] ) && is_numeric( $label_font['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $label_font['margin'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $label_font['margin'] ) && is_array( $label_font['margin'] ) && is_numeric( $label_font['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $label_font['margin'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $label_font['margin'] ) && is_array( $label_font['margin'] ) && is_numeric( $label_font['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $label_font['margin'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $label_font['margin'] ) && is_array( $label_font['margin'] ) && is_numeric( $label_font['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $label_font['margin'][3] . 'px' );
|
||||
}
|
||||
|
||||
if ( !empty( $label_font['lineHeight'][0] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field.kb-accept-form-field .kb-checkbox-style' );
|
||||
$css->add_property( 'font-size', $css->get_font_size( $label_font['lineHeight'][0], ( ! isset( $label_font['lineType'] ) ? 'px' : $label_font['lineType'] ) ) );
|
||||
$css->add_property( 'height', '1em' );
|
||||
$css->add_property( 'margin-top', '0' );
|
||||
|
||||
}
|
||||
if ( ( isset( $label_font['size'] ) && is_array( $label_font['size'] ) && is_numeric( $label_font['size'][1] ) ) || ( isset( $label_font['lineHeight'] ) && is_array( $label_font['lineHeight'] ) && is_numeric( $label_font['lineHeight'][1] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field > label' );
|
||||
if ( !empty( $label_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $label_font['size'][1], ( isset( $label_font['sizeType'] ) && ! empty( $label_font['sizeType'] ) ? $label_font['sizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $label_font['lineHeight'] ) && is_array( $label_font['lineHeight'] ) && is_numeric( $label_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $label_font['lineHeight'][1] . ( isset( $label_font['lineType'] ) && ! empty( $label_font['lineType'] ) ? $label_font['lineType'] : 'px' ) );
|
||||
}
|
||||
|
||||
if ( !empty( $label_font['lineHeight'][1] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field.kb-accept-form-field .kb-checkbox-style' );
|
||||
$css->add_property( 'font-size', $css->get_font_size( $label_font['lineHeight'][1], ( isset( $label_font['lineType'] ) && ! empty( $label_font['lineType'] ) ? $label_font['lineType'] : 'px' ) ) );
|
||||
$css->add_property( 'height', '1em' );
|
||||
$css->add_property( 'margin-top', '0' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $label_font['size'] ) && is_array( $label_font['size'] ) && is_numeric( $label_font['size'][2] ) ) || ( isset( $label_font['lineHeight'] ) && is_array( $label_font['lineHeight'] ) && is_numeric( $label_font['lineHeight'][2] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field > label' );
|
||||
if ( !empty( $label_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $label_font['size'][2], ( isset( $label_font['sizeType'] ) && ! empty( $label_font['sizeType'] ) ? $label_font['sizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $label_font['lineHeight'] ) && is_array( $label_font['lineHeight'] ) && is_numeric( $label_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $label_font['lineHeight'][2] . ( isset( $label_font['lineType'] ) && ! empty( $label_font['lineType'] ) ? $label_font['lineType'] : 'px' ) );
|
||||
}
|
||||
|
||||
if ( !empty( $label_font['lineHeight'][2] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field.kb-accept-form-field .kb-checkbox-style' );
|
||||
$css->add_property( 'font-size', $css->get_font_size( $label_font['lineHeight'][2], ( isset( $label_font['lineType'] ) && ! empty( $label_font['lineType'] ) ? $label_font['lineType'] : 'px' ) ) );
|
||||
$css->add_property( 'height', '1em' );
|
||||
$css->add_property( 'margin-top', '0' );
|
||||
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['submit'] ) && is_array( $attributes['submit'] ) && isset( $attributes['submit'][0] ) && is_array( $attributes['submit'][0] ) ) {
|
||||
$submit = $attributes['submit'][0];
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( isset( $submit['widthType'] ) && 'fixed' === $submit['widthType'] && isset( $submit['fixedWidth'] ) && is_array( $submit['fixedWidth'] ) && isset( $submit['fixedWidth'][0] ) && ! empty( $submit['fixedWidth'][0] ) ) {
|
||||
$css->add_property( 'width', $submit['fixedWidth'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['color'] ) && ! empty( $submit['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $submit['color'] ) );
|
||||
}
|
||||
if ( isset( $submit['borderRadius'] ) && is_numeric( $submit['borderRadius'] ) ) {
|
||||
$css->add_property( 'border-radius', $submit['borderRadius'] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['borderWidth'] ) && is_array( $submit['borderWidth'] ) && is_numeric( $submit['borderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-width', $submit['borderWidth'][0] . 'px ' . $submit['borderWidth'][1] . 'px ' . $submit['borderWidth'][2] . 'px ' . $submit['borderWidth'][3] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['backgroundType'] ) && 'gradient' === $submit['backgroundType'] || isset( $submit['backgroundHoverType'] ) && 'gradient' === $submit['backgroundHoverType'] ) {
|
||||
$bgtype = 'gradient';
|
||||
} else {
|
||||
$bgtype = 'solid';
|
||||
}
|
||||
if ( isset( $submit['backgroundType'] ) && 'gradient' === $submit['backgroundType'] ) {
|
||||
$bg1 = ( ! isset( $submit['background'] ) || 'transparent' === $submit['background'] ? 'rgba(255,255,255,0)' : $css->render_color( $submit['background'], ( isset( $submit['backgroundOpacity'] ) && is_numeric( $submit['backgroundOpacity'] ) ? $submit['backgroundOpacity'] : 1 ) ) );
|
||||
$bg2 = ( isset( $submit['gradient'][0] ) && ! empty( $submit['gradient'][0] ) ? $css->render_color( $submit['gradient'][0], ( isset( $submit['gradient'][1] ) && is_numeric( $submit['gradient'][1] ) ? $submit['gradient'][1] : 1 ) ) : $css->render_color( '#999999', ( isset( $submit['gradient'][1] ) && is_numeric( $submit['gradient'][1] ) ? $submit['gradient'][1] : 1 ) ) );
|
||||
if ( isset( $submit['gradient'][4] ) && 'radial' === $submit['gradient'][4] ) {
|
||||
$css->add_property( 'background', 'radial-gradient(at ' . ( isset( $submit['gradient'][6] ) && ! empty( $submit['gradient'][6] ) ? $submit['gradient'][6] : 'center center' ) . ', ' . $bg1 . ' ' . ( isset( $submit['gradient'][2] ) && is_numeric( $submit['gradient'][2] ) ? $submit['gradient'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $submit['gradient'][3] ) && is_numeric( $submit['gradient'][3] ) ? $submit['gradient'][3] : '100' ) . '%)' );
|
||||
} else if ( ! isset( $submit['gradient'][4] ) || 'radial' !== $submit['gradient'][4] ) {
|
||||
$css->add_property( 'background', 'linear-gradient(' . ( isset( $submit['gradient'][5] ) && ! empty( $submit['gradient'][5] ) ? $submit['gradient'][5] : '180' ) . 'deg, ' . $bg1 . ' ' . ( isset( $submit['gradient'][2] ) && is_numeric( $submit['gradient'][2] ) ? $submit['gradient'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $submit['gradient'][3] ) && is_numeric( $submit['gradient'][3] ) ? $submit['gradient'][3] : '100' ) . '%)' );
|
||||
}
|
||||
} else if ( isset( $submit['background'] ) && ! empty( $submit['background'] ) ) {
|
||||
$alpha = ( isset( $submit['backgroundOpacity'] ) && is_numeric( $submit['backgroundOpacity'] ) ? $submit['backgroundOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $submit['background'], $alpha ) );
|
||||
}
|
||||
if ( isset( $submit['border'] ) && ! empty( $submit['border'] ) ) {
|
||||
$alpha = ( isset( $submit['borderOpacity'] ) && is_numeric( $submit['borderOpacity'] ) ? $submit['borderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $submit['border'], $alpha ) );
|
||||
}
|
||||
if ( isset( $submit['boxShadow'] ) && is_array( $submit['boxShadow'] ) && isset( $submit['boxShadow'][0] ) && true === $submit['boxShadow'][0] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $submit['boxShadow'][7] ) && true === $submit['boxShadow'][7] ? 'inset ' : '' ) . ( isset( $submit['boxShadow'][3] ) && is_numeric( $submit['boxShadow'][3] ) ? $submit['boxShadow'][3] : '1' ) . 'px ' . ( isset( $submit['boxShadow'][4] ) && is_numeric( $submit['boxShadow'][4] ) ? $submit['boxShadow'][4] : '1' ) . 'px ' . ( isset( $submit['boxShadow'][5] ) && is_numeric( $submit['boxShadow'][5] ) ? $submit['boxShadow'][5] : '2' ) . 'px ' . ( isset( $submit['boxShadow'][6] ) && is_numeric( $submit['boxShadow'][6] ) ? $submit['boxShadow'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $submit['boxShadow'][1] ) && ! empty( $submit['boxShadow'][1] ) ? $submit['boxShadow'][1] : '#000000' ), ( isset( $submit['boxShadow'][2] ) && is_numeric( $submit['boxShadow'][2] ) ? $submit['boxShadow'][2] : 0.2 ) ) );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit:hover, .kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit:focus ' );
|
||||
if ( isset( $submit['colorHover'] ) && ! empty( $submit['colorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $submit['colorHover'] ) );
|
||||
}
|
||||
if ( isset( $submit['borderHover'] ) && ! empty( $submit['borderHover'] ) ) {
|
||||
$alpha = ( isset( $submit['borderHoverOpacity'] ) && is_numeric( $submit['borderHoverOpacity'] ) ? $submit['borderHoverOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $submit['borderHover'], $alpha ) );
|
||||
}
|
||||
if ( isset( $submit['boxShadowHover'] ) && is_array( $submit['boxShadowHover'] ) && isset( $submit['boxShadowHover'][0] ) && true === $submit['boxShadowHover'][0] && isset( $submit['boxShadowHover'][7] ) && true !== $submit['boxShadowHover'][7] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $submit['boxShadowHover'][7] ) && true === $submit['boxShadowHover'][7] ? 'inset ' : '' ) . ( isset( $submit['boxShadowHover'][3] ) && is_numeric( $submit['boxShadowHover'][3] ) ? $submit['boxShadowHover'][3] : '2' ) . 'px ' . ( isset( $submit['boxShadowHover'][4] ) && is_numeric( $submit['boxShadowHover'][4] ) ? $submit['boxShadowHover'][4] : '2' ) . 'px ' . ( isset( $submit['boxShadowHover'][5] ) && is_numeric( $submit['boxShadowHover'][5] ) ? $submit['boxShadowHover'][5] : '3' ) . 'px ' . ( isset( $submit['boxShadowHover'][6] ) && is_numeric( $submit['boxShadowHover'][6] ) ? $submit['boxShadowHover'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $submit['boxShadowHover'][1] ) && ! empty( $submit['boxShadowHover'][1] ) ? $submit['boxShadowHover'][1] : '#000000' ), ( isset( $submit['boxShadowHover'][2] ) && is_numeric( $submit['boxShadowHover'][2] ) ? $submit['boxShadowHover'][2] : 0.4 ) ) );
|
||||
}
|
||||
if ( 'gradient' !== $bgtype ) {
|
||||
if ( isset( $submit['backgroundHover'] ) && ! empty( $submit['backgroundHover'] ) ) {
|
||||
$alpha = ( isset( $submit['backgroundHoverOpacity'] ) && is_numeric( $submit['backgroundHoverOpacity'] ) ? $submit['backgroundHoverOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $submit['backgroundHover'], $alpha ) );
|
||||
}
|
||||
if ( isset( $submit['boxShadowHover'] ) && is_array( $submit['boxShadowHover'] ) && isset( $submit['boxShadowHover'][0] ) && true === $submit['boxShadowHover'][0] && isset( $submit['boxShadowHover'][7] ) && true === $submit['boxShadowHover'][7] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $submit['boxShadowHover'][7] ) && true === $submit['boxShadowHover'][7] ? 'inset ' : '' ) . ( isset( $submit['boxShadowHover'][3] ) && is_numeric( $submit['boxShadowHover'][3] ) ? $submit['boxShadowHover'][3] : '2' ) . 'px ' . ( isset( $submit['boxShadowHover'][4] ) && is_numeric( $submit['boxShadowHover'][4] ) ? $submit['boxShadowHover'][4] : '2' ) . 'px ' . ( isset( $submit['boxShadowHover'][5] ) && is_numeric( $submit['boxShadowHover'][5] ) ? $submit['boxShadowHover'][5] : '3' ) . 'px ' . ( isset( $submit['boxShadowHover'][6] ) && is_numeric( $submit['boxShadowHover'][6] ) ? $submit['boxShadowHover'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $submit['boxShadowHover'][1] ) && ! empty( $submit['boxShadowHover'][1] ) ? $submit['boxShadowHover'][1] : '#000000' ), ( isset( $submit['boxShadowHover'][2] ) && is_numeric( $submit['boxShadowHover'][2] ) ? $submit['boxShadowHover'][2] : 0.4 ) ) );
|
||||
}
|
||||
}
|
||||
|
||||
if ( 'gradient' === $bgtype ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit::before' );
|
||||
if ( isset( $submit['backgroundHoverType'] ) && 'gradient' === $submit['backgroundHoverType'] ) {
|
||||
$bg1 = ( ! isset( $submit['backgroundHover'] ) ? $css->render_color( '#444444', ( isset( $submit['backgroundHoverOpacity'] ) && is_numeric( $submit['backgroundHoverOpacity'] ) ? $submit['backgroundHoverOpacity'] : 1 ) ) : $css->render_color( $submit['backgroundHover'], ( isset( $submit['backgroundHoverOpacity'] ) && is_numeric( $submit['backgroundHoverOpacity'] ) ? $submit['backgroundHoverOpacity'] : 1 ) ) );
|
||||
$bg2 = ( isset( $submit['gradientHover'][0] ) && ! empty( $submit['gradientHover'][0] ) ? $css->render_color( $submit['gradientHover'][0], ( isset( $submit['gradientHover'][1] ) && is_numeric( $submit['gradientHover'][1] ) ? $submit['gradientHover'][1] : 1 ) ) : $css->render_color( '#999999', ( isset( $submit['gradientHover'][1] ) && is_numeric( $submit['gradientHover'][1] ) ? $submit['gradientHover'][1] : 1 ) ) );
|
||||
if ( isset( $submit['gradientHover'][4] ) && 'radial' === $submit['gradientHover'][4] ) {
|
||||
$css->add_property( 'background', 'radial-gradient(at ' . ( isset( $submit['gradientHover'][6] ) && ! empty( $submit['gradientHover'][6] ) ? $submit['gradientHover'][6] : 'center center' ) . ', ' . $bg1 . ' ' . ( isset( $submit['gradientHover'][2] ) && is_numeric( $submit['gradientHover'][2] ) ? $submit['gradientHover'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $submit['gradientHover'][3] ) && is_numeric( $submit['gradientHover'][3] ) ? $submit['gradientHover'][3] : '100' ) . '%)' );
|
||||
} else if ( ! isset( $submit['gradientHover'][4] ) || 'radial' !== $submit['gradientHover'][4] ) {
|
||||
$css->add_property( 'background', 'linear-gradient(' . ( isset( $submit['gradientHover'][5] ) && ! empty( $submit['gradientHover'][5] ) ? $submit['gradientHover'][5] : '180' ) . 'deg, ' . $bg1 . ' ' . ( isset( $submit['gradientHover'][2] ) && is_numeric( $submit['gradientHover'][2] ) ? $submit['gradientHover'][2] : '0' ) . '%, ' . $bg2 . ' ' . ( isset( $submit['gradientHover'][3] ) && is_numeric( $submit['gradientHover'][3] ) ? $submit['gradientHover'][3] : '100' ) . '%)' );
|
||||
}
|
||||
} else if ( isset( $submit['backgroundHover'] ) && ! empty( $submit['backgroundHover'] ) ) {
|
||||
$alpha = ( isset( $submit['backgroundHoverOpacity'] ) && is_numeric( $submit['backgroundHoverOpacity'] ) ? $submit['backgroundHoverOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $submit['backgroundHover'], $alpha ) );
|
||||
}
|
||||
if ( isset( $submit['boxShadowHover'] ) && is_array( $submit['boxShadowHover'] ) && isset( $submit['boxShadowHover'][0] ) && true === $submit['boxShadowHover'][0] && isset( $submit['boxShadowHover'][7] ) && true === $submit['boxShadowHover'][7] ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $submit['boxShadowHover'][7] ) && true === $submit['boxShadowHover'][7] ? 'inset ' : '' ) . ( isset( $submit['boxShadowHover'][3] ) && is_numeric( $submit['boxShadowHover'][3] ) ? $submit['boxShadowHover'][3] : '2' ) . 'px ' . ( isset( $submit['boxShadowHover'][4] ) && is_numeric( $submit['boxShadowHover'][4] ) ? $submit['boxShadowHover'][4] : '2' ) . 'px ' . ( isset( $submit['boxShadowHover'][5] ) && is_numeric( $submit['boxShadowHover'][5] ) ? $submit['boxShadowHover'][5] : '3' ) . 'px ' . ( isset( $submit['boxShadowHover'][6] ) && is_numeric( $submit['boxShadowHover'][6] ) ? $submit['boxShadowHover'][6] : '0' ) . 'px ' . $css->render_color( ( isset( $submit['boxShadowHover'][1] ) && ! empty( $submit['boxShadowHover'][1] ) ? $submit['boxShadowHover'][1] : '#000000' ), ( isset( $submit['boxShadowHover'][2] ) && is_numeric( $submit['boxShadowHover'][2] ) ? $submit['boxShadowHover'][2] : 0.4 ) ) );
|
||||
if ( isset( $submit['borderRadius'] ) && is_numeric( $submit['borderRadius'] ) ) {
|
||||
$css->add_property( 'border-radius', $submit['borderRadius'] . 'px' );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if ( isset( $submit['size'] ) && 'custom' && $submit['size'] && isset( $submit['deskPadding'] ) && is_array( $submit['deskPadding'] ) && isset( $submit['deskPadding'][0] ) && is_numeric( $submit['deskPadding'][0] ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( isset( $submit['deskPadding'][0] ) && is_numeric( $submit['deskPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $submit['deskPadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['deskPadding'][1] ) && is_numeric( $submit['deskPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $submit['deskPadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['deskPadding'][2] ) && is_numeric( $submit['deskPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $submit['deskPadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['deskPadding'][3] ) && is_numeric( $submit['deskPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $submit['deskPadding'][3] . 'px' );
|
||||
}
|
||||
|
||||
}
|
||||
if ( isset( $submit['size'] ) && 'custom' && $submit['size'] && isset( $submit['tabletPadding'] ) && is_array( $submit['tabletPadding'] ) && isset( $submit['tabletPadding'][0] ) && is_numeric( $submit['tabletPadding'][0] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( isset( $submit['tabletPadding'][0] ) && is_numeric( $submit['tabletPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $submit['tabletPadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['tabletPadding'][1] ) && is_numeric( $submit['tabletPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $submit['tabletPadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['tabletPadding'][2] ) && is_numeric( $submit['tabletPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $submit['tabletPadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['tabletPadding'][3] ) && is_numeric( $submit['tabletPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $submit['tabletPadding'][3] . 'px' );
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $submit['size'] ) && 'custom' && $submit['size'] && isset( $submit['mobilePadding'] ) && is_array( $submit['mobilePadding'] ) && isset( $submit['mobilePadding'][0] ) && is_numeric( $submit['mobilePadding'][0] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( isset( $submit['mobilePadding'][0] ) && is_numeric( $submit['mobilePadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $submit['mobilePadding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['mobilePadding'][1] ) && is_numeric( $submit['mobilePadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $submit['mobilePadding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['mobilePadding'][2] ) && is_numeric( $submit['mobilePadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $submit['mobilePadding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $submit['mobilePadding'][3] ) && is_numeric( $submit['mobilePadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $submit['mobilePadding'][3] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['submitMargin'] ) && is_array( $attributes['submitMargin'] ) && isset( $attributes['submitMargin'][0] ) && is_array( $attributes['submitMargin'][0] ) ) {
|
||||
$submit_margin = $attributes['submitMargin'][0];
|
||||
$margin_unit = ( isset( $submit_margin['unit'] ) && ! empty( $submit_margin['unit'] ) ? $submit_margin['unit'] : 'px' );
|
||||
if ( ( isset( $submit_margin['desk'][0] ) && is_numeric( $submit_margin['desk'][0] ) ) || ( isset( $submit_margin['desk'][1] ) && is_numeric( $submit_margin['desk'][1] ) ) || ( isset( $submit_margin['desk'][2] ) && is_numeric( $submit_margin['desk'][2] ) ) || ( isset( $submit_margin['desk'][3] ) && is_numeric( $submit_margin['desk'][3] ) ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( isset( $submit_margin['desk'][0] ) && is_numeric( $submit_margin['desk'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $submit_margin['desk'][0] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['desk'][1] ) && is_numeric( $submit_margin['desk'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $submit_margin['desk'][1] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['desk'][2] ) && is_numeric( $submit_margin['desk'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $submit_margin['desk'][2] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['desk'][3] ) && is_numeric( $submit_margin['desk'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $submit_margin['desk'][3] . $margin_unit );
|
||||
}
|
||||
|
||||
}
|
||||
if ( ( isset( $submit_margin['tablet'][0] ) && is_numeric( $submit_margin['tablet'][0] ) ) || ( isset( $submit_margin['tablet'][1] ) && is_numeric( $submit_margin['tablet'][1] ) ) || ( isset( $submit_margin['tablet'][2] ) && is_numeric( $submit_margin['tablet'][2] ) ) || ( isset( $submit_margin['tablet'][3] ) && is_numeric( $submit_margin['tablet'][3] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( isset( $submit_margin['tablet'][0] ) && is_numeric( $submit_margin['tablet'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $submit_margin['tablet'][0] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['tablet'][1] ) && is_numeric( $submit_margin['tablet'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $submit_margin['tablet'][1] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['tablet'][2] ) && is_numeric( $submit_margin['tablet'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $submit_margin['tablet'][2] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['tablet'][3] ) && is_numeric( $submit_margin['tablet'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $submit_margin['tablet'][3] . $margin_unit );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $submit_margin['mobile'][0] ) && is_numeric( $submit_margin['mobile'][0] ) ) || ( isset( $submit_margin['mobile'][1] ) && is_numeric( $submit_margin['mobile'][1] ) ) || ( isset( $submit_margin['mobile'][2] ) && is_numeric( $submit_margin['mobile'][2] ) ) || ( isset( $submit_margin['mobile'][3] ) && is_numeric( $submit_margin['mobile'][3] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( isset( $submit_margin['mobile'][0] ) && is_numeric( $submit_margin['mobile'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $submit_margin['mobile'][0] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['mobile'][1] ) && is_numeric( $submit_margin['mobile'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $submit_margin['mobile'][1] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['mobile'][2] ) && is_numeric( $submit_margin['mobile'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $submit_margin['mobile'][2] . $margin_unit );
|
||||
}
|
||||
if ( isset( $submit_margin['mobile'][3] ) && is_numeric( $submit_margin['mobile'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $submit_margin['mobile'][3] . $margin_unit );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['submitFont'] ) && is_array( $attributes['submitFont'] ) && isset( $attributes['submitFont'][0] ) && is_array( $attributes['submitFont'][0] ) ) {
|
||||
$submit_font = $attributes['submitFont'][0];
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( !empty( $submit_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $submit_font['size'][0], ( ! isset( $submit_font['sizeType'] ) ? 'px' : $submit_font['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $submit_font['lineHeight'] ) && is_array( $submit_font['lineHeight'] ) && is_numeric( $submit_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $submit_font['lineHeight'][0] . ( ! isset( $submit_font['lineType'] ) ? 'px' : $submit_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $submit_font['letterSpacing'] ) && is_numeric( $submit_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $submit_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $submit_font['textTransform'] ) && ! empty( $submit_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $submit_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $submit_font['family'] ) && ! empty( $submit_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $submit_font['family'] );
|
||||
}
|
||||
if ( isset( $submit_font['style'] ) && ! empty( $submit_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $submit_font['style'] );
|
||||
}
|
||||
if ( isset( $submit_font['weight'] ) && ! empty( $submit_font['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $submit_font['weight'] );
|
||||
}
|
||||
|
||||
if ( ( isset( $submit_font['size'] ) && is_array( $submit_font['size'] ) && is_numeric( $submit_font['size'][1] ) ) || ( isset( $submit_font['lineHeight'] ) && is_array( $submit_font['lineHeight'] ) && is_numeric( $submit_font['lineHeight'][1] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( !empty( $submit_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $submit_font['size'][1], ( isset( $submit_font['sizeType'] ) && ! empty( $submit_font['sizeType'] ) ? $submit_font['sizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $submit_font['lineHeight'] ) && is_array( $submit_font['lineHeight'] ) && is_numeric( $submit_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $submit_font['lineHeight'][1] . ( isset( $submit_font['lineType'] ) && ! empty( $submit_font['lineType'] ) ? $submit_font['lineType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $submit_font['size'] ) && is_array( $submit_font['size'] ) && is_numeric( $submit_font['size'][2] ) ) || ( isset( $submit_font['lineHeight'] ) && is_array( $submit_font['lineHeight'] ) && is_numeric( $submit_font['lineHeight'][2] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kb-form .kadence-blocks-form-field .kb-forms-submit' );
|
||||
if ( !empty( $submit_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $submit_font['size'][2], ( isset( $submit_font['sizeType'] ) && ! empty( $submit_font['sizeType'] ) ? $submit_font['sizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $submit_font['lineHeight'] ) && is_array( $submit_font['lineHeight'] ) && is_numeric( $submit_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $submit_font['lineHeight'][2] . ( isset( $submit_font['lineType'] ) && ! empty( $submit_font['lineType'] ) ? $submit_font['lineType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['messageFont'] ) && is_array( $attributes['messageFont'] ) && isset( $attributes['messageFont'][0] ) && is_array( $attributes['messageFont'][0] ) ) {
|
||||
$message_font = $attributes['messageFont'][0];
|
||||
if ( ( isset( $message_font['colorSuccess'] ) && ! empty( $message_font['colorSuccess'] ) ) || ( isset( $message_font['backgroundSuccess'] ) && ! empty( $message_font['backgroundSuccess'] ) ) || ( isset( $message_font['backgroundSuccess'] ) && ! empty( $message_font['backgroundSuccess'] ) ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kadence-blocks-form-success' );
|
||||
if ( isset( $message_font['colorSuccess'] ) && ! empty( $message_font['colorSuccess'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $message_font['colorSuccess'] ) );
|
||||
}
|
||||
if ( isset( $message_font['borderSuccess'] ) && ! empty( $message_font['borderSuccess'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $message_font['borderSuccess'] ) );
|
||||
}
|
||||
if ( isset( $message_font['backgroundSuccess'] ) && ! empty( $message_font['backgroundSuccess'] ) ) {
|
||||
$alpha = ( isset( $message_font['backgroundSuccessOpacity'] ) && is_numeric( $message_font['backgroundSuccessOpacity'] ) ? $message_font['backgroundSuccessOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $message_font['backgroundSuccess'], $alpha ) );
|
||||
}
|
||||
|
||||
}
|
||||
if ( ( isset( $message_font['colorError'] ) && ! empty( $message_font['colorError'] ) ) || ( isset( $message_font['backgroundError'] ) && ! empty( $message_font['backgroundError'] ) ) || ( isset( $message_font['backgroundError'] ) && ! empty( $message_font['backgroundError'] ) ) ) {
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kadence-blocks-form-warning' );
|
||||
if ( isset( $message_font['colorError'] ) && ! empty( $message_font['colorError'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $message_font['colorError'] ) );
|
||||
}
|
||||
if ( isset( $message_font['borderError'] ) && ! empty( $message_font['borderError'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $message_font['borderError'] ) );
|
||||
}
|
||||
if ( isset( $message_font['backgroundError'] ) && ! empty( $message_font['backgroundError'] ) ) {
|
||||
$alpha = ( isset( $message_font['backgroundErrorOpacity'] ) && is_numeric( $message_font['backgroundErrorOpacity'] ) ? $message_font['backgroundErrorOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $message_font['backgroundError'], $alpha ) );
|
||||
}
|
||||
|
||||
}
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kadence-blocks-form-message, .kadence-form-' . $unique_id . ' .kb-form-error-msg' );
|
||||
if ( isset( $message_font['borderRadius'] ) && ! empty( $message_font['borderRadius'] ) ) {
|
||||
$css->add_property( 'border-radius', $message_font['borderRadius'] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['borderWidth'] ) && is_array( $message_font['borderWidth'] ) && is_numeric( $message_font['borderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-width', $message_font['borderWidth'][0] . 'px ' . $message_font['borderWidth'][1] . 'px ' . $message_font['borderWidth'][2] . 'px ' . $message_font['borderWidth'][3] . 'px' );
|
||||
}
|
||||
if ( !empty( $message_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $message_font['size'][0], ( ! isset( $message_font['sizeType'] ) ? 'px' : $message_font['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $message_font['lineHeight'] ) && is_array( $message_font['lineHeight'] ) && is_numeric( $message_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $message_font['lineHeight'][0] . ( ! isset( $message_font['lineType'] ) ? 'px' : $message_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $message_font['letterSpacing'] ) && is_numeric( $message_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $message_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['textTransform'] ) && ! empty( $message_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $message_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $message_font['family'] ) && ! empty( $message_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $message_font['family'] );
|
||||
}
|
||||
if ( isset( $message_font['style'] ) && ! empty( $message_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $message_font['style'] );
|
||||
}
|
||||
if ( isset( $message_font['weight'] ) && ! empty( $message_font['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $message_font['weight'] );
|
||||
}
|
||||
if ( isset( $message_font['padding'] ) && is_array( $message_font['padding'] ) && is_numeric( $message_font['padding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $message_font['padding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['padding'] ) && is_array( $message_font['padding'] ) && is_numeric( $message_font['padding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $message_font['padding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['padding'] ) && is_array( $message_font['padding'] ) && is_numeric( $message_font['padding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $message_font['padding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['padding'] ) && is_array( $message_font['padding'] ) && is_numeric( $message_font['padding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $message_font['padding'][3] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['margin'] ) && is_array( $message_font['margin'] ) && is_numeric( $message_font['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $message_font['margin'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['margin'] ) && is_array( $message_font['margin'] ) && is_numeric( $message_font['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $message_font['margin'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['margin'] ) && is_array( $message_font['margin'] ) && is_numeric( $message_font['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $message_font['margin'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $message_font['margin'] ) && is_array( $message_font['margin'] ) && is_numeric( $message_font['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $message_font['margin'][3] . 'px' );
|
||||
}
|
||||
|
||||
if ( ( isset( $message_font['size'] ) && is_array( $message_font['size'] ) && is_numeric( $message_font['size'][1] ) ) || ( isset( $message_font['lineHeight'] ) && is_array( $message_font['lineHeight'] ) && is_numeric( $message_font['lineHeight'][1] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kadence-blocks-form-message' );
|
||||
if ( !empty( $message_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $message_font['size'][1], ( isset( $message_font['fontSizeType'] ) && ! empty( $message_font['fontSizeType'] ) ? $message_font['fontSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $message_font['lineHeight'] ) && is_array( $message_font['lineHeight'] ) && is_numeric( $message_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $message_font['lineHeight'][1] . ( isset( $message_font['lineType'] ) && ! empty( $message_font['lineType'] ) ? $message_font['lineType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $message_font['size'] ) && is_array( $message_font['size'] ) && is_numeric( $message_font['size'][2] ) ) || ( isset( $message_font['lineHeight'] ) && is_array( $message_font['lineHeight'] ) && is_numeric( $message_font['lineHeight'][2] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kadence-form-' . $unique_id . ' .kadence-blocks-form-message' );
|
||||
if ( !empty( $message_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $message_font['size'][2], ( isset( $message_font['fontSizeType'] ) && ! empty( $message_font['fontSizeType'] ) ? $message_font['fontSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $message_font['lineHeight'] ) && is_array( $message_font['lineHeight'] ) && is_numeric( $message_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $message_font['lineHeight'][2] . ( isset( $message_font['lineType'] ) && ! empty( $message_font['lineType'] ) ? $message_font['lineType'] : 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
if( ( !isset( $attributes['honeyPot']) || isset( $attributes['honeyPot'] ) && $attributes['honeyPot'] ) ) {
|
||||
$css->set_selector( '.kb-form input.kadence-blocks-field.verify' );
|
||||
$css->add_property( 'opacity', '0.0' );
|
||||
$css->add_property( 'position', 'absolute' );
|
||||
$css->add_property( 'top', '0.0' );
|
||||
$css->add_property( 'left', '0.0' );
|
||||
$css->add_property( 'width', '0.0' );
|
||||
$css->add_property( 'height', '0.0' );
|
||||
$css->add_property( 'z-index', '-1' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Add a noscript to the content.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$content .= '<noscript><div class="kadence-blocks-form-message kadence-blocks-form-warning">' . __( 'Please enable JavaScript in your browser to submit the form', 'kadence-blocks' ) . '</div><style>.kadence-form-' . $unique_id . ' .kadence-blocks-form-field.kb-submit-field { display: none; }</style></noscript>';
|
||||
|
||||
// Update honeypot autocomplete value.
|
||||
if( ( !isset( $attributes['honeyPot']) || isset( $attributes['honeyPot'] ) && $attributes['honeyPot'] ) ) {
|
||||
$default = '<input class="kadence-blocks-field verify" type="text" name="_kb_verify_email" autocomplete="off" aria-hidden="true" placeholder="Email" tabindex="-1"/>';
|
||||
$new = '<label class="kadence-verify-label">Email<input class="kadence-blocks-field verify" type="text" name="_kb_verify_email" autocomplete="new-password" aria-hidden="true" placeholder="Email" tabindex="-1" data-1p-ignore="true" data-lpignore="true" /></label>';
|
||||
$content = str_replace( $default, $new, $content );
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-form', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-form-block.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
$recaptcha_site_key = get_option( 'kadence_blocks_recaptcha_site_key' );
|
||||
if ( ! $recaptcha_site_key ) {
|
||||
$recaptcha_site_key = 'missingkey';
|
||||
}
|
||||
|
||||
$recaptcha_lang = ! empty( get_option('kadence_blocks_recaptcha_language') ) ? '&hl=' . get_option('kadence_blocks_recaptcha_language') : '';
|
||||
|
||||
wp_register_script( 'kadence-blocks-google-recaptcha-v3', 'https://www.google.com/recaptcha/api.js?render=' . esc_attr( $recaptcha_site_key ) . $recaptcha_lang, array(), KADENCE_BLOCKS_VERSION, true );
|
||||
$recaptcha_script = "grecaptcha.ready(function () { var recaptchaResponse = document.getElementById('kb_recaptcha_response'); if ( recaptchaResponse ) { grecaptcha.execute('" . esc_attr( $recaptcha_site_key ) . "', { action: 'kb_form' }).then(function (token) { recaptchaResponse.value = token; }); } var kb_recaptcha_inputs = document.getElementsByClassName('kb_recaptcha_response'); if ( ! kb_recaptcha_inputs.length ) { return; } for (var i = 0; i < kb_recaptcha_inputs.length; i++) { const e = i; grecaptcha.execute('" . esc_attr( $recaptcha_site_key ) . "', { action: 'kb_form' }).then(function (token) { kb_recaptcha_inputs[e].setAttribute('value', token); }); } });";
|
||||
wp_add_inline_script( 'kadence-blocks-google-recaptcha-v3', $recaptcha_script, 'after' );
|
||||
wp_register_script( 'kadence-blocks-google-recaptcha-v2', 'https://www.google.com/recaptcha/api.js?render=explicit&onload=kbOnloadV2Callback' . $recaptcha_lang, array( 'jquery' ), KADENCE_BLOCKS_VERSION, true );
|
||||
$recaptcha_v2_script = "var kbOnloadV2Callback = function(){jQuery( '.wp-block-kadence-form' ).find( '.kadence-blocks-g-recaptcha-v2' ).each( function() {grecaptcha.render( jQuery( this ).attr( 'id' ), {'sitekey' : '" . esc_attr( $recaptcha_site_key ) . "'});});}";
|
||||
wp_add_inline_script( 'kadence-blocks-google-recaptcha-v2', $recaptcha_v2_script, 'before' );
|
||||
|
||||
wp_localize_script(
|
||||
'kadence-blocks-form',
|
||||
'kadence_blocks_form_params',
|
||||
array(
|
||||
'ajaxurl' => admin_url( 'admin-ajax.php' ),
|
||||
'error_message' => __( 'Please fix the errors to proceed', 'kadence-blocks' ),
|
||||
'nonce' => wp_create_nonce( 'kb_form_nonce' ),
|
||||
'required' => __( 'is required', 'kadence-blocks' ),
|
||||
'mismatch' => __( 'does not match', 'kadence-blocks' ),
|
||||
'validation' => __( 'is not valid', 'kadence-blocks' ),
|
||||
'duplicate' => __( 'requires a unique entry and this value has already been used', 'kadence-blocks' ),
|
||||
'item' => __( 'Item', 'kadence-blocks' ),
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Form_Block::get_instance();
|
||||
@@ -0,0 +1,343 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Google Maps Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Google Maps Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Googlemaps_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'googlemaps';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kb-google-maps-container' . $unique_id );
|
||||
|
||||
/*
|
||||
* Max-Width
|
||||
*/
|
||||
foreach ( [ 'Desktop', 'Tablet', 'Mobile' ] as $breakpoint ) {
|
||||
$css->set_media_state( strtolower( $breakpoint ) );
|
||||
|
||||
if ( isset( $attributes[ 'width' . $breakpoint ] ) && is_numeric( $attributes[ 'width' . $breakpoint ] ) ) {
|
||||
$css->add_property( 'max-width', $attributes[ 'width' . $breakpoint ] . 'px' );
|
||||
}
|
||||
if ( $breakpoint !== 'Desktop' ) {
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Height
|
||||
*/
|
||||
foreach ( [ 'Desktop', 'Tablet', 'Mobile' ] as $breakpoint ) {
|
||||
if ( $breakpoint == 'Desktop' ) {
|
||||
$height = ( isset( $attributes[ 'height' . $breakpoint ] ) && is_numeric( $attributes[ 'height' . $breakpoint ] ) ? $attributes[ 'height' . $breakpoint ] : 450 );
|
||||
$css->add_property( 'height', $height . 'px' );
|
||||
} else {
|
||||
$css->set_media_state( strtolower( $breakpoint ) );
|
||||
if ( isset( $attributes[ 'height' . $breakpoint ] ) && is_numeric( $attributes[ 'height' . $breakpoint ] ) ) {
|
||||
$css->add_property( 'height', $attributes[ 'height' . $breakpoint ] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Margin
|
||||
*/
|
||||
$margin_args = array(
|
||||
'desktop_key' => 'marginDesktop',
|
||||
'tablet_key' => 'marginTablet',
|
||||
'mobile_key' => 'marginMobile',
|
||||
'unit_key' => 'marginUnit',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin', $margin_args );
|
||||
|
||||
/*
|
||||
* Padding
|
||||
*/
|
||||
$padding_args = array(
|
||||
'desktop_key' => 'paddingDesktop',
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
'unit_key' => 'paddingUnit',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', $padding_args );
|
||||
|
||||
|
||||
/*
|
||||
* Align
|
||||
*/
|
||||
foreach ( [ 'Desktop', 'Tablet', 'Mobile' ] as $index => $breakpoint ) {
|
||||
$css->set_media_state( strtolower( $breakpoint ) );
|
||||
|
||||
if ( ! empty( $attributes['textAlign'][ $index ] ) ) {
|
||||
if ( $attributes['textAlign'][ $index ] === 'center' ) {
|
||||
$css->add_property( 'margin-left', 'auto !important' );
|
||||
$css->add_property( 'margin-right', 'auto !important' );
|
||||
} elseif ( $attributes['textAlign'][ $index ] === 'left' ) {
|
||||
$css->add_property( 'margin-right', 'auto !important' );
|
||||
} elseif ( $attributes['textAlign'][ $index ] === 'right' ) {
|
||||
$css->add_property( 'margin-left', 'auto !important' );
|
||||
}
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
/*
|
||||
* Filters
|
||||
*/
|
||||
if ( isset( $attributes['mapFilter'] ) && $attributes['mapFilter'] !== 'standard' ) {
|
||||
$css->set_selector( '.kb-google-maps-container' . $unique_id );
|
||||
$filter_level = ( isset( $attributes['mapFilterAmount'] ) && is_numeric( $attributes['mapFilterAmount'] ) ? $attributes['mapFilterAmount'] : 50 );
|
||||
$css->add_property( 'filter', $attributes['mapFilter'] . '(' . $filter_level . '%)' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
$updated_version = ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ? true : false;
|
||||
|
||||
$style_id = 'kb-google-maps' . esc_attr( $unique_id );
|
||||
if ( ! wp_style_is( $style_id, 'enqueued' ) && apply_filters( 'kadence_blocks_render_inline_css', true, 'google_maps', $attributes ) ) {
|
||||
// If filter didn't run in header (which would have enqueued the specific css id ) then filter attributes for easier dynamic css.
|
||||
$attributes = apply_filters( 'kadence_blocks_google_maps_render_block_attributes', $attributes );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['apiType'] ) && $attributes['apiType'] === 'javascript' ) {
|
||||
$this->enqueue_script( 'kadence-blocks-googlemaps-init-js' );
|
||||
$this->enqueue_script( 'kadence-blocks-googlemaps-js' );
|
||||
}
|
||||
|
||||
// Process potential dynamic attribute.
|
||||
$location = '';
|
||||
if ( isset( $attributes['location'] ) && $attributes['location'] ) {
|
||||
$location = do_shortcode( $attributes['location'] );
|
||||
}
|
||||
|
||||
if ( $updated_version ) {
|
||||
$wrapper_args = array(
|
||||
'class' => 'kb-google-maps-container kb-google-maps-container' . $unique_id . ' ' . ( ! empty( $attributes['align'] ) ? 'align' . $attributes['align'] : '' ),
|
||||
'data-mapid' => $this->escape_for_js_variable( $unique_id ),
|
||||
);
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
|
||||
$content = '<div ' . $wrapper_attributes . '>';
|
||||
|
||||
if ( isset( $attributes['apiType'] ) && $attributes['apiType'] === 'javascript' ) {
|
||||
$content .= '<div id="kb-google-map' . $this->escape_for_js_variable( $unique_id ) . '" style="width: 100%; height: 100%"></div>';
|
||||
} else {
|
||||
|
||||
$mapQueryParams = array(
|
||||
'key' => 'KADENCE_GOOGLE_MAPS_KEY',
|
||||
'zoom' => $attributes['zoom'],
|
||||
'maptype' => $attributes['mapType'],
|
||||
'q' => $location,
|
||||
);
|
||||
// translators: %s is the location.
|
||||
$title = sprintf( __( 'Google map of %s', 'kadence-blocks' ), $location );
|
||||
$content .= '<iframe width="100%" height="100%"
|
||||
style="border:0" loading="lazy"
|
||||
src="https://www.google.com/maps/embed/v1/place?' . http_build_query( $mapQueryParams ) . '"
|
||||
title="' . esc_attr( $title ) . '"></iframe>';
|
||||
}
|
||||
$content .= '</div>';
|
||||
}
|
||||
|
||||
$snazzyStyles = [
|
||||
'shades_of_grey' => "[{'featureType':'all','elementType':'labels.text.fill','stylers':[{'saturation':36},{'color':'#000000'},{'lightness':40}]},{'featureType':'all','elementType':'labels.text.stroke','stylers':[{'visibility':'on'},{'color':'#000000'},{'lightness':16}]},{'featureType':'all','elementType':'labels.icon','stylers':[{'visibility':'off'}]},{'featureType':'administrative','elementType':'geometry.fill','stylers':[{'color':'#000000'},{'lightness':20}]},{'featureType':'administrative','elementType':'geometry.stroke','stylers':[{'color':'#000000'},{'lightness':17},{'weight':1.2}]},{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':20}]},{'featureType':'poi','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':21}]},{'featureType':'road.highway','elementType':'geometry.fill','stylers':[{'color':'#000000'},{'lightness':17}]},{'featureType':'road.highway','elementType':'geometry.stroke','stylers':[{'color':'#000000'},{'lightness':29},{'weight':0.2}]},{'featureType':'road.arterial','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':18}]},{'featureType':'road.local','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':16}]},{'featureType':'transit','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':19}]},{'featureType':'water','elementType':'geometry','stylers':[{'color':'#000000'},{'lightness':17}]}]",
|
||||
'no_label_bright_colors' => '[{"featureType":"all","elementType":"all","stylers":[{"saturation":"32"},{"lightness":"-3"},{"visibility":"on"},{"weight":"1.18"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"saturation":"-70"},{"lightness":"14"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"saturation":"100"},{"lightness":"-14"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"},{"lightness":"12"}]}]',
|
||||
'clean_interface' => '[{"featureType":"all","elementType":"labels.text","stylers":[{"color":"#878787"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f9f5ed"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"color":"#f5f5f5"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#c9c9c9"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#aee0f4"}]}]',
|
||||
'midnight_commander' => '[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"color":"#000000"},{"lightness":13}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#144b53"},{"lightness":14},{"weight":1.4}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#08304b"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#0c4152"},{"lightness":5}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#0b434f"},{"lightness":25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#0b3d51"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"}]},{"featureType":"transit","elementType":"all","stylers":[{"color":"#146474"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#021019"}]}]',
|
||||
'apple_maps_esque' => '[{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"lightness":"29"}]},{"featureType":"administrative.province","elementType":"labels.text.fill","stylers":[{"lightness":"-12"},{"color":"#796340"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"lightness":"15"},{"saturation":"15"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#fbf5ed"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#fbf5ed"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.attraction","elementType":"all","stylers":[{"visibility":"on"},{"lightness":"30"},{"saturation":"-41"},{"gamma":"0.84"}]},{"featureType":"poi.attraction","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.medical","elementType":"geometry","stylers":[{"color":"#fbd3da"}]},{"featureType":"poi.medical","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#b0e9ac"},{"visibility":"on"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"hue":"#68ff00"},{"lightness":"-24"},{"gamma":"1.59"}]},{"featureType":"poi.sports_complex","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","elementType":"geometry","stylers":[{"saturation":"10"},{"color":"#c3eb9a"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"lightness":"30"},{"color":"#e7ded6"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"},{"saturation":"-39"},{"lightness":"28"},{"gamma":"0.86"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffe523"},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"saturation":"0"},{"gamma":"1.44"},{"color":"#fbc28b"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"on"},{"saturation":"-40"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#fed7a5"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"gamma":"1.54"},{"color":"#fbe38b"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"visibility":"on"},{"gamma":"2.62"},{"lightness":"10"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"weight":"0.50"},{"gamma":"1.04"}]},{"featureType":"transit.station.airport","elementType":"geometry.fill","stylers":[{"color":"#dee3fb"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"46"},{"color":"#a4e1ff"}]}]',
|
||||
'cobalt' => '[{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":true},{"saturation":10},{"lightness":30},{"gamma":0.5},{"hue":"#435158"}]}]',
|
||||
'avocado' => '[{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#aee2e0"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#abce83"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#769E72"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#7B8758"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#EBF4A4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#8dab68"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#5B5B3F"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ABCE83"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#A4C67D"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#9BBF72"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#EBF4A4"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#87ae79"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#7f2200"},{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"},{"visibility":"on"},{"weight":4.1}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#495421"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]}]',
|
||||
'night_mode' => '[{elementType:"geometry",stylers:[{color:"#242f3e"}]},{elementType:"labels.text.stroke",stylers:[{color:"#242f3e"}]},{elementType:"labels.text.fill",stylers:[{color:"#746855"}]},{featureType:"administrative.locality",elementType:"labels.text.fill",stylers:[{color:"#d59563"}]},{featureType:"poi",elementType:"labels.text.fill",stylers:[{color:"#d59563"}]},{featureType:"poi.park",elementType:"geometry",stylers:[{color:"#263c3f"}]},{featureType:"poi.park",elementType:"labels.text.fill",stylers:[{color:"#6b9a76"}]},{featureType:"road",elementType:"geometry",stylers:[{color:"#38414e"}]},{featureType:"road",elementType:"geometry.stroke",stylers:[{color:"#212a37"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{color:"#9ca5b3"}]},{featureType:"road.highway",elementType:"geometry",stylers:[{color:"#746855"}]},{featureType:"road.highway",elementType:"geometry.stroke",stylers:[{color:"#1f2835"}]},{featureType:"road.highway",elementType:"labels.text.fill",stylers:[{color:"#f3d19c"}]},{featureType:"transit",elementType:"geometry",stylers:[{color:"#2f3948"}]},{featureType:"transit.station",elementType:"labels.text.fill",stylers:[{color:"#d59563"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#17263c"}]},{featureType:"water",elementType:"labels.text.fill",stylers:[{color:"#515c6d"}]},{featureType:"water",elementType:"labels.text.stroke",stylers:[{color:"#17263c"}]}]',
|
||||
'custom' => isset( $attributes['customSnazzy'] ) ? $this->sanitize_custom_snazzy_styles( $attributes['customSnazzy'] ) : '[]'
|
||||
];
|
||||
|
||||
// Replace API key with default or users set key.
|
||||
$user_google_maps_key = get_option( 'kadence_blocks_google_maps_api', '' );
|
||||
if ( empty( $user_google_maps_key ) ) {
|
||||
$content = str_replace( 'KADENCE_GOOGLE_MAPS_KEY', 'AIzaSyBAM2o7PiQqwk15LC1XRH2e_KJ-jUa7KYk', $content );
|
||||
} else {
|
||||
$content = str_replace( 'KADENCE_GOOGLE_MAPS_KEY', $user_google_maps_key, $content );
|
||||
}
|
||||
|
||||
$zoom = empty( $attributes['zoom'] ) ? 11 : esc_attr( $attributes['zoom'] );
|
||||
$gMapLat = empty( $attributes['lat'] ) ? '37.8201' : esc_attr($attributes['lat'] );
|
||||
$gMapLng = empty( $attributes['lng'] ) ? '-122.4781' : esc_attr( $attributes['lng'] );
|
||||
|
||||
$content .= '<script>';
|
||||
$content .= 'function kb_google_map' . $this->escape_for_js_variable( $unique_id ) . '() {';
|
||||
$content .= ' let center = { lat: ' . $gMapLat . ', lng: ' . $gMapLng . '};';
|
||||
|
||||
$content .= ' let map = new google.maps.Map(document.getElementById("kb-google-map' . $this->escape_for_js_variable( $unique_id ) . '"), {
|
||||
zoom: ' . $zoom . ',
|
||||
center: center,';
|
||||
|
||||
if ( ! empty( $attributes['mapStyle'] ) && $attributes['mapStyle'] !== 'standard' ) {
|
||||
$content .= 'styles: ' . $snazzyStyles[ $attributes['mapStyle'] ] . ',';
|
||||
}
|
||||
if ( isset( $attributes['mapType'] ) && $attributes['mapType'] === 'satellite' ) {
|
||||
$content .= 'mapTypeId: "satellite",';
|
||||
}
|
||||
|
||||
$content .= '});';
|
||||
|
||||
if ( ! isset( $attributes['showMarker'] ) || ( isset( $attributes['showMarker'] ) && $attributes['showMarker'] ) ) {
|
||||
$content .= 'let marker = new google.maps.Marker({';
|
||||
$content .= ' position: { lat: ' . $gMapLat . ', lng: ' . $gMapLng . '},';
|
||||
$content .= ' map: map,';
|
||||
$content .= ' });';
|
||||
}
|
||||
|
||||
$content .= '}';
|
||||
$content .= '</script>';
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
private function escape_for_js_variable ( $string ) {
|
||||
return preg_replace('/[^a-zA-Z0-9_]/', '', $string);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sanitize custom Snazzy styles.
|
||||
*
|
||||
* @param mixed $input The input to sanitize.
|
||||
* @return string The sanitized JSON string.
|
||||
*/
|
||||
public function sanitize_custom_snazzy_styles( $input ) {
|
||||
if ( ! is_string( $input ) ) {
|
||||
return '[]';
|
||||
}
|
||||
|
||||
$sanitized_array = array();
|
||||
$decoded_input = json_decode( $input, true );
|
||||
|
||||
if ( json_last_error() === JSON_ERROR_NONE && is_array( $decoded_input ) ) {
|
||||
foreach ( $decoded_input as $item ) {
|
||||
$sanitized_array[] = $this->sanitize_snazzy_item( $item );
|
||||
}
|
||||
}
|
||||
|
||||
return wp_json_encode( $sanitized_array );
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively sanitize each item in the Snazzy styles array.
|
||||
*
|
||||
* @param mixed $item The item to sanitize.
|
||||
* @return mixed The sanitized item.
|
||||
*/
|
||||
public function sanitize_snazzy_item( $item ) {
|
||||
if ( is_array( $item ) ) {
|
||||
$sanitized_item = array();
|
||||
foreach ( $item as $key => $value ) {
|
||||
$sanitized_key = is_string( $key ) ? sanitize_text_field( $key ) : $key;
|
||||
$sanitized_item[ $sanitized_key ] = $this->sanitize_snazzy_item( $value );
|
||||
}
|
||||
return $sanitized_item;
|
||||
} elseif ( is_string( $item ) ) {
|
||||
return sanitize_text_field( $item );
|
||||
} elseif ( is_numeric( $item ) ) {
|
||||
return $item;
|
||||
} elseif ( is_bool( $item ) ) {
|
||||
return $item;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$google_maps_api_key = get_option( 'kadence_blocks_google_maps_api', 'missingkey' );
|
||||
wp_register_script( 'kadence-blocks-googlemaps-js', 'https://maps.googleapis.com/maps/api/js?key=' . $google_maps_api_key . '&callback=kbInitMaps', array( 'kadence-blocks-googlemaps-init-js' ), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-googlemaps-init-js', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-init-google-maps.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Googlemaps_Block::get_instance();
|
||||
@@ -0,0 +1,483 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Header Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Header Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Header_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'header';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Reference to the ids so we don't render inside of a render.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private static $seen_refs = [];
|
||||
/**
|
||||
* Array of responsive transparent settings.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $responsive_transparent_settings = [];
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
if ( empty( $attributes['id'] ) ) {
|
||||
return;
|
||||
}
|
||||
$header_attributes = $this->get_attributes_with_defaults_cpt( $attributes['id'], 'kadence_header', '_kad_header_' );
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$sizes = array( 'Desktop', 'Tablet', 'Mobile' );
|
||||
|
||||
foreach ( $sizes as $size ) {
|
||||
$this->sized_dynamic_styles( $css, $header_attributes, $unique_id, $size );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
// Normal state styles.-cpt-id .kb-header-container
|
||||
$css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container' );
|
||||
$css->render_measure_output( $header_attributes, 'margin', 'margin', [ 'unit_key' => 'marginUnit' ] );
|
||||
$css->render_measure_output( $header_attributes, 'padding', 'padding', [ 'unit_key' => 'paddingUnit' ] );
|
||||
$css->render_typography( $header_attributes );
|
||||
|
||||
if ( ! empty( $header_attributes['pro_backdropFilterString'] ) && class_exists( 'Kadence_Blocks_Pro' ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container:not(:has(.item-is-stuck)), .wp-block-kadence-header' . $unique_id . ' .item-is-stuck' );
|
||||
$css->add_property( 'position', 'relative' );
|
||||
$css->add_property( 'z-index', '10' );
|
||||
$css->add_property( 'backdrop-filter', $header_attributes['pro_backdropFilterString'] );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build up the dynamic styles for a size.
|
||||
*
|
||||
* @param string $size The size.
|
||||
* @return array
|
||||
*/
|
||||
public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'Desktop' ) {
|
||||
$sized_attributes = $css->get_sized_attributes_auto( $attributes, $size, false );
|
||||
$sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size );
|
||||
|
||||
$bg = $sized_attributes['background'];
|
||||
$bg_transparent = $sized_attributes['backgroundTransparent'];
|
||||
$bg_sticky = $sized_attributes['backgroundSticky'];
|
||||
$border = $sized_attributes['border'];
|
||||
$typography = $sized_attributes['typography'];
|
||||
$min_height = $css->get_inherited_value($sized_attributes['height'][0], $sized_attributes['height'][1], $sized_attributes['height'][2], $size);
|
||||
$max_width = $css->get_inherited_value($sized_attributes['width'][0], $sized_attributes['width'][1], $sized_attributes['width'][2], $size);
|
||||
|
||||
$css->set_media_state( strtolower( $size ) );
|
||||
// Normal state styles
|
||||
$css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container' );
|
||||
$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['border'], 'bottom' ) );
|
||||
$css->add_property( 'border-top', $css->render_border( $sized_attributes['border'], 'top' ) );
|
||||
$css->add_property( 'border-left', $css->render_border( $sized_attributes['border'], 'left' ) );
|
||||
$css->add_property( 'border-right', $css->render_border( $sized_attributes['border'], 'right' ) );
|
||||
if ( $min_height ) {
|
||||
$css->add_property( 'min-height', $min_height . $sized_attributes['heightUnit'] );
|
||||
}
|
||||
if ( $max_width ) {
|
||||
$css->add_property( 'max-width', $max_width . $sized_attributes['widthUnit'] );
|
||||
$css->add_property( 'margin', '0 auto' );
|
||||
}
|
||||
// Only output the border radius if it's not 0.
|
||||
if ( ! empty( $sized_attributes[( 'Desktop' === $size ? 'borderRadius' : 'borderRadius' . $size )][0] ) || ! empty( $sized_attributes[( 'Desktop' === $size ? 'borderRadius' : 'borderRadius' . $size )][1] ) || ! empty( $sized_attributes[( 'Desktop' === $size ? 'borderRadius' : 'borderRadius' . $size )][2] ) || ! empty( $sized_attributes[( 'Desktop' === $size ? 'borderRadius' : 'borderRadius' . $size )][3] ) ) {
|
||||
$css->render_measure_range( $sized_attributes, ( 'Desktop' === $size ? 'borderRadius' : 'borderRadius' . $size ), 'border-radius', '', ['unit_key' => 'borderRadiusUnit']);
|
||||
}
|
||||
|
||||
if ( $sized_attributes['shadow'] && isset( $sized_attributes['shadow'][0] ) && $sized_attributes['shadow'][0]['enable'] ) {
|
||||
$css->add_property( 'box-shadow', $css->render_shadow( $sized_attributes['shadow'][0] ) );
|
||||
}
|
||||
if ( ! $this->is_header_transparent( $attributes, $unique_id, $size ) ) {
|
||||
$css->render_background( $bg, $css );
|
||||
}
|
||||
|
||||
//transparent normal
|
||||
$css->set_selector( '.wp-block-kadence-header' . $unique_id . '.header-' . strtolower( $size ) . '-transparent' );
|
||||
if ( $this->is_header_transparent( $attributes, $unique_id, $size ) ) {
|
||||
$css->render_background( $bg_transparent, $css, '--kb-transparent-header-bg' );
|
||||
}
|
||||
$css->set_selector( '.wp-block-kadence-header' . $unique_id . '.header-' . strtolower( $size ) . '-transparent .kb-header-container' );
|
||||
if ( $this->is_header_transparent( $attributes, $unique_id, $size ) ) {
|
||||
$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderTransparent'], 'bottom' ) );
|
||||
$css->add_property( 'border-top', $css->render_border( $sized_attributes['borderTransparent'], 'top' ) );
|
||||
$css->add_property( 'border-left', $css->render_border( $sized_attributes['borderTransparent'], 'left' ) );
|
||||
$css->add_property( 'border-right', $css->render_border( $sized_attributes['borderTransparent'], 'right' ) );
|
||||
|
||||
// Only output the border radius if it's not 0.
|
||||
if ( $sized_attributes['borderRadiusTransparent'][0] != 0 || ! empty( $sized_attributes['borderRadiusTransparent'][1] ) || ! empty( $sized_attributes['borderRadiusTransparent'][2] ) || ! empty( $sized_attributes['borderRadiusTransparent'][3] ) ) {
|
||||
$css->render_measure_range( $attributes, ( 'Desktop' === $size ? 'borderRadiusTransparent' : 'borderRadiusTransparent' . $size ), 'border-radius', '', ['unit_key' => 'borderRadiusTransparentUnit']);
|
||||
}
|
||||
}
|
||||
|
||||
// Sticky normal
|
||||
$css->set_selector( '.wp-block-kadence-header' . $unique_id );
|
||||
if ( $sized_attributes['isSticky'] == '1' ) {
|
||||
$css->render_background( $bg_sticky, $css, '--kb-stuck-header-bg' );
|
||||
}
|
||||
$css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container.item-is-stuck' );
|
||||
if ( $sized_attributes['isSticky'] == '1' ) {
|
||||
$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderSticky'], 'bottom' ) );
|
||||
$css->add_property( 'border-top', $css->render_border( $sized_attributes['borderSticky'], 'top' ) );
|
||||
$css->add_property( 'border-left', $css->render_border( $sized_attributes['borderSticky'], 'left' ) );
|
||||
$css->add_property( 'border-right', $css->render_border( $sized_attributes['borderSticky'], 'right' ) );
|
||||
|
||||
// Only output the border radius if it's not 0.
|
||||
if ( $sized_attributes['borderRadiusSticky'][0] != 0 || ! empty( $sized_attributes['borderRadiusSticky'][1] ) || ! empty( $sized_attributes['borderRadiusSticky'][2] ) || ! empty( $sized_attributes['borderRadiusSticky'][3] ) ) {
|
||||
$css->render_measure_range( $attributes, ( 'Desktop' === $size ? 'borderRadiusSticky' : 'borderRadiusSticky' . $size ), 'border-radius', '', ['unit_key' => 'borderRadiusStickyUnit']);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for dynamic blocks
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if ( empty( $attributes['id'] ) ) {
|
||||
return '';
|
||||
}
|
||||
$header_block = get_post( $attributes['id'] );
|
||||
|
||||
if ( ! $header_block || 'kadence_header' !== $header_block->post_type ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( 'publish' !== $header_block->post_status || ! empty( $header_block->post_password ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Prevent a nav block from being rendered inside itself.
|
||||
if ( isset( self::$seen_refs[ $attributes['id'] ] ) ) {
|
||||
// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
|
||||
// is set in `wp_debug_mode()`.
|
||||
$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
|
||||
|
||||
return $is_debug ?
|
||||
// translators: Visible only in the front end, this warning takes the place of a faulty block.
|
||||
__( '[block rendering halted]', 'kadence-blocks' ) :
|
||||
'';
|
||||
}
|
||||
self::$seen_refs[ $attributes['id'] ] = true;
|
||||
|
||||
|
||||
$header_attributes = $this->get_attributes_with_defaults_cpt( $attributes['id'], 'kadence_header', '_kad_header_' );
|
||||
$header_attributes = json_decode( json_encode( $header_attributes ), true );
|
||||
// Remove the advanced Header block so it doesn't try and re-render.
|
||||
$content = preg_replace( '/<!-- wp:kadence\/header {.*?} -->/', '', $header_block->post_content );
|
||||
$content = str_replace( '<!-- wp:kadence/header -->', '', $content );
|
||||
$content = str_replace( '<!-- wp:kadence/header -->', '', $content );
|
||||
$content = str_replace( '<!-- /wp:kadence/header -->', '', $content );
|
||||
|
||||
|
||||
// Handle embeds for header block.
|
||||
global $wp_embed;
|
||||
$content = $wp_embed->run_shortcode( $content );
|
||||
$content = $wp_embed->autoembed( $content );
|
||||
$content = do_blocks( $content );
|
||||
|
||||
unset( self::$seen_refs[ $attributes['id'] ] );
|
||||
|
||||
// Inherit values.
|
||||
// Just getting a css class for access to methods.
|
||||
$css = Kadence_Blocks_CSS::get_instance();
|
||||
$is_sticky = $css->get_inherited_value( $header_attributes['isSticky'], $header_attributes['isStickyTablet'], $header_attributes['isStickyMobile'], 'Desktop' );
|
||||
$is_sticky_tablet = $css->get_inherited_value( $header_attributes['isSticky'], $header_attributes['isStickyTablet'], $header_attributes['isStickyMobile'], 'Tablet' );
|
||||
$is_sticky_mobile = $css->get_inherited_value( $header_attributes['isSticky'], $header_attributes['isStickyTablet'], $header_attributes['isStickyMobile'], 'Mobile' );
|
||||
$is_transparent = $this->is_header_transparent( $header_attributes, $unique_id, 'desktop' );
|
||||
$is_transparent_tablet = $this->is_header_transparent( $header_attributes, $unique_id, 'tablet' );
|
||||
$is_transparent_mobile = $this->is_header_transparent( $header_attributes, $unique_id, 'mobile' );
|
||||
|
||||
$wrapper_classes = array( 'wp-block-kadence-header' . $unique_id );
|
||||
if ( $is_sticky ) {
|
||||
$wrapper_classes[] = 'header-desktop-sticky';
|
||||
}
|
||||
if ( $is_sticky_tablet ) {
|
||||
$wrapper_classes[] = 'header-tablet-sticky';
|
||||
}
|
||||
if ( $is_sticky_mobile ) {
|
||||
$wrapper_classes[] = 'header-mobile-sticky';
|
||||
}
|
||||
if ( $is_transparent ) {
|
||||
$wrapper_classes[] = 'header-desktop-transparent';
|
||||
}
|
||||
if ( $is_transparent_tablet ) {
|
||||
$wrapper_classes[] = 'header-tablet-transparent';
|
||||
}
|
||||
if ( $is_transparent_mobile ) {
|
||||
$wrapper_classes[] = 'header-mobile-transparent';
|
||||
}
|
||||
if ( $header_attributes['className'] ) {
|
||||
$wrapper_classes[] = $header_attributes['className'];
|
||||
}
|
||||
$wrapper_args = array(
|
||||
'class' => implode( ' ', $wrapper_classes ),
|
||||
'role' => 'banner',
|
||||
);
|
||||
if ( $header_attributes['anchor'] ) {
|
||||
$wrapper_args['id'] = $header_attributes['anchor'];
|
||||
}
|
||||
if ( $header_attributes['autoTransparentSpacing'] ) {
|
||||
$wrapper_args['data-auto-transparent-spacing'] = $header_attributes['autoTransparentSpacing'];
|
||||
}
|
||||
if ( $is_transparent ) {
|
||||
$wrapper_args['data-transparent'] = $is_transparent;
|
||||
}
|
||||
if ( $is_transparent_tablet ) {
|
||||
$wrapper_args['data-transparent-tablet'] = $is_transparent_tablet;
|
||||
}
|
||||
if ( $is_transparent_mobile ) {
|
||||
$wrapper_args['data-transparent-mobile'] = $is_transparent_mobile;
|
||||
}
|
||||
if ( $header_attributes['shrinkMain'] ) {
|
||||
$wrapper_args['data-shrink-main'] = $header_attributes['shrinkMain'];
|
||||
}
|
||||
if ( $header_attributes['shrinkMainHeight'] ) {
|
||||
$wrapper_args['data-shrink-main-height'] = $header_attributes['shrinkMainHeight'];
|
||||
}
|
||||
if ( $header_attributes['shrinkMainHeightTablet'] ) {
|
||||
$wrapper_args['data-shrink-main-height-tablet'] = $header_attributes['shrinkMainHeightTablet'];
|
||||
}
|
||||
if ( $header_attributes['shrinkMainHeightMobile'] ) {
|
||||
$wrapper_args['data-shrink-main-height-mobile'] = $header_attributes['shrinkMainHeightMobile'];
|
||||
}
|
||||
if ( $header_attributes['revealScrollUp'] ) {
|
||||
$wrapper_args['data-reveal-scroll-up'] = $header_attributes['revealScrollUp'];
|
||||
}
|
||||
if ( $is_sticky ) {
|
||||
$wrapper_args['data-sticky'] = $is_sticky;
|
||||
$wrapper_args['data-sticky-section'] = $header_attributes['stickySection'] ?: '';
|
||||
}
|
||||
if ( $is_sticky_tablet ) {
|
||||
$wrapper_args['data-sticky-tablet'] = $is_sticky_tablet;
|
||||
$wrapper_args['data-sticky-section-tablet'] = $header_attributes['stickySectionTablet'] ?: '';
|
||||
}
|
||||
if ( $is_sticky_mobile ) {
|
||||
$wrapper_args['data-sticky-mobile'] = $is_sticky_mobile;
|
||||
$wrapper_args['data-sticky-section-mobile'] = $header_attributes['stickySectionMobile'] ?: '';
|
||||
}
|
||||
if ( $header_attributes['mobileBreakpoint'] && $header_attributes['mobileBreakpoint'] !== 0 ) {
|
||||
$wrapper_args['data-mobile-breakpoint'] = $header_attributes['mobileBreakpoint'];
|
||||
}
|
||||
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
|
||||
$allowed_tags = [ 'header', 'div'];
|
||||
$header_tag = $this->get_html_tag( $header_attributes, 'headerTag', 'header', $allowed_tags);
|
||||
|
||||
return sprintf(
|
||||
'<%1$s %2$s>%3$s</%1$s>',
|
||||
$header_tag,
|
||||
$wrapper_attributes,
|
||||
$content
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-header-block.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
wp_localize_script(
|
||||
'kadence-blocks-' . $this->block_name,
|
||||
'kadenceHeaderConfig',
|
||||
array(
|
||||
'screenReader' => array(
|
||||
'expand' => __( 'Child menu', 'kadence-blocks' ),
|
||||
'expandOf' => __( 'Child menu of', 'kadence-blocks' ),
|
||||
'collapse' => __( 'Child menu', 'kadence-blocks' ),
|
||||
'collapseOf' => __( 'Child menu of', 'kadence-blocks' ),
|
||||
),
|
||||
'breakPoints' => array(
|
||||
'desktop' => 1024,
|
||||
'tablet' => 768,
|
||||
),
|
||||
'scrollOffset' => apply_filters( 'kadence_scroll_to_id_additional_offset', 0 ),
|
||||
),
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Check if the header is transparent.
|
||||
*
|
||||
* @param array $header_attributes The block attributes.
|
||||
* @param string $size The size.
|
||||
* @return bool
|
||||
*/
|
||||
private function is_header_transparent( $header_attributes, $unique_id = 'id', $size = 'desktop' ) {
|
||||
if ( ! empty( $this->responsive_transparent_settings[ $unique_id ] ) && isset( $this->responsive_transparent_settings[ $unique_id ][ strtolower( $size ) ] ) ) {
|
||||
return $this->responsive_transparent_settings[ $unique_id ][ strtolower( $size ) ];
|
||||
}
|
||||
$css = Kadence_Blocks_CSS::get_instance();
|
||||
$block_settings = [
|
||||
'desktop' => $css->get_inherited_value( $header_attributes['isTransparent'], $header_attributes['isTransparentTablet'], $header_attributes['isTransparentMobile'], 'Desktop' ),
|
||||
'tablet' => $css->get_inherited_value( $header_attributes['isTransparent'], $header_attributes['isTransparentTablet'], $header_attributes['isTransparentMobile'], 'Tablet' ),
|
||||
'mobile' => $css->get_inherited_value( $header_attributes['isTransparent'], $header_attributes['isTransparentTablet'], $header_attributes['isTransparentMobile'], 'Mobile' ),
|
||||
];
|
||||
|
||||
$transparent_postmeta_setting = $this->transparent_postmeta_setting( $header_attributes );
|
||||
if ( $transparent_postmeta_setting === 'enable' ) {
|
||||
$block_settings = [
|
||||
'desktop' => true,
|
||||
'tablet' => $block_settings['tablet'],
|
||||
'mobile' => $block_settings['mobile'],
|
||||
];
|
||||
} elseif ( $transparent_postmeta_setting === 'disable' || ! $this->transparent_allowed_on_post_type( $header_attributes ) ) {
|
||||
$block_settings = [
|
||||
'desktop' => false,
|
||||
'tablet' => false,
|
||||
'mobile' => false,
|
||||
];
|
||||
}
|
||||
|
||||
$this->responsive_transparent_settings = $block_settings;
|
||||
return $this->responsive_transparent_settings[ strtolower( $size ) ];
|
||||
}
|
||||
/**
|
||||
* Check if the transparent header is allowed on the current post type.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @param int $post_id The post ID.
|
||||
* @return string/null
|
||||
*/
|
||||
private function transparent_postmeta_setting( $attributes, $post_id = null ) {
|
||||
if ( class_exists( 'Kadence\Theme' ) && ! empty( $attributes['inheritPostTransparent'] ) && $post_id !== false ) {
|
||||
$post_id = $post_id ?? get_the_ID();
|
||||
$posttrans = get_post_meta( $post_id, '_kad_post_transparent', true );
|
||||
|
||||
return ( $posttrans === 'enable' || $posttrans === 'disable' ) ? $posttrans : null;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
/**
|
||||
* Check if the transparent header is allowed on the current post type.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @return bool
|
||||
*/
|
||||
private function transparent_allowed_on_post_type( $attributes ) {
|
||||
$transparent = 'enable';
|
||||
if ( empty( $attributes['disableTransparentOverrides'] ) || ! is_array( $attributes['disableTransparentOverrides'] ) ) {
|
||||
// return true if no post types are disabled.
|
||||
return true;
|
||||
}
|
||||
|
||||
$disabled_post_types = array_fill_keys( $attributes['disableTransparentOverrides'], true );
|
||||
|
||||
if ( is_singular() || is_front_page() ) {
|
||||
$post_type = is_front_page() ? 'page' : get_post_type();
|
||||
if ( !empty( $disabled_post_types[ $post_type ] ) ) {
|
||||
$transparent = 'disable';
|
||||
}
|
||||
} elseif( is_archive() || is_search() || is_home() || is_404() ) {
|
||||
if ( is_home() && ! is_front_page() ) {
|
||||
if ( get_query_var( 'tribe_events_front_page' ) ) {
|
||||
// $tribe_option_trans = \Kadence\kadence()->option('transparent_header_tribe_events_archive', true);
|
||||
// $transparent = $tribe_option_trans ? 'disable' : 'enable';
|
||||
$transparent = apply_filters('kadence_tribe_events_archive_transparent', 'enable');
|
||||
} else if( !empty( $attributes['inheritPostTransparent'] ) ) {
|
||||
$post_id = get_option('page_for_posts');
|
||||
$transparent_postmeta_setting = $this->transparent_postmeta_setting( $attributes, $post_id );
|
||||
if( $transparent_postmeta_setting === 'enable' || $transparent_postmeta_setting === 'disable' ) {
|
||||
$archivetrans = $transparent_postmeta_setting;
|
||||
}
|
||||
}
|
||||
} elseif (class_exists('woocommerce') && is_shop() && !is_search() && !empty( $attributes['inheritPostTransparent'] )) {
|
||||
$post_id = wc_get_page_id('shop');
|
||||
$transparent_postmeta_setting = $this->transparent_postmeta_setting( $attributes, $post_id );
|
||||
if( $transparent_postmeta_setting === 'enable' || $transparent_postmeta_setting === 'disable' ) {
|
||||
$archivetrans = $transparent_postmeta_setting;
|
||||
}
|
||||
} elseif (is_post_type_archive('tribe_events')) {
|
||||
// $tribe_option_trans = \Kadence\kadence()->option('transparent_header_tribe_events_archive', true);
|
||||
// $transparent = $tribe_option_trans ? 'disable' : 'enable';
|
||||
$transparent = apply_filters('kadence_tribe_events_archive_transparent', 'enable');
|
||||
} elseif (is_404()) {
|
||||
$transparent = 'disable';
|
||||
}
|
||||
|
||||
if (isset($archivetrans) && ( ( 'enable' === $archivetrans && class_exists( 'Kadence\Theme' ) )|| 'disable' === $archivetrans)) {
|
||||
$transparent = $archivetrans;
|
||||
} else {
|
||||
if ( !empty( $disabled_post_types['searchAndArchive'] ) ) {
|
||||
$transparent = 'disable';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keeping support of enable/disable strings for backwards compatability with the filters.
|
||||
return isset( $transparent ) && ( $transparent === true || $transparent === 'enable' );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Header_Block::get_instance();
|
||||
@@ -0,0 +1,101 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Icon Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Icon Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Icon_Block extends Kadence_Blocks_Abstract_Block {
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'icon';
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
/*
|
||||
* This if is needed for icons blocks that created before blocks 3.0 that
|
||||
* haven't been updated to use single-icon innerBlocks.
|
||||
*/
|
||||
if ( ! empty( $attributes['icons'] ) && is_array( $attributes['icons'] ) ) {
|
||||
foreach ( $attributes['icons'] as $icon_key => $icon_value ) {
|
||||
if ( is_array( $icon_value ) ) {
|
||||
$css->set_selector( '.kt-svg-icons' . $unique_id . ' .kt-svg-item-' . $icon_key . ' .kb-svg-icon-wrap' );
|
||||
$css->render_color_output( $icon_value, 'color', 'color' );
|
||||
$css->render_responsive_size( $icon_value, array(
|
||||
'size',
|
||||
'tabletSize',
|
||||
'mobileSize'
|
||||
), 'font-size' );
|
||||
if ( isset( $icon_value['style'] ) && 'stacked' === $icon_value['style'] ) {
|
||||
$css->render_color_output( $icon_value, 'background', 'background' );
|
||||
$css->render_color_output( $icon_value, 'border', 'border-color' );
|
||||
$css->render_range( $icon_value, 'borderWidth', 'border-width' );
|
||||
$css->render_range( $icon_value, 'borderRadius', 'border-radius' );
|
||||
$css->render_measure_output( $icon_value, 'padding', 'padding' );
|
||||
}
|
||||
$css->render_measure_output( $icon_value, 'margin', 'margin' );
|
||||
// Hover.
|
||||
$css->set_selector( '.kt-svg-icons' . $unique_id . ' .kt-svg-item-' . $icon_key . ':hover .kb-svg-icon-wrap' );
|
||||
$css->render_color_output( $icon_value, 'hColor', 'color' );
|
||||
$css->render_color_output( $icon_value, 'hBackground', 'background' );
|
||||
$css->render_color_output( $icon_value, 'hBorder', 'border-color' );
|
||||
}
|
||||
}
|
||||
}
|
||||
$css->set_selector( '.wp-block-kadence-icon.kt-svg-icons' . $unique_id );
|
||||
$align_args = array(
|
||||
'desktop_key' => 'textAlignment',
|
||||
'tablet_key' => 'tabletTextAlignment',
|
||||
'mobile_key' => 'mobileTextAlignment',
|
||||
);
|
||||
$css->render_flex_align( $attributes, 'textAlignment', $align_args );
|
||||
if( isset($attributes['wrapIcons'] ) && $attributes['wrapIcons'] ) {
|
||||
$css->add_property('flex-wrap', 'wrap');
|
||||
}
|
||||
$css->render_gap( $attributes );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Icon_Block::get_instance();
|
||||
@@ -0,0 +1,208 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Icon List Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Icon List Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Iconlist_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'iconlist';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
if ( isset( $attributes['listStyles'] ) && is_array( $attributes['listStyles'] ) && isset( $attributes['listStyles'][0] ) && is_array( $attributes['listStyles'][0] ) && isset( $attributes['listStyles'][0]['google'] ) && $attributes['listStyles'][0]['google'] && ( ! isset( $attributes['listStyles'][0]['loadGoogle'] ) || true === $attributes['listStyles'][0]['loadGoogle'] ) && isset( $attributes['listStyles'][0]['family'] ) ) {
|
||||
$list_font = $attributes['listStyles'][0];
|
||||
$font_variant = ( isset( $list_font['variant'] ) && ! empty( $list_font['variant'] ) ? $list_font['variant'] : null );
|
||||
$subset = ( isset( $list_font['subset'] ) && ! empty( $list_font['subset'] ) ? $list_font['subset'] : null );
|
||||
|
||||
$css->maybe_add_google_font( $list_font['family'], $font_variant, $subset );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['listMargin'] ) && is_array( $attributes['listMargin'] ) && isset( $attributes['listMargin'][0] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ':not(.this-stops-third-party-issues)' );
|
||||
$css->add_property( 'margin-top', '0px' );
|
||||
$css->add_property( 'margin-bottom', '0px' );
|
||||
} elseif ( ! isset( $attributes['listMargin'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ':not(.this-stops-third-party-issues)' );
|
||||
$css->add_property( 'margin-bottom', 'var(--global-kb-spacing-sm, 1.5rem)' );
|
||||
}
|
||||
|
||||
$column_gap_props = array(
|
||||
'columnGap' => array(
|
||||
0 => ! empty( $attributes['columnGap'] ) ? $attributes['columnGap'] : '',
|
||||
1 => ! empty( $attributes['tabletColumnGap'] ) ? $attributes['tabletColumnGap'] : '',
|
||||
2 => ! empty( $attributes['mobileColumnGap'] ) ? $attributes['mobileColumnGap'] : '',
|
||||
),
|
||||
);
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc)' );
|
||||
$css->render_measure_output( $attributes, 'listMargin', 'margin' );
|
||||
$css->render_measure_output( $attributes, 'listPadding', 'padding' );
|
||||
$css->render_responsive_range( $column_gap_props, 'columnGap', 'column-gap' );
|
||||
|
||||
$list_gap_props = array(
|
||||
'listGap' => array(
|
||||
0 => isset( $attributes['listGap'] ) ? $attributes['listGap'] : '5',
|
||||
1 => isset( $attributes['tabletListGap'] ) ? $attributes['tabletListGap'] : '',
|
||||
2 => isset( $attributes['mobileListGap'] ) ? $attributes['mobileListGap'] : '',
|
||||
)
|
||||
);
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list' );
|
||||
$css->render_responsive_range( $list_gap_props, 'listGap', 'grid-row-gap' );
|
||||
|
||||
if ( ! empty( $attributes['columns'] ) && abs( $attributes['columns'] ) > 1 ) {
|
||||
$css->set_media_state( 'desktopOnly' );
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ':not(.kt-svg-icon-list-columns-1) ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap:not(:last-child)' );
|
||||
$css->add_property( 'margin', '0px' );
|
||||
}
|
||||
if ( ( ! empty( $attributes['tabletColumns'] ) && abs( $attributes['tabletColumns'] ) > 1 ) || ( empty( $attributes['tabletColumns'] ) && ! empty( $attributes['columns'] ) && abs( $attributes['columns'] ) > 1 ) ) {
|
||||
$css->set_media_state( 'tabletOnly' );
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ':not(.kt-tablet-svg-icon-list-columns-1) ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap:not(:last-child)' );
|
||||
$css->add_property( 'margin', '0px' );
|
||||
}
|
||||
if ( ( ! empty( $attributes['mobileColumns'] ) && abs( $attributes['mobileColumns'] ) > 1 ) || ( empty( $attributes['mobileColumns'] ) && ! empty( $attributes['tabletColumns'] ) && abs( $attributes['tabletColumns'] ) > 1 ) || ( empty( $attributes['tabletColumns'] ) && empty( $attributes['mobileColumns'] ) && ! empty( $attributes['columns'] ) && abs( $attributes['columns'] ) > 1 ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ':not(.kt-mobile-svg-icon-list-columns-1) ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap:not(:last-child)' );
|
||||
$css->add_property( 'margin', '0px' );
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' .kb-svg-icon-wrap' );
|
||||
$css->render_responsive_range( $attributes, 'iconSize', 'font-size' );
|
||||
if ( ! empty( $attributes['color'] ) ) {
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['color'] ) );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['listLabelGap'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single' );
|
||||
|
||||
if ( is_rtl() ) {
|
||||
$css->add_property( 'margin-left', $attributes['listLabelGap'] . 'px' );
|
||||
} else {
|
||||
$css->add_property( 'margin-right', $attributes['listLabelGap'] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['listStyles'] ) && is_array( $attributes['listStyles'] ) && is_array( $attributes['listStyles'][0] ) ) {
|
||||
$list_styles = $attributes['listStyles'][0];
|
||||
$css->set_selector( '.kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap, .kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap a' );
|
||||
if ( isset( $list_styles['color'] ) && ! empty( $list_styles['color'] ) ) {
|
||||
$css->add_property( 'color', $css->sanitize_color( $list_styles['color'] ) );
|
||||
}
|
||||
$css->render_typography( $attributes, 'listStyles' );
|
||||
}
|
||||
|
||||
// Support SVG sizes for icon lists made pre-3.0 that have not been updated.
|
||||
if( ! empty( $attributes['items'] ) && is_array( $attributes['items'] ) ) {
|
||||
foreach ( $attributes['items'] as $level => $item ) {
|
||||
if ( isset( $item['size'] ) && is_numeric( $item['size'] ) ) {
|
||||
$css->set_selector( '.kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list .kt-svg-icon-list-level-' . $level . ' .kt-svg-icon-list-single svg' );
|
||||
$css->add_property( 'font-size', $item['size'] . 'px' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Stacked display style */
|
||||
if ( isset( $attributes['style'] ) && $attributes['style'] === 'stacked' ) {
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list .kt-svg-icon-list-single' );
|
||||
|
||||
if ( isset( $attributes['background'] ) ) {
|
||||
$css->add_property( 'background-color', $css->sanitize_color( $attributes['background'] ) );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['borderRadius'] ) ){
|
||||
$css->add_property( 'border-radius', $attributes['borderRadius'] . '%' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['border'] ) ) {
|
||||
$css->add_property( 'border-color', $css->sanitize_color( $attributes['border'] ) );
|
||||
}
|
||||
if( isset( $attributes['borderWidth'] ) ) {
|
||||
$css->add_property( 'border-width', $attributes['borderWidth'] . 'px' );
|
||||
} else {
|
||||
$css->add_property( 'border-width', '0px' );
|
||||
}
|
||||
$css->add_property( 'border-style', 'solid' );
|
||||
|
||||
if( isset( $attributes['padding'] ) ) {
|
||||
$css->add_property( 'padding', $attributes['padding'] . 'px' );
|
||||
}
|
||||
}
|
||||
|
||||
if( !empty( $attributes['linkUnderline']) && ( $attributes['linkUnderline'] === 'always' || $attributes['linkUnderline'] === 'none' ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' .wp-block-kadence-listitem a' );
|
||||
$css->add_property( 'text-decoration', $attributes['linkUnderline'] === 'always' ? 'underline' : 'none' );
|
||||
}
|
||||
if( !empty( $attributes['linkUnderline']) && $attributes['linkUnderline'] === 'hover' ) {
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' .wp-block-kadence-listitem a' );
|
||||
$css->add_property( 'text-decoration', 'none' );
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' .wp-block-kadence-listitem a:hover' );
|
||||
$css->add_property( 'text-decoration', 'underline' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['linkColor'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list .wp-block-kadence-listitem a' );
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['linkColor'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['linkHoverColor'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-iconlist.kt-svg-icon-list-items' . $unique_id . ' ul.kt-svg-icon-list .wp-block-kadence-listitem a:hover' );
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['linkHoverColor'] ) );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Iconlist_Block::get_instance();
|
||||
@@ -0,0 +1,190 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Identity Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Identity Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Identity_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'identity';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.¸
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kb-identity' . $unique_id );
|
||||
|
||||
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding' );
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin' );
|
||||
|
||||
$css->set_selector( '.kb-identity' . $unique_id .' a');
|
||||
$css->add_property('text-decoration', 'inherit');
|
||||
$css->add_property('color', 'inherit');
|
||||
|
||||
$css->set_selector( '.kb-identity' . $unique_id . ' .wp-block-site-title' );
|
||||
$css->render_typography( $attributes, 'titleTypography' );
|
||||
|
||||
$css->set_selector( '.kb-identity' . $unique_id . ' .wp-block-site-tagline' );
|
||||
$css->render_typography( $attributes, 'taglineTypography' );
|
||||
|
||||
$css->set_selector( '.kb-identity' . $unique_id . ' .kb-identity-layout-container' );
|
||||
if( $attributes['layout'] === 'logo-left' || $attributes['layout'] === 'logo-right' || $attributes['layout'] === 'logo-right-stacked' || $attributes['layout'] === 'logo-left-stacked' ) {
|
||||
$css->add_property( 'align-items', $attributes['textVerticalAlign'] );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @param string $unique_id The unique ID for the block.
|
||||
* @param string $content The block inner content.
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$layout = isset( $attributes['layout'] ) ? $attributes['layout'] : 'logo-title';
|
||||
$layout_class = 'kb-identity-layout-container kb-identity-layout-' . $layout;
|
||||
$content = $this->strip_anchor_tags( $content );
|
||||
|
||||
if (!empty($attributes['urlTransparent'])) {
|
||||
// Use regex to find the existing img tag
|
||||
$pattern = '/<img[^>]+>/i';
|
||||
if (preg_match($pattern, $content, $matches)) {
|
||||
$existing_img = $matches[0];
|
||||
|
||||
// Create the transparent image by cloning and modifying the existing img tag
|
||||
$transparent_img = $existing_img;
|
||||
$transparent_img = preg_replace('/\bsrc=["\'][^"\']+["\']/', 'src="' . esc_url($attributes['urlTransparent']) . '"', $transparent_img);
|
||||
$transparent_img = preg_replace('/\bclass=["\']([^"\']*)["\']/', 'class="kb-img kb-img-transparent"', $transparent_img);
|
||||
$transparent_img = preg_replace('/\bsrcset=["\'][^"\']+["\']/', '', $transparent_img);
|
||||
$transparent_img = preg_replace('/\bsizes=["\'][^"\']+["\']/', '', $transparent_img);
|
||||
|
||||
// Insert the transparent image after the existing image
|
||||
$content = preg_replace($pattern, '$0' . $transparent_img, $content, 1);
|
||||
}
|
||||
}
|
||||
|
||||
if (!empty($attributes['urlSticky'])) {
|
||||
$this->enqueue_script('kadence-blocks-header-sticky-image');
|
||||
|
||||
// Use regex to find the existing img tag
|
||||
$pattern = '/<img[^>]+>/i';
|
||||
if (preg_match($pattern, $content, $matches)) {
|
||||
$existing_img = $matches[0];
|
||||
|
||||
// Create the transparent image by cloning and modifying the existing img tag
|
||||
$sticky_img = $existing_img;
|
||||
$sticky_img = preg_replace('/\bsrc=["\'][^"\']+["\']/', 'src="' . esc_url($attributes['urlSticky']) . '"', $sticky_img);
|
||||
$sticky_img = preg_replace('/\bclass=["\']([^"\']*)["\']/', 'class="kb-img kb-img-sticky"', $sticky_img);
|
||||
$sticky_img = preg_replace('/\bsrcset=["\'][^"\']+["\']/', '', $sticky_img);
|
||||
$sticky_img = preg_replace('/\bsizes=["\'][^"\']+["\']/', '', $sticky_img);
|
||||
|
||||
// Insert the transparent image after the existing image
|
||||
$content = preg_replace($pattern, '$0' . $sticky_img, $content, 1);
|
||||
}
|
||||
}
|
||||
|
||||
$outer_classes = array( 'kb-identity', 'kb-identity' . $unique_id );
|
||||
$outer_classes[] = ! empty( $attributes['align'] ) ? 'align' . $attributes['align'] : 'alignnone';
|
||||
|
||||
if (!empty($attributes['urlTransparent'])) {
|
||||
$outer_classes[] = 'has-transparent-img';
|
||||
}
|
||||
|
||||
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $outer_classes ) ) );
|
||||
|
||||
if( !empty( $attributes['linkToHomepage']) || !empty( $attributes['link']) ) {
|
||||
$url = !empty( $attributes['link']) ? esc_url( $attributes['link'] ) : esc_url( home_url( '/' ) );
|
||||
$content = sprintf( '<a href="%1$s" class="%2$s">%3$s</a>', $url, $layout_class, $content );
|
||||
} else {
|
||||
$content = sprintf( '<div class="%1$s">%2$s</div>', $layout_class, $content );
|
||||
}
|
||||
|
||||
return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $content );
|
||||
}
|
||||
|
||||
public function strip_anchor_tags($html) {
|
||||
$pattern = '/<a\s[^>]*href=[\'"](.+?)[\'"][^>]*>(.+?)<\/a>/i';
|
||||
$replacement = '$2';
|
||||
$stripped_html = preg_replace($pattern, $replacement, $html);
|
||||
|
||||
return preg_replace('/<\/?a[^>]*>/i', '', $stripped_html);
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-header-sticky-image', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-header-sticky-image.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Identity_Block::get_instance();
|
||||
@@ -0,0 +1,387 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Image Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Image Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Image_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'image';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$key_positions = [ 'top', 'right', 'bottom', 'left' ];
|
||||
$css->set_selector( '.wp-block-kadence-image.kb-image' . $unique_id . ':not(.kb-specificity-added):not(.kb-extra-specificity-added)' );
|
||||
if ( ! empty( $attributes['align'] ) && ( 'left' === $attributes['align'] || 'right' === $attributes['align'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-image.kb-image' . $unique_id . ':not(.kb-specificity-added):not(.kb-extra-specificity-added) > figure' );
|
||||
}
|
||||
|
||||
// Margins
|
||||
$css->render_measure_output( $attributes, 'marginDesktop', 'margin', array(
|
||||
'tablet_key' => 'marginTablet',
|
||||
'mobile_key' => 'marginMobile',
|
||||
'unit_key' => 'marginUnit'
|
||||
) );
|
||||
$css->set_selector( '.wp-block-kadence-image.kb-image' . $unique_id );
|
||||
if ( ! empty( $attributes['zIndex'] ) ) {
|
||||
$css->add_property( 'position', 'relative' );
|
||||
$css->add_property( 'z-index', $attributes['zIndex'] );
|
||||
}
|
||||
$align = ( ! empty( $attributes['align'] ) ? $attributes['align'] : '' );
|
||||
if ( $align !== 'wide' && $align !== 'full' ) {
|
||||
if ( isset( $attributes['imgMaxWidth'] ) && is_numeric( $attributes['imgMaxWidth'] ) ) {
|
||||
$css->set_selector( '.kb-image' . $unique_id . '.kb-image-is-ratio-size, .kb-image' . $unique_id . ' .kb-image-is-ratio-size' );
|
||||
$css->add_property( 'max-width', $attributes['imgMaxWidth'] . 'px' );
|
||||
$css->add_property( 'width', '100%' );
|
||||
$css->set_selector( '.wp-block-kadence-column > .kt-inside-inner-col > .kb-image' . $unique_id . '.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image' . $unique_id . ' .kb-image-is-ratio-size' );
|
||||
$css->add_property( 'align-self', 'unset' );
|
||||
}
|
||||
}
|
||||
if ( $align === 'center' || $align === 'right' || $align === 'left' ) {
|
||||
$css->set_selector( '.kb-image' . $unique_id . ' figure' );
|
||||
if ( isset( $attributes['imgMaxWidth'] ) && is_numeric( $attributes['imgMaxWidth'] ) ) {
|
||||
$css->add_property( 'max-width', $attributes['imgMaxWidth'] . 'px' );
|
||||
$css->set_selector( '.kb-image' . $unique_id . ' .image-is-svg, .kb-image' . $unique_id . ' .image-is-svg img' );
|
||||
$css->add_property( 'width', '100%' );
|
||||
}
|
||||
} else if ( $align !== 'wide' && $align !== 'full' ) {
|
||||
$css->set_selector( '.kb-image' . $unique_id );
|
||||
if ( isset( $attributes['imgMaxWidth'] ) && is_numeric( $attributes['imgMaxWidth'] ) ) {
|
||||
$css->add_property( 'max-width', $attributes['imgMaxWidth'] . 'px' );
|
||||
$css->set_selector( '.image-is-svg.kb-image' . $unique_id );
|
||||
$css->add_property( 'flex', '0 1 100%' );
|
||||
$css->set_selector( '.image-is-svg.kb-image' . $unique_id . ' img' );
|
||||
$css->add_property( 'width', '100%' );
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet and Mobile Max Width.
|
||||
foreach ( [ 'Tablet', 'Mobile' ] as $breakpoint ) {
|
||||
$css->set_media_state( strtolower( $breakpoint ) );
|
||||
if ( isset( $attributes[ 'imgMaxWidth' . $breakpoint ] ) && is_numeric( $attributes[ 'imgMaxWidth' . $breakpoint ] ) ) {
|
||||
if ( $align !== 'wide' && $align !== 'full' ) {
|
||||
$css->set_selector( '.kb-image' . $unique_id . '.kb-image-is-ratio-size, .kb-image' . $unique_id . ' .kb-image-is-ratio-size' );
|
||||
$css->add_property( 'max-width', $attributes[ 'imgMaxWidth' . $breakpoint ] . 'px' );
|
||||
$css->add_property( 'width', '100%' );
|
||||
}
|
||||
if ( $align === 'center' || $align === 'right' || $align === 'left' ) {
|
||||
$css->set_selector( '.kb-image' . $unique_id . ' figure' );
|
||||
$css->add_property( 'max-width', $attributes[ 'imgMaxWidth' . $breakpoint ] . 'px' );
|
||||
} else if ( $align !== 'wide' && $align !== 'full' ) {
|
||||
$css->set_selector( '.kb-image' . $unique_id );
|
||||
$css->add_property( 'max-width', $attributes[ 'imgMaxWidth' . $breakpoint ] . 'px' );
|
||||
}
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$css->set_selector( '.kb-image' . $unique_id . ':not(.kb-image-is-ratio-size) .kb-img, .kb-image' . $unique_id . '.kb-image-is-ratio-size' );
|
||||
|
||||
// Padding
|
||||
$css->render_measure_output( $attributes, 'paddingDesktop', 'padding', array(
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
'unit_key' => 'paddingUnit'
|
||||
) );
|
||||
|
||||
// Overlay.
|
||||
$overlay_type = ! empty( $attributes['overlayType'] ) ? $attributes['overlayType'] : 'normal';
|
||||
$css->set_selector( '.kb-image' . $unique_id . ' .kb-image-has-overlay:after' );
|
||||
$opacity = isset( $attributes['overlayOpacity'] ) ? $attributes['overlayOpacity'] : 0.3;
|
||||
|
||||
if ( $css->is_number( $opacity ) ) {
|
||||
$css->add_property( 'opacity', $opacity );
|
||||
}
|
||||
if ( ! empty( $attributes['overlayBlendMode'] ) ) {
|
||||
$css->add_property( 'mix-blend-mode', $attributes['overlayBlendMode'] );
|
||||
}
|
||||
switch ( $overlay_type ) {
|
||||
case 'normal':
|
||||
if ( ! empty( $attributes['overlay'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['overlay'] ) );
|
||||
}
|
||||
break;
|
||||
case 'gradient':
|
||||
if ( ! empty( $attributes['overlayGradient'] ) ) {
|
||||
$css->add_property( 'background-image', $attributes['overlayGradient'] );
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Border Radius.
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) );
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
$css->set_selector( '.kb-image' . $unique_id . ' img.kb-img, .kb-image' . $unique_id . ' .kb-img img' );
|
||||
// Support borders saved pre 3.0
|
||||
if ( !empty( $attributes['borderColor'] ) ) {
|
||||
$css->add_property( 'border-style', 'solid' );
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['borderColor'] ) );
|
||||
|
||||
// Border widths
|
||||
foreach ( [ 'Desktop', 'Tablet', 'Mobile' ] as $breakpoint ) {
|
||||
$css->set_media_state( strtolower( $breakpoint ) );
|
||||
|
||||
if ( isset( $attributes[ 'borderWidth' . $breakpoint ] ) && is_array( $attributes[ 'borderWidth' . $breakpoint ] ) ) {
|
||||
|
||||
foreach ( $attributes[ 'borderWidth' . $breakpoint ] as $key => $bDesktop ) {
|
||||
if ( is_numeric( $bDesktop ) ) {
|
||||
$css->add_property( 'border-' . $key_positions[ $key ] . '-width', $bDesktop . ( ! isset( $attributes['borderWidthUnit'] ) ? 'px' : $attributes['borderWidthUnit'] ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'borderStyle', true );
|
||||
}
|
||||
|
||||
|
||||
// Background Color.
|
||||
if ( ! empty( $attributes['backgroundColor'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundColor'] ) );
|
||||
}
|
||||
// Border Radius.
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) );
|
||||
|
||||
if ( ! empty( $attributes['maskSvg'] ) && 'none' !== $attributes['maskSvg'] ) {
|
||||
if ( 'custom' === $attributes['maskSvg'] ) {
|
||||
if ( ! empty( $attributes['maskUrl'] ) ) {
|
||||
$mask_size = ( ! empty( $attributes['maskSize'] ) ? $attributes['maskSize'] : 'auto' );
|
||||
$mask_position = ( ! empty( $attributes['maskPosition'] ) ? $attributes['maskPosition'] : 'center center' );
|
||||
$mask_repeat = ( ! empty( $attributes['maskRepeat'] ) ? $attributes['maskRepeat'] : 'no-repeat' );
|
||||
$css->add_property( '-webkit-mask-image', 'url(' . $attributes['maskUrl'] . ')' );
|
||||
$css->add_property( 'mask-image', 'url(' . $attributes['maskUrl'] . ')' );
|
||||
|
||||
$css->add_property( '-webkit-mask-size', $mask_size );
|
||||
$css->add_property( 'mask-size', $mask_size );
|
||||
|
||||
$css->add_property( '-webkit-mask-repeat', $mask_repeat );
|
||||
$css->add_property( 'mask-repeat', $mask_repeat );
|
||||
|
||||
$css->add_property( '-webkit-mask-position', $mask_position );
|
||||
$css->add_property( 'mask-position', $mask_position );
|
||||
}
|
||||
} else {
|
||||
$mask_base_url = KADENCE_BLOCKS_URL . 'includes/assets/images/masks/';
|
||||
$css->add_property( '-webkit-mask-image', 'url(' . $mask_base_url . $attributes['maskSvg'] . '.svg)' );
|
||||
$css->add_property( 'mask-image', 'url(' . $mask_base_url . $attributes['maskSvg'] . '.svg)' );
|
||||
|
||||
$css->add_property( '-webkit-mask-size', 'auto' );
|
||||
$css->add_property( 'mask-size', 'auto' );
|
||||
|
||||
$css->add_property( '-webkit-mask-repeat', 'no-repeat' );
|
||||
$css->add_property( 'mask-repeat', 'no-repeat' );
|
||||
|
||||
$css->add_property( '-webkit-mask-position', 'center' );
|
||||
$css->add_property( 'mask-position', 'center' );
|
||||
}
|
||||
}
|
||||
|
||||
// Box shadow
|
||||
if ( isset( $attributes['displayBoxShadow'] ) && true == $attributes['displayBoxShadow'] ) {
|
||||
if ( isset( $attributes['boxShadow'] ) && is_array( $attributes['boxShadow'] ) && isset( $attributes['boxShadow'][0] ) && is_array( $attributes['boxShadow'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['boxShadow'][0]['inset'] ) && true === $attributes['boxShadow'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['boxShadow'][0]['hOffset'] ) && is_numeric( $attributes['boxShadow'][0]['hOffset'] ) ? $attributes['boxShadow'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['vOffset'] ) && is_numeric( $attributes['boxShadow'][0]['vOffset'] ) ? $attributes['boxShadow'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['blur'] ) && is_numeric( $attributes['boxShadow'][0]['blur'] ) ? $attributes['boxShadow'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['spread'] ) && is_numeric( $attributes['boxShadow'][0]['spread'] ) ? $attributes['boxShadow'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['boxShadow'][0]['color'] ) && ! empty( $attributes['boxShadow'][0]['color'] ) ? $attributes['boxShadow'][0]['color'] : '#000000' ), ( isset( $attributes['boxShadow'][0]['opacity'] ) && is_numeric( $attributes['boxShadow'][0]['opacity'] ) ? $attributes['boxShadow'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', 'rgba(0, 0, 0, 0.2) 0px 0px 14px 0px' );
|
||||
}
|
||||
}
|
||||
|
||||
// Drop Shadow
|
||||
if ( isset( $attributes['displayDropShadow'] ) && true == $attributes['displayDropShadow'] ) {
|
||||
if ( isset( $attributes['dropShadow'] ) && is_array( $attributes['dropShadow'] ) && isset( $attributes['dropShadow'][0] ) && is_array( $attributes['dropShadow'][0] ) ) {
|
||||
$css->add_property( 'filter', 'drop-shadow(' . ( isset( $attributes['dropShadow'][0]['hOffset'] ) && is_numeric( $attributes['dropShadow'][0]['hOffset'] ) ? $attributes['dropShadow'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['dropShadow'][0]['vOffset'] ) && is_numeric( $attributes['dropShadow'][0]['vOffset'] ) ? $attributes['dropShadow'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['dropShadow'][0]['blur'] ) && is_numeric( $attributes['dropShadow'][0]['blur'] ) ? $attributes['dropShadow'][0]['blur'] : '14' ) . 'px ' . $css->render_color( ( isset( $attributes['dropShadow'][0]['color'] ) && ! empty( $attributes['dropShadow'][0]['color'] ) ? $attributes['dropShadow'][0]['color'] : '#000000' ), ( isset( $attributes['dropShadow'][0]['opacity'] ) && is_numeric( $attributes['dropShadow'][0]['opacity'] ) ? $attributes['dropShadow'][0]['opacity'] : 0.2 ) ) . ')' );
|
||||
} else {
|
||||
$css->add_property( 'filter', 'drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.2) )' );
|
||||
}
|
||||
}
|
||||
|
||||
// Object position
|
||||
if ( isset( $attributes['imagePosition'] ) && $attributes['imagePosition'] ) {
|
||||
$css->add_property( 'object-position', $attributes['imagePosition'] );
|
||||
}
|
||||
|
||||
// Caption Font
|
||||
if ( ! isset( $attributes['showCaption'] ) && isset( $attributes['captionStyles'] ) && is_array( $attributes['captionStyles'] ) && is_array( $attributes['captionStyles'][0] ) ) {
|
||||
$caption_font = $attributes['captionStyles'][0];
|
||||
|
||||
$css->set_selector( '.kb-image' . $unique_id . ' figcaption' );
|
||||
if ( isset( $caption_font['color'] ) && ! empty( $caption_font['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $caption_font['color'] ) );
|
||||
}
|
||||
if ( isset( $caption_font['background'] ) && ! empty( $caption_font['background'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $caption_font['background'] ) );
|
||||
}
|
||||
if ( isset( $caption_font['size'] ) && is_array( $caption_font['size'] ) ) {
|
||||
$caption_font_unit = !empty( $caption_font['sizeType'] ) ? $caption_font['sizeType'] : 'px';
|
||||
if ( ! empty( $caption_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $caption_font['size'][0], $caption_font_unit ) );
|
||||
}
|
||||
|
||||
if ( ! empty( $caption_font['size'][1] ) ) {
|
||||
$css->set_media_state('tablet');
|
||||
$css->add_property( 'font-size', $css->get_font_size( $caption_font['size'][1], $caption_font_unit ) );
|
||||
$css->set_media_state('desktop');
|
||||
}
|
||||
|
||||
if ( ! empty( $caption_font['size'][2] ) ) {
|
||||
$css->set_media_state('mobile');
|
||||
$css->add_property( 'font-size', $css->get_font_size( $caption_font['size'][2], $caption_font_unit ) );
|
||||
$css->set_media_state('desktop');
|
||||
}
|
||||
}
|
||||
if ( isset( $caption_font['lineHeight'] ) && is_array( $caption_font['lineHeight'] ) && ! empty( $caption_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $caption_font['lineHeight'][0] . ( ! isset( $caption_font['lineType'] ) ? 'px' : $caption_font['lineType'] ) );
|
||||
}
|
||||
if ( ! empty( $caption_font['letterSpacing'] ) ) {
|
||||
if ( !is_array($caption_font['letterSpacing']) ) {
|
||||
$css->add_property( 'letter-spacing', $caption_font['letterSpacing'] . 'px' );
|
||||
} else {
|
||||
$css->render_responsive_range($caption_font, 'letterSpacing', 'letter-spacing', 'px');
|
||||
}
|
||||
|
||||
}
|
||||
if ( isset( $caption_font['textTransform'] ) && ! empty( $caption_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $caption_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $caption_font['google']) && ! empty($caption_font['google'] ) ) {
|
||||
$google = $caption_font['google'] ? true : false;
|
||||
$google = $google && ( isset( $caption_font['loadGoogle'] ) && $caption_font['loadGoogle'] || ! isset( $caption_font['loadGoogle'] ) ) ? true : false;
|
||||
$variant = ! empty( $caption_font['variant'] ) ? $caption_font['variant'] : null;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $caption_font['family'], $google, $variant ) );
|
||||
} elseif ( isset( $caption_font['family'] ) && ! empty( $caption_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $caption_font['family'] );
|
||||
}
|
||||
if ( isset( $caption_font['style'] ) && ! empty( $caption_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $caption_font['style'] );
|
||||
}
|
||||
if ( isset( $caption_font['weight'] ) && ! empty( $caption_font['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $caption_font['weight'] );
|
||||
}
|
||||
}
|
||||
if ( ! isset( $attributes['showCaption'] ) && isset( $attributes['captionStyles'] ) && is_array( $attributes['captionStyles'] ) && isset( $attributes['captionStyles'][0] ) && is_array( $attributes['captionStyles'][0] ) && ( ( isset( $attributes['captionStyles'][0]['size'] ) && is_array( $attributes['captionStyles'][0]['size'] ) && isset( $attributes['captionStyles'][0]['size'][1] ) && ! empty( $attributes['captionStyles'][0]['size'][1] ) ) || ( isset( $attributes['captionStyles'][0]['lineHeight'] ) && is_array( $attributes['captionStyles'][0]['lineHeight'] ) && isset( $attributes['captionStyles'][0]['lineHeight'][1] ) && ! empty( $attributes['captionStyles'][0]['lineHeight'][1] ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-image' . $unique_id . ' figcaption' );
|
||||
if ( isset( $attributes['captionStyles'][0]['size'][1] ) && ! empty( $attributes['captionStyles'][0]['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['captionStyles'][0]['size'][1] . ( ! isset( $attributes['captionStyles'][0]['sizeType'] ) ? 'px' : $attributes['captionStyles'][0]['sizeType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['captionStyles'][0]['lineHeight'][1] ) && ! empty( $attributes['captionStyles'][0]['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['captionStyles'][0]['lineHeight'][1] . ( ! isset( $attributes['captionStyles'][0]['lineType'] ) ? 'px' : $attributes['captionStyles'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! isset( $attributes['showCaption'] ) && isset( $attributes['captionStyles'] ) && is_array( $attributes['captionStyles'] ) && isset( $attributes['captionStyles'][0] ) && is_array( $attributes['captionStyles'][0] ) && ( ( isset( $attributes['captionStyles'][0]['size'] ) && is_array( $attributes['captionStyles'][0]['size'] ) && isset( $attributes['captionStyles'][0]['size'][2] ) && ! empty( $attributes['captionStyles'][0]['size'][2] ) ) || ( isset( $attributes['captionStyles'][0]['lineHeight'] ) && is_array( $attributes['captionStyles'][0]['lineHeight'] ) && isset( $attributes['captionStyles'][0]['lineHeight'][2] ) && ! empty( $attributes['captionStyles'][0]['lineHeight'][2] ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-image' . $unique_id . ' figcaption' );
|
||||
if ( isset( $attributes['captionStyles'][0]['size'][2] ) && ! empty( $attributes['captionStyles'][0]['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['captionStyles'][0]['size'][2] . ( ! isset( $attributes['captionStyles'][0]['sizeType'] ) ? 'px' : $attributes['captionStyles'][0]['sizeType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['captionStyles'][0]['lineHeight'][2] ) && ! empty( $attributes['captionStyles'][0]['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['captionStyles'][0]['lineHeight'][2] . ( ! isset( $attributes['captionStyles'][0]['lineType'] ) ? 'px' : $attributes['captionStyles'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for dynamic blocks
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$update_alt_globally = isset( $attributes['globalAlt'] ) && true === $attributes['globalAlt'] ? true : false;
|
||||
if ( apply_filters( 'kadence_blocks_update_alt_text_globally', $update_alt_globally, $attributes ) && ! empty( $attributes['id'] ) ) {
|
||||
// Check if we can get the alt text.
|
||||
$alt = get_post_meta( $attributes['id'], '_wp_attachment_image_alt', true );
|
||||
if ( ! empty( $alt ) ) {
|
||||
$content = str_replace( 'alt=""', 'alt="' . esc_attr( $alt ) . '"', $content );
|
||||
}
|
||||
}
|
||||
if ( strpos( $content, 'kb-tooltip-hidden-content') !== false ) {
|
||||
$this->enqueue_script( 'kadence-blocks-tippy' );
|
||||
}
|
||||
|
||||
if( !empty( $attributes['urlSticky']) ) {
|
||||
$this->enqueue_script('kadence-blocks-header-sticky-image');
|
||||
}
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_script( 'kadence-blocks-header-sticky-image', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-header-sticky-image.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-popper', KADENCE_BLOCKS_URL . 'includes/assets/js/popper.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-tippy', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-tippy.min.js', array( 'kadence-blocks-popper' ), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Image_Block::get_instance();
|
||||
@@ -0,0 +1,917 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Info Box Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Info Box Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Infobox_Block extends Kadence_Blocks_Abstract_Block {
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'infobox';
|
||||
|
||||
/**
|
||||
* Allowed HTML tags for front end output
|
||||
*
|
||||
* @var string[]
|
||||
*/
|
||||
protected $allowed_html_tags = array( 'heading', 'p', 'span', 'div' );
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
if ( ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ) {
|
||||
$base_selector = '.kt-info-box' . $unique_id;
|
||||
} else {
|
||||
$base_selector = '#kt-info-box' . $unique_id;
|
||||
}
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
if ( isset( $attributes['fullHeight'] ) && $attributes['fullHeight'] ) {
|
||||
$css->set_selector( $base_selector );
|
||||
$css->add_property( 'height', '100%' );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > ' . $base_selector );
|
||||
$css->add_property( 'height', 'auto' );
|
||||
$css->add_property( 'align-self', 'stretch' );
|
||||
}
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap' );
|
||||
if ( isset( $attributes['fullHeight'] ) && $attributes['fullHeight'] ) {
|
||||
$css->add_property( 'height', '100%' );
|
||||
if ( isset( $attributes['displayLearnMore'] ) && $attributes['displayLearnMore'] && ( ! isset( $attributes['mediaAlign'] ) || ( isset( $attributes['mediaAlign'] ) && 'top' === $attributes['mediaAlign'] ) ) && ( ! isset( $attributes['alignLearnMore'] ) || ( isset( $attributes['alignLearnMore'] ) && $attributes['alignLearnMore'] ) ) ) {
|
||||
$flex_align = 'center';
|
||||
if ( ! empty( $attributes['hAlign'] ) && 'right' === $attributes['hAlign'] ) {
|
||||
$flex_align = 'flex-end';
|
||||
} else if ( ! empty( $attributes['hAlign'] ) && 'left' === $attributes['hAlign'] ) {
|
||||
$flex_align = 'flex-start';
|
||||
}
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->add_property( 'flex-direction', 'column' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-infobox-textcontent' );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->add_property( 'flex-direction', 'column' );
|
||||
$css->add_property( 'align-items', $flex_align );
|
||||
$css->add_property( 'flex-grow', '1' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-infobox-textcontent .kt-blocks-info-box-learnmore-wrap' );
|
||||
$css->add_property( 'margin-top', 'auto' );
|
||||
$flex_align_tablet = '';
|
||||
if ( ! empty( $attributes['hAlignTablet'] ) && 'right' === $attributes['hAlignTablet'] ) {
|
||||
$flex_align_tablet = 'flex-end';
|
||||
} else if ( ! empty( $attributes['hAlignTablet'] ) && 'left' === $attributes['hAlignTablet'] ) {
|
||||
$flex_align_tablet = 'flex-start';
|
||||
} else if ( ! empty( $attributes['hAlignTablet'] ) && 'center' === $attributes['hAlignTablet'] ) {
|
||||
$flex_align_tablet = 'center';
|
||||
}
|
||||
if ( ! empty( $flex_align_tablet ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-infobox-textcontent' );
|
||||
$css->add_property( 'align-items', $flex_align_tablet );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$flex_align_mobile = '';
|
||||
if ( ! empty( $attributes['hAlignMobile'] ) && 'right' === $attributes['hAlignMobile'] ) {
|
||||
$flex_align_mobile = 'flex-end';
|
||||
} else if ( ! empty( $attributes['hAlignMobile'] ) && 'left' === $attributes['hAlignMobile'] ) {
|
||||
$flex_align_mobile = 'flex-start';
|
||||
} else if ( ! empty( $attributes['hAlignMobile'] ) && 'center' === $attributes['hAlignMobile'] ) {
|
||||
$flex_align_mobile = 'center';
|
||||
}
|
||||
if ( ! empty( $flex_align_mobile ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-infobox-textcontent' );
|
||||
$css->add_property( 'align-items', $flex_align_mobile );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
}
|
||||
// Max Width.
|
||||
$max_width_unit = ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px';
|
||||
$tablet_max_width_unit = ! empty( $attributes['maxWidthTabletUnit'] ) ? $attributes['maxWidthTabletUnit'] : $max_width_unit;
|
||||
$mobile_max_width_unit = ! empty( $attributes['maxWidthMobileUnit'] ) ? $attributes['maxWidthMobileUnit'] : $tablet_max_width_unit;
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > ' . $base_selector );
|
||||
if ( ! empty( $attributes['maxWidth'] ) ) {
|
||||
$css->add_property( 'max-width', $attributes['maxWidth'] . $max_width_unit );
|
||||
}
|
||||
if ( ! empty( $attributes['tabletMaxWidth'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'max-width', $attributes['tabletMaxWidth'] . $tablet_max_width_unit );
|
||||
}
|
||||
if ( ! empty( $attributes['mobileMaxWidth'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'max-width', $attributes['mobileMaxWidth'] . $mobile_max_width_unit );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
$css->set_selector( '.wp-block-kadence-column.kb-section-dir-horizontal > .kt-inside-inner-col > ' . $base_selector . ' .kt-blocks-info-box-link-wrap' );
|
||||
$css->add_property( 'max-width', 'unset' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap' );
|
||||
// Container Border, check old first.
|
||||
if ( ! empty( $attributes['containerBorder'] ) || $css->is_number( $attributes['containerBorderWidth'][0] ) || $css->is_number( $attributes['containerBorderWidth'][1] ) || $css->is_number( $attributes['containerBorderWidth'][2] ) || $css->is_number( $attributes['containerBorderWidth'][3] ) || $css->is_number( $attributes['containerBorderRadius'] ) ) {
|
||||
if ( ! empty( $attributes['containerBorder'] ) ) {
|
||||
$alpha = ( isset( $attributes['containerBorderOpacity'] ) && is_numeric( $attributes['containerBorderOpacity'] ) ? $attributes['containerBorderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['containerBorder'], $alpha ) );
|
||||
}
|
||||
if ( isset( $attributes['containerBorderRadius'] ) && ! empty( $attributes['containerBorderRadius'] ) ) {
|
||||
$css->add_property( 'border-radius', $attributes['containerBorderRadius'] . 'px' );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'containerBorderWidth', 'border-width' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'borderStyle' );
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) );
|
||||
}
|
||||
// Alignment.
|
||||
if ( ! empty( $attributes['hAlignTablet'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'text-align', $attributes['hAlignTablet'] );
|
||||
}
|
||||
if ( ! empty( $attributes['hAlignMobile'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'text-align', $attributes['hAlignMobile'] );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
// Style.
|
||||
if ( ! empty( $attributes['containerBackground'] ) || $css->is_number( $attributes['containerBackgroundOpacity'] ) || ! empty( $attributes['maxWidth'] ) || ! empty( $attributes['tabletMaxWidth'] ) || ! empty( $attributes['mobileMaxWidth'] ) ) {
|
||||
if ( isset( $attributes['containerBackground'] ) && ! empty( $attributes['containerBackground'] ) ) {
|
||||
$alpha = ( isset( $attributes['containerBackgroundOpacity'] ) && is_numeric( $attributes['containerBackgroundOpacity'] ) ? $attributes['containerBackgroundOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $attributes['containerBackground'], $alpha ) );
|
||||
} elseif ( isset( $attributes['containerBackgroundOpacity'] ) && is_numeric( $attributes['containerBackgroundOpacity'] ) ) {
|
||||
$alpha = ( isset( $attributes['containerBackgroundOpacity'] ) && is_numeric( $attributes['containerBackgroundOpacity'] ) ? $attributes['containerBackgroundOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( '#f2f2f2', $alpha ) );
|
||||
}
|
||||
// Max Width.
|
||||
$max_width_unit = ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px';
|
||||
$tablet_max_width_unit = ! empty( $attributes['maxWidthTabletUnit'] ) ? $attributes['maxWidthTabletUnit'] : $max_width_unit;
|
||||
$mobile_max_width_unit = ! empty( $attributes['maxWidthMobileUnit'] ) ? $attributes['maxWidthMobileUnit'] : $tablet_max_width_unit;
|
||||
if ( ! empty( $attributes['maxWidth'] ) ) {
|
||||
$css->add_property( 'max-width', $attributes['maxWidth'] . $max_width_unit );
|
||||
}
|
||||
if ( ! empty( $attributes['tabletMaxWidth'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'max-width', $attributes['tabletMaxWidth'] . $tablet_max_width_unit );
|
||||
}
|
||||
if ( ! empty( $attributes['mobileMaxWidth'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'max-width', $attributes['mobileMaxWidth'] . $mobile_max_width_unit );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'containerPadding', 'padding', array( 'tablet_key' => 'containerTabletPadding', 'mobile_key' => 'containerMobilePadding' ) );
|
||||
$css->render_measure_output( $attributes, 'containerMargin', 'margin', array( 'unit_key' => 'containerMarginUnit' ) );
|
||||
|
||||
$mw_is_percentage = ! empty( $attributes['maxWidthUnit'] ) && '%' === $attributes['maxWidthUnit'];
|
||||
if ( $mw_is_percentage ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-media-align-top .kt-blocks-info-box-media-container' );
|
||||
$css->add_property( 'max-width', '100%' );
|
||||
}
|
||||
|
||||
// Hover.
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover' );
|
||||
// Container Border, check old first.
|
||||
if ( ! empty( $attributes['containerHoverBorder'] ) ) {
|
||||
$border_hover = ( isset( $attributes['containerHoverBorder'] ) && ! empty( $attributes['containerHoverBorder'] ) ? $attributes['containerHoverBorder'] : '#eeeeee' );
|
||||
$alpha = ( isset( $attributes['containerHoverBorderOpacity'] ) && is_numeric( $attributes['containerHoverBorderOpacity'] ) ? $attributes['containerHoverBorderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $border_hover, $alpha ) );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'borderHoverStyle' );
|
||||
$css->render_measure_output( $attributes, 'borderHoverRadius', 'border-radius', array( 'unit_key' => 'borderHoverRadiusUnit' ) );
|
||||
}
|
||||
if ( ! empty( $attributes['containerHoverBackground'] ) ) {
|
||||
$bg_hover = ( isset( $attributes['containerHoverBackground'] ) && ! empty( $attributes['containerHoverBackground'] ) ? $attributes['containerHoverBackground'] : '' );
|
||||
$bg_alpha = ( isset( $attributes['containerHoverBackgroundOpacity'] ) && is_numeric( $attributes['containerHoverBackgroundOpacity'] ) ? $attributes['containerHoverBackgroundOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $bg_hover, $bg_alpha ) );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['mediaIcon'] ) && is_array( $attributes['mediaIcon'] ) && is_array( $attributes['mediaIcon'][0] ) ) {
|
||||
$media_icon = $attributes['mediaIcon'][0];
|
||||
} else {
|
||||
$media_icon = array();
|
||||
}
|
||||
if ( isset( $attributes['mediaStyle'] ) && is_array( $attributes['mediaStyle'] ) && is_array( $attributes['mediaStyle'][0] ) ) {
|
||||
$media_style = $attributes['mediaStyle'][0];
|
||||
} else {
|
||||
$media_style = array();
|
||||
}
|
||||
if ( isset( $attributes['mediaImage'] ) && is_array( $attributes['mediaImage'] ) && is_array( $attributes['mediaImage'][0] ) ) {
|
||||
$media_image = $attributes['mediaImage'][0];
|
||||
} else {
|
||||
$media_image = array();
|
||||
}
|
||||
if ( isset( $attributes['mediaNumber'] ) && is_array( $attributes['mediaNumber'] ) && is_array( $attributes['mediaNumber'][0] ) ) {
|
||||
$media_number = $attributes['mediaNumber'][0];
|
||||
} else {
|
||||
$media_number = array();
|
||||
}
|
||||
if ( isset( $attributes['mediaType'] ) && 'image' === $attributes['mediaType'] ) {
|
||||
$css->set_selector( $base_selector . '.wp-block-kadence-infobox' );
|
||||
$css->add_property( 'max-width', '100%' );
|
||||
if ( isset( $media_image['maxWidth'] ) && ! empty( $media_image['maxWidth'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kadence-info-box-image-inner-intrisic-container' );
|
||||
$css->add_property( 'max-width', $media_image['maxWidth'] . 'px' );
|
||||
}
|
||||
$css->set_selector( $base_selector . ' .kadence-info-box-image-inner-intrisic-container .kadence-info-box-image-intrisic' );
|
||||
if ( isset( $attributes['imageRatio'] ) && ! empty( $attributes['imageRatio'] ) && 'inherit' !== $attributes['imageRatio'] ) {
|
||||
switch ( $attributes['imageRatio'] ) {
|
||||
case 'land43':
|
||||
$image_ratio_padding = '75%';
|
||||
break;
|
||||
case 'land32':
|
||||
$image_ratio_padding = '66.67%';
|
||||
break;
|
||||
case 'land169':
|
||||
$image_ratio_padding = '56.25%';
|
||||
break;
|
||||
case 'land21':
|
||||
$image_ratio_padding = '50%';
|
||||
break;
|
||||
case 'land31':
|
||||
$image_ratio_padding = '33%';
|
||||
break;
|
||||
case 'land41':
|
||||
$image_ratio_padding = '25%';
|
||||
break;
|
||||
case 'port34':
|
||||
$image_ratio_padding = '133.33%';
|
||||
break;
|
||||
case 'port23':
|
||||
$image_ratio_padding = '150%';
|
||||
break;
|
||||
default:
|
||||
$image_ratio_padding = '100%';
|
||||
break;
|
||||
}
|
||||
$css->add_property( 'padding-bottom', $image_ratio_padding );
|
||||
} elseif ( isset( $media_image['height'] ) && is_numeric( $media_image['height'] ) && isset( $media_image['width'] ) && is_numeric( $media_image['width'] ) ) {
|
||||
$css->add_property( 'padding-bottom', round( ( absint( $media_image['height'] ) / absint( $media_image['width'] ) ) * 100, 4 ) . '%' );
|
||||
}
|
||||
if ( isset( $media_image['width'] ) && ! empty( $media_image['width'] ) ) {
|
||||
$css->add_property( 'width', $media_image['width'] . 'px' );
|
||||
}
|
||||
if ( isset( $media_image['height'] ) && ! empty( $media_image['height'] ) ) {
|
||||
$css->add_property( 'height', '0px' );
|
||||
}
|
||||
$css->add_property( 'max-width', '100%' );
|
||||
}
|
||||
if ( isset( $media_image['subtype'] ) && 'svg+xml' === $media_image['subtype'] ) {
|
||||
if ( isset( $media_image['maxWidth'] ) && ! empty( $media_image['maxWidth'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-media .kt-info-box-image' );
|
||||
$css->add_property( 'width', $media_image['maxWidth'] . 'px' );
|
||||
$css->add_property( 'height', 'auto' );
|
||||
}
|
||||
if ( isset( $media_icon['color'] ) && ! empty( $media_icon['color'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-media .kt-info-box-image, ' . $base_selector . ' .kt-blocks-info-box-media .kt-info-box-image path' );
|
||||
$css->add_property( 'fill', $media_icon['color'] );
|
||||
}
|
||||
if ( isset( $media_icon['hoverColor'] ) && ! empty( $media_icon['hoverColor'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media .kt-info-box-image, ' . $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media .kt-info-box-image path' );
|
||||
$css->add_property( 'fill', $media_icon['hoverColor'] );
|
||||
}
|
||||
}
|
||||
// Media icon unit
|
||||
$media_icon_unit = isset( $media_icon['unit'] ) ? $media_icon['unit'] : 'px' ;
|
||||
if ( ! empty( $media_icon['size'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
|
||||
$css->add_property( 'font-size', $media_icon['size'] . $media_icon_unit );
|
||||
}
|
||||
if ( isset( $media_icon['tabletSize'] ) && is_numeric( $media_icon['tabletSize'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
|
||||
$css->add_property( 'font-size', $media_icon['tabletSize'] . $media_icon_unit );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $media_icon['mobileSize'] ) && is_numeric( $media_icon['mobileSize'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( $base_selector . ' .kadence-info-box-icon-container .kt-info-svg-icon, ' . $base_selector . ' .kt-info-svg-icon-flip, ' . $base_selector . ' .kt-blocks-info-box-number' );
|
||||
$css->add_property( 'font-size', $media_icon['mobileSize'] . $media_icon_unit );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( isset( $media_number['family'] ) && ! empty( $media_number['family'] ) ) || ( isset( $media_number['style'] ) && ! empty( $media_number['style'] ) ) || ( isset( $media_number['weight'] ) && ! empty( $media_number['weight'] ) ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-number' );
|
||||
if ( ! empty( $media_number['family'] ) ) {
|
||||
$google = isset( $media_number['google'] ) && $media_number['google'] ? true : false;
|
||||
$google = $google && ( isset( $media_number['loadGoogle'] ) && $media_number['loadGoogle'] || ! isset( $media_number['loadGoogle'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $media_number['family'], $google, ( isset( $media_number['variant'] ) ? $media_number['variant'] : '' ), ( isset( $media_number['subset'] ) ? $media_number['subset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $media_number['style'] ) && ! empty( $media_number['style'] ) ) {
|
||||
$css->add_property( 'font-style', $media_number['style'] );
|
||||
}
|
||||
if ( isset( $media_number['weight'] ) && ! empty( $media_number['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $media_number['weight'] ) );
|
||||
}
|
||||
}
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-media' );
|
||||
if ( isset( $media_icon['color'] ) && ! empty( $media_icon['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $media_icon['color'] ) );
|
||||
}
|
||||
if ( isset( $media_style['background'] ) && ! empty( $media_style['background'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $media_style['background'] ) );
|
||||
}
|
||||
if ( isset( $media_style['border'] ) && ! empty( $media_style['border'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $media_style['border'] ) );
|
||||
}
|
||||
if ( isset( $media_style['borderRadius'] ) && ! empty( $media_style['borderRadius'] ) ) {
|
||||
$css->add_property( 'border-radius', $media_style['borderRadius'] . ( isset( $media_style['borderRadiusUnit'] ) ? $media_style['borderRadiusUnit'] : 'px' ) );
|
||||
$css->add_property( 'overflow', 'hidden' );
|
||||
}
|
||||
if ( isset( $media_style['borderWidth'] ) && is_array( $media_style['borderWidth'] ) ) {
|
||||
$border_width_unit = isset( $media_style['borderWidthUnit'] ) ? $media_style['borderWidthUnit'] : 'px';
|
||||
if ( isset( $media_style['borderWidth'][0] ) && is_numeric( $media_style['borderWidth'][0] ) ) {
|
||||
$css->add_property( 'border-top-width', $media_style['borderWidth'][0] . $border_width_unit );
|
||||
}
|
||||
if ( isset( $media_style['borderWidth'][1] ) && is_numeric( $media_style['borderWidth'][1] ) ) {
|
||||
$css->add_property( 'border-right-width', $media_style['borderWidth'][1] . $border_width_unit );
|
||||
}
|
||||
if ( isset( $media_style['borderWidth'][2] ) && is_numeric( $media_style['borderWidth'][2] ) ) {
|
||||
$css->add_property( 'border-bottom-width', $media_style['borderWidth'][2] . $border_width_unit );
|
||||
}
|
||||
if ( isset( $media_style['borderWidth'][3] ) && is_numeric( $media_style['borderWidth'][3] ) ) {
|
||||
$css->add_property( 'border-left-width', $media_style['borderWidth'][3] . $border_width_unit );
|
||||
}
|
||||
}
|
||||
$padding_unit = isset( $media_style['paddingUnit'] ) ? $media_style['paddingUnit'] : 'px';
|
||||
if ( isset( $media_style['padding'] ) && is_array( $media_style['padding'] ) ) {
|
||||
if ( isset( $media_style['padding'][0] ) && is_numeric( $media_style['padding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $media_style['padding'][0] . $padding_unit );
|
||||
}
|
||||
if ( isset( $media_style['padding'][1] ) && is_numeric( $media_style['padding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $media_style['padding'][1] . $padding_unit );
|
||||
}
|
||||
if ( isset( $media_style['padding'][2] ) && is_numeric( $media_style['padding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $media_style['padding'][2] . $padding_unit );
|
||||
}
|
||||
if ( isset( $media_style['padding'][3] ) && is_numeric( $media_style['padding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $media_style['padding'][3] . $padding_unit );
|
||||
}
|
||||
}
|
||||
$margin_unit = isset( $media_style['marginUnit'] ) ? $media_style['marginUnit'] : 'px';
|
||||
if ( isset( $media_style['margin'] ) && is_array( $media_style['margin'] ) && isset( $attributes['mediaAlign'] ) && 'top' !== $attributes['mediaAlign'] ) {
|
||||
if ( isset( $media_style['margin'][0] ) && is_numeric( $media_style['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $media_style['margin'][0] . $margin_unit );
|
||||
}
|
||||
if ( isset( $media_style['margin'][1] ) && is_numeric( $media_style['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $media_style['margin'][1] . $margin_unit );
|
||||
}
|
||||
if ( isset( $media_style['margin'][2] ) && is_numeric( $media_style['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $media_style['margin'][2] . $margin_unit );
|
||||
}
|
||||
if ( isset( $media_style['margin'][3] ) && is_numeric( $media_style['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $media_style['margin'][3] . $margin_unit );
|
||||
}
|
||||
}
|
||||
if ( isset( $media_style['margin'] ) && is_array( $media_style['margin'] ) && ( ! isset( $attributes['mediaAlign'] ) || 'top' === $attributes['mediaAlign'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-media-container' );
|
||||
if ( isset( $media_style['margin'][0] ) && is_numeric( $media_style['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $media_style['margin'][0] . $margin_unit );
|
||||
}
|
||||
if ( isset( $media_style['margin'][1] ) && is_numeric( $media_style['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $media_style['margin'][1] . $margin_unit );
|
||||
}
|
||||
if ( isset( $media_style['margin'][2] ) && is_numeric( $media_style['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $media_style['margin'][2] . $margin_unit );
|
||||
}
|
||||
if ( isset( $media_style['margin'][3] ) && is_numeric( $media_style['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $media_style['margin'][3] . $margin_unit );
|
||||
}
|
||||
}
|
||||
if ( isset( $media_style['borderRadius'] ) && ! empty( $media_style['borderRadius'] ) && isset( $media_style['padding'] ) && is_array( $media_style['padding'] ) && ! empty( array_filter( $media_style['padding'], fn($value) => $value > 0 ) ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-media .kadence-info-box-image-intrisic img' );
|
||||
$css->add_property( 'border-radius', $media_style['borderRadius'] . (isset( $media_style['borderRadiusUnit'] ) ? $media_style['borderRadiusUnit'] : 'px') );
|
||||
}
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media' );
|
||||
if ( isset( $media_icon['hoverColor'] ) && ! empty( $media_icon['hoverColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $media_icon['hoverColor'] ) );
|
||||
}
|
||||
if ( isset( $media_style['hoverBackground'] ) && ! empty( $media_style['hoverBackground'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $media_style['hoverBackground'] ) );
|
||||
}
|
||||
if ( isset( $media_style['hoverBorder'] ) && ! empty( $media_style['hoverBorder'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $media_style['hoverBorder'] ) );
|
||||
}
|
||||
if ( ( ( isset( $attributes['mediaType'] ) && 'icon' === $attributes['mediaType'] || ! isset( $attributes['mediaType'] ) ) && isset( $media_icon['hoverAnimation'] ) && 'drawborder' === $media_icon['hoverAnimation'] ) || ( isset( $attributes['mediaType'] ) && 'number' === $attributes['mediaType'] && isset( $media_number['hoverAnimation'] ) && 'drawborder' === $media_number['hoverAnimation'] ) || ( isset( $attributes['mediaType'] ) && 'image' === $attributes['mediaType'] && isset( $media_image['hoverAnimation'] ) && ( 'drawborder' === $media_image['hoverAnimation'] || 'grayscale-border-draw' === $media_image['hoverAnimation'] ) ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media' );
|
||||
$css->add_property( 'border-width', '0px' );
|
||||
if ( isset( $media_style['borderWidth'] ) && is_array( $media_style['borderWidth'] ) ) {
|
||||
$css->add_property( 'box-shadow', 'inset 0 0 0 ' . $media_style['borderWidth'][0] . 'px ' . ( isset( $media_style['border'] ) && ! empty( $media_style['border'] ) ? $media_style['border'] : '#444444' ) );
|
||||
}
|
||||
if ( isset( $media_style['borderRadius'] ) && ! empty( $media_style['borderRadius'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media:before, ' . $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media:after' );
|
||||
$css->add_property( 'border-radius', $media_style['borderRadius'] . 'px' );
|
||||
}
|
||||
if ( isset( $media_style['borderWidth'] ) && is_array( $media_style['borderWidth'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media:before' );
|
||||
$css->add_property( 'border-width', $media_style['borderWidth'][0] . 'px' );
|
||||
}
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media:after' );
|
||||
$css->set_selector( 'border-width', '0px' );
|
||||
if ( isset( $media_style['borderWidth'] ) && is_array( $media_style['borderWidth'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media:after' );
|
||||
$css->add_property( 'border-right-color', ( isset( $media_style['hoverBorder'] ) && ! empty( $media_style['hoverBorder'] ) ? $css->render_color( $media_style['hoverBorder'] ) : '#444444' ) );
|
||||
$css->add_property( 'border-right-width', $media_style['borderWidth'][0] . 'px' );
|
||||
$css->add_property( 'border-top-width', $media_style['borderWidth'][0] . 'px' );
|
||||
$css->add_property( 'border-bottom-width', $media_style['borderWidth'][0] . 'px' );
|
||||
}
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media:before' );
|
||||
$css->add_property( 'border-top-color', ( isset( $media_style['hoverBorder'] ) && ! empty( $media_style['hoverBorder'] ) ? $css->render_color( $media_style['hoverBorder'] ) : '#444444' ) );
|
||||
$css->add_property( 'border-right-color', ( isset( $media_style['hoverBorder'] ) && ! empty( $media_style['hoverBorder'] ) ? $css->render_color( $media_style['hoverBorder'] ) : '#444444' ) );
|
||||
$css->add_property( 'border-bottom-color', ( isset( $media_style['hoverBorder'] ) && ! empty( $media_style['hoverBorder'] ) ? $css->render_color( $media_style['hoverBorder'] ) : '#444444' ) );
|
||||
}
|
||||
|
||||
$attributes['titleTagLevel'] = !empty( $attributes['titleFont'][0]['level'] ) ? $attributes['titleFont'][0]['level'] : 2;
|
||||
$attributes['titleTagType'] = !empty( $attributes['titleTagType'] ) ? $attributes['titleTagType'] : 'heading';
|
||||
$titleTag = $this->get_html_tag( $attributes, 'titleTagType', 'h2', $this->allowed_html_tags, 'titleTagLevel' );
|
||||
|
||||
if ( isset( $attributes['titleColor'] ) || isset( $attributes['titleFont'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-infobox-textcontent ' . $titleTag . '.kt-blocks-info-box-title' );
|
||||
if ( isset( $attributes['titleColor'] ) && ! empty( $attributes['titleColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['titleColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleFont'] ) && is_array( $attributes['titleFont'] ) && is_array( $attributes['titleFont'][0] ) ) {
|
||||
$title_font = $attributes['titleFont'][0];
|
||||
if ( isset( $title_font['size'] ) && is_array( $title_font['size'] ) && ! empty( $title_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $title_font['size'][0], ( ! isset( $title_font['sizeType'] ) ? 'px' : $title_font['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $title_font['lineHeight'] ) && is_array( $title_font['lineHeight'] ) && ! empty( $title_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $title_font['lineHeight'][0] . ( ! isset( $title_font['lineType'] ) ? 'px' : $title_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $title_font['letterSpacing'] ) && ! empty( $title_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $title_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['textTransform'] ) && ! empty( $title_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $title_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $title_font['family'] ) && ! empty( $title_font['family'] ) ) {
|
||||
$google = isset( $title_font['google'] ) && $title_font['google'] ? true : false;
|
||||
$google = $google && ( isset( $title_font['loadGoogle'] ) && $title_font['loadGoogle'] || ! isset( $title_font['loadGoogle'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $title_font['family'], $google, ( isset( $title_font['variant'] ) ? $title_font['variant'] : '' ), ( isset( $title_font['subset'] ) ? $title_font['subset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $title_font['style'] ) && ! empty( $title_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $title_font['style'] );
|
||||
}
|
||||
if ( isset( $title_font['weight'] ) && ! empty( $title_font['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $title_font['weight'] ) );
|
||||
}
|
||||
if ( isset( $title_font['padding'] ) && is_array( $title_font['padding'] ) ) {
|
||||
if ( isset( $title_font['padding'][0] ) && is_numeric( $title_font['padding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $title_font['padding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['padding'][1] ) && is_numeric( $title_font['padding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $title_font['padding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['padding'][2] ) && is_numeric( $title_font['padding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $title_font['padding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['padding'][3] ) && is_numeric( $title_font['padding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $title_font['padding'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $title_font['margin'] ) && is_array( $title_font['margin'] ) ) {
|
||||
if ( isset( $title_font['margin'][0] ) && is_numeric( $title_font['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $title_font['margin'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['margin'][1] ) && is_numeric( $title_font['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $title_font['margin'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['margin'][2] ) && is_numeric( $title_font['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $title_font['margin'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['margin'][3] ) && is_numeric( $title_font['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $title_font['margin'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['titleHoverColor'] ) && ! empty( $attributes['titleHoverColor'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover ' . $titleTag . '.kt-blocks-info-box-title' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['titleHoverColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleFont'] ) && is_array( $attributes['titleFont'] ) && isset( $attributes['titleFont'][0] ) && is_array( $attributes['titleFont'][0] ) && ( ( isset( $attributes['titleFont'][0]['size'] ) && is_array( $attributes['titleFont'][0]['size'] ) && isset( $attributes['titleFont'][0]['size'][1] ) && ! empty( $attributes['titleFont'][0]['size'][1] ) ) || ( isset( $attributes['titleFont'][0]['lineHeight'] ) && is_array( $attributes['titleFont'][0]['lineHeight'] ) && isset( $attributes['titleFont'][0]['lineHeight'][1] ) && ! empty( $attributes['titleFont'][0]['lineHeight'][1] ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( $base_selector . ' .kt-infobox-textcontent ' . $titleTag . '.kt-blocks-info-box-title' );
|
||||
if ( isset( $attributes['titleFont'][0]['size'][1] ) && ! empty( $attributes['titleFont'][0]['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['titleFont'][0]['size'][1], ( ! isset( $attributes['titleFont'][0]['sizeType'] ) ? 'px' : $attributes['titleFont'][0]['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['titleFont'][0]['lineHeight'][1] ) && ! empty( $attributes['titleFont'][0]['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['titleFont'][0]['lineHeight'][1] . ( ! isset( $attributes['titleFont'][0]['lineType'] ) ? 'px' : $attributes['titleFont'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['titleFont'] ) && is_array( $attributes['titleFont'] ) && isset( $attributes['titleFont'][0] ) && is_array( $attributes['titleFont'][0] ) && ( ( isset( $attributes['titleFont'][0]['size'] ) && is_array( $attributes['titleFont'][0]['size'] ) && isset( $attributes['titleFont'][0]['size'][2] ) && ! empty( $attributes['titleFont'][0]['size'][2] ) ) || ( isset( $attributes['titleFont'][0]['lineHeight'] ) && is_array( $attributes['titleFont'][0]['lineHeight'] ) && isset( $attributes['titleFont'][0]['lineHeight'][2] ) && ! empty( $attributes['titleFont'][0]['lineHeight'][2] ) ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( $base_selector . ' .kt-infobox-textcontent ' . $titleTag . '.kt-blocks-info-box-title' );
|
||||
if ( isset( $attributes['titleFont'][0]['size'][2] ) && ! empty( $attributes['titleFont'][0]['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['titleFont'][0]['size'][2], ( ! isset( $attributes['titleFont'][0]['sizeType'] ) ? 'px' : $attributes['titleFont'][0]['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['titleFont'][0]['lineHeight'][2] ) && ! empty( $attributes['titleFont'][0]['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['titleFont'][0]['lineHeight'][2] . ( ! isset( $attributes['titleFont'][0]['lineType'] ) ? 'px' : $attributes['titleFont'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$title_min_height_unit = isset( $attributes['titleMinHeightUnit'] ) ? $attributes['titleMinHeightUnit'] : 'px';
|
||||
if ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][0] ) ) {
|
||||
if ( is_numeric( $attributes['titleMinHeight'][0] ) ) {
|
||||
$css->set_selector( $base_selector . ' ' . $titleTag . '.kt-blocks-info-box-title' );
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][0] . $title_min_height_unit );
|
||||
}
|
||||
if ( isset( $attributes['titleMinHeight'][1] ) && is_numeric( $attributes['titleMinHeight'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( $base_selector . ' ' . $titleTag . '.kt-blocks-info-box-title' );
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][1] . $title_min_height_unit );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['titleMinHeight'][2] ) && is_numeric( $attributes['titleMinHeight'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( $base_selector . ' ' . $titleTag . '.kt-blocks-info-box-title' );
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][2] . $title_min_height_unit );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['mediaAlignTablet'] ) && ! empty( $attributes['mediaAlignTablet'] ) ) {
|
||||
if ( 'top' === $attributes['mediaAlignTablet'] ) {
|
||||
$display = 'block';
|
||||
$align = '';
|
||||
$content = '';
|
||||
} elseif ( 'left' === $attributes['mediaAlignTablet'] ) {
|
||||
$display = 'flex';
|
||||
$align = 'center';
|
||||
$content = 'flex-start';
|
||||
} else {
|
||||
$display = 'flex';
|
||||
$align = 'center';
|
||||
$content = 'flex-end';
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap' );
|
||||
$css->add_property( 'display', $display );
|
||||
if ( ! empty( $align ) ) {
|
||||
$css->add_property( 'align-items', $align );
|
||||
}
|
||||
if ( ! empty( $content ) ) {
|
||||
$css->add_property( 'justify-content', $content );
|
||||
}
|
||||
if ( 'top' === $attributes['mediaAlignTablet'] ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media' );
|
||||
$css->add_property( 'display', 'inline-block' );
|
||||
$css->add_property( 'max-width', '100%' );
|
||||
} else {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media' );
|
||||
$css->add_property( 'display', 'block' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['mediaAlignMobile'] ) && ! empty( $attributes['mediaAlignMobile'] ) ) {
|
||||
if ( 'top' === $attributes['mediaAlignMobile'] ) {
|
||||
$display = 'block';
|
||||
$content = '';
|
||||
} elseif ( 'left' === $attributes['mediaAlignMobile'] ) {
|
||||
$display = 'flex';
|
||||
$content = 'flex-start';
|
||||
$direction = 'row';
|
||||
} else {
|
||||
$display = 'flex';
|
||||
$content = 'flex-end';
|
||||
$direction = 'row-reverse';
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap' );
|
||||
$css->add_property( 'display', $display );
|
||||
if ( ! empty( $content ) ) {
|
||||
$css->add_property( 'justify-content', $content );
|
||||
}
|
||||
if ( ! empty( $direction ) ) {
|
||||
$css->add_property( 'flex-direction', $direction );
|
||||
}
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media' );
|
||||
$css->add_property( 'display', 'inline-block' );
|
||||
$css->add_property( 'max-width', '100%' );
|
||||
// $css .= $base_selector . ' .kt-blocks-info-box-media-align-left.kt-blocks-info-box-link-wrap .kt-blocks-info-box-media {';
|
||||
// $css .= 'display: block;';
|
||||
// $css .= '}';
|
||||
// .kt-blocks-info-box-media-container {
|
||||
// width: 100%;
|
||||
// }
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['textColor'] ) || isset( $attributes['textFont'] ) || isset( $attributes['textSpacing'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-infobox-textcontent .kt-blocks-info-box-text' );
|
||||
if ( isset( $attributes['textColor'] ) && ! empty( $attributes['textColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['textColor'] ) );
|
||||
}
|
||||
$css->set_selector('.wp-block-kadence-infobox' . $base_selector . ' .kt-blocks-info-box-text' );
|
||||
if ( isset( $attributes['textFont'] ) && is_array( $attributes['textFont'] ) && is_array( $attributes['textFont'][0] ) ) {
|
||||
$text_font = $attributes['textFont'][0];
|
||||
if ( isset( $text_font['size'] ) && is_array( $text_font['size'] ) && ! empty( $text_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $text_font['size'][0], ( ! isset( $text_font['sizeType'] ) ? 'px' : $text_font['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $text_font['lineHeight'] ) && is_array( $text_font['lineHeight'] ) && ! empty( $text_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $text_font['lineHeight'][0] . ( ! isset( $text_font['lineType'] ) ? 'px' : $text_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $text_font['letterSpacing'] ) && ! empty( $text_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $text_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $text_font['textTransform'] ) && ! empty( $text_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $text_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $text_font['family'] ) && ! empty( $text_font['family'] ) ) {
|
||||
$google = isset( $text_font['google'] ) && $text_font['google'] ? true : false;
|
||||
$google = $google && ( isset( $text_font['loadGoogle'] ) && $text_font['loadGoogle'] || ! isset( $text_font['loadGoogle'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $text_font['family'], $google, ( isset( $text_font['variant'] ) ? $text_font['variant'] : '' ), ( isset( $text_font['subset'] ) ? $text_font['subset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $text_font['style'] ) && ! empty( $text_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $text_font['style'] );
|
||||
}
|
||||
if ( isset( $text_font['weight'] ) && ! empty( $text_font['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $text_font['weight'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['textSpacing'] ) && is_array( $attributes['textSpacing'] ) && is_array( $attributes['textSpacing'][0] ) ) {
|
||||
$text_spacing = $attributes['textSpacing'][0];
|
||||
if ( isset( $text_spacing['padding'] ) && is_array( $text_spacing['padding'] ) ) {
|
||||
if ( isset( $text_spacing['padding'][0] ) && is_numeric( $text_spacing['padding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $text_spacing['padding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $text_spacing['padding'][1] ) && is_numeric( $text_spacing['padding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $text_spacing['padding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $text_spacing['padding'][2] ) && is_numeric( $text_spacing['padding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $text_spacing['padding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $text_spacing['padding'][3] ) && is_numeric( $text_spacing['padding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $text_spacing['padding'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $text_spacing['margin'] ) && is_array( $text_spacing['margin'] ) ) {
|
||||
if ( isset( $text_spacing['margin'][0] ) && is_numeric( $text_spacing['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $text_spacing['margin'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $text_spacing['margin'][1] ) && is_numeric( $text_spacing['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $text_spacing['margin'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $text_spacing['margin'][2] ) && is_numeric( $text_spacing['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $text_spacing['margin'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $text_spacing['margin'][3] ) && is_numeric( $text_spacing['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $text_spacing['margin'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['textHoverColor'] ) && ! empty( $attributes['textHoverColor'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-text' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['textHoverColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['textFont'] ) && is_array( $attributes['textFont'] ) && isset( $attributes['textFont'][0] ) && is_array( $attributes['textFont'][0] ) && ( ( isset( $attributes['textFont'][0]['size'] ) && is_array( $attributes['textFont'][0]['size'] ) && isset( $attributes['textFont'][0]['size'][1] ) && ! empty( $attributes['textFont'][0]['size'][1] ) ) || ( isset( $attributes['textFont'][0]['lineHeight'] ) && is_array( $attributes['textFont'][0]['lineHeight'] ) && isset( $attributes['textFont'][0]['lineHeight'][1] ) && ! empty( $attributes['textFont'][0]['lineHeight'][1] ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-infobox' . $base_selector . ' .kt-blocks-info-box-text' );
|
||||
if ( isset( $attributes['textFont'][0]['size'][1] ) && ! empty( $attributes['textFont'][0]['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['textFont'][0]['size'][1], ( ! isset( $attributes['textFont'][0]['sizeType'] ) ? 'px' : $attributes['textFont'][0]['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['textFont'][0]['lineHeight'][1] ) && ! empty( $attributes['textFont'][0]['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['textFont'][0]['lineHeight'][1] . ( ! isset( $attributes['textFont'][0]['lineType'] ) ? 'px' : $attributes['textFont'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['textFont'] ) && is_array( $attributes['textFont'] ) && isset( $attributes['textFont'][0] ) && is_array( $attributes['textFont'][0] ) && ( ( isset( $attributes['textFont'][0]['size'] ) && is_array( $attributes['textFont'][0]['size'] ) && isset( $attributes['textFont'][0]['size'][2] ) && ! empty( $attributes['textFont'][0]['size'][2] ) ) || ( isset( $attributes['textFont'][0]['lineHeight'] ) && is_array( $attributes['textFont'][0]['lineHeight'] ) && isset( $attributes['textFont'][0]['lineHeight'][2] ) && ! empty( $attributes['textFont'][0]['lineHeight'][2] ) ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-infobox' . $base_selector . ' .kt-blocks-info-box-text' );
|
||||
if ( isset( $attributes['textFont'][0]['size'][2] ) && ! empty( $attributes['textFont'][0]['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['textFont'][0]['size'][2], ( ! isset( $attributes['textFont'][0]['sizeType'] ) ? 'px' : $attributes['textFont'][0]['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['textFont'][0]['lineHeight'][2] ) && ! empty( $attributes['textFont'][0]['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['textFont'][0]['lineHeight'][2] . ( ! isset( $attributes['textFont'][0]['lineType'] ) ? 'px' : $attributes['textFont'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
$text_min_height_unit = isset( $attributes['textMinHeightUnit'] ) ? $attributes['textMinHeightUnit'] : 'px';
|
||||
if ( isset( $attributes['textMinHeight'] ) && is_array( $attributes['textMinHeight'] ) && isset( $attributes['textMinHeight'][0] ) ) {
|
||||
if ( is_numeric( $attributes['textMinHeight'][0] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-text' );
|
||||
$css->add_property( 'min-height', $attributes['textMinHeight'][0] . $text_min_height_unit );
|
||||
}
|
||||
if ( isset( $attributes['textMinHeight'][1] ) && is_numeric( $attributes['textMinHeight'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-text' );
|
||||
$css->add_property( 'min-height', $attributes['textMinHeight'][1] . $text_min_height_unit );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['textMinHeight'][2] ) && is_numeric( $attributes['textMinHeight'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-text' );
|
||||
$css->add_property( 'min-height', $attributes['textMinHeight'][2] . $text_min_height_unit );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['learnMoreStyles'] ) && is_array( $attributes['learnMoreStyles'] ) && is_array( $attributes['learnMoreStyles'][0] ) ) {
|
||||
$learn_more_styles = $attributes['learnMoreStyles'][0];
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-learnmore' );
|
||||
if ( isset( $learn_more_styles['color'] ) && ! empty( $learn_more_styles['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $learn_more_styles['color'] ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['background'] ) && ! empty( $learn_more_styles['background'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $learn_more_styles['background'] ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['border'] ) && ! empty( $learn_more_styles['border'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $learn_more_styles['border'] ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['borderRadius'] ) && ! empty( $learn_more_styles['borderRadius'] ) ) {
|
||||
$css->add_property( 'border-radius', $learn_more_styles['borderRadius'] . 'px' );
|
||||
}
|
||||
if ( isset( $learn_more_styles['size'] ) && is_array( $learn_more_styles['size'] ) && ! empty( $learn_more_styles['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $learn_more_styles['size'][0], ( ! isset( $learn_more_styles['sizeType'] ) ? 'px' : $learn_more_styles['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['lineHeight'] ) && is_array( $learn_more_styles['lineHeight'] ) && ! empty( $learn_more_styles['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $learn_more_styles['lineHeight'][0] . ( ! isset( $learn_more_styles['lineType'] ) ? 'px' : $learn_more_styles['lineType'] ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['letterSpacing'] ) && ! empty( $learn_more_styles['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $learn_more_styles['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $learn_more_styles['textTransform'] ) && ! empty( $learn_more_styles['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $learn_more_styles['textTransform'] );
|
||||
}
|
||||
if ( isset( $learn_more_styles['family'] ) && ! empty( $learn_more_styles['family'] ) ) {
|
||||
$google = isset( $learn_more_styles['google'] ) && $learn_more_styles['google'] ? true : false;
|
||||
$google = $google && ( isset( $learn_more_styles['loadGoogle'] ) && $learn_more_styles['loadGoogle'] || ! isset( $learn_more_styles['loadGoogle'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $learn_more_styles['family'], $google, ( isset( $learn_more_styles['variant'] ) ? $learn_more_styles['variant'] : '' ), ( isset( $learn_more_styles['subset'] ) ? $learn_more_styles['subset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['style'] ) && ! empty( $learn_more_styles['style'] ) ) {
|
||||
$css->add_property( 'font-style', $learn_more_styles['style'] );
|
||||
}
|
||||
if ( isset( $learn_more_styles['weight'] ) && ! empty( $learn_more_styles['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $learn_more_styles['weight'] ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['borderWidth'] ) && is_array( $learn_more_styles['borderWidth'] ) ) {
|
||||
$css->add_property( 'border-width', $learn_more_styles['borderWidth'][0] . 'px ' . $learn_more_styles['borderWidth'][1] . 'px ' . $learn_more_styles['borderWidth'][2] . 'px ' . $learn_more_styles['borderWidth'][3] . 'px' );
|
||||
}
|
||||
$learn_more_padding_unit = ( ! empty( $learn_more_styles['paddingUnit'] ) ? $learn_more_styles['paddingUnit'] : 'px' );
|
||||
if ( isset( $learn_more_styles['padding'][0] ) && $css->is_number( $learn_more_styles['padding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $learn_more_styles['padding'][0] . $learn_more_padding_unit );
|
||||
}
|
||||
if ( isset( $learn_more_styles['padding'][1] ) && $css->is_number( $learn_more_styles['padding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $learn_more_styles['padding'][1] . $learn_more_padding_unit );
|
||||
}
|
||||
if ( isset( $learn_more_styles['padding'][2] ) && $css->is_number( $learn_more_styles['padding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $learn_more_styles['padding'][2] . $learn_more_padding_unit );
|
||||
}
|
||||
if ( isset( $learn_more_styles['padding'][3] ) && $css->is_number( $learn_more_styles['padding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $learn_more_styles['padding'][3] . $learn_more_padding_unit );
|
||||
}
|
||||
$learn_more_margin_unit = ( ! empty( $learn_more_styles['marginUnit'] ) ? $learn_more_styles['marginUnit'] : 'px' );
|
||||
if ( isset( $learn_more_styles['margin'][0] ) && $css->is_number( $learn_more_styles['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $learn_more_styles['margin'][0] . $learn_more_margin_unit );
|
||||
}
|
||||
if ( isset( $learn_more_styles['margin'][1] ) && $css->is_number( $learn_more_styles['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $learn_more_styles['margin'][1] . $learn_more_margin_unit );
|
||||
}
|
||||
if ( isset( $learn_more_styles['margin'][2] ) && $css->is_number( $learn_more_styles['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $learn_more_styles['margin'][2] . $learn_more_margin_unit );
|
||||
}
|
||||
if ( isset( $learn_more_styles['margin'][3] ) && $css->is_number( $learn_more_styles['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $learn_more_styles['margin'][3] . $learn_more_margin_unit );
|
||||
}
|
||||
if ( isset( $learn_more_styles['colorHover'] ) || isset( $learn_more_styles['colorHover'] ) || isset( $learn_more_styles['borderHover'] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-learnmore,' . $base_selector . ' .kt-blocks-info-box-link-wrap .kt-blocks-info-box-learnmore:focus' );
|
||||
if ( isset( $learn_more_styles['colorHover'] ) && ! empty( $learn_more_styles['colorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $learn_more_styles['colorHover'] ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['backgroundHover'] ) && ! empty( $learn_more_styles['backgroundHover'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $learn_more_styles['backgroundHover'] ) );
|
||||
}
|
||||
if ( isset( $learn_more_styles['borderHover'] ) && ! empty( $learn_more_styles['borderHover'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $learn_more_styles['borderHover'] ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['learnMoreStyles'] ) && is_array( $attributes['learnMoreStyles'] ) && isset( $attributes['learnMoreStyles'][0] ) && is_array( $attributes['learnMoreStyles'][0] ) && ( ( isset( $attributes['learnMoreStyles'][0]['size'] ) && is_array( $attributes['learnMoreStyles'][0]['size'] ) && isset( $attributes['learnMoreStyles'][0]['size'][1] ) && ! empty( $attributes['learnMoreStyles'][0]['size'][1] ) ) || ( isset( $attributes['learnMoreStyles'][0]['lineHeight'] ) && is_array( $attributes['learnMoreStyles'][0]['lineHeight'] ) && isset( $attributes['learnMoreStyles'][0]['lineHeight'][1] ) && ! empty( $attributes['learnMoreStyles'][0]['lineHeight'][1] ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-learnmore' );
|
||||
if ( isset( $attributes['learnMoreStyles'][0]['size'][1] ) && ! empty( $attributes['learnMoreStyles'][0]['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['learnMoreStyles'][0]['size'][1], ( ! isset( $attributes['learnMoreStyles'][0]['sizeType'] ) ? 'px' : $attributes['learnMoreStyles'][0]['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['learnMoreStyles'][0]['lineHeight'][1] ) && ! empty( $attributes['learnMoreStyles'][0]['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['learnMoreStyles'][0]['lineHeight'][1] . ( ! isset( $attributes['learnMoreStyles'][0]['lineType'] ) ? 'px' : $attributes['learnMoreStyles'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['learnMoreStyles'] ) && is_array( $attributes['learnMoreStyles'] ) && isset( $attributes['learnMoreStyles'][0] ) && is_array( $attributes['learnMoreStyles'][0] ) && ( ( isset( $attributes['learnMoreStyles'][0]['size'] ) && is_array( $attributes['learnMoreStyles'][0]['size'] ) && isset( $attributes['learnMoreStyles'][0]['size'][2] ) && ! empty( $attributes['learnMoreStyles'][0]['size'][2] ) ) || ( isset( $attributes['learnMoreStyles'][0]['lineHeight'] ) && is_array( $attributes['learnMoreStyles'][0]['lineHeight'] ) && isset( $attributes['learnMoreStyles'][0]['lineHeight'][2] ) && ! empty( $attributes['learnMoreStyles'][0]['lineHeight'][2] ) ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-learnmore' );
|
||||
if ( isset( $attributes['learnMoreStyles'][0]['size'][2] ) && ! empty( $attributes['learnMoreStyles'][0]['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['learnMoreStyles'][0]['size'][2], ( ! isset( $attributes['learnMoreStyles'][0]['sizeType'] ) ? 'px' : $attributes['learnMoreStyles'][0]['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['learnMoreStyles'][0]['lineHeight'][2] ) && ! empty( $attributes['learnMoreStyles'][0]['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['learnMoreStyles'][0]['lineHeight'][2] . ( ! isset( $attributes['learnMoreStyles'][0]['lineType'] ) ? 'px' : $attributes['learnMoreStyles'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['displayShadow'] ) && ! empty( $attributes['displayShadow'] ) && true === $attributes['displayShadow'] ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap' );
|
||||
if ( isset( $attributes['shadow'] ) && is_array( $attributes['shadow'] ) && is_array( $attributes['shadow'][0] ) ) {
|
||||
if ( ! isset( $attributes['shadow'][0]['inset'] ) ) {
|
||||
$attributes['shadow'][0]['inset'] = false;
|
||||
}
|
||||
$shadow = $attributes['shadow'][0];
|
||||
$css->add_property( 'box-shadow', $css->render_shadow( $shadow ) );
|
||||
}
|
||||
if ( isset( $attributes['tabletShadow'] ) && is_array( $attributes['tabletShadow'] ) && is_array( $attributes['tabletShadow'][0] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$shadow = $attributes['tabletShadow'][0];
|
||||
foreach ($shadow as $key => $value) {
|
||||
if ($value === '') {
|
||||
$shadow[$key] = $attributes['shadow'][0][$key] ?? '';
|
||||
} else {
|
||||
$shadow[$key] = $value;
|
||||
}
|
||||
}
|
||||
$css->add_property( 'box-shadow', $css->render_shadow( $shadow ) );
|
||||
}
|
||||
if ( isset( $attributes['mobileShadow'] ) && is_array( $attributes['mobileShadow'] ) && is_array( $attributes['mobileShadow'][0] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$shadow = $attributes['mobileShadow'][0];
|
||||
foreach ($shadow as $key => $value) {
|
||||
if ($value === '') {
|
||||
$shadow[$key] = isset($attributes['tabletShadow'][0][$key]) && $attributes['tabletShadow'][0][$key] !== '' ? $attributes['tabletShadow'][0][$key] : $attributes['shadow'][0][$key];
|
||||
} else {
|
||||
$shadow[$key] = $value;
|
||||
}
|
||||
}
|
||||
$css->add_property( 'box-shadow', $css->render_shadow( $shadow ) );
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
if ( isset( $attributes['shadowHover'] ) && is_array( $attributes['shadowHover'] ) && is_array( $attributes['shadowHover'][0] ) ) {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover' );
|
||||
if ( ! isset( $attributes['shadowHover'][0]['inset'] ) ) {
|
||||
$attributes['shadowHover'][0]['inset'] = false;
|
||||
}
|
||||
$shadow_hover = $attributes['shadowHover'][0];
|
||||
$css->add_property( 'box-shadow', $css->render_shadow( $shadow_hover ) );
|
||||
} else {
|
||||
$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover' );
|
||||
$css->add_property( 'box-shadow', '0px 0px 14px 0px rgba(0,0,0,0.2)' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['tabletShadowHover'] ) && is_array( $attributes['tabletShadowHover'] ) && is_array( $attributes['tabletShadowHover'][0] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$shadow_hover = $attributes['tabletShadowHover'][0];
|
||||
foreach ($shadow_hover as $key => $value) {
|
||||
if ($value === '') {
|
||||
$shadow_hover[$key] = $attributes['shadowHover'][0][$key] ?? '';
|
||||
} else {
|
||||
$shadow_hover[$key] = $value;
|
||||
}
|
||||
}
|
||||
$css->add_property( 'box-shadow', $css->render_shadow( $shadow_hover ) );
|
||||
}
|
||||
if ( isset( $attributes['mobileShadowHover'] ) && is_array( $attributes['mobileShadowHover'] ) && is_array( $attributes['mobileShadowHover'][0] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$shadow_hover = $attributes['mobileShadowHover'][0];
|
||||
foreach ($shadow_hover as $key => $value) {
|
||||
if ($value === '') {
|
||||
$shadow_hover[$key] = isset($attributes['tabletShadowHover'][0][$key]) && $attributes['tabletShadowHover'][0][$key] !== '' ? $attributes['tabletShadowHover'][0][$key] : $attributes['shadowHover'][0][$key];
|
||||
} else {
|
||||
$shadow_hover[$key] = $value;
|
||||
}
|
||||
}
|
||||
$css->add_property( 'box-shadow', $css->render_shadow( $shadow_hover ) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Infobox_Block::get_instance();
|
||||
@@ -0,0 +1,285 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Lottie Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Lottie Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Lottie_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'lottie';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Block determines if style needs to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kb-lottie-container' . $unique_id );
|
||||
|
||||
/*
|
||||
* Margin
|
||||
*/
|
||||
$margin_args = array(
|
||||
'desktop_key' => 'marginDesktop',
|
||||
'tablet_key' => 'marginTablet',
|
||||
'mobile_key' => 'marginMobile',
|
||||
'unit_key' => 'marginUnit',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin', $margin_args );
|
||||
|
||||
/*
|
||||
* Padding
|
||||
*/
|
||||
$padding_args = array(
|
||||
'desktop_key' => 'paddingDesktop',
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
'unit_key' => 'paddingUnit',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', $padding_args );
|
||||
|
||||
$width = ( !isset( $attributes['width'] ) || '0' === $attributes['width'] ) ? 'auto' : $attributes['width'] . 'px';
|
||||
|
||||
if ( isset( $attributes['useRatio'] ) && $attributes['useRatio'] ) {
|
||||
$css->add_property( 'max-width', $width );
|
||||
$css->add_property( 'margin', '0 auto' );
|
||||
$css->set_selector( '.kb-lottie-container' . $unique_id . ' .kb-is-ratio-animation' );
|
||||
$css->add_property( 'padding-bottom', isset( $attributes['ratio'] ) && is_numeric( $attributes['ratio'] ) ? $attributes['ratio'] . '%' : '100%' );
|
||||
}
|
||||
|
||||
if ( ! isset( $attributes['useRatio'] ) || ! $attributes['useRatio'] ) {
|
||||
$css->set_selector( '.kb-lottie-container' . $unique_id . ' dotlottie-player' );
|
||||
$css->add_property( 'max-width', $width );
|
||||
}
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if ( ! wp_script_is( 'kadence-blocks-dotlottie-player-js', 'enqueued' ) ) {
|
||||
wp_enqueue_script( 'kadence-blocks-dotlottie-player-js' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['uniqueID'] ) ) {
|
||||
$unique_id = $attributes['uniqueID'];
|
||||
$player_style_id = 'kb-lottie-player' . esc_attr( $unique_id );
|
||||
$player_simple_style_id = str_replace( array( '-' ), '', $player_style_id );
|
||||
$style_id = 'kb-lottie' . esc_attr( $unique_id );
|
||||
|
||||
if ( ! wp_style_is( $style_id, 'enqueued' ) && apply_filters( 'kadence_blocks_render_inline_css', true, 'lottie', $unique_id ) ) {
|
||||
// If filter didn't run in header (which would have enqueued the specific css id ) then filter attributes for easier dynamic css.
|
||||
$attributes = apply_filters( 'kadence_blocks_lottie_render_block_attributes', $attributes );
|
||||
}
|
||||
|
||||
// Include lottie interactive if using scroll animation.
|
||||
if ( isset( $attributes['onlyPlayOnScroll'] ) && $attributes['onlyPlayOnScroll'] === true || isset( $attributes['waitUntilInView'] ) && $attributes['waitUntilInView'] === true ) {
|
||||
if ( ! wp_script_is( 'kadence-blocks-lottieinteractivity-js', 'enqueued' ) ) {
|
||||
wp_enqueue_script( 'kadence-blocks-lottieinteractivity-js' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['onlyPlayOnScroll'] ) && $attributes['onlyPlayOnScroll'] === true ) {
|
||||
$play_type = 'seek';
|
||||
$frames = "frames: [" . ( ! empty( $attributes['startFrame'] ) ? $attributes['startFrame'] : '0' ) . ", " . ( ! empty( $attributes['endFrame'] ) ? $attributes['endFrame'] : '100' ) . "]";
|
||||
} else {
|
||||
$play_type = 'play';
|
||||
$frames = '';
|
||||
}
|
||||
|
||||
$content .= "
|
||||
<script>
|
||||
|
||||
var waitForLoittieInteractive" . $player_simple_style_id . " = setInterval(function () {
|
||||
let lottiePlayer" . $player_simple_style_id . " = document.getElementById( '" . $player_style_id . "');
|
||||
|
||||
if (typeof LottieInteractivity !== 'undefined') {
|
||||
lottiePlayer" . $player_simple_style_id . ".addEventListener('ready', () => {
|
||||
LottieInteractivity.create({
|
||||
player: lottiePlayer" . $player_simple_style_id . ".getLottie(),
|
||||
mode: 'scroll',
|
||||
actions: [
|
||||
{
|
||||
visibility: [0,1.0],
|
||||
type: '" . $play_type . "',
|
||||
$frames
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
clearInterval(waitForLoittieInteractive" . $player_simple_style_id . ");
|
||||
}
|
||||
}, 125);
|
||||
|
||||
</script>";
|
||||
|
||||
}
|
||||
|
||||
$playerProps = array();
|
||||
|
||||
if( $attributes['loop'] ){
|
||||
$playerProps['loop'] = 'true';
|
||||
|
||||
if( !empty( $attributes['loopLimit'] ) ){
|
||||
$playerProps['count'] = ( $attributes['loopLimit'] - 1);
|
||||
}
|
||||
}
|
||||
|
||||
if( $attributes['playbackSpeed'] ){
|
||||
$playerProps['speed'] = $attributes['playbackSpeed'];
|
||||
}
|
||||
|
||||
if( $attributes['showControls'] ){
|
||||
$playerProps['controls'] = 'true';
|
||||
}
|
||||
|
||||
if( $attributes['autoplay'] ){
|
||||
$playerProps['autoplay'] = 'true';
|
||||
}
|
||||
|
||||
if( $attributes['onlyPlayOnHover'] ){
|
||||
$playerProps['hover'] = 'true';
|
||||
}
|
||||
|
||||
if( $attributes['bouncePlayback']) {
|
||||
$playerProps['mode'] = 'bounce';
|
||||
} else {
|
||||
$playerProps['mode'] = 'normal';
|
||||
}
|
||||
|
||||
if( $attributes['delay'] !== 0){
|
||||
$playerProps['intermission'] = 1000 * $attributes['delay'];
|
||||
}
|
||||
|
||||
$classes = array(
|
||||
'kb-lottie-container',
|
||||
'kb-lottie-container' . esc_attr( $unique_id ),
|
||||
);
|
||||
|
||||
if ( ! empty( $attributes['align'] ) ) {
|
||||
$classes[] = 'align' . $attributes['align'];
|
||||
}
|
||||
|
||||
// Add custom CSS classes to class string.
|
||||
if ( isset( $attributes['className'] ) ) {
|
||||
$classes[] = $attributes['className'];
|
||||
}
|
||||
|
||||
$content .= '<div class="' . esc_attr( implode( ' ', $classes ) ) . '">';
|
||||
if ( isset( $attributes['useRatio'] ) && $attributes['useRatio'] ) {
|
||||
$content .= '<div class="kb-is-ratio-animation">';
|
||||
}
|
||||
$content .= '<dotlottie-player ';
|
||||
|
||||
foreach( $playerProps as $key => $value ){
|
||||
$content .= $key . '="' . $value . '" ';
|
||||
}
|
||||
|
||||
$content .= 'src="' . $this->getAnimationUrl( $attributes ) . '"
|
||||
id="kb-lottie-player' . esc_attr( $unique_id ) .'"
|
||||
></dotlottie-player>';
|
||||
if ( isset( $attributes['useRatio'] ) && $attributes['useRatio'] ) {
|
||||
$content .= '</div>';
|
||||
}
|
||||
$content .= '</div>';
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
public function getAnimationUrl( $attributes ) {
|
||||
$url = '';
|
||||
$rest_url = get_rest_url();
|
||||
|
||||
if ( $attributes['fileSrc'] === 'url' ) {
|
||||
$url = esc_attr( $attributes['fileUrl'] );
|
||||
} else {
|
||||
$url = $rest_url . 'kb-lottieanimation/v1/animations/' . esc_attr( $attributes['localFile'][0]['value'] ) . '.json';
|
||||
}
|
||||
|
||||
if ( $url === '' || $url === $rest_url . 'kb-lottieanimation/v1/animations/' ) {
|
||||
$url = 'https://assets10.lottiefiles.com/packages/lf20_rqcjx8hr.json';
|
||||
}
|
||||
|
||||
return $url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-lottieinteractivity-js', KADENCE_BLOCKS_URL . 'includes/assets/js/lottie-interactivity.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-dotlottie-player-js', KADENCE_BLOCKS_URL . 'includes/assets/js/lottie-dotlottie.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Lottie_Block::get_instance();
|
||||
@@ -0,0 +1,611 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Navigation Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Navigation Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Navigation_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'navigation';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var boolean
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $seen_refs = array();
|
||||
|
||||
protected $nav_attributes = array();
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
if ( ! isset( $attributes['id'] ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$nav_attributes = $this->get_attributes_with_defaults_cpt( $attributes['id'], 'kadence_navigation', '_kad_navigation_' );
|
||||
$nav_attributes = json_decode( json_encode( $nav_attributes ), true );
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$sizes = array( 'Desktop', 'Tablet', 'Mobile' );
|
||||
|
||||
foreach ( $sizes as $size ) {
|
||||
$this->sized_dynamic_styles( $css, $nav_attributes, $unique_id, $size );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
// No added specificty needed for these variables.
|
||||
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id );
|
||||
$css->render_measure_output( $nav_attributes, 'marginLink', '--kb-nav-top-link-margin', ['unit_key' => 'marginLinkUnit']);
|
||||
$css->render_measure_output( $nav_attributes, 'paddingLink', '--kb-nav-top-link-padding', ['unit_key' => 'paddingLinkUnit']);
|
||||
$css->render_measure_output( $nav_attributes, 'marginDropdown', '--kb-nav-dropdown-margin', ['unit_key' => 'marginDropdownUnit']);
|
||||
$css->render_measure_output( $nav_attributes, 'paddingDropdown', '--kb-nav-dropdown-padding', ['unit_key' => 'paddingDropdownUnit']);
|
||||
$css->render_measure_output( $nav_attributes, 'marginDropdownLink', '--kb-nav-dropdown-link-margin', ['unit_key' => 'marginDropdownLinkUnit']);
|
||||
$css->render_measure_output( $nav_attributes, 'paddingDropdownLink', '--kb-nav-dropdown-link-padding', ['unit_key' => 'paddingDropdownLinkUnit']);
|
||||
if ( isset( $nav_attributes['dropdownShadow'][0]['enable'] ) && $nav_attributes['dropdownShadow'][0]['enable'] ) {
|
||||
$css->add_property( '--kb-nav-dropdown-box-shadow', $css->render_shadow( $nav_attributes['dropdownShadow'][0] ) );
|
||||
}
|
||||
$css->render_button_styles_with_states(
|
||||
array(
|
||||
'colorBase' => 'linkColor',
|
||||
'backgroundBase' => 'background',
|
||||
'backgroundTypeBase' => 'backgroundType',
|
||||
'backgroundGradientBase' => 'backgroundGradient',
|
||||
'borderBase' => 'border',
|
||||
'borderRadiusBase' => 'borderRadius',
|
||||
'borderRadiusUnitBase' => 'borderRadiusUnit',
|
||||
'shadowBase' => 'shadow',
|
||||
'renderAsVars' => true,
|
||||
'varBase' => '--kb-nav-top-link-'
|
||||
),
|
||||
$nav_attributes
|
||||
);
|
||||
|
||||
//main container (don't apply to children)
|
||||
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' > .navigation > .menu-container > .menu');
|
||||
$css->render_measure_output( $nav_attributes, 'margin', '--kb-nav-margin', ['unit_key' => 'marginUnit']);
|
||||
$css->render_measure_output( $nav_attributes, 'padding', '--kb-nav-padding', ['unit_key' => 'paddingUnit']);
|
||||
|
||||
//nav item (top level only)
|
||||
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' > .navigation > .menu-container > .menu > .wp-block-kadence-navigation-link > .kb-link-wrap' );
|
||||
$css->render_typography( $nav_attributes );
|
||||
|
||||
//dropdown links (only this nav's dropdowns, exclude embedded navigations in mega menus, etc)
|
||||
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .sub-menu > .wp-block-kadence-navigation-link > .kb-link-wrap > .kb-nav-link-content' );
|
||||
$css->render_typography( $nav_attributes, 'dropdownTypography' );
|
||||
|
||||
//nav item (top level only) descriptions
|
||||
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .menu-container > .menu > .wp-block-kadence-navigation-link > .kb-link-wrap .kb-nav-label-description' );
|
||||
$css->render_typography( $nav_attributes, 'descriptionTypography' );
|
||||
|
||||
//submenu link descriptions only, do not bleed
|
||||
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .sub-menu > .menu-item > .kb-link-wrap .kb-nav-label-description' );
|
||||
$css->render_typography( $nav_attributes, 'dropdownDescriptionTypography' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build up the dynamic styles for a size.
|
||||
*
|
||||
* @param string $size The size.
|
||||
* @return array
|
||||
*/
|
||||
public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'Desktop' ) {
|
||||
$sized_attributes = $css->get_sized_attributes_auto( $attributes, $size, false );
|
||||
$sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size );
|
||||
$navigation_horizontal_spacing = isset( $sized_attributes['spacing'][1] ) ? $sized_attributes['spacing'][1] : '';
|
||||
$navigation_vertical_spacing = isset( $sized_attributes['spacing'][0] ) ? $sized_attributes['spacing'][0] : '';
|
||||
|
||||
$css->set_media_state( strtolower( $size ) );
|
||||
|
||||
//no added specificty needed for these variables
|
||||
//these variable will slot into selectors found in the static stylesheet.
|
||||
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id );
|
||||
$css->add_property( '--kb-nav-top-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorActive']), $sized_attributes['parentActive'] );
|
||||
$css->add_property( '--kb-nav-top-link-background-active-ancestor', $css->render_color( $sized_attributes['backgroundActive']), $sized_attributes['parentActive'] );
|
||||
$css->add_property( '--kb-nav-dropdown-link-color', $css->render_color( $sized_attributes['linkColorDropdown'] ));
|
||||
$css->add_property( '--kb-nav-dropdown-link-color-hover', $css->render_color( $sized_attributes['linkColorDropdownHover'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-color-active', $css->render_color( $sized_attributes['linkColorDropdownActive']) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorDropdownActive']), $sized_attributes['parentActive'] );
|
||||
$css->add_property( '--kb-nav-dropdown-background', $css->render_color( $sized_attributes['backgroundDropdown'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-background-hover', $css->render_color( $sized_attributes['backgroundDropdownHover'] ));
|
||||
$css->add_property( '--kb-nav-dropdown-link-background-active', $css->render_color( $sized_attributes['backgroundDropdownActive']));
|
||||
$css->add_property( '--kb-nav-dropdown-border-bottom', $css->render_border( $sized_attributes['dropdownBorder'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-border-top', $css->render_border( $sized_attributes['dropdownBorder'], 'top' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-border-left', $css->render_border( $sized_attributes['dropdownBorder'], 'left' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-border-right', $css->render_border( $sized_attributes['dropdownBorder'], 'right' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-padding-top', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ), $sized_attributes['dropdownVerticalSpacing'] );
|
||||
$css->add_property( '--kb-nav-dropdown-link-padding-bottom', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ), $sized_attributes['dropdownVerticalSpacing'] );
|
||||
$css->render_measure_range(
|
||||
$sized_attributes,
|
||||
( 'Desktop' === $size ? 'dropdownBorderRadius' : 'dropdownBorderRadius' . $size ),
|
||||
'--kb-nav-dropdown-border-radius',
|
||||
'',
|
||||
[
|
||||
'unit_key' => 'dropdownBorderRadiusUnit',
|
||||
'first_prop' => '--kb-nav-dropdown-border-top-left-radius',
|
||||
'second_prop' => '--kb-nav-dropdown-border-top-right-radius',
|
||||
'third_prop' => '--kb-nav-dropdown-border-bottom-right-radius',
|
||||
'fourth_prop' => '--kb-nav-dropdown-border-bottom-left-radius'
|
||||
]
|
||||
);
|
||||
$css->render_measure_range( $sized_attributes, ( 'Desktop' === $size ? 'dropdownBorderRadius' : 'dropdownBorderRadius' . $size ), '--kb-nav-dropdown-border-radius', '', ['unit_key' => 'dropdownBorderRadiusUnit']);
|
||||
$css->add_property( '--kb-nav-top-link-description-color', $css->render_color( $sized_attributes['descriptionColor'] ));
|
||||
$css->add_property( '--kb-nav-top-link-description-color-hover', $css->render_color( $sized_attributes['descriptionColorHover'] ) );
|
||||
$css->add_property( '--kb-nav-top-link-description-color-active', $css->render_color( $sized_attributes['descriptionColorActive']) );
|
||||
$css->add_property( '--kb-nav-top-link-description-color-active-ancestor', $css->render_color( $sized_attributes['descriptionColorActive']), $sized_attributes['parentActive'] );
|
||||
$css->add_property( '--kb-nav-top-link-description-padding-top', $css->render_size( $sized_attributes['descriptionSpacing'], $sized_attributes['descriptionSpacingUnit'] ?? 'px' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-color', $css->render_color( $sized_attributes['dropdownDescriptionColor'] ));
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-color-hover', $css->render_color( $sized_attributes['dropdownDescriptionColorHover'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-color-active', $css->render_color( $sized_attributes['dropdownDescriptionColorActive']) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-color-active-ancestor', $css->render_color( $sized_attributes['dropdownDescriptionColorActive']), $sized_attributes['parentActive'] );
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-padding-top', $css->render_size( $sized_attributes['dropdownDescriptionSpacing'], $sized_attributes['dropdownDescriptionSpacingUnit'] ?? 'px' ) );
|
||||
|
||||
//additional dynamic logic, but still lands in a slot in the static stylesheet
|
||||
if ( isset( $navigation_vertical_spacing ) && is_numeric( $navigation_vertical_spacing ) ) {
|
||||
$css->add_property( '--kb-nav-row-gap', $css->render_size( $navigation_vertical_spacing, $attributes['spacingUnit'] ) );
|
||||
}
|
||||
if ( isset( $navigation_horizontal_spacing ) && is_numeric( $navigation_horizontal_spacing ) ) {
|
||||
$css->add_property( '--kb-nav-column-gap', $css->render_size( $navigation_horizontal_spacing, $attributes['spacingUnit'] ) );
|
||||
}
|
||||
if ( $sized_attributes_inherit['orientation'] != 'vertical' ) {
|
||||
if ( ! empty( $sized_attributes['horizontalGrid'] ) ) {
|
||||
$css->add_property( '--kb-nav-grid-columns', 'repeat(' . $sized_attributes['horizontalGrid'] . ', 1fr)');
|
||||
}
|
||||
$css->add_property( '--kb-nav-dropdown-link-width', $css->render_size( $sized_attributes['dropdownWidth'], $sized_attributes['dropdownWidthUnit'] ) );
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-right', $css->render_border( $sized_attributes['divider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-toggle-border-left', 'var(--kb-nav-link-border-left)' );
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-bottom', 'var(--kb-nav-link-border-bottom)' );
|
||||
|
||||
if ( $sized_attributes['dropdownHorizontalAlignment'] == 'center') {
|
||||
$css->add_property( '--kb-nav-dropdown-show-left', '50%' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-right', 'unset' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-transform-x', '-50%' );
|
||||
$css->add_property( '--kb-nav-dropdown-hide-transform-x', '-50%' );
|
||||
} else if ( $sized_attributes['dropdownHorizontalAlignment'] == 'right' ) {
|
||||
$css->add_property( '--kb-nav-dropdown-show-right', '0px' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-left', 'unset' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-transform-x', '0px' );
|
||||
$css->add_property( '--kb-nav-dropdown-hide-transform-x', '0px' );
|
||||
} else if ( $sized_attributes['dropdownHorizontalAlignment'] == 'left' ) {
|
||||
$css->add_property( '--kb-nav-dropdown-show-left', '0px' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-right', 'unset' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-transform-x', '0px' );
|
||||
$css->add_property( '--kb-nav-dropdown-hide-transform-x', '0px' );
|
||||
}
|
||||
} else {
|
||||
$css->add_property( '--kb-nav-dropdown-toggle-border-left', $css->render_border( $sized_attributes['divider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-bottom', $css->render_border( $sized_attributes['divider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-right', 'var(--kb-nav-link-border-right)' );
|
||||
}
|
||||
|
||||
//link, description, and media alignment
|
||||
if ($sized_attributes['linkHorizontalAlignment']) {
|
||||
$css->add_property('--kb-nav-top-link-align', $sized_attributes['linkHorizontalAlignment']);
|
||||
$link_flex_align = $sized_attributes['linkHorizontalAlignment'] == 'right' ? 'end' : ( $sized_attributes['linkHorizontalAlignment'] == 'center' ? 'center' : 'start' );
|
||||
$css->add_property('--kb-nav-top-link-flex-justify', $link_flex_align);
|
||||
$css->add_property('--kb-nav-top-link-media-container-align-self', $link_flex_align);
|
||||
}
|
||||
|
||||
//dropdown link, description, and media alignment
|
||||
if ($sized_attributes['dropdownLinkHorizontalAlignment']) {
|
||||
$css->add_property('--kb-nav-dropdown-link-align', $sized_attributes['dropdownLinkHorizontalAlignment']);
|
||||
$link_flex_align = $sized_attributes['dropdownLinkHorizontalAlignment'] == 'right' ? 'end' : ( $sized_attributes['dropdownLinkHorizontalAlignment'] == 'center' ? 'center' : 'start' );
|
||||
$css->add_property('--kb-nav-dropdown-link-flex-justify', $link_flex_align);
|
||||
$css->add_property('--kb-nav-dropdown-link-media-container-align-self', $link_flex_align);
|
||||
}
|
||||
|
||||
if ( str_contains( $sized_attributes['style'], 'fullheight' ) ) {
|
||||
$css->add_property( '--kb-nav-height', '100%' );
|
||||
}
|
||||
|
||||
//placement logic where an additional selector is needed
|
||||
//transparent styles
|
||||
$css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-navigation' . $unique_id );
|
||||
$css->add_property( '--kb-nav-top-link-color', $css->render_color( $sized_attributes['linkColorTransparent'] ), $sized_attributes['linkColorTransparent'] );
|
||||
$css->add_property( '--kb-nav-top-link-color-hover', $css->render_color( $sized_attributes['linkColorTransparentHover'] ) );
|
||||
$css->add_property( '--kb-nav-top-link-color-active', $css->render_color( $sized_attributes['linkColorTransparentActive']) );
|
||||
$css->add_property( '--kb-nav-top-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorTransparentActive']), $sized_attributes['parentActive'] );
|
||||
$css->add_property( '--kb-nav-top-link-background', $css->render_color( $sized_attributes['backgroundTransparent'] ), $sized_attributes['backgroundTransparent'] );
|
||||
$css->add_property( '--kb-nav-top-link-background-hover', $css->render_color( $sized_attributes['backgroundTransparentHover'] ) );
|
||||
$css->add_property( '--kb-nav-top-link-background-active', $css->render_color( $sized_attributes['backgroundTransparentActive']) );
|
||||
$css->add_property( '--kb-nav-top-link-background-active-ancestor', $css->render_color( $sized_attributes['backgroundTransparentActive']), $sized_attributes['parentActive'] );
|
||||
|
||||
if ( $sized_attributes_inherit['orientation'] != 'vertical' ) {
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-right', $css->render_border( $sized_attributes['transparentDivider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-toggle-border-left', 'var(--kb-nav-link-border-left)' );
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-bottom', 'var(--kb-nav-link-border-bottom)' );
|
||||
} else {
|
||||
$css->add_property( '--kb-nav-link-wrap-border-bottom', $css->render_border( $sized_attributes['transparentDivider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-toggle-border-left', $css->render_border( $sized_attributes['transparentDivider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-right', 'var(--kb-nav-link-border-right)' );
|
||||
}
|
||||
|
||||
//sticky styles
|
||||
$css->set_selector( '.item-is-stuck .wp-block-kadence-navigation' . $unique_id );
|
||||
$css->add_property( '--kb-nav-top-link-color', $css->render_color( $sized_attributes['linkColorSticky'] ), $sized_attributes['linkColorSticky'] );
|
||||
$css->add_property( '--kb-nav-top-link-color-hover', $css->render_color( $sized_attributes['linkColorStickyHover'] ) );
|
||||
$css->add_property( '--kb-nav-top-link-color-active', $css->render_color( $sized_attributes['linkColorStickyActive']) );
|
||||
$css->add_property( '--kb-nav-top-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorStickyActive']), $sized_attributes['parentActive'] );
|
||||
$css->add_property( '--kb-nav-top-link-background', $css->render_color( $sized_attributes['backgroundSticky'] ), $sized_attributes['backgroundSticky'] );
|
||||
$css->add_property( '--kb-nav-top-link-background-hover', $css->render_color( $sized_attributes['backgroundStickyHover'] ) );
|
||||
$css->add_property( '--kb-nav-top-link-background-active', $css->render_color( $sized_attributes['backgroundStickyActive']) );
|
||||
$css->add_property( '--kb-nav-top-link-background-active-ancestor', $css->render_color( $sized_attributes['backgroundStickyActive']), $sized_attributes['parentActive'] );
|
||||
|
||||
if ( $sized_attributes_inherit['orientation'] != 'vertical' ) {
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-right', $css->render_border( $sized_attributes['stickyDivider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-toggle-border-left', 'var(--kb-nav-link-border-left)' );
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-bottom', 'var(--kb-nav-link-border-bottom)' );
|
||||
} else {
|
||||
$css->add_property( '--kb-nav-link-wrap-border-bottom', $css->render_border( $sized_attributes['stickyDivider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-dropdown-toggle-border-left', $css->render_border( $sized_attributes['stickyDivider'], 'bottom' ) );
|
||||
$css->add_property( '--kb-nav-top-not-last-link-border-right', 'var(--kb-nav-link-border-right)' );
|
||||
}
|
||||
|
||||
//not last submenu items and mega menu nav links
|
||||
$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .sub-menu > .menu-item:not(:last-of-type), .wp-block-kadence-navigation' . $unique_id . ' .sub-menu.mega-menu > .menu-item > .kb-link-wrap > .kb-nav-link-content' );
|
||||
$css->add_property( '--kb-nav-menu-item-border-bottom', $css->render_border( $sized_attributes['dropdownDivider'], 'bottom' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for dynamic blocks
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$nav_block = null;
|
||||
$in_template_preview = isset( $attributes['templateKey'] ) && $attributes['templateKey'] && ( ! isset( $attributes['id'] ) || ! $attributes['id'] );
|
||||
|
||||
//If this is a templated navigation placeholder, we're going to skip a bunch of the normal logic and checks
|
||||
if ( ! $in_template_preview ) {
|
||||
$nav_block = get_post( $attributes['id'] );
|
||||
|
||||
if ( ! $nav_block || 'kadence_navigation' !== $nav_block->post_type ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( 'publish' !== $nav_block->post_status || ! empty( $nav_block->post_password ) ) {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent a nav block from being rendered inside itself.
|
||||
if ( isset( self::$seen_refs[ $attributes['id'] ] ) && ! $attributes['templateKey'] ) {
|
||||
// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
|
||||
// is set in `wp_debug_mode()`.
|
||||
$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
|
||||
|
||||
return $is_debug ?
|
||||
// translators: Visible only in the front end, this warning takes the place of a faulty block.
|
||||
__( '[block rendering halted]', 'kadence-blocks' ) :
|
||||
'';
|
||||
}
|
||||
self::$seen_refs[ $attributes['id'] ] = true;
|
||||
|
||||
$nav_attributes = $this->get_attributes_with_defaults_cpt( $attributes['id'], 'kadence_navigation', '_kad_navigation_' );
|
||||
$nav_attributes = json_decode( json_encode( $nav_attributes ), true );
|
||||
|
||||
if ( ! $in_template_preview ) {
|
||||
// Remove the advanced nav block so it doesn't try and render.
|
||||
$content = preg_replace( '/<!-- wp:kadence\/navigation {.*?} -->/', '', $nav_block->post_content );
|
||||
} else {
|
||||
$content = $this->applyTemplateKeyBlocks($attributes);
|
||||
$nav_attributes['orientation'] = str_contains( $attributes['templateKey'], 'vertical' ) ? 'vertical' : 'horizontal';
|
||||
$nav_attributes['orientationTablet'] = str_contains( $attributes['templateKey'], 'vertical' ) ? 'vertical' : 'horizontal';
|
||||
$nav_attributes['orientationMobile'] = str_contains( $attributes['templateKey'], 'vertical' ) ? 'vertical' : 'horizontal';
|
||||
}
|
||||
$content = str_replace( '<!-- wp:kadence/navigation -->', '', $content );
|
||||
$content = str_replace( '<!-- wp:kadence/navigation -->', '', $content );
|
||||
$content = str_replace( '<!-- /wp:kadence/navigation -->', '', $content );
|
||||
|
||||
// Handle embeds for nav block.
|
||||
global $wp_embed;
|
||||
$content = $wp_embed->run_shortcode( $content );
|
||||
$content = $wp_embed->autoembed( $content );
|
||||
$content = do_blocks( $content );
|
||||
|
||||
unset( self::$seen_refs[ $attributes['id'] ] );
|
||||
|
||||
// Inherit values.
|
||||
// Just getting a css class for access to methods.
|
||||
$css = Kadence_Blocks_CSS::get_instance();
|
||||
$horizontal_layout = $css->get_inherited_value( $nav_attributes['horizontalLayout'], $nav_attributes['horizontalLayoutTablet'], $nav_attributes['horizontalLayoutMobile'], 'Desktop' );
|
||||
$horizontal_layout_tablet = $css->get_inherited_value( $nav_attributes['horizontalLayout'], $nav_attributes['horizontalLayoutTablet'], $nav_attributes['horizontalLayoutMobile'], 'Tablet' );
|
||||
$horizontal_layout_mobile = $css->get_inherited_value( $nav_attributes['horizontalLayout'], $nav_attributes['horizontalLayoutTablet'], $nav_attributes['horizontalLayoutMobile'], 'Mobile' );
|
||||
|
||||
$fill_stretch = $css->get_inherited_value( $nav_attributes['stretchFill'], $nav_attributes['stretchFillTablet'], $nav_attributes['stretchFillMobile'], 'Desktop' );
|
||||
$fill_stretch_tablet = $css->get_inherited_value( $nav_attributes['stretchFill'], $nav_attributes['stretchFillTablet'], $nav_attributes['stretchFillMobile'], 'Tablet' );
|
||||
$fill_stretch_mobile = $css->get_inherited_value( $nav_attributes['stretchFill'], $nav_attributes['stretchFillTablet'], $nav_attributes['stretchFillMobile'], 'Mobile' );
|
||||
$orientation = $css->get_inherited_value( $nav_attributes['orientation'], $nav_attributes['orientationTablet'], $nav_attributes['orientationMobile'], 'Desktop' );
|
||||
$orientation_tablet = $css->get_inherited_value( $nav_attributes['orientation'], $nav_attributes['orientationTablet'], $nav_attributes['orientationMobile'], 'Tablet' );
|
||||
$orientation_mobile = $css->get_inherited_value( $nav_attributes['orientation'], $nav_attributes['orientationTablet'], $nav_attributes['orientationMobile'], 'Mobile' );
|
||||
|
||||
// Wrapper Attributes.
|
||||
$wrapper_classes = array();
|
||||
$wrapper_classes[] = 'wp-block-kadence-navigation' . $unique_id;
|
||||
$wrapper_classes[] = 'kb-nav-desktop-horizontal-layout-' . ( $horizontal_layout );
|
||||
$wrapper_classes[] = 'kb-nav-tablet-horizontal-layout-' . ( $horizontal_layout_tablet );
|
||||
$wrapper_classes[] = 'kb-nav-mobile-horizontal-layout-' . ( $horizontal_layout_mobile );
|
||||
$wrapper_classes[] = 'navigation-desktop-layout-fill-stretch-' . ( 'fill' === $fill_stretch ? 'true' : 'false' );
|
||||
$orientation_tablet_bool = isset( $nav_attributes['collapseSubMenusTablet'] )
|
||||
? ( $nav_attributes['collapseSubMenusTablet'] === '' ? false : $nav_attributes['collapseSubMenusTablet'] )
|
||||
: '';
|
||||
$orientation_mobile_bool = isset( $nav_attributes['collapseSubMenusMobile'] )
|
||||
? ( $nav_attributes['collapseSubMenusMobile'] === '' ? false : $nav_attributes['collapseSubMenusMobile'] )
|
||||
: '';
|
||||
$collapse_sub_menus = $css->get_inherited_value( $nav_attributes['collapseSubMenus'], $orientation_tablet_bool, $orientation_mobile_bool, 'Desktop' );
|
||||
$collapse_sub_menus_tablet = $css->get_inherited_value( $nav_attributes['collapseSubMenus'], $orientation_tablet_bool, $orientation_mobile_bool, 'Tablet' );
|
||||
$collapse_sub_menus_mobile = $css->get_inherited_value( $nav_attributes['collapseSubMenus'], $orientation_tablet_bool, $orientation_mobile_bool, 'Mobile' );
|
||||
$dropdown_reveal = $css->get_inherited_value( $nav_attributes['dropdownReveal'], $nav_attributes['dropdownRevealTablet'], $nav_attributes['dropdownRevealMobile'], 'Desktop' );
|
||||
$dropdown_reveal_tablet = $css->get_inherited_value( $nav_attributes['dropdownReveal'], $nav_attributes['dropdownRevealTablet'], $nav_attributes['dropdownRevealMobile'], 'Tablet' );
|
||||
$dropdown_reveal_mobile = $css->get_inherited_value( $nav_attributes['dropdownReveal'], $nav_attributes['dropdownRevealTablet'], $nav_attributes['dropdownRevealMobile'], 'Mobile' );
|
||||
$style = $css->get_inherited_value( $nav_attributes['style'], $nav_attributes['styleTablet'], $nav_attributes['styleMobile'], 'Desktop' );
|
||||
$style_tablet = $css->get_inherited_value( $nav_attributes['style'], $nav_attributes['styleTablet'], $nav_attributes['styleMobile'], 'Tablet' );
|
||||
$style_mobile = $css->get_inherited_value( $nav_attributes['style'], $nav_attributes['styleTablet'], $nav_attributes['styleMobile'], 'Mobile' );
|
||||
$parent_toggles_menus_tablet_bool = isset( $nav_attributes['parentTogglesMenusTablet'] )
|
||||
? ( $nav_attributes['parentTogglesMenusTablet'] === '' ? false : $nav_attributes['parentTogglesMenusTablet'] )
|
||||
: '';
|
||||
$parent_toggles_menus_mobile_bool = isset( $nav_attributes['parentTogglesMenusMobile'] )
|
||||
? ( $nav_attributes['parentTogglesMenusMobile'] === '' ? false : $nav_attributes['parentTogglesMenusMobile'] )
|
||||
: '';
|
||||
$parent_toggles_menus = $css->get_inherited_value( $nav_attributes['parentTogglesMenus'], $parent_toggles_menus_tablet_bool, $parent_toggles_menus_mobile_bool, 'Desktop' );
|
||||
$parent_toggles_menus_tablet = $css->get_inherited_value( $nav_attributes['parentTogglesMenus'], $parent_toggles_menus_tablet_bool, $parent_toggles_menus_mobile_bool, 'Tablet' );
|
||||
$parent_toggles_menus_mobile = $css->get_inherited_value( $nav_attributes['parentTogglesMenus'], $parent_toggles_menus_tablet_bool, $parent_toggles_menus_mobile_bool, 'Mobile' );
|
||||
$parent_active_tablet_bool = isset( $nav_attributes['parentActiveTablet'] )
|
||||
? ( $nav_attributes['parentActiveTablet'] === '' ? false : $nav_attributes['parentActiveTablet'] )
|
||||
: '';
|
||||
$parent_active_mobile_bool = isset( $nav_attributes['parentActiveMobile'] )
|
||||
? ( $nav_attributes['parentActiveMobile'] === '' ? false : $nav_attributes['parentActiveMobile'] )
|
||||
: '';
|
||||
$parent_active = $css->get_inherited_value( $nav_attributes['parentActive'], $parent_active_tablet_bool, $parent_active_mobile_bool, 'Desktop' );
|
||||
$parent_active_tablet = $css->get_inherited_value( $nav_attributes['parentActive'], $parent_active_tablet_bool, $parent_active_mobile_bool, 'Tablet' );
|
||||
$parent_active_mobile = $css->get_inherited_value( $nav_attributes['parentActive'], $parent_active_tablet_bool, $parent_active_mobile_bool, 'Mobile' );
|
||||
$wrapper_classes[] = 'navigation-tablet-layout-fill-stretch-' . ( 'fill' === $fill_stretch_tablet ? 'true' : 'false' );
|
||||
$wrapper_classes[] = 'navigation-mobile-layout-fill-stretch-' . ( 'fill' === $fill_stretch_mobile ? 'true' : 'false' );
|
||||
$wrapper_classes[] = 'navigation-desktop-orientation-' . ( $orientation ? $orientation : 'horizontal' );
|
||||
$wrapper_classes[] = 'navigation-tablet-orientation-' . ( $orientation_tablet ? $orientation_tablet : 'horizontal' );
|
||||
$wrapper_classes[] = 'navigation-mobile-orientation-' . ( $orientation_mobile ? $orientation_mobile : 'horizontal' );
|
||||
if ( ! empty( $nav_attributes['className'] ) ) {
|
||||
$wrapper_classes[] = $nav_attributes['className'];
|
||||
}
|
||||
|
||||
$name = ! empty( $attributes['name'] ) ? $attributes['name'] : '';
|
||||
|
||||
$wrapper_attribute_items = array(
|
||||
'class' => implode( ' ', $wrapper_classes ),
|
||||
'aria-label' => $name,
|
||||
'data-scroll-spy' => $nav_attributes['enableScrollSpy'],
|
||||
);
|
||||
|
||||
if ( ! empty( $nav_attributes['anchor'] ) ) {
|
||||
$wrapper_attribute_items['id'] = $nav_attributes['anchor'];
|
||||
}
|
||||
|
||||
if ( $nav_attributes['enableScrollSpy'] ) {
|
||||
$wrapper_attribute_items['data-scroll-spy-offset'] = isset( $nav_attributes['scrollSpyOffsetManual'] ) && $nav_attributes['scrollSpyOffsetManual'] ? $nav_attributes['scrollSpyOffset'] : false;
|
||||
$wrapper_attribute_items['data-scroll-spy-id'] = uniqid();
|
||||
}
|
||||
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_attribute_items );
|
||||
|
||||
// Navigation Attributes.
|
||||
$navigation_classes = array();
|
||||
|
||||
// Update animation classes with responsive actual animation stuff.
|
||||
$navigation_classes[] = 'navigation';
|
||||
$navigation_classes[] = 'navigation-desktop-style-' . ( $style ? $style : 'standard' );
|
||||
$navigation_classes[] = 'navigation-tablet-style-' . ( $style_tablet ? $style_tablet : 'standard' );
|
||||
$navigation_classes[] = 'navigation-mobile-style-' . ( $style_mobile ? $style_mobile : 'standard' );
|
||||
$navigation_classes[] = 'navigation-desktop-dropdown-animation-' . ( $dropdown_reveal ? $dropdown_reveal : 'none' );
|
||||
$navigation_classes[] = 'navigation-tablet-dropdown-animation-' . ( $dropdown_reveal_tablet ? $dropdown_reveal_tablet : 'none' );
|
||||
$navigation_classes[] = 'navigation-mobile-dropdown-animation-' . ( $dropdown_reveal_mobile ? $dropdown_reveal_mobile : 'none' );
|
||||
$navigation_classes[] = 'navigation-desktop-collapse-sub-menus-' . ( $collapse_sub_menus ? 'true' : 'false' );
|
||||
$navigation_classes[] = 'navigation-tablet-collapse-sub-menus-' . ( $collapse_sub_menus_tablet ? 'true' : 'false' );
|
||||
$navigation_classes[] = 'navigation-mobile-collapse-sub-menus-' . ( $collapse_sub_menus_mobile ? 'true' : 'false' );
|
||||
$navigation_classes[] = 'navigation-desktop-parent-toggles-menus-' . ( $parent_toggles_menus ? 'true' : 'false' );
|
||||
$navigation_classes[] = 'navigation-tablet-parent-toggles-menus-' . ( $parent_toggles_menus_tablet ? 'true' : 'false' );
|
||||
$navigation_classes[] = 'navigation-mobile-parent-toggles-menus-' . ( $parent_toggles_menus_mobile ? 'true' : 'false' );
|
||||
$navigation_classes[] = 'navigation-desktop-parent-active-' . ( $parent_active ? 'true' : 'false' );
|
||||
$navigation_classes[] = 'navigation-tablet-parent-active-' . ( $parent_active_tablet ? 'true' : 'false' );
|
||||
$navigation_classes[] = 'navigation-mobile-parent-active-' . ( $parent_active_mobile ? 'true' : 'false' );
|
||||
$navigation_attributes = $this->build_html_attributes(
|
||||
array(
|
||||
'class' => implode( ' ', $navigation_classes ),
|
||||
)
|
||||
);
|
||||
|
||||
// Menu Attributes.
|
||||
$menu_classes = array();
|
||||
$menu_classes[] = 'kb-navigation';
|
||||
$menu_classes[] = 'menu';
|
||||
$menu_classes[] = 'collapse-sub-nav-desktop-' . ( $collapse_sub_menus ? 'true' : 'false' );
|
||||
$menu_classes[] = 'collapse-sub-nav-tablet-' . ( $collapse_sub_menus_tablet ? 'true' : 'false' );
|
||||
$menu_classes[] = 'collapse-sub-nav-mobile-' . ( $collapse_sub_menus_mobile ? 'true' : 'false' );
|
||||
$menu_attributes = $this->build_html_attributes(
|
||||
array(
|
||||
'class' => implode( ' ', $menu_classes ),
|
||||
)
|
||||
);
|
||||
|
||||
if ( $nav_attributes['enableScrollSpy'] ) {
|
||||
wp_enqueue_script( 'kadence-blocks-gumshoe', KADENCE_BLOCKS_URL . 'includes/assets/js/gumshoe.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
//need to load this script with the gumshoe dependency if scrollspy is enabled
|
||||
wp_dequeue_script( 'kadence-blocks-' . $this->block_name );
|
||||
wp_deregister_script( 'kadence-blocks-' . $this->block_name );
|
||||
wp_enqueue_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-navigation-block.min.js', array('kadence-blocks-gumshoe'), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
|
||||
return sprintf(
|
||||
'<div %1$s><nav %2$s><div class="menu-container"><ul %3$s>%4$s</ul></div></nav></div>',
|
||||
$wrapper_attributes,
|
||||
$navigation_attributes,
|
||||
$menu_attributes,
|
||||
$content
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates content to replace actual blocks for templated navigation placeholders.
|
||||
* This should match the templated blocks created in the editor for the same template keys
|
||||
*
|
||||
* @param array $attributes The database attribtues.
|
||||
*/
|
||||
public function applyTemplateKeyBlocks( $attributes ) {
|
||||
if ( isset($attributes['templateKey']) && $attributes['templateKey'] ) {
|
||||
switch ($attributes['templateKey']) {
|
||||
case 'long':
|
||||
return '
|
||||
<!-- wp:kadence/navigation -->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_d2e014-e0","label":"about","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_a59d22-g7","label":"blog","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_0ee46f-b7","label":"contact","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_321f15-sb","label":"resources","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_321f15-qb","label":"locations","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_321f15-zb","label":"shop","url":"#"} /-->
|
||||
<!-- /wp:kadence/navigation -->
|
||||
';
|
||||
break;
|
||||
case 'long-vertical':
|
||||
return '
|
||||
<!-- wp:kadence/navigation -->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_d2e014-e0","label":"about","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_a59d22-g7","label":"blog","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_0ee46f-b7","label":"contact","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_321f15-sb","label":"resources","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_321f15-qb","label":"locations","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_321f15-zb","label":"shop","url":"#"} /-->
|
||||
<!-- /wp:kadence/navigation -->
|
||||
';
|
||||
break;
|
||||
case 'short':
|
||||
return '
|
||||
<!-- wp:kadence/navigation -->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_d2e014-e0","label":"about","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_a59d22-g7","label":"blog","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_0ee46f-b7","label":"contact","url":"#"} /-->
|
||||
<!-- /wp:kadence/navigation -->
|
||||
';
|
||||
break;
|
||||
|
||||
default:
|
||||
return '
|
||||
<!-- wp:kadence/navigation -->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_d2e014-e0","label":"about","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_a59d22-g7","label":"blog","url":"#"} /-->
|
||||
<!-- wp:kadence/navigation-link {"uniqueID":"494_0ee46f-b7","label":"contact","url":"#"} /-->
|
||||
<!-- /wp:kadence/navigation -->
|
||||
';
|
||||
break;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-navigation-block.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
wp_localize_script(
|
||||
'kadence-blocks-' . $this->block_name,
|
||||
'kadenceNavigationConfig',
|
||||
array(
|
||||
'screenReader' => array(
|
||||
'expand' => __( 'Child menu', 'kadence-blocks' ),
|
||||
'expandOf' => __( 'Child menu of', 'kadence-blocks' ),
|
||||
'collapse' => __( 'Child menu', 'kadence-blocks' ),
|
||||
'collapseOf' => __( 'Child menu of', 'kadence-blocks' ),
|
||||
),
|
||||
'breakPoints' => array(
|
||||
'desktop' => 1024,
|
||||
'tablet' => 768,
|
||||
),
|
||||
'scrollOffset' => apply_filters( 'kadence_scroll_to_id_additional_offset', 0 ),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds an html attribute string from an array of keys and values.
|
||||
*
|
||||
* @param array $attributes The database attribtues.
|
||||
* @return array
|
||||
*/
|
||||
public function build_html_attributes( $attributes ) {
|
||||
if ( empty( $attributes ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$normalized_attributes = array();
|
||||
foreach ( $attributes as $key => $value ) {
|
||||
$normalized_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
|
||||
return implode( ' ', $normalized_attributes );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Navigation_Block::get_instance();
|
||||
@@ -0,0 +1,888 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Navigation Link Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Navigation Link Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Navigation_Link_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'navigation-link';
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $seen_refs = [];
|
||||
|
||||
/**
|
||||
* Block determines if style needs to be loaded for block.
|
||||
* This block doesn't because it's stylesheet is merged with the parent nav block's
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$sizes = [ 'Desktop', 'Tablet', 'Mobile' ];
|
||||
|
||||
foreach ( $sizes as $size ) {
|
||||
$this->sized_dynamic_styles( $css, $attributes, $unique_id, $size );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$image_ratio_padding = ! is_numeric( $attributes['mediaImage'][0]['height'] )
|
||||
? null
|
||||
: ( $attributes['mediaImage'][0]['height'] / $attributes['mediaImage'][0]['width'] ) * 100 . '%';
|
||||
$image_ratio_height = ! is_numeric( $attributes['mediaImage'][0]['height'] ) ? null : 0;
|
||||
$has_ratio = false;
|
||||
if ( $attributes['imageRatio'] && 'inherit' !== $attributes['imageRatio'] ) {
|
||||
$has_ratio = true;
|
||||
$image_ratio_height = 0;
|
||||
switch ( $attributes['imageRatio'] ) {
|
||||
case 'land43':
|
||||
$image_ratio_padding = '75%';
|
||||
break;
|
||||
case 'land32':
|
||||
$image_ratio_padding = '66.67%';
|
||||
break;
|
||||
case 'land169':
|
||||
$image_ratio_padding = '56.25%';
|
||||
break;
|
||||
case 'land21':
|
||||
$image_ratio_padding = '50%';
|
||||
break;
|
||||
case 'land31':
|
||||
$image_ratio_padding = '33%';
|
||||
break;
|
||||
case 'land41':
|
||||
$image_ratio_padding = '25%';
|
||||
break;
|
||||
case 'port34':
|
||||
$image_ratio_padding = '133.33%';
|
||||
break;
|
||||
case 'port23':
|
||||
$image_ratio_padding = '150%';
|
||||
break;
|
||||
default:
|
||||
$image_ratio_padding = '100%';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// non specific syles / variables
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id );
|
||||
if ( isset( $attributes['dropdownShadow'][0]['enable'] ) && $attributes['dropdownShadow'][0]['enable'] ) {
|
||||
$css->add_property( '--kb-nav-dropdown-box-shadow', $css->render_shadow( $attributes['dropdownShadow'][0] ) );
|
||||
}
|
||||
$css->render_measure_output(
|
||||
$attributes,
|
||||
'dropdownBorderRadius',
|
||||
'border-radius',
|
||||
[
|
||||
'desktop_key' => 'dropdownBorderRadius',
|
||||
'tablet_key' => 'dropdownBorderRadiusTablet',
|
||||
'mobile_key' => 'dropdownBorderRadiusMobile',
|
||||
'first_prop' => '--kb-nav-dropdown-border-top-left-radius',
|
||||
'second_prop' => '--kb-nav-dropdown-border-top-right-radius',
|
||||
'third_prop' => '--kb-nav-dropdown-border-bottom-right-radius',
|
||||
'fourth_prop' => '--kb-nav-dropdown-border-bottom-left-radius',
|
||||
]
|
||||
);
|
||||
$css->render_border_styles(
|
||||
$attributes,
|
||||
'dropdownBorder',
|
||||
false,
|
||||
[
|
||||
'renderAsVars' => true,
|
||||
'varBase' => '--kb-nav-dropdown-',
|
||||
]
|
||||
);
|
||||
if ( ! empty( $attributes['mediaStyle'][0] ) ) {
|
||||
$css->render_measure_output(
|
||||
$attributes['mediaStyle'][0],
|
||||
'padding',
|
||||
'padding',
|
||||
[
|
||||
'desktop_key' => 'padding',
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
'unit_key' => 'paddingType',
|
||||
'first_prop' => '--kb-nav-link-media-container-padding-top',
|
||||
'second_prop' => '--kb-nav-link-media-container-padding-right',
|
||||
'third_prop' => '--kb-nav-link-media-container-padding-bottom',
|
||||
'fourth_prop' => '--kb-nav-link-media-container-padding-left',
|
||||
]
|
||||
);
|
||||
}
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .sub-menu.sub-menu.sub-menu.sub-menu.sub-menu' );
|
||||
$css->render_measure_output( $attributes, 'marginDropdown', '--kb-nav-dropdown-margin', [ 'unit_key' => 'marginDropdownUnit' ] );
|
||||
$css->render_measure_output( $attributes, 'paddingDropdown', '--kb-nav-dropdown-padding', [ 'unit_key' => 'paddingDropdownUnit' ] );
|
||||
$css->render_measure_output( $attributes, 'marginDropdownLink', '--kb-nav-dropdown-link-margin', [ 'unit_key' => 'marginDropdownLinkUnit' ] );
|
||||
$css->render_measure_output( $attributes, 'paddingDropdownLink', '--kb-nav-dropdown-link-padding', [ 'unit_key' => 'paddingDropdownLinkUnit' ] );
|
||||
|
||||
// no bleed variables (extra specific to beat things like dropdown or top level styling)
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap' );
|
||||
$css->render_measure_output( $attributes, 'margin', '--kb-nav-link-margin', [ 'unit_key' => 'marginUnit' ] );
|
||||
$css->render_measure_output( $attributes, 'padding', '--kb-nav-link-padding', [ 'unit_key' => 'paddingUnit' ] );
|
||||
|
||||
// container styles
|
||||
$css->render_button_styles_with_states(
|
||||
[
|
||||
'colorBase' => 'linkColor',
|
||||
'backgroundBase' => 'background',
|
||||
'backgroundTypeBase' => 'backgroundType',
|
||||
'backgroundGradientBase' => 'backgroundGradient',
|
||||
'borderBase' => 'border',
|
||||
'borderRadiusBase' => 'borderRadius',
|
||||
'borderRadiusUnitBase' => 'borderRadiusUnit',
|
||||
'shadowBase' => 'shadow',
|
||||
'renderAsVars' => true,
|
||||
'varBase' => '--kb-nav-link-',
|
||||
],
|
||||
$attributes
|
||||
);
|
||||
if ( ! empty( $attributes['highlightLabel'] ) || ! empty( $attributes['highlightIcon']['icon'] ) ) {
|
||||
if ( isset( $attributes['highlightSpacing'][0] ) && is_array( $attributes['highlightSpacing'][0] ) ) {
|
||||
// $css->render_measure_output( $attributes['highlightSpacing'][0], 'margin', '--kb-nav-link-highlight-margin' );
|
||||
$css->render_measure_output( $attributes['highlightSpacing'][0], 'padding', '--kb-nav-link-highlight-padding' );
|
||||
$css->render_border_styles(
|
||||
$attributes['highlightSpacing'][0],
|
||||
'border',
|
||||
false,
|
||||
[
|
||||
'renderAsVars' => true,
|
||||
'varBase' => '--kb-nav-link-highlight-',
|
||||
]
|
||||
);
|
||||
$css->render_measure_output(
|
||||
$attributes['highlightSpacing'][0],
|
||||
'borderRadius',
|
||||
'border-radius',
|
||||
[
|
||||
'first_prop' => '--kb-nav-link-highlight-border-top-left-radius',
|
||||
'second_prop' => '--kb-nav-link-highlight-border-top-right-radius',
|
||||
'third_prop' => '--kb-nav-link-highlight-border-bottom-right-radius',
|
||||
'fourth_prop' => '--kb-nav-link-highlight-border-bottom-left-radius',
|
||||
]
|
||||
);
|
||||
$css->render_gap(
|
||||
$attributes['highlightSpacing'][0],
|
||||
'gap',
|
||||
'gap',
|
||||
'gapUnit',
|
||||
[
|
||||
'renderAsVars' => true,
|
||||
'varBase' => '--kb-nav-link-highlight-',
|
||||
]
|
||||
);
|
||||
$css->render_gap(
|
||||
$attributes['highlightSpacing'][0],
|
||||
'textGap',
|
||||
'gap',
|
||||
'gapUnit',
|
||||
[
|
||||
'renderAsVars' => true,
|
||||
'varBase' => '--kb-nav-link-highlight-text-',
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
$css->render_button_styles_with_states(
|
||||
[
|
||||
'colorBase' => 'mediaColor',
|
||||
'backgroundBase' => 'mediaBackground',
|
||||
'backgroundTypeBase' => 'mediaBackgroundType',
|
||||
'backgroundGradientBase' => 'mediaBackgroundGradient',
|
||||
'borderBase' => 'mediaBorder',
|
||||
'borderRadiusBase' => 'mediaBorderRadius',
|
||||
'borderRadiusUnitBase' => 'mediaBorderRadiusUnit',
|
||||
'renderAsVars' => true,
|
||||
'varBase' => '--kb-nav-link-media-container-',
|
||||
],
|
||||
$attributes
|
||||
);
|
||||
$css->add_property( '--kb-nav-link-media-max-width', $attributes['mediaImage'][0]['maxWidth'] . 'px' );
|
||||
if ( $has_ratio ) {
|
||||
// next level container
|
||||
$css->add_property( '--kb-nav-link-media-intrinsic-padding-bottom', $image_ratio_padding );
|
||||
$css->add_property( '--kb-nav-link-media-intrinsic-height', $image_ratio_height == 0 ? '0px' : $image_ratio_height, null, true );
|
||||
$css->add_property( '--kb-nav-link-media-intrinsic-width', ! is_numeric( $attributes['mediaImage'][0]['width'] ) ? null : $attributes['mediaImage'][0]['width'] . 'px' );
|
||||
}
|
||||
|
||||
// Image overlay: uses imageOverlayBackground* (Overlay Color) when media type is image. For image, the
|
||||
// container must not show background (it would appear as a box); only the overlay shows it.
|
||||
// Variables --kb-nav-link-media-container-background{, -hover, -active} are set in sized_dynamic_styles
|
||||
// from imageOverlayBackground* attributes (separate from mediaBackground* used for icon).
|
||||
if ( ! empty( $attributes['mediaType'] ) && 'image' === $attributes['mediaType'] ) {
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . '.kb-menu-has-image .link-media-container' );
|
||||
$css->add_property( 'background', 'transparent' );
|
||||
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' .link-media-container .kadence-navigation-link-image-intrinsic' );
|
||||
$css->add_property( 'position', 'relative' );
|
||||
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' .kb-nav-link-image-overlay' );
|
||||
$css->add_property( 'position', 'absolute' );
|
||||
$css->add_property( 'inset', '0' );
|
||||
$css->add_property( 'background-color', 'var(--kb-nav-link-media-container-background, transparent)' );
|
||||
$css->add_property( 'opacity', '0.5' );
|
||||
$css->add_property( 'pointer-events', 'none' );
|
||||
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' .kb-link-wrap:hover .kb-nav-link-image-overlay' );
|
||||
$css->add_property( 'background-color', 'var(--kb-nav-link-media-container-background-hover, var(--kb-nav-link-media-container-background, transparent))' );
|
||||
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' .kb-link-wrap:active .kb-nav-link-image-overlay' );
|
||||
$css->add_property( 'background-color', 'var(--kb-nav-link-media-container-background-active, var(--kb-nav-link-media-container-background-hover, var(--kb-nav-link-media-container-background, transparent)))' );
|
||||
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . '.current-menu-item .kb-nav-link-image-overlay' );
|
||||
$css->add_property( 'background-color', 'var(--kb-nav-link-media-container-background-active, var(--kb-nav-link-media-container-background, transparent))' );
|
||||
}
|
||||
|
||||
// styles that need a more speicifc selector
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap > .kb-nav-link-content' );
|
||||
$css->render_typography( $attributes );
|
||||
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' .sub-menu li.menu-item > .kb-link-wrap > .kb-nav-link-content' );
|
||||
$css->render_typography( $attributes, 'dropdownTypography' );
|
||||
|
||||
if ( ! empty( $attributes['highlightLabel'] ) || ! empty( $attributes['highlightIcon']['icon'] ) ) {
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap > .kb-nav-link-content .link-highlight-label' );
|
||||
$css->render_typography( $attributes, 'highlightTypography' );
|
||||
}
|
||||
|
||||
// description styles
|
||||
$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' .kb-nav-label-description' );
|
||||
$css->render_typography( $attributes, 'descriptionTypography' );
|
||||
|
||||
// dropdown description styles
|
||||
$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' .sub-menu .kb-nav-label-description' );
|
||||
$css->render_typography( $attributes, 'dropdownDescriptionTypography' );
|
||||
|
||||
// navigation highlight icon size
|
||||
if ( ! empty( $attributes['highlightIcon'][0]['icon'] ) && ! empty( $attributes['highlightIcon'][0]['size'] ) ) {
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' .link-highlight-label .link-highlight-icon-wrap svg' );
|
||||
$css->add_property( 'height', $attributes['highlightIcon'][0]['size'] . 'px' );
|
||||
$css->add_property( 'width', $attributes['highlightIcon'][0]['size'] . 'px' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['disableLink'] ) && true === $attributes['disableLink'] && ! $attributes['dropdownClick'] ) {
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap > .kb-nav-link-content' );
|
||||
$css->add_property( 'cursor', 'default' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build up the dynamic styles for a size.
|
||||
*
|
||||
* @param string $size The size.
|
||||
* @return array
|
||||
*/
|
||||
public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'Desktop' ) {
|
||||
$sized_attributes = $css->get_sized_attributes_auto( $attributes, $size, false );
|
||||
$sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size );
|
||||
|
||||
$media_style_background = $css->get_inherited_value( $attributes['mediaStyle'][0]['background'], $attributes['mediaStyle'][0]['backgroundTablet'], $attributes['mediaStyle'][0]['backgroundMobile'], $size, true );
|
||||
$media_style_background_hover = $css->get_inherited_value( $attributes['mediaStyle'][0]['backgroundHover'], $attributes['mediaStyle'][0]['backgroundHoverTablet'], $attributes['mediaStyle'][0]['backgroundHoverMobile'], $size, true );
|
||||
$media_style_background_active = $css->get_inherited_value( $attributes['mediaStyle'][0]['backgroundActive'], $attributes['mediaStyle'][0]['backgroundActiveTablet'], $attributes['mediaStyle'][0]['backgroundActiveMobile'], $size, true );
|
||||
$media_style_color = $css->get_inherited_value( $attributes['mediaStyle'][0]['color'], $attributes['mediaStyle'][0]['colorTablet'], $attributes['mediaStyle'][0]['colorMobile'], $size, true );
|
||||
$media_style_color_hover = $css->get_inherited_value( $attributes['mediaStyle'][0]['colorHover'], $attributes['mediaStyle'][0]['colorHoverTablet'], $attributes['mediaStyle'][0]['colorHoverMobile'], $size, true );
|
||||
$media_style_color_active = $css->get_inherited_value( $attributes['mediaStyle'][0]['colorActive'], $attributes['mediaStyle'][0]['colorActiveTablet'], $attributes['mediaStyle'][0]['colorActiveMobile'], $size, true );
|
||||
|
||||
$media_style_border_radius = $css->get_inherited_value( $attributes['mediaStyle'][0]['borderRadius'], $attributes['mediaStyle'][0]['borderRadiusTablet'], $attributes['mediaStyle'][0]['borderRadiusMobile'], $size, true );
|
||||
$media_style_margin = $css->get_inherited_value( $attributes['mediaStyle'][0]['margin'], $attributes['mediaStyle'][0]['marginTablet'], $attributes['mediaStyle'][0]['marginMobile'], $size, true );
|
||||
$media_icon_size = $css->get_inherited_value( $attributes['mediaIcon'][0]['size'], $attributes['mediaIcon'][0]['sizeTablet'], $attributes['mediaIcon'][0]['sizeMobile'], $size, true );
|
||||
|
||||
$is_fe_icon = 'fe' === substr( $attributes['mediaIcon'][0]['icon'], 0, 2 );
|
||||
|
||||
$is_mega_menu = ! empty( $attributes['isMegaMenu'] );
|
||||
|
||||
$css->set_media_state( strtolower( $size ) );
|
||||
|
||||
// no added specificty needed for these variables
|
||||
// these variable will slot into selectors found in the static stylesheet.
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id );
|
||||
$css->add_property( '--kb-nav-dropdown-link-color', $css->render_color( $sized_attributes['linkColorDropdown'] ), $sized_attributes['linkColorDropdown'] );
|
||||
$css->add_property( '--kb-nav-dropdown-link-color-hover', $css->render_color( $sized_attributes['linkColorDropdownHover'] ), $sized_attributes['linkColorDropdownHover'] );
|
||||
$css->add_property( '--kb-nav-dropdown-link-color-active', $css->render_color( $sized_attributes['linkColorDropdownActive'] ), $sized_attributes['linkColorDropdownActive'] );
|
||||
$css->add_property( '--kb-nav-dropdown-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorDropdownActive'] ), $sized_attributes['linkColorDropdownActive'] );
|
||||
$css->add_property( '--kb-nav-dropdown-background', $css->render_color( $sized_attributes['backgroundDropdown'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-background-hover', $css->render_color( $sized_attributes['backgroundDropdownHover'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-background-active', $css->render_color( $sized_attributes['backgroundDropdownActive'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-width', $css->render_size( $sized_attributes['dropdownWidth'], $sized_attributes['dropdownWidthUnit'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-padding-top', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-padding-bottom', $css->render_size( $sized_attributes['dropdownVerticalSpacing'], $attributes['dropdownVerticalSpacingUnit'] ) );
|
||||
if ( isset( $sized_attributes['dropdownDescriptionSpacing'] ) ) {
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-padding-top', $css->render_size( $sized_attributes['dropdownDescriptionSpacing'], $sized_attributes['dropdownDescriptionSpacingUnit'] ?? 'px' ) );
|
||||
}
|
||||
if ( isset( $sized_attributes['dropdownDescriptionColor'] ) ) {
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-color', $css->render_color( $sized_attributes['dropdownDescriptionColor'] ) );
|
||||
}
|
||||
if ( isset( $sized_attributes['dropdownDescriptionColorHover'] ) ) {
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-color-hover', $css->render_color( $sized_attributes['dropdownDescriptionColorHover'] ) );
|
||||
}
|
||||
if ( isset( $sized_attributes['dropdownDescriptionColorActive'] ) ) {
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-color-active', $css->render_color( $sized_attributes['dropdownDescriptionColorActive'] ) );
|
||||
$css->add_property( '--kb-nav-dropdown-link-description-color-active-ancestor', $css->render_color( $sized_attributes['dropdownDescriptionColorActive'] ) );
|
||||
}
|
||||
if ( $is_mega_menu ) {
|
||||
if ( $sized_attributes['megaMenuWidth'] === 'container' ) {
|
||||
$css->add_property( '--kb-nav-link-has-children-position', 'static' );
|
||||
}
|
||||
}
|
||||
|
||||
// no bleed variables (extra specific to beat things like dropdown or top level styling)
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap' );
|
||||
$css->add_property( '--kb-nav-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorActive'] ), $sized_attributes['linkColorActive'] );
|
||||
$css->add_property( '--kb-nav-link-background-active-ancestor', $css->render_color( $sized_attributes['backgroundActive'] ), $sized_attributes['backgroundActive'] );
|
||||
$css->add_property( '--kb-nav-link-highlight-color', $css->render_color( $sized_attributes['labelColor'] ), $sized_attributes['labelColor'] );
|
||||
$css->add_property( '--kb-nav-link-highlight-color-hover', $css->render_color( $sized_attributes['labelColorHover'] ), $sized_attributes['labelColorHover'] );
|
||||
$css->add_property( '--kb-nav-link-highlight-color-active', $css->render_color( $sized_attributes['labelColorActive'] ), $sized_attributes['labelColorActive'] );
|
||||
$css->add_property( '--kb-nav-link-highlight-color-active-ancestor', $css->render_color( $sized_attributes['labelColorActive'] ), $sized_attributes['labelColorActive'] );
|
||||
$css->add_property( '--kb-nav-link-highlight-background', $css->render_color( $sized_attributes['labelBackground'] ), $sized_attributes['labelBackground'] );
|
||||
$css->add_property( '--kb-nav-link-highlight-background-hover', $css->render_color( $sized_attributes['labelBackgroundHover'] ), $sized_attributes['labelBackgroundHover'] );
|
||||
$css->add_property( '--kb-nav-link-highlight-background-active', $css->render_color( $sized_attributes['labelBackgroundActive'] ), $sized_attributes['labelBackgroundActive'] );
|
||||
$css->add_property( '--kb-nav-link-highlight-background-active-ancestor', $css->render_color( $sized_attributes['labelBackgroundActive'] ), $sized_attributes['labelBackgroundActive'] );
|
||||
|
||||
// additional dynamic logic, but still lands in a slot in the static stylesheet
|
||||
if ( 'left' === $sized_attributes['highlightSide'] ) {
|
||||
$css->add_property( '--kb-nav-link-highlight-order', '-1' );
|
||||
} elseif ( 'right' === $sized_attributes['highlightSide'] ) {
|
||||
$css->add_property( '--kb-nav-link-highlight-order', '3' );
|
||||
}
|
||||
if ( 'left' === $sized_attributes['iconSide'] ) {
|
||||
$css->add_property( '--kb-nav-link-highlight-icon-order', '-1' );
|
||||
} elseif ( 'right' === $sized_attributes['iconSide'] ) {
|
||||
$css->add_property( '--kb-nav-link-highlight-icon-order', '3' );
|
||||
}
|
||||
|
||||
|
||||
// Icon and description placement.
|
||||
if ( $sized_attributes['description'] ) {
|
||||
$css->add_property( '--kb-nav-link-title-wrap-display', 'grid' );
|
||||
$css->add_property( '--kb-nav-link-title-wrap-grid-template-columns', '1fr' );
|
||||
}
|
||||
if ( $sized_attributes['description'] && ( $sized_attributes['mediaType'] == 'icon' || $sized_attributes['mediaType'] == 'image' ) && ( $sized_attributes['mediaAlign'] == 'left' || $sized_attributes['mediaAlign'] == 'right' ) ) {
|
||||
$css->add_property( '--kb-nav-link-title-wrap-display', 'grid' );
|
||||
$css->add_property( '--kb-nav-link-title-wrap-grid-template-columns', '1fr auto' );
|
||||
|
||||
if ( $sized_attributes['descriptionPositioning'] == 'icon' ) {
|
||||
$css->add_property( '--kb-nav-link-description-grid-column', 'span 2' );
|
||||
} elseif ( $sized_attributes['mediaAlign'] == 'right' ) {
|
||||
$css->add_property( '--kb-nav-link-description-grid-column', '1' );
|
||||
} else {
|
||||
$css->add_property( '--kb-nav-link-description-grid-column', '2' );
|
||||
}
|
||||
}
|
||||
|
||||
// Media styles.
|
||||
if ( $attributes['mediaType'] && 'none' !== $attributes['mediaType'] ) {
|
||||
$css->add_property( '--kb-nav-link-icon-font-size', $css->render_size( $media_icon_size, 'px' ) );
|
||||
// $css->add_property( '--kb-nav-link-icon-height', $css->render_size( $media_icon_size, 'px' ) );
|
||||
|
||||
// Image overlay: set overlay color variables on .link-media-container so the overlay can use them.
|
||||
// Uses imageOverlayBackground* attributes (separate from mediaBackground used for icon).
|
||||
if ( 'image' === $attributes['mediaType'] ) {
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . '.kb-menu-has-image .link-media-container' );
|
||||
$overlay_bg = $css->render_color( $css->get_inherited_value( $attributes['imageOverlayBackground'] ?? '', $attributes['imageOverlayBackgroundTablet'] ?? '', $attributes['imageOverlayBackgroundMobile'] ?? '', $size, true ) );
|
||||
$overlay_bg_hover = $css->render_color( $css->get_inherited_value( $attributes['imageOverlayBackgroundHover'] ?? '', $attributes['imageOverlayBackgroundHoverTablet'] ?? '', $attributes['imageOverlayBackgroundHoverMobile'] ?? '', $size, true ) );
|
||||
$overlay_bg_active = $css->render_color( $css->get_inherited_value( $attributes['imageOverlayBackgroundActive'] ?? '', $attributes['imageOverlayBackgroundActiveTablet'] ?? '', $attributes['imageOverlayBackgroundActiveMobile'] ?? '', $size, true ) );
|
||||
if ( '' !== $overlay_bg ) {
|
||||
$css->add_property( '--kb-nav-link-media-container-background', $overlay_bg );
|
||||
}
|
||||
if ( '' !== $overlay_bg_hover ) {
|
||||
$css->add_property( '--kb-nav-link-media-container-background-hover', $overlay_bg_hover );
|
||||
}
|
||||
if ( '' !== $overlay_bg_active ) {
|
||||
$css->add_property( '--kb-nav-link-media-container-background-active', $overlay_bg_active );
|
||||
}
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap' );
|
||||
}
|
||||
|
||||
if ( $sized_attributes['mediaAlign'] == 'left' ) {
|
||||
$css->add_property( '--kb-nav-link-media-container-order', '-1' );
|
||||
$css->add_property( '--kb-nav-link-media-container-margin-right', $css->render_size( $media_style_margin[0], 'px' ) );
|
||||
$css->add_property( '--kb-nav-link-title-wrap-has-media-grid-template-columns', 'auto 1fr' );
|
||||
|
||||
} elseif ( $sized_attributes['mediaAlign'] == 'top' ) {
|
||||
$css->add_property( '--kb-nav-link-title-wrap-display', 'flex' );
|
||||
$css->add_property( '--kb-nav-link-media-container-order', '-1' );
|
||||
$css->add_property( '--kb-nav-link-title-wrap-flex-direction', 'column' );
|
||||
$css->add_property( '--kb-nav-link-media-container-justify-content', 'center' );
|
||||
$css->add_property( '--kb-nav-link-media-container-align-self', 'center' );
|
||||
$css->add_property( '--kb-nav-link-media-container-margin-bottom', $css->render_size( $media_style_margin[0], 'px' ) );
|
||||
} elseif ( $sized_attributes['mediaAlign'] == 'bottom' ) {
|
||||
$css->add_property( '--kb-nav-link-title-wrap-display', 'flex' );
|
||||
$css->add_property( '--kb-nav-link-media-container-order', '1' );
|
||||
$css->add_property( '--kb-nav-link-title-wrap-flex-direction', 'column' );
|
||||
$css->add_property( '--kb-nav-link-media-container-justify-content', 'center' );
|
||||
$css->add_property( '--kb-nav-link-media-container-align-self', 'center' );
|
||||
$css->add_property( '--kb-nav-link-media-container-margin-top', $css->render_size( $media_style_margin[0], 'px' ) );
|
||||
} else {
|
||||
$css->add_property( '--kb-nav-link-media-container-margin-left', $css->render_size( $media_style_margin[0], 'px' ) );
|
||||
}
|
||||
}
|
||||
|
||||
// Description styles.
|
||||
if ( isset( $sized_attributes['descriptionSpacing'] ) ) {
|
||||
$css->add_property( '--kb-nav-link-description-padding-top', $css->render_size( $sized_attributes['descriptionSpacing'], $sized_attributes['descriptionSpacingUnit'] ?? 'px' ) );
|
||||
}
|
||||
if ( isset( $sized_attributes['descriptionColor'] ) ) {
|
||||
$css->add_property( '--kb-nav-link-description-color', $css->render_color( $sized_attributes['descriptionColor'] ) );
|
||||
}
|
||||
if ( isset( $sized_attributes['descriptionColorHover'] ) ) {
|
||||
$css->add_property( '--kb-nav-link-description-color-hover', $css->render_color( $sized_attributes['descriptionColorHover'] ) );
|
||||
}
|
||||
if ( isset( $sized_attributes['descriptionColorActive'] ) ) {
|
||||
$css->add_property( '--kb-nav-link-description-color-active', $css->render_color( $sized_attributes['descriptionColorActive'] ) );
|
||||
$css->add_property( '--kb-nav-link-description-color-active-ancestor', $css->render_color( $sized_attributes['descriptionColorActive'] ) );
|
||||
}
|
||||
|
||||
// link, description, and media alignment
|
||||
if ( $sized_attributes['align'] ) {
|
||||
$css->add_property( '--kb-nav-link-align', $sized_attributes['align'] );
|
||||
$sized_flex_align = $sized_attributes['align'] == 'right' ? 'end' : ( $sized_attributes['align'] == 'center' ? 'center' : 'start' );
|
||||
$css->add_property( '--kb-nav-link-flex-justify', $sized_flex_align );
|
||||
$css->add_property( '--kb-nav-link-media-container-align-self', $sized_flex_align );
|
||||
if ( $sized_attributes['mediaAlign'] == 'top' || $sized_attributes['mediaAlign'] ) {
|
||||
$css->add_property( '--kb-nav-link-flex-align', $sized_flex_align );
|
||||
}
|
||||
}
|
||||
|
||||
// placement logic where an additional selector is needed
|
||||
// Mega menu width styles.
|
||||
if ( $is_mega_menu ) {
|
||||
if ( $sized_attributes['megaMenuWidth'] === 'custom' ) {
|
||||
// first sub menu only, no bleed
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .sub-menu.sub-menu.sub-menu.sub-menu.sub-menu' );
|
||||
$css->add_property( '--kb-nav-dropdown-width', $css->render_size( $sized_attributes['megaMenuCustomWidth'], $sized_attributes['megaMenuCustomWidthUnit'] ) );
|
||||
if ( ! empty( $sized_attributes['dropdownHorizontalAlignment'] ) ) {
|
||||
if ( $sized_attributes['dropdownHorizontalAlignment'] == 'center' ) {
|
||||
$css->add_property( '--kb-nav-dropdown-show-left', '50%' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-right', 'unset' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-transform-x', '-50%' );
|
||||
$css->add_property( '--kb-nav-dropdown-hide-transform-x', '-50%' );
|
||||
} elseif ( $sized_attributes['dropdownHorizontalAlignment'] == 'right' ) {
|
||||
$css->add_property( '--kb-nav-dropdown-show-right', '0px' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-left', 'unset' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-transform-x', '0px' );
|
||||
$css->add_property( '--kb-nav-dropdown-hide-transform-x', '0px' );
|
||||
} elseif ( $sized_attributes['dropdownHorizontalAlignment'] == 'left' ) {
|
||||
$css->add_property( '--kb-nav-dropdown-show-left', '0px' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-right', 'unset' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-transform-x', '0px' );
|
||||
$css->add_property( '--kb-nav-dropdown-hide-transform-x', '0px' );
|
||||
}
|
||||
}
|
||||
} elseif ( $sized_attributes['megaMenuWidth'] === 'full' || $sized_attributes['megaMenuWidth'] === '' ) {
|
||||
// this is handled by a seperate js file
|
||||
} elseif ( $sized_attributes['megaMenuWidth'] === 'container' || $sized_attributes['megaMenuWidth'] === 'content' ) {
|
||||
// first sub menu only, no bleed
|
||||
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .sub-menu.sub-menu.sub-menu.sub-menu.sub-menu' );
|
||||
$css->add_property( '--kb-nav-dropdown-width', '100%' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-left', '0' );
|
||||
$css->add_property( '--kb-nav-dropdown-show-transform-x', '0' );
|
||||
}
|
||||
}
|
||||
|
||||
// transparent styles
|
||||
$css->set_selector( '.header-' . strtolower( $size ) . '-transparent .kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap' );
|
||||
$css->add_property( '--kb-nav-link-color', $css->render_color( $sized_attributes['linkColorTransparent'] ), $sized_attributes['linkColorTransparent'] );
|
||||
$css->add_property( '--kb-nav-link-color-hover', $css->render_color( $sized_attributes['linkColorTransparentHover'] ), $sized_attributes['linkColorTransparentHover'] );
|
||||
$css->add_property( '--kb-nav-link-color-active', $css->render_color( $sized_attributes['linkColorTransparentActive'] ), $sized_attributes['linkColorTransparentActive'] );
|
||||
$css->add_property( '--kb-nav-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorTransparentActive'] ), $sized_attributes['linkColorTransparentActive'] );
|
||||
$css->add_property( '--kb-nav-link-background', $css->render_color( $sized_attributes['backgroundTransparent'] ), $sized_attributes['backgroundTransparent'] );
|
||||
$css->add_property( '--kb-nav-link-background-hover', $css->render_color( $sized_attributes['backgroundTransparentHover'] ), $sized_attributes['backgroundTransparentHover'] );
|
||||
$css->add_property( '--kb-nav-link-background-active', $css->render_color( $sized_attributes['backgroundTransparentActive'] ), $sized_attributes['backgroundTransparentActive'] );
|
||||
$css->add_property( '--kb-nav-link-background-active-ancestor', $css->render_color( $sized_attributes['backgroundTransparentActive'] ), $sized_attributes['backgroundTransparentActive'] );
|
||||
|
||||
// sticky styles
|
||||
$css->set_selector( '.item-is-stuck .kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap' );
|
||||
$css->add_property( '--kb-nav-link-color', $css->render_color( $sized_attributes['linkColorSticky'] ), $sized_attributes['linkColorSticky'] );
|
||||
$css->add_property( '--kb-nav-link-color-hover', $css->render_color( $sized_attributes['linkColorStickyHover'] ), $sized_attributes['linkColorStickyHover'] );
|
||||
$css->add_property( '--kb-nav-link-color-active', $css->render_color( $sized_attributes['linkColorStickyActive'] ), $sized_attributes['linkColorStickyActive'] );
|
||||
$css->add_property( '--kb-nav-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorStickyActive'] ), $sized_attributes['linkColorStickyActive'] );
|
||||
$css->add_property( '--kb-nav-link-background', $css->render_color( $sized_attributes['backgroundSticky'] ), $sized_attributes['backgroundSticky'] );
|
||||
$css->add_property( '--kb-nav-link-background-hover', $css->render_color( $sized_attributes['backgroundStickyHover'] ), $sized_attributes['backgroundStickyHover'] );
|
||||
$css->add_property( '--kb-nav-link-background-active', $css->render_color( $sized_attributes['backgroundStickyActive'] ), $sized_attributes['backgroundStickyActive'] );
|
||||
$css->add_property( '--kb-nav-link-background-active-ancestor', $css->render_color( $sized_attributes['backgroundStickyActive'] ), $sized_attributes['backgroundStickyActive'] );
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul li:not(:last-of-type), .wp-block-kadence-navigation .menu-container ul.menu > li.kb-nav-link-' . $unique_id . '.kadence-menu-mega-enabled > ul > li.menu-item > a' );
|
||||
$css->add_property( '--kb-nav-menu-item-border-bottom', $css->render_border( $sized_attributes['dropdownDivider'], 'bottom' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for dynamic blocks
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
// Prevent a nav block from being rendered inside itself.
|
||||
if ( isset( $attributes['id'] ) && isset( self::$seen_refs[ $attributes['id'] ] ) ) {
|
||||
// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
|
||||
// is set in 'wp_debug_mode()'.
|
||||
$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
|
||||
|
||||
return $is_debug ?
|
||||
// translators: Visible only in the front end, this warning takes the place of a faulty block.
|
||||
__( '[block rendering halted]', 'kadence-blocks' ) :
|
||||
'';
|
||||
}
|
||||
if ( isset( $attributes['id'] ) ) {
|
||||
self::$seen_refs[ $attributes['id'] ] = true;
|
||||
}
|
||||
|
||||
$child_info = $this->get_child_info( $block_instance );
|
||||
|
||||
// Handle embeds for nav block.
|
||||
global $wp_embed;
|
||||
$content = $wp_embed->run_shortcode( $content );
|
||||
$content = $wp_embed->autoembed( $content );
|
||||
$content = do_blocks( $content );
|
||||
|
||||
if ( isset( $attributes['id'] ) ) {
|
||||
unset( self::$seen_refs[ $attributes['id'] ] );
|
||||
}
|
||||
|
||||
$label = ! empty( $attributes['label'] ) ? $attributes['label'] : '';
|
||||
$url = $this->get_url( $attributes );
|
||||
$has_children = ! empty( $content );
|
||||
$has_highlight_label = ! empty( $attributes['highlightLabel'] ) || ! empty( $attributes['highlightIcon'][0]['icon'] );
|
||||
$kind = ! empty( $attributes['kind'] ) ? str_replace( '-', '_', $attributes['kind'] ) : 'post_type';
|
||||
$is_active_ancestor = $child_info['has_active_child'];
|
||||
$is_active = $this->is_current( $attributes );
|
||||
$is_mega_menu = ! empty( $attributes['isMegaMenu'] );
|
||||
$has_icon = $attributes['mediaType'] == 'icon' && ! empty( $attributes['mediaIcon'][0]['icon'] );
|
||||
$has_image = $attributes['mediaType'] == 'image' && ! empty( $attributes['mediaImage'][0]['url'] );
|
||||
|
||||
$desktop_width = ! empty( $attributes['megaMenuWidth'] ) ? $attributes['megaMenuWidth'] : 'full';
|
||||
$tablet_width = ! empty( $attributes['megaMenuWidthTablet'] ) ? $attributes['megaMenuWidthTablet'] : $desktop_width;
|
||||
$mobile_width = ! empty( $attributes['megaMenuWidthMobile'] ) ? $attributes['megaMenuWidthMobile'] : $tablet_width;
|
||||
|
||||
$mega_menu_width_class = 'kb-menu-mega-width-' . $desktop_width;
|
||||
$mega_menu_width_class_tablet = 'kb-menu-mega-width-tablet-' . $tablet_width;
|
||||
$mega_menu_width_class_mobile = 'kb-menu-mega-width-mobile-' . $mobile_width;
|
||||
|
||||
$wrapper_classes = [];
|
||||
$wrapper_classes[] = 'wp-block-kadence-navigation-link';
|
||||
$wrapper_classes[] = 'kb-nav-link-' . $unique_id;
|
||||
$wrapper_classes[] = 'menu-item';
|
||||
if ( $has_children ) {
|
||||
$wrapper_classes[] = 'menu-item-has-children';
|
||||
}
|
||||
if ( $has_children && isset( $attributes['dropdownClick'] ) && true === $attributes['dropdownClick'] ) {
|
||||
$wrapper_classes[] = 'kb-nav-link-sub-click';
|
||||
}
|
||||
if ( $is_active ) {
|
||||
$wrapper_classes[] = 'current-menu-item';
|
||||
}
|
||||
if ( $is_active_ancestor ) {
|
||||
$wrapper_classes[] = 'current-menu-ancestor';
|
||||
}
|
||||
if ( $is_mega_menu ) {
|
||||
$wrapper_classes[] = 'kadence-menu-mega-enabled';
|
||||
$wrapper_classes[] = $mega_menu_width_class;
|
||||
$wrapper_classes[] = $mega_menu_width_class_tablet;
|
||||
$wrapper_classes[] = $mega_menu_width_class_mobile;
|
||||
}
|
||||
if ( ! empty( $attributes['description'] ) ) {
|
||||
$wrapper_classes[] = 'kb-menu-has-description';
|
||||
}
|
||||
if ( $has_icon ) {
|
||||
$wrapper_classes[] = 'kb-menu-has-icon';
|
||||
}
|
||||
if ( $has_image ) {
|
||||
$wrapper_classes[] = 'kb-menu-has-image';
|
||||
}
|
||||
if ( $has_icon || $has_image ) {
|
||||
$wrapper_classes[] = 'kb-menu-has-media';
|
||||
}
|
||||
$wrapper_args = [ 'class' => implode( ' ', $wrapper_classes ) ];
|
||||
if ( ! empty( $attributes['anchor'] ) ) {
|
||||
$wrapper_args['id'] = $attributes['anchor'];
|
||||
}
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
|
||||
$down_arrow_icon = '<svg aria-hidden="true" class="kb-nav-arrow-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">';
|
||||
$down_arrow_icon .= '<path d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>';
|
||||
$down_arrow_icon .= '</svg>';
|
||||
$down_arrow_icon = apply_filters( 'kadence_blocks_navigation_link_down_arrow_icon', $down_arrow_icon );
|
||||
|
||||
$sub_menu_classes = [];
|
||||
$sub_menu_classes[] = 'sub-menu';
|
||||
$sub_menu_classes[] = 'kb-nav-sub-menu';
|
||||
if ( $is_mega_menu ) {
|
||||
$sub_menu_classes[] = 'mega-menu';
|
||||
}
|
||||
$sub_menu_attributes = $this->build_html_attributes(
|
||||
[
|
||||
'class' => implode( ' ', $sub_menu_classes ),
|
||||
]
|
||||
);
|
||||
$title = ! empty( $attributes['hideLabel'] ) && true === $attributes['hideLabel'] ? '' : wp_kses_post( $label );
|
||||
$sub_menu_content = $has_children ? '<ul ' . $sub_menu_attributes . '>' . $content . '</ul>' : '';
|
||||
$sub_menu_btn = $has_children ? '<button aria-label="' . esc_attr__( 'Toggle child menu of', 'kadence-blocks' ) . ' ' . esc_attr( $title ) . '" class="kb-nav-dropdown-toggle-btn" aria-expanded="false">' . $down_arrow_icon . '</button>' : '';
|
||||
$media = '';
|
||||
$svg_icon = '';
|
||||
if ( $has_icon ) {
|
||||
$type = substr( $attributes['mediaIcon'][0]['icon'], 0, 2 );
|
||||
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = ( ! empty( $attributes['mediaIcon'][0]['width'] ) ? $attributes['mediaIcon'][0]['width'] : 2 );
|
||||
}
|
||||
$icon_title = ( ! empty( $attributes['mediaIcon'][0]['title'] ) ? $attributes['mediaIcon'][0]['title'] : '' );
|
||||
$hidden = ( empty( $icon_title ) ? true : false );
|
||||
$svg_icon = Kadence_Blocks_Svg_Render::render( $attributes['mediaIcon'][0]['icon'], $fill, $stroke_width, $icon_title, $hidden );
|
||||
|
||||
$media = ! empty( $svg_icon ) ? '<div class="link-media-container"><span class="link-media-icon-wrap link-svg-icon link-svg-icon-' . esc_attr( $attributes['mediaIcon'][0]['icon'] ) . '">' . $svg_icon . '</span></div>' : '';
|
||||
} elseif ( $has_image ) {
|
||||
$has_ratio = false;
|
||||
if ( $attributes['imageRatio'] && 'inherit' !== $attributes['imageRatio'] ) {
|
||||
$has_ratio = true;
|
||||
}
|
||||
$image = wp_get_attachment_image( $attributes['mediaImage'][0]['id'], [ $attributes['mediaImage'][0]['width'], $attributes['mediaImage'][0]['height'] ] );
|
||||
|
||||
$overlay_html = '<div class="kb-nav-link-image-overlay" aria-hidden="true"></div>';
|
||||
$container_start = '<div class="kadence-navigation-link-image-inner-intrinsic-container">
|
||||
<div class="kadence-navigation-link-image-intrinsic' . ( 'svg+xml' == $attributes['mediaImage'][0]['subtype'] ? ' kb-navigation-link-image-type-svg' : '' ) . ( $has_ratio ? ' kb-navigation-link-image-ratio kb-navigation-link-image-ratio-' . $attributes['imageRatio'] : '' ) . '">
|
||||
<div class="kadence-navigation-link-image-inner-intrinsic">';
|
||||
$container_end = '</div>' . $overlay_html . '</div></div>';
|
||||
|
||||
$media = $image ? '<div class="link-media-container">' . $container_start . $image . $container_end . '</div>' : '';
|
||||
}
|
||||
$highlight_icon = '';
|
||||
if ( ! empty( $attributes['highlightIcon'][0]['icon'] ) ) {
|
||||
$type = substr( $attributes['highlightIcon'][0]['icon'], 0, 2 );
|
||||
$icon_size = isset( $attributes['highlightIcon'][0]['size'] ) && is_numeric( $attributes['highlightIcon'][0]['size'] ) ? $attributes['highlightIcon'][0]['size'] : '';
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
|
||||
$stroke_width = false;
|
||||
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = ( ! empty( $attributes['highlightIcon'][0]['width'] ) ? $attributes['highlightIcon'][0]['width'] : 2 );
|
||||
}
|
||||
$high_icon_title = ( ! empty( $attributes['highlightIcon'][0]['title'] ) ? $attributes['highlightIcon'][0]['title'] : '' );
|
||||
$hidden = ( empty( $high_icon_title ) ? true : false );
|
||||
$highlight_icon = Kadence_Blocks_Svg_Render::render( $attributes['highlightIcon'][0]['icon'], $fill, $stroke_width, $high_icon_title, $hidden );
|
||||
}
|
||||
$hl_icon = ! empty( $highlight_icon ) && $has_highlight_label ? '<span class="link-highlight-icon-wrap link-svg-icon link-svg-icon-' . esc_attr( $attributes['highlightIcon'][0]['icon'] ) . '">' . $highlight_icon . '</span>' : '';
|
||||
$highlight_label = '';
|
||||
$link_classes = [ 'kb-nav-link-content' ];
|
||||
$highlight_with_title = ! empty( $attributes['highlightPosition'] ) && $attributes['highlightPosition'] === 'title' ? true : false;
|
||||
if ( $has_highlight_label ) {
|
||||
$link_classes[] = 'has-highlight-label';
|
||||
if ( $highlight_with_title ) {
|
||||
$link_classes[] = 'highlight-with-title';
|
||||
}
|
||||
$highlight_label = '<span class="link-highlight-label"><span class="link-highlight-label-text">' . $attributes['highlightLabel'] . '</span>' . $hl_icon . '</span>';
|
||||
}
|
||||
|
||||
$title_html = ! empty( $media ) || ! empty( $attributes['description'] ) ? '<span class="kb-nav-item-title-wrap">' : '';
|
||||
if ( $has_highlight_label && $highlight_with_title ) {
|
||||
$title .= $highlight_label;
|
||||
}
|
||||
$title_html .= ! empty( $attributes['description'] ) || ! empty( $media ) || ( $has_highlight_label && $highlight_with_title ) ? '<span class="kb-nav-label-content">' . $title . '</span>' : $title;
|
||||
$title_html .= $media;
|
||||
$title_html .= ! empty( $attributes['description'] ) ? '<span class="kb-nav-label-description">' . $attributes['description'] . '</span>' : '';
|
||||
// $title_html .= $has_children ? '<span class="kb-nav-dropdown-toggle">' . $down_arrow_icon . '</span>' : '';
|
||||
$title_html .= ! empty( $media ) || ! empty( $attributes['description'] ) ? '</span>' : '';
|
||||
if ( ! $highlight_with_title ) {
|
||||
$title_html .= $highlight_label;
|
||||
}
|
||||
$link_tag = 'a';
|
||||
$link_args = [
|
||||
'class' => implode( ' ', $link_classes ),
|
||||
'href' => $url,
|
||||
];
|
||||
|
||||
if ( ! empty( $attributes['name'] ) ) {
|
||||
$link_args['aria-label'] = $attributes['name'];
|
||||
}
|
||||
if ( ! empty( $attributes['target'] ) ) {
|
||||
$link_args['target'] = $attributes['target'];
|
||||
}
|
||||
if ( ! empty( $attributes['rel'] ) ) {
|
||||
$link_args['rel'] = $attributes['rel'];
|
||||
}
|
||||
// Link with disabled link and no children or dropdown click.
|
||||
if ( ! empty( $attributes['disableLink'] ) && true === $attributes['disableLink'] && ! $has_children && ! ( isset( $attributes['dropdownClick'] ) && true === $attributes['dropdownClick'] ) ) {
|
||||
$link_tag = 'span';
|
||||
unset( $link_args['href'] );
|
||||
unset( $link_args['aria-label'] );
|
||||
unset( $link_args['target'] );
|
||||
unset( $link_args['rel'] );
|
||||
}
|
||||
// Link with disabled link and children but no dropdown click.
|
||||
if ( ! empty( $attributes['disableLink'] ) && true === $attributes['disableLink'] && $has_children && ! ( isset( $attributes['dropdownClick'] ) && true === $attributes['dropdownClick'] ) ) {
|
||||
unset( $link_args['href'] );
|
||||
unset( $link_args['aria-label'] );
|
||||
unset( $link_args['target'] );
|
||||
unset( $link_args['rel'] );
|
||||
$link_args['role'] = 'button';
|
||||
}
|
||||
if ( $has_children && isset( $attributes['dropdownClick'] ) && true === $attributes['dropdownClick'] ) {
|
||||
$link_args['role'] = 'button';
|
||||
unset( $link_args['href'] );
|
||||
unset( $link_args['target'] );
|
||||
unset( $link_args['rel'] );
|
||||
}
|
||||
|
||||
$link_args = apply_filters( 'kadence_blocks_navigation_link_args', $link_args, $attributes );
|
||||
$inner_link_attributes = [];
|
||||
foreach ( $link_args as $key => $value ) {
|
||||
$inner_link_attributes[] = $key . '="' . ( 'href' === $key ? esc_url( $value ) : esc_attr( $value ) ) . '"';
|
||||
}
|
||||
$inner_attributes = implode( ' ', $inner_link_attributes );
|
||||
return sprintf(
|
||||
'<li %1$s><div class="kb-link-wrap"><%2$s %3$s>%4$s</%2$s>%5$s</div>%6$s</li>',
|
||||
$wrapper_attributes,
|
||||
$link_tag,
|
||||
$inner_attributes,
|
||||
$title_html,
|
||||
$sub_menu_btn,
|
||||
$sub_menu_content,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds an html attribute string from an array of keys and values.
|
||||
*
|
||||
* @param array $attributes The database attribtues.
|
||||
* @return array
|
||||
*/
|
||||
public function build_html_attributes( $attributes ) {
|
||||
if ( empty( $attributes ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$normalized_attributes = [];
|
||||
foreach ( $attributes as $key => $value ) {
|
||||
$normalized_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
|
||||
return implode( ' ', $normalized_attributes );
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse content data, looking for data about child nav links.
|
||||
*
|
||||
* @param stdObject $block_instance This blocks instance object.
|
||||
* @return array
|
||||
*/
|
||||
public function get_child_info( $block_instance ) {
|
||||
$child_info = [
|
||||
'has_active_child' => false,
|
||||
];
|
||||
if ( property_exists( $block_instance, 'inner_blocks' ) && $block_instance->inner_blocks ) {
|
||||
foreach ( $block_instance->inner_blocks as $inner_block ) {
|
||||
if ( $inner_block->name == 'kadence/navigation-link' ) {
|
||||
if ( isset( $inner_block->attributes ) ) {
|
||||
if ( $this->is_current( $inner_block->attributes ) ) {
|
||||
$child_info['has_active_child'] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$inner_child_info = $this->get_child_info( $inner_block );
|
||||
|
||||
if ( $inner_child_info['has_active_child'] ) {
|
||||
$child_info['has_active_child'] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $child_info;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a nav link item is current.
|
||||
*
|
||||
* @param array $attributes an attributes array.
|
||||
* @return boolean
|
||||
*/
|
||||
public function is_current( $attributes ) {
|
||||
global $wp;
|
||||
|
||||
$link_matches = untrailingslashit( $attributes['url'] ) === untrailingslashit( home_url( $wp->request ) );
|
||||
return ( ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->post_type ) ) || $link_matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the url from the post id if available, otherwise use the url in attributes.
|
||||
*
|
||||
* @param array $attributes an attributes array.
|
||||
* @return string
|
||||
*/
|
||||
public function get_url( $attributes ) {
|
||||
$kind = ! empty( $attributes['kind'] ) ? $attributes['kind'] : '';
|
||||
$type = ! empty( $attributes['type'] ) ? $attributes['type'] : '';
|
||||
$is_post_type = $kind === 'post-type' || $type === 'post' || $type === 'page';
|
||||
$has_synced_link = $is_post_type && $kind === 'post-type' && ! empty( $attributes['id'] ) && ( isset( $attributes['disableLink'] ) && ! $attributes['disableLink'] );
|
||||
|
||||
if ( $has_synced_link && ! empty( $attributes['id'] ) ) {
|
||||
$permalink = get_permalink( $attributes['id'] );
|
||||
if ( $permalink ) {
|
||||
return $permalink;
|
||||
}
|
||||
}
|
||||
|
||||
return ! empty( $attributes['url'] ) ? $attributes['url'] : '';
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Navigation_Link_Block::get_instance();
|
||||
@@ -0,0 +1,366 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Posts Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Posts Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Posts_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'posts';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$title_font = ( isset( $attributes ) && is_array( $attributes ) && isset( $attributes['titleFont'] ) && is_array( $attributes['titleFont'] ) && isset( $attributes['titleFont'][0] ) && is_array( $attributes['titleFont'][0] ) ? $attributes['titleFont'][0] : [] );
|
||||
$css->set_selector( '.kb-posts-id-' . $unique_id . ' .entry.loop-entry .entry-header .entry-title' );
|
||||
if ( isset( $title_font['size'] ) && is_array( $title_font['size'] ) && isset( $title_font['size'][0] ) && ! empty( $title_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $title_font['size'][0], ( ! isset( $title_font['sizeType'] ) ? 'px' : $title_font['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $title_font['lineHeight'] ) && is_array( $title_font['lineHeight'] ) && isset( $title_font['lineHeight'][0] ) && ! empty( $title_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $title_font['lineHeight'][0] . ( ! isset( $title_font['lineType'] ) ? 'px' : $title_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $title_font['letterSpacing'] ) && is_array( $title_font['letterSpacing'] ) && isset( $title_font['letterSpacing'][0] ) && ! empty( $title_font['letterSpacing'][0] ) ) {
|
||||
$css->add_property( 'letter-spacing', $title_font['letterSpacing'][0] . ( ! isset( $title_font['letterType'] ) ? 'px' : $title_font['letterType'] ) );
|
||||
}
|
||||
if ( isset( $title_font['textTransform'] ) && ! empty( $title_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $title_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $attributes['loopStyle'] ) && 'unboxed' === $attributes['loopStyle'] ) {
|
||||
if ( class_exists( 'Kadence\Theme' ) ) {
|
||||
$css->set_selector( '.kb-posts-id-' . $unique_id . ' .loop-entry' );
|
||||
$css->add_property( 'background', 'transparent' );
|
||||
$css->add_property( 'box-shadow', 'none' );
|
||||
$css->set_selector( '.kb-posts-id-' . $unique_id . ' .loop-entry > .entry-content-wrap' );
|
||||
$css->add_property( 'padding', '0px' );
|
||||
$css->set_selector( '.kb-posts-id-' . $unique_id . ' .loop-entry .post-thumbnail' );
|
||||
$css->add_property( 'margin-bottom', '1em' );
|
||||
}
|
||||
} elseif ( class_exists( 'Kadence\Theme' ) && defined( 'KADENCE_VERSION' ) ) {
|
||||
if ( version_compare( KADENCE_VERSION, '1.0.16', '<' ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-posts.kb-posts-id-' . $unique_id . ' .entry.loop-entry > .entry-content-wrap' );
|
||||
$css->add_property( 'padding', '2rem' );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-posts-id-' . $unique_id . ' .entry.loop-entry .entry-header .entry-title' );
|
||||
if ( isset( $title_font['size'] ) && is_array( $title_font['size'] ) && ! empty( $title_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $title_font['size'][1], ( ! isset( $title_font['sizeType'] ) ? 'px' : $title_font['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $title_font['lineHeight'] ) && is_array( $title_font['lineHeight'] ) && ! empty( $title_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $title_font['lineHeight'][1] . ( ! isset( $title_font['lineType'] ) ? 'px' : $title_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $title_font['letterSpacing'] ) && is_array( $title_font['letterSpacing'] ) && isset( $title_font['letterSpacing'][1] ) && ! empty( $title_font['letterSpacing'][1] ) ) {
|
||||
$css->add_property( 'letter-spacing', $title_font['letterSpacing'][1] . ( ! isset( $title_font['letterType'] ) ? 'px' : $title_font['letterType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-posts-id-' . $unique_id . ' .entry.loop-entry .entry-header .entry-title' );
|
||||
if ( isset( $title_font['size'] ) && is_array( $title_font['size'] ) && isset( $title_font['size'][2] ) && ! empty( $title_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $title_font['size'][2], ( ! isset( $title_font['sizeType'] ) ? 'px' : $title_font['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $title_font['lineHeight'] ) && is_array( $title_font['lineHeight'] ) && isset( $title_font['lineHeight'][2] ) && ! empty( $title_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $title_font['lineHeight'][2] . ( ! isset( $title_font['lineType'] ) ? 'px' : $title_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $title_font['letterSpacing'] ) && is_array( $title_font['letterSpacing'] ) && isset( $title_font['letterSpacing'][2] ) && ! empty( $title_font['letterSpacing'][2] ) ) {
|
||||
$css->add_property( 'letter-spacing', $title_font['letterSpacing'][2] . ( ! isset( $title_font['letterType'] ) ? 'px' : $title_font['letterType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$css->set_selector( '.kb-posts-id-' . $unique_id . ' .kb-post-list-item' );
|
||||
$css->add_property( 'display', 'grid' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
if ( ! is_array( $attributes ) ) {
|
||||
return;
|
||||
}
|
||||
global $kadence_blocks_posts_not_in;
|
||||
$kadence_blocks_posts_not_in_local = [];
|
||||
if ( ! isset( $kadence_blocks_posts_not_in ) || ! is_array( $kadence_blocks_posts_not_in ) ) {
|
||||
$kadence_blocks_posts_not_in = [];
|
||||
}
|
||||
// CSS classes.
|
||||
$classes = [];
|
||||
$classes[] = 'wp-block-kadence-posts';
|
||||
$classes[] = 'kb-posts';
|
||||
$classes[] = 'kadence-posts-list';
|
||||
$classes[] = 'kb-posts-id-' . ( $attributes['uniqueID'] ?? '' );
|
||||
$classes[] = 'content-wrap';
|
||||
$classes[] = 'grid-cols';
|
||||
$classes[] = 'kb-posts-style-' . ( $attributes['loopStyle'] ?? 'boxed' );
|
||||
if ( isset( $attributes['columns'] ) && ! empty( $attributes['columns'] ) ) {
|
||||
$columns = absint( $attributes['columns'] );
|
||||
} else {
|
||||
$columns = 3;
|
||||
}
|
||||
if ( 1 === $columns ) {
|
||||
$placement = ( isset( $attributes['alignImage'] ) && ! empty( $attributes['alignImage'] ) ? $attributes['alignImage'] : 'beside' );
|
||||
$classes[] = 'grid-sm-col-1';
|
||||
$classes[] = 'grid-lg-col-1';
|
||||
$classes[] = 'item-image-style-' . $placement;
|
||||
} elseif ( 2 === $columns ) {
|
||||
if ( isset( $attributes['tabletColumns'] ) && ! empty( $attributes['tabletColumns'] ) && 1 === $attributes['tabletColumns'] ) {
|
||||
$classes[] = 'grid-sm-col-1';
|
||||
} else {
|
||||
$classes[] = 'grid-sm-col-2';
|
||||
}
|
||||
$classes[] = 'grid-lg-col-2';
|
||||
$classes[] = 'item-image-style-above';
|
||||
} elseif ( 4 === $columns ) {
|
||||
if ( isset( $attributes['tabletColumns'] ) && ! empty( $attributes['tabletColumns'] ) && 1 === $attributes['tabletColumns'] ) {
|
||||
$classes[] = 'grid-sm-col-1';
|
||||
} elseif ( isset( $attributes['tabletColumns'] ) && ! empty( $attributes['tabletColumns'] ) && 3 === $attributes['tabletColumns'] ) {
|
||||
$classes[] = 'grid-sm-col-3';
|
||||
} elseif ( isset( $attributes['tabletColumns'] ) && ! empty( $attributes['tabletColumns'] ) && 4 === $attributes['tabletColumns'] ) {
|
||||
$classes[] = 'grid-sm-col-4';
|
||||
} else {
|
||||
$classes[] = 'grid-sm-col-2';
|
||||
}
|
||||
$classes[] = 'grid-lg-col-4';
|
||||
$classes[] = 'item-image-style-above';
|
||||
} else {
|
||||
if ( isset( $attributes['tabletColumns'] ) && ! empty( $attributes['tabletColumns'] ) && 1 === $attributes['tabletColumns'] ) {
|
||||
$classes[] = 'grid-sm-col-1';
|
||||
} elseif ( isset( $attributes['tabletColumns'] ) && ! empty( $attributes['tabletColumns'] ) && 3 === $attributes['tabletColumns'] ) {
|
||||
$classes[] = 'grid-sm-col-3';
|
||||
} else {
|
||||
$classes[] = 'grid-sm-col-2';
|
||||
}
|
||||
$classes[] = 'grid-lg-col-3';
|
||||
$classes[] = 'item-image-style-above';
|
||||
}
|
||||
// Add custom CSS classes to class string.
|
||||
if ( isset( $attributes['className'] ) ) {
|
||||
$classes[] .= ' ' . $attributes['className'];
|
||||
}
|
||||
$classes = apply_filters( 'kadence_blocks_posts_container_classes', $classes );
|
||||
do_action( 'kadence_blocks_posts_before_query', $attributes );
|
||||
if ( apply_filters( 'kadence_blocks_posts_block_exclude_current', true ) && is_singular() ) {
|
||||
$kadence_blocks_posts_not_in_local[] = get_the_ID();
|
||||
}
|
||||
|
||||
$final_posts_not_in = isset( $kadence_blocks_posts_not_in ) && is_array( $kadence_blocks_posts_not_in ) ? array_merge( $kadence_blocks_posts_not_in, $kadence_blocks_posts_not_in_local ) : $kadence_blocks_posts_not_in_local;
|
||||
|
||||
$post_type = ( isset( $attributes['postType'] ) && ! empty( $attributes['postType'] ) ? $attributes['postType'] : 'post' );
|
||||
$args = [
|
||||
'post_type' => $post_type,
|
||||
'posts_per_page' => ( isset( $attributes['postsToShow'] ) && ! empty( $attributes['postsToShow'] ) ? $attributes['postsToShow'] : 6 ),
|
||||
'post_status' => 'publish',
|
||||
'order' => ( isset( $attributes['order'] ) && ! empty( $attributes['order'] ) ? $attributes['order'] : 'desc' ),
|
||||
'orderby' => ( isset( $attributes['orderBy'] ) && ! empty( $attributes['orderBy'] ) ? $attributes['orderBy'] : 'date' ),
|
||||
'ignore_sticky_posts' => ( isset( $attributes['allowSticky'] ) && $attributes['allowSticky'] ? 0 : 1 ),
|
||||
'post__not_in' => $final_posts_not_in,
|
||||
];
|
||||
if ( isset( $attributes['offsetQuery'] ) && ! empty( $attributes['offsetQuery'] ) ) {
|
||||
$args['offset'] = $attributes['offsetQuery'];
|
||||
}
|
||||
if ( isset( $attributes['categories'] ) && ! empty( $attributes['categories'] ) && is_array( $attributes['categories'] ) ) {
|
||||
$categories = [];
|
||||
$i = 1;
|
||||
foreach ( $attributes['categories'] as $key => $value ) {
|
||||
$categories[] = $value['value'];
|
||||
}
|
||||
} else {
|
||||
$categories = [];
|
||||
}
|
||||
if ( 'post' !== $post_type || ( isset( $attributes['postTax'] ) && true === $attributes['postTax'] ) ) {
|
||||
if ( isset( $attributes['taxType'] ) && ! empty( $attributes['taxType'] ) ) {
|
||||
$args['tax_query'][] = [
|
||||
'taxonomy' => ( isset( $attributes['taxType'] ) ) ? $attributes['taxType'] : 'category',
|
||||
'field' => 'id',
|
||||
'terms' => $categories,
|
||||
'operator' => ( isset( $attributes['excludeTax'] ) && 'exclude' === $attributes['excludeTax'] ? 'NOT IN' : 'IN' ),
|
||||
];
|
||||
}
|
||||
} else {
|
||||
if ( isset( $attributes['tags'] ) && ! empty( $attributes['tags'] ) && is_array( $attributes['tags'] ) ) {
|
||||
$tags = [];
|
||||
$i = 1;
|
||||
foreach ( $attributes['tags'] as $key => $value ) {
|
||||
$tags[] = $value['value'];
|
||||
}
|
||||
} else {
|
||||
$tags = [];
|
||||
}
|
||||
if ( isset( $attributes['excludeTax'] ) && 'exclude' === $attributes['excludeTax'] ) {
|
||||
$args['category__not_in'] = $categories;
|
||||
$args['tag__not_in'] = $tags;
|
||||
} else {
|
||||
$args['category__in'] = $categories;
|
||||
$args['tag__in'] = $tags;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Filter the query arguments before executing the WP_Query.
|
||||
*
|
||||
* This filter allows developers to completely take over or modify the query arguments
|
||||
* that are used to fetch posts for the Kadence Posts block. By hooking into this filter,
|
||||
* you can override any default query parameters, add custom tax_query conditions,
|
||||
* modify post_type, posts_per_page, order, orderby, or any other WP_Query parameter.
|
||||
*
|
||||
* @since 1.9.19
|
||||
*
|
||||
* @param array $args The array of query arguments that will be passed to WP_Query.
|
||||
* Default arguments include:
|
||||
* - post_type: The post type to query (default: 'post' or from attributes)
|
||||
* - posts_per_page: Number of posts to show (default: 6 or from attributes)
|
||||
* - post_status: Post status (default: 'publish')
|
||||
* - order: Sort order (default: 'desc' or from attributes)
|
||||
* - orderby: Sort by field (default: 'date' or from attributes)
|
||||
* - ignore_sticky_posts: Whether to ignore sticky posts
|
||||
* - post__not_in: Array of post IDs to exclude
|
||||
* - offset: Number of posts to skip (if offsetQuery is set)
|
||||
* - tax_query: Taxonomy query conditions (if applicable)
|
||||
* - category__in/category__not_in: Category filters (if applicable)
|
||||
* - tag__in/tag__not_in: Tag filters (if applicable)
|
||||
* @param array $attributes The block attributes array containing all block settings.
|
||||
*
|
||||
* @return array Modified query arguments array.
|
||||
*
|
||||
* @example
|
||||
* // Modify posts per page
|
||||
* add_filter( 'kadence_blocks_posts_query_args', function( $args ) {
|
||||
* $args['posts_per_page'] = 12;
|
||||
* return $args;
|
||||
* } );
|
||||
*
|
||||
* @example
|
||||
* // Add custom meta query
|
||||
* add_filter( 'kadence_blocks_posts_query_args', function( $args ) {
|
||||
* $args['meta_query'] = array(
|
||||
* array(
|
||||
* 'key' => 'featured_post',
|
||||
* 'value' => 'yes',
|
||||
* 'compare' => '='
|
||||
* )
|
||||
* );
|
||||
* return $args;
|
||||
* } );
|
||||
*
|
||||
* @example
|
||||
* // Completely override query arguments
|
||||
* add_filter( 'kadence_blocks_posts_query_args', function( $args ) {
|
||||
* return array(
|
||||
* 'post_type' => 'custom_post_type',
|
||||
* 'posts_per_page' => 5,
|
||||
* 'post_status' => 'publish',
|
||||
* 'orderby' => 'title',
|
||||
* 'order' => 'ASC',
|
||||
* );
|
||||
* } );
|
||||
*/
|
||||
$args = apply_filters( 'kadence_blocks_posts_query_args', $args );
|
||||
$loop = new WP_Query( $args );
|
||||
ob_start();
|
||||
|
||||
do_action( 'kadence_blocks_posts_query_start', $attributes, $loop );
|
||||
if ( $loop->have_posts() ) {
|
||||
echo '<ul class="' . esc_attr( esc_attr( implode( ' ', $classes ) ) ) . '">';
|
||||
while ( $loop->have_posts() ) {
|
||||
$loop->the_post();
|
||||
if ( isset( $attributes['showUnique'] ) && true === $attributes['showUnique'] ) {
|
||||
$kadence_blocks_posts_not_in[] = get_the_ID();
|
||||
}
|
||||
kadence_blocks_get_template( 'entry.php', [ 'attributes' => $attributes ] );
|
||||
}
|
||||
echo '</ul>';
|
||||
} else {
|
||||
echo wp_kses_post( apply_filters( 'kadence_blocks_posts_empty_query', '<p>' . esc_html__( 'No posts', 'kadence-blocks' ) . '</p>' ) );
|
||||
}
|
||||
wp_reset_postdata();
|
||||
do_action( 'kadence_blocks_posts_query_end', $attributes, $loop );
|
||||
do_action( 'kadence_blocks_posts_after_query', $attributes );
|
||||
$output = ob_get_contents();
|
||||
ob_end_clean();
|
||||
|
||||
return $output . $content;
|
||||
}
|
||||
/**
|
||||
* Render for block scripts block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param boolean $inline true or false based on when called.
|
||||
*/
|
||||
public function render_scripts( $attributes, $inline = false ) {
|
||||
// Don't need to enqueue styles for this block if Kadence theme is active and it's newer than 1.3.0
|
||||
$has_kadence_theme = class_exists( 'Kadence\Theme' );
|
||||
if ( $has_kadence_theme && defined( 'KADENCE_VERSION' ) && version_compare( KADENCE_VERSION, '1.3.0', '>=' ) ) {
|
||||
$has_kadence_theme = true;
|
||||
} else {
|
||||
$has_kadence_theme = false;
|
||||
}
|
||||
if ( ! $has_kadence_theme || apply_filters( 'kadence_blocks_post_block_style_force_output', false ) ) {
|
||||
if ( ! wp_style_is( 'kadence-blocks-' . $this->block_name, 'enqueued' ) ) {
|
||||
$this->enqueue_style( 'kadence-blocks-' . $this->block_name );
|
||||
if ( $inline ) {
|
||||
$this->should_render_inline_stylesheet( 'kadence-blocks-' . $this->block_name );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Posts_Block::get_instance();
|
||||
@@ -0,0 +1,556 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Progress Bar Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Progress Bar Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Progress_Bar_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'progress-bar';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected static $progress_bars = [];
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
/**
|
||||
* Class Constructor.
|
||||
*/
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
add_action( 'wp_footer', [ $this, 'data_enqueue' ], 9 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks style ID.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$css->set_selector( '.kb-progress-bar-container' . $unique_id . ', .kt-inside-inner-col > .aligncenter.kb-progress-bar-container' . $unique_id );
|
||||
$css->render_responsive_size( $attributes, [ 'containerMaxWidth', 'tabletContainerMaxWidth', 'mobileContainerMaxWidth' ], 'width', 'containerMaxWidthUnits' );
|
||||
|
||||
$css->set_selector( '.kb-progress-bar-container' . $unique_id );
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin' );
|
||||
|
||||
if ( ! isset( $attributes['barType'] ) || ( isset( $attributes['barType'] ) && 'line' === $attributes['barType'] ) ) {
|
||||
$css->set_selector( '.kb-progress-bar-container' . $unique_id . ' svg' );
|
||||
|
||||
if ( ! empty( $attributes['progressBorderRadius'][0] ) ) {
|
||||
$css->add_property( 'border-radius', $attributes['progressBorderRadius'][0] . 'px' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['progressBorderRadius'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'border-radius', $attributes['progressBorderRadius'][1] . 'px' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['progressBorderRadius'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'border-radius', $attributes['progressBorderRadius'][2] . 'px' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-progress-bar-container' . $unique_id . ' .kb-progress-label-wrap' );
|
||||
$css->render_measure_output( $attributes, 'labelPadding', 'padding' );
|
||||
|
||||
$is_inside = ! isset( $attributes['labelPosition'] ) || ( isset( $attributes['labelPosition'] ) && $attributes['labelPosition'] === 'inside' );
|
||||
$barType = ! empty( $attributes['barType'] ) ? $attributes['barType'] : 'line';
|
||||
|
||||
if ( ! empty( $attributes['hAlign'] ) ) {
|
||||
$this->responsive_alignment( $attributes['hAlign'], $css );
|
||||
} else {
|
||||
$css->add_property( 'justify-content', 'space-between' );
|
||||
}
|
||||
|
||||
if ( $is_inside && $barType === 'line' ) {
|
||||
$css->add_property( 'width', '100%' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['thAlign'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$this->responsive_alignment( $attributes['thAlign'], $css );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['mhAlign'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$this->responsive_alignment( $attributes['mhAlign'], $css );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['labelLayout'] ) && ( $attributes['labelLayout'] === 'lt' || $attributes['labelLayout'] === 'lb' ) ) {
|
||||
$css->add_property( 'flex-direction', 'column' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-progress-bar-container' . $unique_id . ' .kb-progress-label-wrap .kt-progress-label' );
|
||||
$css->render_typography( $attributes, 'labelFont' );
|
||||
|
||||
$css->set_selector( '.kb-progress-bar-container' . $unique_id . ' .kb-progress-label-wrap .kt-progress-percent' );
|
||||
|
||||
if ( isset( $attributes['numberFont'], $attributes['labelFont'] ) ) {
|
||||
$default_font = $this->get_default_font();
|
||||
$diff = $this->array_recursive_diff( $attributes['numberFont'], $default_font );
|
||||
|
||||
$attributes['numberFont'] = array_merge( $attributes['labelFont'], $diff );
|
||||
$css->render_typography( $attributes, 'numberFont' );
|
||||
} elseif ( isset( $attributes['numberFont'] ) ) {
|
||||
$css->render_typography( $attributes, 'numberFont' );
|
||||
} elseif ( isset( $attributes['labelFont'] ) ) {
|
||||
$css->render_typography( $attributes, 'labelFont' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['barType'] ) && 'line-mask' == $attributes['barType'] ) {
|
||||
// We assume square masks for all this math.
|
||||
|
||||
$iterations = $attributes['maskIterations'] ?? 5;
|
||||
$mask = ! empty( $attributes['maskSvg'] ) ? $attributes['maskSvg'] : 'star';
|
||||
$mask_base_url = KADENCE_BLOCKS_URL . 'includes/assets/images/masks/';
|
||||
$mask_url = $mask_base_url . $mask . '.svg';
|
||||
// $mask_gap = $attributes['maskGap'] ?? 10;
|
||||
$progress_width = ! empty( $attributes['progressWidth'] ) ? absint( $attributes['progressWidth'] ) : 2;
|
||||
$mask_height = ! empty( $progress_width ) ? ( absint( $progress_width ) * 11.5 ) : 80;
|
||||
$mask_height_tablet = ! empty( $attributes['progressWidthTablet'] ) ? ( absint( $attributes['progressWidthTablet'] ) * 11.5 ) : 0;
|
||||
$mask_height_mobile = ! empty( $attributes['progressWidthMobile'] ) ? ( absint( $attributes['progressWidthMobile'] ) * 11.5 ) : 0;
|
||||
$mask_width = $mask_height * $iterations;
|
||||
$mask_width_tablet = $mask_height_tablet ? ( $mask_height_tablet * $iterations ) : 0;
|
||||
$mask_width_mobile = $mask_height_mobile ? ( $mask_height_mobile * $iterations ) : 0;
|
||||
// $mask_gap_aspect_ratio_adjustment = ( $iterations + 1 ) * ( $mask_gap / $mask_height );
|
||||
|
||||
if ( 'custom' === $mask ) {
|
||||
if ( ! empty( $attributes['maskUrl'] ) ) {
|
||||
$mask_url = $attributes['maskUrl'];
|
||||
} else {
|
||||
$mask_url = $mask_base_url . 'star.svg';
|
||||
}
|
||||
}
|
||||
|
||||
$mask_image_string = trim( str_repeat( 'url(' . $mask_url . '),', $iterations ), ',' );
|
||||
$mask_repeat_string = trim( str_repeat( 'no-repeat,', $iterations ), ',' );
|
||||
$mask_position_array = $iterations > 1 ? range( 0, 100, 100 / ( $iterations - 1 ) ) : [ 0 ];
|
||||
$mask_position_string = trim( implode( '%,', $mask_position_array ) . '%', ',' );
|
||||
// $mask_position_string = 'calc(0% + ' . $mask_gap . 'px), calc(25% + ' . ( $mask_gap * 2 ) . 'px), calc(50% + ' . ( $mask_gap * 3 ) . 'px), calc(75% + ' . ( $mask_gap * 4 ) . 'px), calc(100% + ' . ( $mask_gap * 5 ) . 'px)';
|
||||
$mask_aspect_ratio_string = $iterations . '/1';
|
||||
// $mask_aspect_ratio_string = $iterations + $mask_gap_aspect_ratio_adjustment . '/1';
|
||||
$mask_height_string = $mask_height . 'px';
|
||||
$mask_height_tablet_string = $mask_height_tablet ? $mask_height_tablet . 'px' : '';
|
||||
$mask_height_mobile_string = $mask_height_mobile ? $mask_height_mobile . 'px' : '';
|
||||
$mask_width_string = $mask_width . 'px';
|
||||
$mask_width_tablet_string = $mask_width_tablet ? $mask_width_tablet . 'px' : '';
|
||||
$mask_width_mobile_string = $mask_width_mobile ? $mask_width_mobile . 'px' : '';
|
||||
|
||||
$css->set_selector( '.kb-progress-bar-container' . $unique_id . ' .kb-progress-bar-' . $unique_id );
|
||||
$css->add_property( '-webkit-mask-image', $mask_image_string );
|
||||
$css->add_property( 'mask-image', $mask_image_string );
|
||||
|
||||
$css->add_property( '-webkit-mask-size', 'contain' );
|
||||
$css->add_property( 'mask-size', 'contain' );
|
||||
|
||||
$css->add_property( '-webkit-mask-repeat', $mask_repeat_string );
|
||||
$css->add_property( 'mask-repeat', $mask_repeat_string );
|
||||
|
||||
$css->add_property( '-webkit-mask-position', $mask_position_string );
|
||||
$css->add_property( 'mask-position', $mask_position_string );
|
||||
|
||||
$css->add_property( 'aspect-ratio', $mask_aspect_ratio_string );
|
||||
|
||||
$css->add_property( 'height', $mask_height_string );
|
||||
$css->add_property( 'width', $mask_width_string );
|
||||
$css->add_property( 'max-width', '100%' );
|
||||
|
||||
if ( $mask_height_tablet_string || $mask_width_tablet_string ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( $mask_height_tablet_string ) {
|
||||
$css->add_property( 'height', $mask_height_tablet_string );
|
||||
}
|
||||
if ( $mask_width_tablet_string ) {
|
||||
$css->add_property( 'width', $mask_width_tablet_string );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( $mask_height_mobile_string || $mask_width_mobile_string ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( $mask_height_mobile_string ) {
|
||||
$css->add_property( 'height', $mask_height_mobile_string );
|
||||
}
|
||||
if ( $mask_width_mobile_string ) {
|
||||
$css->add_property( 'width', $mask_width_mobile_string );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Builds HTML for block.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
$css = new Kadence_Blocks_CSS();
|
||||
|
||||
$simple_id = str_replace( '-', '', esc_attr( $unique_id ) );
|
||||
$progress_color = ! empty( $attributes['progressColor'] ) ? $css->sanitize_color( $attributes['progressColor'], $attributes['progressOpacity'] ) : 'var(--global-palette1, #2B6CB0)';
|
||||
$bar_background = ! empty( $attributes['barBackground'] ) ? $css->sanitize_color( $attributes['barBackground'], $attributes['barBackgroundOpacity'] ) : 'var(--global-palette7, #EDF2F7)';
|
||||
|
||||
$prefix = isset( $attributes['numberPrefix'] ) ? esc_attr( $attributes['numberPrefix'] ) : '';
|
||||
$suffix = isset( $attributes['numberSuffix'] ) ? esc_attr( $attributes['numberSuffix'] ) : '';
|
||||
$progress_min = 0;
|
||||
$progress_amount = ! empty( $attributes['progressAmount'] ) ? $attributes['progressAmount'] : 0;
|
||||
$progress_max = ! empty( $attributes['progressMax'] ) ? $attributes['progressMax'] : 100;
|
||||
$is_relative = $attributes['numberIsRelative'] ?? false;
|
||||
$decimal = ! empty( $attributes['decimal'] ) ? $attributes['decimal'] : 'none';
|
||||
$delay = $attributes['delayUntilInView'] ?? true;
|
||||
$stroke_widths = [
|
||||
! empty( $attributes['progressWidth'] ) ? $attributes['progressWidth'] : 2,
|
||||
! empty( $attributes['progressWidthTablet'] ) ? $attributes['progressWidthTablet'] : ( ! empty( $attributes['progressWidth'] ) ? $attributes['progressWidth'] : 2 ),
|
||||
! empty( $attributes['progressWidthMobile'] ) ? $attributes['progressWidthMobile'] : ( ! empty( $attributes['progressWidthTablet'] ) ? $attributes['progressWidthTablet'] : ( ! empty( $attributes['progressWidth'] ) ? $attributes['progressWidth'] : 2 ) ),
|
||||
];
|
||||
|
||||
$content = '<div class="kb-progress-bar-container kb-progress-bar-container' . $unique_id . ' kb-progress-bar-init kb-progress-bar-type-' . $attributes['barType'] . ' ' . ( ! empty( $attributes['align'] ) ? 'align' . $attributes['align'] : '' ) . '">';
|
||||
|
||||
$content .= $this->get_label( $attributes, 'above' );
|
||||
|
||||
$progress_args = [
|
||||
'class' => 'kb-progress-bar kb-progress-bar-' . esc_attr( $unique_id ),
|
||||
];
|
||||
$mask = ! empty( $attributes['maskSvg'] ) ? $attributes['maskSvg'] : 'star';
|
||||
if ( ! empty( $attributes['ariaLabel'] ) ) {
|
||||
$progress_args['aria-label'] = $attributes['ariaLabel'];
|
||||
$progress_args['role'] = 'note';
|
||||
} elseif ( ! empty( $attributes['barType'] ) && $attributes['barType'] === 'line-mask' && 'star' === $mask ) {
|
||||
// translators: %1$s is the current progress amount, %2$s is the max progress amount.
|
||||
$progress_args['aria-label'] = sprintf( __( '%1$s out of %2$s Stars', 'kadence-blocks' ), $progress_amount, $progress_max );
|
||||
$progress_args['role'] = 'note';
|
||||
}
|
||||
$progress_div_attributes = [];
|
||||
foreach ( $progress_args as $key => $value ) {
|
||||
$progress_div_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$progress_attributes = implode( ' ', $progress_div_attributes );
|
||||
$bar_type_for_script = $attributes['barType'] == 'line-mask' ? 'line' : $attributes['barType'];
|
||||
$progress_real = $progress_amount <= $progress_max ? $progress_amount : $progress_max;
|
||||
|
||||
$progress_bar_script_args = [
|
||||
'unique_id' => $unique_id,
|
||||
'simple_id' => $simple_id,
|
||||
'type' => $bar_type_for_script,
|
||||
'progressColor' => $progress_color,
|
||||
'barBackground' => $bar_background,
|
||||
'stokeWidths' => $stroke_widths,
|
||||
'decimal' => $decimal,
|
||||
'delay' => $delay,
|
||||
'duration' => ! empty( $attributes['duration'] ) ? $attributes['duration'] : 1,
|
||||
'easing' => ! empty( $attributes['easing'] ) ? $attributes['easing'] : 'linear',
|
||||
'prefix' => $prefix,
|
||||
'suffix' => $suffix,
|
||||
'progress_real' => $progress_real,
|
||||
'progress_max' => $progress_max,
|
||||
'is_relative' => $is_relative,
|
||||
];
|
||||
|
||||
$inside_label = $this->get_label( $attributes, 'inside' );
|
||||
|
||||
$static_content = '';
|
||||
if ( apply_filters( 'kadence-blocks-progress-bar-static', false, $attributes, $block_instance ) ) {
|
||||
$static_content = $this->get_content_svg( $progress_bar_script_args );
|
||||
} else {
|
||||
self::$progress_bars[ $unique_id ] = $progress_bar_script_args;
|
||||
}
|
||||
|
||||
$content .= sprintf( '<div %1$s>%2$s%3$s</div>', $progress_attributes, $inside_label, $static_content );
|
||||
$content .= $this->get_label( $attributes, 'below' );
|
||||
|
||||
$content .= '</div>';
|
||||
|
||||
wp_enqueue_script( 'kadence-blocks-' . $this->block_name );
|
||||
return $content;
|
||||
}
|
||||
/**
|
||||
* Get HTML for displaying the svg.
|
||||
*
|
||||
* @param array $args the arguments for the progress bar.
|
||||
*
|
||||
* @return string HTML that creates the svg on the front end.
|
||||
*/
|
||||
private function get_content_svg( $args ) {
|
||||
$svg = '';
|
||||
$stroke_width = ! empty( $args['stokeWidths'][0] ) ? $args['stokeWidths'][0] : 2;
|
||||
switch ( $args['type'] ) {
|
||||
case 'line':
|
||||
$view_box_str = '0 0 100 ' . $stroke_width;
|
||||
$path_center = $stroke_width / 2;
|
||||
$path_str = 'M 0, ' . $path_center . ' L 100, ' . $path_center;
|
||||
$path_offset = 100 - ( ( $args['progress_real'] / $args['progress_max'] ) * 100 );
|
||||
$svg = '<svg viewBox="' . esc_attr( $view_box_str ) . '" preserveAspectRatio="none" style="display: block; width: 100%;">';
|
||||
$svg .= '<path d="' . esc_attr( $path_str ) . '" stroke="' . esc_attr( $args['barBackground'] ) . '" stroke-width="' . esc_attr( $stroke_width ) . '" fill-opacity="0"></path>';
|
||||
$svg .= '<path d="' . esc_attr( $path_str ) . '" stroke="' . esc_attr( $args['progressColor'] ) . '" stroke-width="' . esc_attr( $stroke_width ) . '" fill-opacity="0" style="stroke-dasharray: 100, 100; stroke-dashoffset: ' . esc_attr( $path_offset ) . ';"></path>';
|
||||
$svg .= '</svg>';
|
||||
break;
|
||||
case 'semicircle':
|
||||
$r = 50 - ( $stroke_width / 2 );
|
||||
$r2 = $r * 2;
|
||||
$length = round( 2 * 3.141592653589793 * $r, 2 ) / 2;
|
||||
$path_str = 'M 50,50 m -' . $r . ',0 a ' . $r . ',' . $r . ' 0 1 1 ' . $r2 . ',0';
|
||||
$path_offset = $length - ( ( $args['progress_real'] / $args['progress_max'] ) * $length );
|
||||
$svg = '<svg viewBox="0 0 100 50" style="display: block; width: 100%;">';
|
||||
$svg .= '<path d="' . esc_attr( $path_str ) . '" stroke="' . esc_attr( $args['barBackground'] ) . '" stroke-width="' . esc_attr( $stroke_width ) . '" fill-opacity="0"></path>';
|
||||
$svg .= '<path d="' . esc_attr( $path_str ) . '" stroke="' . esc_attr( $args['progressColor'] ) . '" stroke-width="' . esc_attr( $stroke_width ) . '" fill-opacity="0" style="stroke-dasharray:' . esc_attr( $length ) . ', ' . esc_attr( $length ) . '; stroke-dashoffset: ' . esc_attr( $path_offset ) . ';"></path></svg>';
|
||||
break;
|
||||
case 'circle':
|
||||
$r = 50 - ( $stroke_width / 2 );
|
||||
$r2 = $r * 2;
|
||||
$length = round( 2 * 3.141592653589793 * $r, 2 );
|
||||
$path_offset = $length - ( ( $args['progress_real'] / $args['progress_max'] ) * $length );
|
||||
$path_str = 'M 50,50 m 0,-' . $r . ' a ' . $r . ',' . $r . ' 0 1 1 0,' . $r2 . ' a ' . $r . ',' . $r . ' 0 1 1 0,-' . $r2 . '';
|
||||
$svg = '<svg viewBox="0 0 100 100" style="display: block; width: 100%;">';
|
||||
$svg .= '<path d="' . esc_attr( $path_str ) . '" stroke="' . esc_attr( $args['barBackground'] ) . '" stroke-width="' . esc_attr( $stroke_width ) . '" fill-opacity="0"></path>';
|
||||
$svg .= '<path d="' . esc_attr( $path_str ) . '" stroke="' . esc_attr( $args['progressColor'] ) . '" stroke-width="' . esc_attr( $stroke_width ) . '" fill-opacity="0" style="stroke-dasharray:' . esc_attr( $length ) . ', ' . esc_attr( $length ) . '; stroke-dashoffset: ' . esc_attr( $path_offset ) . ';"></path></svg>';
|
||||
break;
|
||||
}
|
||||
return $svg;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get HTML for displaying the label and percentage completed.
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $position
|
||||
*
|
||||
* @return string HTML that creates the labels on the front end.
|
||||
*/
|
||||
private function get_label( $attributes, $position ) {
|
||||
|
||||
if ( isset( $attributes['labelPosition'] ) && $attributes['labelPosition'] !== $position ) {
|
||||
return '';
|
||||
}
|
||||
$label = '';
|
||||
if ( ! empty( $attributes['label'] ) && ( ! isset( $attributes['displayLabel'] ) || ( isset( $attributes['displayLabel'] ) && $attributes['displayLabel'] !== false ) ) ) {
|
||||
$label = '<span id="kt-progress-label' . esc_attr( $attributes['uniqueID'] ) . '" role="textbox" class="kt-progress-label" contenteditable="false" aria-label="' . esc_attr__( 'Progressbar Label', 'kadence-blocks' ) . '">' . wp_kses_post( $attributes['label'] ) . '</span>';
|
||||
}
|
||||
$percent = $this->get_percent( $attributes );
|
||||
|
||||
if ( empty( $label ) && empty( $percent ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$response = '<div class="kb-progress-label-wrap' . ( $position === 'inside' ? ' kt-progress-label-inside' : '' ) . '">';
|
||||
|
||||
if ( isset( $attributes['labelLayout'] ) && ( $attributes['labelLayout'] === 'pl' || $attributes['labelLayout'] === 'lb' ) ) {
|
||||
$response .= $percent . $label;
|
||||
} else {
|
||||
$response .= $label . $percent;
|
||||
}
|
||||
|
||||
$response .= '</div>';
|
||||
|
||||
return $response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get HTML for displaying the percent complete.
|
||||
*
|
||||
* @param $attributes
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
private function get_percent( $attributes ) {
|
||||
if ( isset( $attributes['displayPercent'] ) && $attributes['displayPercent'] !== true ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$prefix = $attributes['numberPrefix'] ?? '';
|
||||
$suffix = $attributes['numberSuffix'] ?? '';
|
||||
$progress_amount = ! empty( $attributes['progressAmount'] ) ? $attributes['progressAmount'] : 0;
|
||||
$progress_max = ! empty( $attributes['progressMax'] ) ? $attributes['progressMax'] : 100;
|
||||
|
||||
$progress_real = $progress_amount <= $progress_max ? $progress_amount : $progress_max;
|
||||
$starting = ! empty( $progress_real ) && ! empty( $attributes['showMaxProgressOnPageLoad'] ) ? $progress_real : 0;
|
||||
|
||||
$position = $attributes['labelPosition'] ?? 'above';
|
||||
|
||||
return '<span id="current-progress-' . $position . $attributes['uniqueID'] . '" class="kb-current-progress-' . $position . ' kt-progress-percent">' . $prefix . $starting . $suffix . '</span>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Set responsive alignment CSS based on alignment.
|
||||
*
|
||||
* @param $alignment
|
||||
* @param $css
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
private function responsive_alignment( $alignment, $css ) {
|
||||
|
||||
if ( $alignment === 'space-between' ) {
|
||||
$css->add_property( 'justify-content', 'space-between' );
|
||||
} elseif ( $alignment === 'center' ) {
|
||||
$css->add_property( 'justify-content', 'center' );
|
||||
$css->add_property( 'text-align', 'center' );
|
||||
} elseif ( $alignment === 'left' ) {
|
||||
$css->add_property( 'justify-content', 'flex-start' );
|
||||
} elseif ( $alignment === 'right' ) {
|
||||
$css->add_property( 'justify-content', 'flex-end' );
|
||||
$css->add_property( 'text-align', 'right' );
|
||||
}
|
||||
}
|
||||
|
||||
private function get_default_font() {
|
||||
return [
|
||||
'color' => '',
|
||||
'level' => 6,
|
||||
'size' => [
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
],
|
||||
'sizeType' => 'px',
|
||||
'lineHeight' => [
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
],
|
||||
'linetype' => 'px',
|
||||
'letterSpacing' => [
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
],
|
||||
'textTransform' => '',
|
||||
'family' => '',
|
||||
'google' => false,
|
||||
'style' => '',
|
||||
'weight' => '',
|
||||
'variant' => '',
|
||||
'subset' => '',
|
||||
'loadGoogle' => true,
|
||||
'padding' => [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
'margin' => [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* array_diff_assoc doesn't work on multidimensional arrays, so we need to use this function.
|
||||
* If any sub-key value is different, to entire parent key is returned.
|
||||
*
|
||||
* @param $a_array
|
||||
* @param $b_array
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
private function array_recursive_diff( $a_array, $b_array ) {
|
||||
$a_return = [];
|
||||
|
||||
foreach ( $a_array as $m_key => $m_value ) {
|
||||
if ( array_key_exists( $m_key, $b_array ) ) {
|
||||
if ( is_array( $m_value ) ) {
|
||||
$a_recursive_diff = $this->array_recursive_diff( $m_value, $b_array[ $m_key ] );
|
||||
if ( count( $a_recursive_diff ) ) {
|
||||
$a_return[ $m_key ] = $m_value;
|
||||
}
|
||||
} elseif ( $m_value != $b_array[ $m_key ] ) {
|
||||
$a_return[ $m_key ] = $m_value;
|
||||
}
|
||||
} else {
|
||||
$a_return[ $m_key ] = $m_value;
|
||||
}
|
||||
}
|
||||
return $a_return;
|
||||
}
|
||||
/**
|
||||
* Enqueue the block's items.
|
||||
*/
|
||||
public function data_enqueue() {
|
||||
if ( empty( self::$progress_bars ) ) {
|
||||
return;
|
||||
}
|
||||
wp_localize_script(
|
||||
'kadence-blocks-' . $this->block_name,
|
||||
'kadence_blocks_progress_bars',
|
||||
[
|
||||
'items' => wp_json_encode( self::$progress_bars ),
|
||||
]
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
|
||||
parent::register_scripts();
|
||||
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-scroll-magic', KADENCE_BLOCKS_URL . 'includes/assets/js/scroll-magic.min.js', [], KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-progress', KADENCE_BLOCKS_URL . 'includes/assets/js/progressBar.min.js', [], KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-progress-bars.min.js', [ 'kadence-blocks-scroll-magic', 'kadence-blocks-progress' ], KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Progress_Bar_Block::get_instance();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,343 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Search Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Search Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Search_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'search';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kb-search' . $unique_id );
|
||||
|
||||
/*
|
||||
* Margin
|
||||
*/
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin' );
|
||||
|
||||
/*
|
||||
* Padding
|
||||
*/
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding' );
|
||||
|
||||
|
||||
// Modal Background
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-modal' );
|
||||
if( $attributes['modalBackgroundType'] === 'gradient') {
|
||||
$css->add_property( '--kb-search-modal-background', $attributes['modalGradientActive'] );
|
||||
} else {
|
||||
$css->add_property( '--kb-search-modal-background', $css->render_color( $attributes['modalBackgroundColor'] ) );
|
||||
}
|
||||
|
||||
// Input Styles.
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-input[type="text"]' );
|
||||
$css->render_typography( $attributes, 'inputTypography' );
|
||||
$css->render_measure_range( $attributes, 'inputBorderRadius', 'border-radius', $attributes['inputBorderRadiusUnit'] );
|
||||
$css->render_measure_output( $attributes, 'inputPadding', 'padding' );
|
||||
$css->render_border_styles( $attributes, 'inputBorderStyles' );
|
||||
$css->add_property('color', $css->render_color( $attributes['inputColor'] ) );
|
||||
|
||||
if ( $attributes['inputBackgroundType'] === 'gradient' ) {
|
||||
$css->add_property( 'background', $attributes['inputGradient'] );
|
||||
} else {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['inputBackgroundColor'] ) );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-input[type="text"]::placeholder' );
|
||||
$css->add_property('color', $css->render_color( $attributes['inputPlaceholderColor'] ) );
|
||||
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-input-wrapper' );
|
||||
$css->render_measure_output( $attributes, 'inputMargin', 'margin' );
|
||||
|
||||
// SVG colors.
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-icon svg' );
|
||||
if ( !empty( $attributes['inputIcon'] ) && 'fe' === substr( $attributes['inputIcon'], 0, 2 ) ) {
|
||||
$css->add_property( 'stroke', $css->render_color( $attributes['inputIconColor'] ) );
|
||||
$css->add_property( 'fill', 'none' );
|
||||
} else {
|
||||
$css->add_property( 'fill', $css->render_color( $attributes['inputIconColor'] ) );
|
||||
$css->add_property( 'stroke', 'none' );
|
||||
}
|
||||
|
||||
if( !empty($attributes['displayStyle'] ) && $attributes['displayStyle'] === 'modal' ) {
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-input-wrapper:hover .kb-search-icon svg' );
|
||||
} else {
|
||||
$css->set_selector( '.kb-search' . $unique_id . ':hover .kb-search-icon svg' );
|
||||
}
|
||||
if ( !empty( $attributes['inputIcon'] ) && 'fe' === substr( $attributes['inputIcon'], 0, 2 ) ) {
|
||||
$css->add_property( 'stroke', $css->render_color( $attributes['inputIconHoverColor'] ) );
|
||||
$css->add_property( 'fill', 'none' );
|
||||
} else {
|
||||
$css->add_property( 'fill', $css->render_color( $attributes['inputIconHoverColor'] ) );
|
||||
$css->add_property( 'stroke', 'none' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-close-btn svg' );
|
||||
if ( !empty( $attributes['closeIcon'] ) && 'fe' === substr( $attributes['closeIcon'], 0, 2 ) ) {
|
||||
$css->add_property( 'stroke', $css->render_color( $attributes['closeIconColor'] ) );
|
||||
$css->add_property( 'fill', 'none' );
|
||||
} else {
|
||||
$css->add_property( 'fill', $css->render_color( $attributes['closeIconColor'] ) );
|
||||
$css->add_property( 'stroke', 'none' );
|
||||
}
|
||||
|
||||
// The closeIconSize is a range control, so we need to render it as a range.
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-close-btn' );
|
||||
if( !empty( $attributes['closeIconSize'][0] )) {
|
||||
$css->add_property( 'font-size', $attributes['closeIconSize'][0]. 'px' );
|
||||
}
|
||||
if( !empty( $attributes['closeIconSize'][1] )) {
|
||||
$css->set_media_state('tablet');
|
||||
$css->add_property( 'font-size', $attributes['closeIconSize'][1]. 'px' );
|
||||
$css->set_media_state('desktop');
|
||||
}
|
||||
if( !empty( $attributes['closeIconSize'][2] )) {
|
||||
$css->set_media_state('mobile');
|
||||
$css->add_property( 'font-size', $attributes['closeIconSize'][2]. 'px' );
|
||||
$css->set_media_state('desktop');
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-search' . $unique_id . ' .kb-search-close-btn:hover svg' );
|
||||
if ( !empty( $attributes['closeIcon'] ) && 'fe' === substr( $attributes['closeIcon'], 0, 2 ) ) {
|
||||
$css->add_property( 'stroke', $css->render_color( $attributes['closeIconHoverColor'] ) );
|
||||
$css->add_property( 'fill', 'none' );
|
||||
} else {
|
||||
$css->add_property( 'fill', $css->render_color( $attributes['closeIconHoverColor'] ) );
|
||||
$css->add_property( 'stroke', 'none' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-search.kb-search' . $unique_id . ' form, .kb-search.kb-search' . $unique_id . ' .kb-search-modal-content form form' );
|
||||
$css->render_responsive_range( $attributes, 'inputMaxWidth', 'max-width', 'inputMaxWidthType' );
|
||||
$css->render_responsive_range( $attributes, 'inputMinWidth', 'min-width', 'inputMinWidthType' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @param string $unique_id The unique ID for the block.
|
||||
* @param string $content The block inner content.
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$outer_classes = array( 'kb-search', 'kb-search' . $unique_id );
|
||||
|
||||
if ( 'modal' === $attributes['displayStyle'] ) {
|
||||
$outer_classes[] = 'kb-search-modal-container';
|
||||
}
|
||||
|
||||
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $outer_classes ) ) );
|
||||
|
||||
$search_form = $this->build_search_form( $attributes, $unique_id, $content );
|
||||
|
||||
return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $search_form );
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the search form HTML.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @param string $unique_id The unique ID for the block.
|
||||
* @param string $content The block inner content.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
private function build_search_form( $attributes, $unique_id, $content ) {
|
||||
$is_modal = 'modal' === $attributes['displayStyle'];
|
||||
$form_action = esc_url( home_url( '/' ) );
|
||||
|
||||
$search_form = $is_modal ? $content : '';
|
||||
|
||||
if ( $is_modal ) {
|
||||
$search_form .= $this->build_modal_content( $attributes, $unique_id );
|
||||
} else {
|
||||
if( empty( $attributes['showButton'] ) ) {
|
||||
$content = '';
|
||||
}
|
||||
$search_form .= sprintf(
|
||||
'<form class="kb-search-form" role="search" method="get" action="%s">%s%s</form>',
|
||||
$form_action,
|
||||
$this->build_input( $attributes ),
|
||||
$content
|
||||
);
|
||||
}
|
||||
|
||||
return $search_form;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the modal content HTML.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @param string $unique_id The unique ID for the block.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
private function build_modal_content( $attributes, $unique_id ) {
|
||||
$form_action = esc_url( home_url( '/' ) );
|
||||
$close_icon = '';
|
||||
|
||||
if( !empty( $attributes['closeIcon'] ) ) {
|
||||
$icon = $attributes['closeIcon'];
|
||||
$type = substr( $icon, 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = ( ! empty( $attributes['closeIconLineWidth'] ) ? $attributes['closeIconLineWidth'] : 2 );
|
||||
}
|
||||
$close_icon = Kadence_Blocks_Svg_Render::render( $icon, $fill, $stroke_width, '', false );
|
||||
}
|
||||
|
||||
$modal_content = sprintf(
|
||||
'<div class="kb-search-modal">
|
||||
<button class="kb-search-close-btn" aria-label="%1$s" aria-expanded="false" data-set-focus=".search-toggle-open">
|
||||
%2$s
|
||||
</button>
|
||||
<div class="kb-search-modal-content">
|
||||
<form class="kb-search-form" role="search" method="get" action="%3$s">%4$s</form>
|
||||
</div>
|
||||
</div>',
|
||||
esc_attr__( 'Close search', 'kadence-blocks' ),
|
||||
$close_icon,
|
||||
$form_action,
|
||||
$this->build_input( $attributes )
|
||||
);
|
||||
|
||||
return $modal_content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the search input HTML.
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
private function build_input( $attributes ) {
|
||||
$input = '<div class="kb-search-input-wrapper">';
|
||||
$placeholder = ! empty( $attributes['inputPlaceholder'] ) ? $attributes['inputPlaceholder'] : '';
|
||||
$aria_label = !empty($attributes['label']) ? sprintf( 'aria-label="%s"', esc_attr( $attributes['label'] ) ) : 'aria-label="' . esc_html__( 'Search', 'kadence-blocks' ) . '"';
|
||||
|
||||
$input .= sprintf(
|
||||
'<input name="s" type="text" class="kb-search-input" placeholder="%s" %s>',
|
||||
esc_attr( $placeholder ),
|
||||
$aria_label
|
||||
);
|
||||
|
||||
if( !empty( $attributes['inputIcon'] ) ) {
|
||||
$icon = $attributes['inputIcon'];
|
||||
$type = substr( $icon, 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = ( ! empty( $attributes['inputIconLineWidth'] ) ? $attributes['inputIconLineWidth'] : 2 );
|
||||
}
|
||||
$input_icon = Kadence_Blocks_Svg_Render::render( $icon, $fill, $stroke_width, '', false );
|
||||
|
||||
// If not showing a submit button, make the icon a submit button.
|
||||
if ( empty( $attributes['showButton'] ) || ( !empty( $attributes['displayStyle'] ) && 'modal' === $attributes['displayStyle'] ) ) {
|
||||
$input .= sprintf(
|
||||
'<button type="submit" class="kb-search-icon-submit" aria-label="%1$s"><span class="kb-search-icon">%2$s</span></button>',
|
||||
esc_attr__( 'Search', 'kadence-blocks' ),
|
||||
$input_icon
|
||||
);
|
||||
} else {
|
||||
$input .= sprintf(
|
||||
'<span class="kb-search-icon">%s</span>',
|
||||
$input_icon
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['searchProductsOnly'] ) ) {
|
||||
$input .= '<input type="hidden" name="post_type" value="product">';
|
||||
}
|
||||
|
||||
$input .= '</div>';
|
||||
|
||||
return $input;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-search', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-search.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Search_Block::get_instance();
|
||||
@@ -0,0 +1,276 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Show More Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Show More Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Show_More_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'show-more';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id );
|
||||
|
||||
/*
|
||||
* Margin
|
||||
*/
|
||||
$margin_args = array(
|
||||
'desktop_key' => 'marginDesktop',
|
||||
'tablet_key' => 'marginTablet',
|
||||
'mobile_key' => 'marginMobile',
|
||||
'unit_key' => 'marginUnit',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin', $margin_args );
|
||||
|
||||
/*
|
||||
* Padding
|
||||
*/
|
||||
$padding_args = array(
|
||||
'desktop_key' => 'paddingDesktop',
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
'unit_key' => 'paddingUnit',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', $padding_args );
|
||||
|
||||
|
||||
// Screen reader excerpt - visually hidden but accessible to screen readers
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .kb-show-more-sr-excerpt' );
|
||||
$css->add_property( 'position', 'absolute' );
|
||||
$css->add_property( 'width', '1px' );
|
||||
$css->add_property( 'height', '1px' );
|
||||
$css->add_property( 'padding', '0' );
|
||||
$css->add_property( 'margin', '-1px' );
|
||||
$css->add_property( 'overflow', 'hidden' );
|
||||
$css->add_property( 'clip', 'rect(0, 0, 0, 0)' );
|
||||
$css->add_property( 'white-space', 'nowrap' );
|
||||
$css->add_property( 'border', '0' );
|
||||
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn' );
|
||||
$css->add_property( 'margin-top', '1em' );
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .kt-btn-wrap:nth-child(2), .kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn:nth-of-type(2)' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
|
||||
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-column' );
|
||||
$css->add_property( 'max-height', ( isset( $attributes['heightDesktop'] ) ? $attributes['heightDesktop'] : 250) . ( isset( $attributes['heightType'] ) ? $attributes['heightType'] : 'px' ) );
|
||||
$css->add_property( 'overflow-y', 'hidden' );
|
||||
|
||||
if ( isset( $attributes['heightTablet'] ) && ! empty( $attributes['heightTablet'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-column' );
|
||||
$css->add_property( 'max-height', $attributes['heightTablet'] . ( isset( $attributes['heightType'] ) ? $attributes['heightType'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop');
|
||||
}
|
||||
if ( isset( $attributes['heightMobile'] ) && ! empty( $attributes['heightMobile'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-column' );
|
||||
$css->add_property( 'max-height', $attributes['heightMobile'] . ( isset( $attributes['heightType'] ) ? $attributes['heightType'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop');
|
||||
}
|
||||
|
||||
if ( isset( $attributes['enableFadeOut'] ) && $attributes['enableFadeOut'] ) {
|
||||
$css->add_property( '-webkit-mask-image', 'linear-gradient(to bottom, black ' . ( isset( $attributes['fadeOutSize'] ) ? abs( $attributes['fadeOutSize'] - 100 ) : 50 ) . '%, transparent 100%)' );
|
||||
$css->add_property( 'mask-image', 'linear-gradient(to bottom, black ' . ( isset( $attributes['fadeOutSize'] ) ? abs( $attributes['fadeOutSize'] - 100 ) : 50 ) . '%, transparent 100%)' );
|
||||
}
|
||||
|
||||
// Add open styles
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . '.kb-smc-open > .wp-block-kadence-column' );
|
||||
$css->add_property( 'max-height', 'none' );
|
||||
$css->add_property( '-webkit-mask-image', 'none' );
|
||||
$css->add_property( 'mask-image', 'none' );
|
||||
$css->add_property( 'overflow-y', 'unset' );
|
||||
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . '.kb-smc-open > .wp-block-kadence-advancedbtn .kt-btn-wrap:nth-child(1), .kb-block-show-more-container' . $unique_id . '.kb-smc-open > .wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn:nth-of-type(1)' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . '.kb-smc-open > .wp-block-kadence-advancedbtn .kt-btn-wrap:nth-child(2), .kb-block-show-more-container' . $unique_id . '.kb-smc-open > .wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn:nth-of-type(2)' );
|
||||
$css->add_property( 'display', 'inline-flex' );
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . '.kb-smc-open > .wp-block-kadence-advancedbtn.kt-force-btn-fullwidth .kt-btn-wrap:nth-child(2)' );
|
||||
$css->add_property( 'display', 'block' );
|
||||
|
||||
if( isset( $attributes['showHideMore'] ) && !$attributes['showHideMore'] ) {
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . '.kb-smc-open > .wp-block-kadence-advancedbtn .kt-btn-wrap:nth-child(2), .kb-block-show-more-container' . $unique_id . '.kb-smc-open > .wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn:nth-of-type(2)' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
}
|
||||
|
||||
// Default expanded Desktop
|
||||
if ( isset( $attributes['defaultExpandedDesktop'] ) && $attributes['defaultExpandedDesktop'] ) {
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-column' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
$css->add_property( 'max-height', 'none' );
|
||||
$css->add_property( '-webkit-mask-image', 'none' );
|
||||
$css->add_property( 'mask-image', 'none' );
|
||||
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .kt-btn-wrap:first-child, .kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn:nth-of-type(1)' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
// Default expanded Tablet.
|
||||
if ( isset( $attributes['defaultExpandedTablet'] ) && $attributes['defaultExpandedTablet'] ) {
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-column' );
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'max-height', 'none' );
|
||||
$css->add_property( '-webkit-mask-image', 'none' );
|
||||
$css->add_property( 'mask-image', 'none' );
|
||||
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .kt-btn-wrap:first-child, .kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn:nth-of-type(1)' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
// If default expanded on tablet, but not on mobile.
|
||||
if ( ! isset( $attributes['defaultExpandedMobile'] ) || ( isset( $attributes['defaultExpandedMobile'] ) && ! $attributes['defaultExpandedMobile'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-column' );
|
||||
$css->add_property( 'max-height', ( isset( $attributes['heightDesktop'] ) ? $attributes['heightDesktop'] : 250 ) . ( isset( $attributes['heightType'] ) ? $attributes['heightType'] : 'px' ) );
|
||||
$css->add_property( 'overflow-y', 'hidden' );
|
||||
|
||||
if ( isset( $attributes['enableFadeOut'] ) && $attributes['enableFadeOut'] ) {
|
||||
$css->add_property( '-webkit-mask-image', 'linear-gradient(to bottom, black ' . ( isset( $attributes['fadeOutSize'] ) ? abs( $attributes['fadeOutSize'] - 100 ) : 50 ) . '%, transparent 100%)' );
|
||||
$css->add_property( 'mask-image', 'linear-gradient(to bottom, black ' . ( isset( $attributes['fadeOutSize'] ) ? abs( $attributes['fadeOutSize'] - 100 ) : 50 ) . '%, transparent 100%)' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .kt-btn-wrap:first-child, .kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn:nth-of-type(1)' );
|
||||
$css->add_property( 'display', 'inline' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
// Default expanded Mobile
|
||||
if ( isset( $attributes['defaultExpandedMobile'] ) && $attributes['defaultExpandedMobile'] ) {
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-column' );
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'max-height', 'none' );
|
||||
$css->add_property( '-webkit-mask-image', 'none' );
|
||||
$css->add_property( 'mask-image', 'none' );
|
||||
|
||||
$css->set_selector( '.kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .kt-btn-wrap:first-child, .kb-block-show-more-container' . $unique_id . ' > .wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn:nth-of-type(1)' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $content the block content.
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return string Modified block content.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
// Check if excerpt element already exists in content
|
||||
if ( false !== strpos( $content, 'kb-show-more-sr-excerpt' ) ) {
|
||||
return $content;
|
||||
}
|
||||
|
||||
// Create the excerpt div HTML
|
||||
$excerpt_html = '<div class="kb-show-more-sr-excerpt" aria-live="polite" aria-atomic="true"></div>';
|
||||
|
||||
// Find the opening div tag of the container and insert excerpt right after it
|
||||
// Match: <div class="kb-block-show-more-container...">
|
||||
$pattern = '/(<div[^>]*class="[^"]*kb-block-show-more-container[^"]*"[^>]*>)/i';
|
||||
|
||||
if ( preg_match( $pattern, $content, $matches ) ) {
|
||||
// Insert excerpt div right after the opening container div
|
||||
$content = preg_replace( $pattern, $matches[0] . $excerpt_html, $content, 1 );
|
||||
} else {
|
||||
// Fallback: if pattern doesn't match, prepend to content
|
||||
$content = $excerpt_html . $content;
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-show-more', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-show-more.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
wp_localize_script(
|
||||
'kadence-blocks-show-more',
|
||||
'kbShowMore',
|
||||
array(
|
||||
'contentCollapsed' => __( 'Content is collapsed.', 'kadence-blocks' ),
|
||||
'contentContinues' => __( 'Content continues.', 'kadence-blocks' ),
|
||||
'activateButton' => __( 'Activate the', 'kadence-blocks' ),
|
||||
'buttonToReveal' => __( 'button to reveal the full content.', 'kadence-blocks' ),
|
||||
'showMoreDefault' => __( 'Show More', 'kadence-blocks' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Show_More_Block::get_instance();
|
||||
@@ -0,0 +1,135 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Single Icon Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Single Icon Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Single_Icon_Block extends Kadence_Blocks_Abstract_Block {
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'single-icon';
|
||||
|
||||
/**
|
||||
* Block determines if styles need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
if ( isset( $attributes ) && is_array( $attributes ) ) {
|
||||
$css->set_selector( '.kt-svg-item-' . $unique_id . ' .kb-svg-icon-wrap, .kt-svg-style-stacked.kt-svg-item-' . $unique_id . ' .kb-svg-icon-wrap' );
|
||||
$css->render_color_output( $attributes, 'color', 'color' );
|
||||
|
||||
// Match icon default size if not set.
|
||||
if ( ! isset( $attributes['size'] ) ) {
|
||||
$attributes['size'] = 50;
|
||||
}
|
||||
|
||||
$css->render_responsive_size(
|
||||
$attributes,
|
||||
array(
|
||||
'size',
|
||||
'tabletSize',
|
||||
'mobileSize',
|
||||
),
|
||||
'font-size'
|
||||
);
|
||||
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin', array( 'unit_key' => 'marginUnit' ) );
|
||||
|
||||
if ( isset( $attributes['style'] ) && 'stacked' === $attributes['style'] ) {
|
||||
$css->render_color_output( $attributes, 'background', 'background' );
|
||||
$css->render_color_output( $attributes, 'border', 'border-color' );
|
||||
$css->render_range( $attributes, 'borderWidth', 'border-width' );
|
||||
$css->render_range( $attributes, 'borderRadius', 'border-radius', '%' );
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', array( 'unit_key' => 'paddingUnit' ) );
|
||||
$css->set_selector( '.kt-svg-item-' . $unique_id . ':hover .kb-svg-icon-wrap' );
|
||||
$css->render_color_output( $attributes, 'hBackground', 'background' );
|
||||
$css->render_color_output( $attributes, 'hBorder', 'border-color' );
|
||||
}
|
||||
|
||||
// Hover.
|
||||
$css->set_selector( '.kt-svg-item-' . $unique_id . ':hover .kb-svg-icon-wrap' );
|
||||
$css->render_color_output( $attributes, 'hColor', 'color' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if ( strpos( $content, 'kb-tooltip-hidden-content') !== false ) {
|
||||
$this->enqueue_script( 'kadence-blocks-tippy' );
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
|
||||
// Skip calling parent because this block does not have a dedicated CSS or JS file.
|
||||
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_script( 'kadence-blocks-popper', KADENCE_BLOCKS_URL . 'includes/assets/js/popper.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-tippy', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-tippy.min.js', array( 'kadence-blocks-popper' ), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Single_Icon_Block::get_instance();
|
||||
@@ -0,0 +1,240 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Icon List Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Icon List Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Listitem_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'listitem';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Block determines if styles need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kt-svg-icon-list-item-' . $unique_id . ' .kt-svg-icon-list-single' );
|
||||
|
||||
if ( isset( $attributes['size'] ) && is_numeric($attributes['size'])) {
|
||||
$css->add_property( 'font-size', $attributes['size'] . 'px !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['color'] ) . ' !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['background'] ) && ! empty( $attributes['style'] ) && 'default' !== $attributes['style'] ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['background'] ) . '!important' );
|
||||
}
|
||||
if ( ! empty( $attributes['padding'] ) && ! empty( $attributes['style'] ) && 'default' !== $attributes['style'] ) {
|
||||
$css->add_property( 'padding', $attributes['padding'] . 'px !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['border'] ) && ! empty( $attributes['style'] ) && 'default' !== $attributes['style'] ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['border'] ) . ' !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['borderWidth'] ) && ! empty( $attributes['style'] ) && 'default' !== $attributes['style'] ) {
|
||||
$css->add_property( 'border-width', $attributes['borderWidth'] . 'px !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['borderRadius'] ) && ! empty( $attributes['style'] ) && 'default' !== $attributes['style'] ) {
|
||||
$css->add_property( 'border-radius', $attributes['borderRadius'] . '% !important' );
|
||||
}
|
||||
|
||||
// Highlight.
|
||||
$css->set_selector( '.kt-svg-icon-list-item-' . $unique_id . ' .kt-svg-icon-list-text mark.kt-highlight' );
|
||||
// Defaults.
|
||||
$css->add_property( 'background-color', 'unset' );
|
||||
|
||||
if ( isset( $attributes['markLetterSpacing'] ) && ! empty( $attributes['markLetterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $attributes['markLetterSpacing'] . ( ! isset( $attributes['markLetterSpacingType'] ) ? 'px' : $attributes['markLetterSpacingType'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markSize'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][0], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markLineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['markLineHeight'][0] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markTypography'] ) ) {
|
||||
$google = isset( $attributes['markGoogleFont'] ) && $attributes['markGoogleFont'] ? true : false;
|
||||
$google = $google && ( isset( $attributes['markLoadGoogleFont'] ) && $attributes['markLoadGoogleFont'] || ! isset( $attributes['markLoadGoogleFont'] ) ) ? true : false;
|
||||
$variant = ! empty( $attributes['markFontVariant'] ) ? $attributes['markFontVariant'] : null;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $attributes['markTypography'], $google, $variant ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markFontWeight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $attributes['markFontWeight'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markFontStyle'] ) ) {
|
||||
$css->add_property( 'font-style', $attributes['markFontStyle'] );
|
||||
}
|
||||
if( !empty( $attributes['textGradient'] ) && ! empty( $attributes['enableTextGradient'] ) ) {
|
||||
$css->add_property( '-webkit-text-fill-color', 'initial !important' );
|
||||
$css->add_property( '-webkit-background-clip', 'initial !important' );
|
||||
$css->add_property( 'background-clip', 'initial !important' );
|
||||
}
|
||||
if ( empty( $attributes['enableMarkGradient'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['markColor'] ?? '#f76a0c' ) );
|
||||
} else if ( !empty( $attributes['markGradient'] ) && ! empty( $attributes['enableMarkGradient'] ) ) {
|
||||
$css->add_property( 'background-image', $attributes['markGradient'] );
|
||||
$css->add_property( '-webkit-background-clip', 'text' );
|
||||
$css->add_property( 'background-clip', 'text' );
|
||||
$css->add_property( '-webkit-text-fill-color', 'transparent' );
|
||||
}
|
||||
if ( ! empty($attributes['enableMarkBackgroundGradient']) && ! empty($attributes['markBackgroundGradient']) ) {
|
||||
$css->add_property( 'background-image', $attributes['markBackgroundGradient'] );
|
||||
}
|
||||
if ( ! empty( $attributes['markTextTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $attributes['markTextTransform'] );
|
||||
}
|
||||
if ( ! empty( $attributes['markBG'] ) && empty( $attributes['enableMarkGradient'] ) && empty( $attributes['enableMarkBackgroundGradient'] ) ) {
|
||||
$alpha = ( isset( $attributes['markBGOpacity'] ) && ! empty( $attributes['markBGOpacity'] ) ? $attributes['markBGOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $attributes['markBG'], $alpha ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markBorder'] ) ) {
|
||||
$alpha = ( isset( $attributes['markBorderOpacity'] ) && ! empty( $attributes['markBorderOpacity'] ) ? $attributes['markBorderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['markBorder'], $alpha ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markBorderWidth'] ) ) {
|
||||
$css->add_property( 'border-width', $attributes['markBorderWidth'] . 'px' );
|
||||
}
|
||||
if ( ! empty( $attributes['markBorderStyle'] ) && 'solid' !== $attributes['markBorderStyle'] ) {
|
||||
$css->add_property( 'border-style', $attributes['markBorderStyle'] );
|
||||
}
|
||||
$css->render_border_styles( $attributes, 'markBorderStyles' );
|
||||
$css->render_border_radius( $attributes, 'markBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
|
||||
$css->add_property( '-webkit-box-decoration-break', 'clone' );
|
||||
$css->add_property( 'box-decoration-break', 'clone' );
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->render_border_radius( $attributes, 'tabletMarkBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->render_border_radius( $attributes, 'mobileMarkBorderRadius', ( ! empty( $attributes['markBorderRadiusUnit'] ) ? $attributes['markBorderRadiusUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
$mark_padding_args = array(
|
||||
'desktop_key' => 'markPadding',
|
||||
'tablet_key' => 'markTabPadding',
|
||||
'mobile_key' => 'markMobilePadding',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'markPadding', 'padding', $mark_padding_args );
|
||||
|
||||
// Tablet.
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kt-svg-icon-list-item-' . $unique_id . ' .kt-svg-icon-list-text mark.kt-highlight' );
|
||||
if ( ! empty( $attributes['markSize'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][1], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markLineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['markLineHeight'][1] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( ! empty( $attributes['markSize'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['markSize'][2], ( ! isset( $attributes['markSizeType'] ) ? 'px' : $attributes['markSizeType'] ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['markLineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['markLineHeight'][2] . ( ! isset( $attributes['markLineType'] ) ? 'px' : $attributes['markLineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if ( strpos( $content, 'kb-tooltip-hidden-content') !== false ) {
|
||||
$this->enqueue_script( 'kadence-blocks-tippy' );
|
||||
}
|
||||
if ( isset( $block_instance ) && is_object( $block_instance ) && isset( $block_instance->context['kadence/listIcon'] ) ) {
|
||||
$parent_default = $block_instance->context['kadence/listIcon'];
|
||||
|
||||
$content = str_replace( 'USE_PARENT_DEFAULT_ICON', $parent_default, $content );
|
||||
}
|
||||
if ( isset( $block_instance ) && is_object( $block_instance ) && isset( $block_instance->context['kadence/listIconWidth'] ) ) {
|
||||
$parent_default_width = $block_instance->context['kadence/listIconWidth'];
|
||||
if ( empty( $parent_default_width ) ) {
|
||||
$parent_default_width = 2;
|
||||
}
|
||||
|
||||
$content = str_replace( 'USE_PARENT_DEFAULT_WIDTH', $parent_default_width, $content );
|
||||
}
|
||||
return $content;
|
||||
}
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
|
||||
// Skip calling parent because this block does not have a dedicated CSS or JS file.
|
||||
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_script( 'kadence-blocks-popper', KADENCE_BLOCKS_URL . 'includes/assets/js/popper.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-tippy', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-tippy.min.js', array( 'kadence-blocks-popper' ), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Listitem_Block::get_instance();
|
||||
@@ -0,0 +1,477 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Single Button Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Single Button.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Singlebtn_Block extends Kadence_Blocks_Abstract_Block {
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'singlebtn';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
/**
|
||||
* Render for block scripts block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param boolean $inline true or false based on when called.
|
||||
*/
|
||||
public function render_scripts( $attributes, $inline = false ) {
|
||||
if ( ! empty( $attributes['target'] ) && 'video' === $attributes['target'] ) {
|
||||
$this->enqueue_style( 'kadence-glightbox' );
|
||||
$this->enqueue_script( 'kadence-blocks-glight-video-init' );
|
||||
$gallery_translation_array = [
|
||||
'plyr_js' => KADENCE_BLOCKS_URL . 'includes/assets/js/plyr.min.js',
|
||||
'plyr_css' => KADENCE_BLOCKS_URL . 'includes/assets/css/plyr.min.css',
|
||||
];
|
||||
wp_localize_script( 'kadence-blocks-glight-video-init', 'kadence_video_pop', $gallery_translation_array );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$sizes = [ 'Desktop', 'Tablet', 'Mobile' ];
|
||||
foreach ( $sizes as $size ) {
|
||||
$this->sized_dynamic_styles( $css, $attributes, $unique_id, $size );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
$width_type = ! empty( $attributes['widthType'] ) ? $attributes['widthType'] : 'auto';
|
||||
if ( 'fixed' === $width_type ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button, ul.menu .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button' );
|
||||
$css->render_responsive_range( $attributes, 'width', 'width', 'widthUnit' );
|
||||
} else {
|
||||
$css->set_selector( 'ul.menu .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button' );
|
||||
$css->add_property( 'width', 'initial' );
|
||||
}
|
||||
// standard styles
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button' );
|
||||
$bg_type = ! empty( $attributes['backgroundType'] ) ? $attributes['backgroundType'] : 'normal';
|
||||
$bg_hover_type = ! empty( $attributes['backgroundHoverType'] ) ? $attributes['backgroundHoverType'] : 'normal';
|
||||
|
||||
if ( ! empty( $attributes['color'] ) && ( empty( $attributes['textBackgroundType'] ) || $attributes['textBackgroundType'] === 'normal' ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['color'] ) );
|
||||
} elseif ( ! empty( $attributes['textBackgroundType'] ) && $attributes['textBackgroundType'] === 'gradient' ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button .kt-btn-inner-text' );
|
||||
$css->add_property( 'background', $attributes['textGradient'] );
|
||||
$css->add_property( '-webkit-background-clip', 'text' );
|
||||
$css->add_property( '-webkit-text-fill-color', 'transparent' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button' );
|
||||
}
|
||||
if ( 'normal' === $bg_type && ! empty( $attributes['background'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['background'] ) . ( 'gradient' === $bg_hover_type ? ' !important' : '' ) );
|
||||
}
|
||||
if ( 'gradient' === $bg_type && ! empty( $attributes['gradient'] ) ) {
|
||||
$css->add_property( 'background', $attributes['gradient'] . ' !important' );
|
||||
}
|
||||
$css->render_typography( $attributes, 'typography' );
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', [ 'unit_key' => 'borderRadiusUnit' ] );
|
||||
$css->render_border_styles( $attributes, 'borderStyle', true );
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', [ 'unit_key' => 'paddingUnit' ] );
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin', [ 'unit_key' => 'marginUnit' ] );
|
||||
if ( isset( $attributes['displayShadow'] ) && true === $attributes['displayShadow'] ) {
|
||||
if ( isset( $attributes['shadow'] ) && is_array( $attributes['shadow'] ) && isset( $attributes['shadow'][0] ) && is_array( $attributes['shadow'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadow'][0]['inset'] ) && true === $attributes['shadow'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadow'][0]['hOffset'] ) && is_numeric( $attributes['shadow'][0]['hOffset'] ) ? $attributes['shadow'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadow'][0]['vOffset'] ) && is_numeric( $attributes['shadow'][0]['vOffset'] ) ? $attributes['shadow'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadow'][0]['blur'] ) && is_numeric( $attributes['shadow'][0]['blur'] ) ? $attributes['shadow'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadow'][0]['spread'] ) && is_numeric( $attributes['shadow'][0]['spread'] ) ? $attributes['shadow'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadow'][0]['color'] ) && ! empty( $attributes['shadow'][0]['color'] ) ? $attributes['shadow'][0]['color'] : '#000000' ), ( isset( $attributes['shadow'][0]['opacity'] ) && is_numeric( $attributes['shadow'][0]['opacity'] ) ? $attributes['shadow'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', '1px 1px 2px 0px rgba(0, 0, 0, 0.2)' );
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['textUnderline'] ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:not(.specificity):not(.extra-specificity)' );
|
||||
$css->add_property( 'text-decoration', $attributes['textUnderline'] );
|
||||
}
|
||||
// Icon styles.
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kb-svg-icon-wrap' );
|
||||
if ( ! empty( $attributes['iconColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['iconColor'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'iconPadding', 'padding', [ 'unit_key' => 'iconPaddingUnit' ] );
|
||||
$css->render_responsive_range( $attributes, 'iconSize', 'font-size', 'iconSizeUnit' );
|
||||
$css->render_responsive_range( $attributes, 'iconSize', '--kb-button-icon-size', 'iconSizeUnit' );
|
||||
// Icon Hover-Focus.
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button:hover .kb-svg-icon-wrap, .kb-btn' . $unique_id . '.kb-button:focus .kb-svg-icon-wrap' );
|
||||
if ( ! empty( $attributes['iconColorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['iconColorHover'] ) );
|
||||
}
|
||||
// Hover-Focus.
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:focus' );
|
||||
if ( ! empty( $attributes['colorHover'] ) && ( empty( $attributes['textBackgroundHoverType'] ) || $attributes['textBackgroundHoverType'] === 'normal' ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['colorHover'] ) );
|
||||
} elseif ( ! empty( $attributes['textBackgroundHoverType'] ) && $attributes['textBackgroundHoverType'] === 'gradient' ) {
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:hover .kt-btn-inner-text, .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:focus .kt-btn-inner-text' );
|
||||
$css->add_property( 'background', $attributes['textGradientHover'] );
|
||||
$css->add_property( '-webkit-background-clip', 'text' );
|
||||
$css->add_property( '-webkit-text-fill-color', 'transparent' );
|
||||
$css->set_selector( '.wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:hover, .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:focus' );
|
||||
}
|
||||
|
||||
if ( 'gradient' !== $bg_type && 'normal' === $bg_hover_type && ! empty( $attributes['backgroundHover'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['backgroundHover'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderHoverRadius', 'border-radius' );
|
||||
$css->render_border_styles( $attributes, 'borderHoverStyle', true );
|
||||
if ( isset( $attributes['displayHoverShadow'] ) && true === $attributes['displayHoverShadow'] ) {
|
||||
if ( ( 'gradient' === $bg_type || 'gradient' === $bg_hover_type ) && isset( $attributes['shadowHover'][0]['inset'] ) && true === $attributes['shadowHover'][0]['inset'] ) {
|
||||
$css->add_property( 'box-shadow', '0px 0px 0px 0px rgba(0, 0, 0, 0)' );
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button:hover::before' );
|
||||
}
|
||||
if ( isset( $attributes['shadowHover'] ) && is_array( $attributes['shadowHover'] ) && isset( $attributes['shadowHover'][0] ) && is_array( $attributes['shadowHover'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadowHover'][0]['inset'] ) && true === $attributes['shadowHover'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadowHover'][0]['hOffset'] ) && is_numeric( $attributes['shadowHover'][0]['hOffset'] ) ? $attributes['shadowHover'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['vOffset'] ) && is_numeric( $attributes['shadowHover'][0]['vOffset'] ) ? $attributes['shadowHover'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['blur'] ) && is_numeric( $attributes['shadowHover'][0]['blur'] ) ? $attributes['shadowHover'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['spread'] ) && is_numeric( $attributes['shadowHover'][0]['spread'] ) ? $attributes['shadowHover'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadowHover'][0]['color'] ) && ! empty( $attributes['shadowHover'][0]['color'] ) ? $attributes['shadowHover'][0]['color'] : '#000000' ), ( isset( $attributes['shadowHover'][0]['opacity'] ) && is_numeric( $attributes['shadowHover'][0]['opacity'] ) ? $attributes['shadowHover'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', '2px 2px 3px 0px rgba(0, 0, 0, 0.4)' );
|
||||
}
|
||||
}
|
||||
// Hover before.
|
||||
if ( 'gradient' === $bg_type && 'normal' === $bg_hover_type && ! empty( $attributes['backgroundHover'] ) ) {
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button::before' );
|
||||
$css->add_property( 'background', $css->render_color( $attributes['backgroundHover'] ) );
|
||||
$css->add_property( 'transition', 'opacity .3s ease-in-out' );
|
||||
}
|
||||
if ( 'gradient' === $bg_hover_type && ! empty( $attributes['gradientHover'] ) ) {
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button::before' );
|
||||
$css->add_property( 'background', $attributes['gradientHover'] );
|
||||
$css->add_property( 'transition', 'opacity .3s ease-in-out' );
|
||||
}
|
||||
// Only Icon.
|
||||
if ( isset( $attributes['onlyIcon'][0] ) && '' !== $attributes['onlyIcon'][0] && true == $attributes['onlyIcon'][0] ) {
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kt-btn-inner-text' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
}
|
||||
if ( isset( $attributes['onlyIcon'][1] ) && '' !== $attributes['onlyIcon'][1] ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kt-btn-inner-text' );
|
||||
if ( true == $attributes['onlyIcon'][1] ) {
|
||||
$css->add_property( 'display', 'none' );
|
||||
} elseif ( false == $attributes['onlyIcon'][1] ) {
|
||||
$css->add_property( 'display', 'block' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['onlyText'][0] ) && '' !== $attributes['onlyText'][0] ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kb-svg-icon-wrap' );
|
||||
if ( true == $attributes['onlyText'][0] ) {
|
||||
$css->add_property( 'display', 'none' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['onlyIcon'][2] ) && '' !== $attributes['onlyIcon'][2] ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kt-btn-inner-text' );
|
||||
if ( true == $attributes['onlyIcon'][2] ) {
|
||||
$css->add_property( 'display', 'none' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['onlyText'][1] ) && '' !== $attributes['onlyText'][1] ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button .kb-svg-icon-wrap' );
|
||||
if ( true == $attributes['onlyText'][1] ) {
|
||||
$css->add_property( 'display', 'none' );
|
||||
} elseif ( false == $attributes['onlyText'][1] ) {
|
||||
$css->add_property( 'display', 'block' );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Build up the dynamic styles for a size.
|
||||
*
|
||||
* @param string $size The size.
|
||||
* @return array
|
||||
*/
|
||||
public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'Desktop' ) {
|
||||
$sized_attributes = $css->get_sized_attributes_auto( $attributes, $size, false );
|
||||
$sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size );
|
||||
|
||||
$css->set_media_state( strtolower( $size ) );
|
||||
|
||||
// standard transparent styles
|
||||
$css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button' );
|
||||
$bg_type_transparent = ! empty( $attributes['backgroundTransparentType'] ) ? $attributes['backgroundTransparentType'] : 'normal';
|
||||
$bg_hover_type_transparent = ! empty( $attributes['backgroundTransparentHoverType'] ) ? $attributes['backgroundTransparentHoverType'] : 'normal';
|
||||
if ( ! empty( $attributes['colorTransparent'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['colorTransparent'] ) );
|
||||
}
|
||||
if ( 'normal' === $bg_type_transparent && ! empty( $attributes['backgroundTransparent'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['backgroundTransparent'] ) . ( 'gradient' === $bg_hover_type_transparent ? ' !important' : '' ) );
|
||||
}
|
||||
if ( 'gradient' === $bg_type_transparent && ! empty( $attributes['gradientTransparent'] ) ) {
|
||||
$css->add_property( 'background', $attributes['gradientTransparent'] . ' !important' );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderTransparentRadius', 'border-radius', [ 'unit_key' => 'borderTransparentRadiusUnit' ] );
|
||||
$css->render_border_styles( $attributes, 'borderTransparentStyle', true );
|
||||
if ( isset( $attributes['displayShadowTransparent'] ) && true === $attributes['displayShadowTransparent'] ) {
|
||||
if ( isset( $attributes['shadowTransparent'] ) && is_array( $attributes['shadowTransparent'] ) && isset( $attributes['shadowTransparent'][0] ) && is_array( $attributes['shadowTransparent'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadowTransparent'][0]['inset'] ) && true === $attributes['shadowTransparent'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadowTransparent'][0]['hOffset'] ) && is_numeric( $attributes['shadowTransparent'][0]['hOffset'] ) ? $attributes['shadowTransparent'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowTransparent'][0]['vOffset'] ) && is_numeric( $attributes['shadowTransparent'][0]['vOffset'] ) ? $attributes['shadowTransparent'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowTransparent'][0]['blur'] ) && is_numeric( $attributes['shadowTransparent'][0]['blur'] ) ? $attributes['shadowTransparent'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadowTransparent'][0]['spread'] ) && is_numeric( $attributes['shadowTransparent'][0]['spread'] ) ? $attributes['shadowTransparent'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadowTransparent'][0]['color'] ) && ! empty( $attributes['shadowTransparent'][0]['color'] ) ? $attributes['shadowTransparent'][0]['color'] : '#000000' ), ( isset( $attributes['shadowTransparent'][0]['opacity'] ) && is_numeric( $attributes['shadowTransparent'][0]['opacity'] ) ? $attributes['shadowTransparent'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', '1px 1px 2px 0px rgba(0, 0, 0, 0.2)' );
|
||||
}
|
||||
}
|
||||
|
||||
// hover transparent styles
|
||||
$css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:hover' );
|
||||
if ( ! empty( $attributes['colorTransparentHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['colorTransparentHover'] ) );
|
||||
}
|
||||
if ( 'gradient' !== $bg_type_transparent && 'normal' === $bg_hover_type_transparent && ! empty( $attributes['backgroundTransparentHover'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['backgroundTransparentHover'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderTransparentHoverRadius', 'border-radius' );
|
||||
$css->render_border_styles( $attributes, 'borderTransparentHoverStyle', true );
|
||||
if ( isset( $attributes['displayHoverShadowTransparent'] ) && true === $attributes['displayHoverShadowTransparent'] ) {
|
||||
if ( ( 'gradient' === $bg_type_transparent || 'gradient' === $bg_hover_type_transparent ) && isset( $attributes['shadowTransparentHover'][0]['inset'] ) && true === $attributes['shadowTransparentHover'][0]['inset'] ) {
|
||||
$css->add_property( 'box-shadow', '0px 0px 0px 0px rgba(0, 0, 0, 0)' );
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button:hover::before' );
|
||||
}
|
||||
if ( isset( $attributes['shadowTransparentHover'] ) && is_array( $attributes['shadowTransparentHover'] ) && isset( $attributes['shadowTransparentHover'][0] ) && is_array( $attributes['shadowTransparentHover'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadowTransparentHover'][0]['inset'] ) && true === $attributes['shadowTransparentHover'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadowTransparentHover'][0]['hOffset'] ) && is_numeric( $attributes['shadowTransparentHover'][0]['hOffset'] ) ? $attributes['shadowTransparentHover'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowTransparentHover'][0]['vOffset'] ) && is_numeric( $attributes['shadowTransparentHover'][0]['vOffset'] ) ? $attributes['shadowTransparentHover'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowTransparentHover'][0]['blur'] ) && is_numeric( $attributes['shadowTransparentHover'][0]['blur'] ) ? $attributes['shadowTransparentHover'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadowTransparentHover'][0]['spread'] ) && is_numeric( $attributes['shadowTransparentHover'][0]['spread'] ) ? $attributes['shadowTransparentHover'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadowTransparentHover'][0]['color'] ) && ! empty( $attributes['shadowTransparentHover'][0]['color'] ) ? $attributes['shadowTransparentHover'][0]['color'] : '#000000' ), ( isset( $attributes['shadowTransparentHover'][0]['opacity'] ) && is_numeric( $attributes['shadowTransparentHover'][0]['opacity'] ) ? $attributes['shadowTransparentHover'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', '2px 2px 3px 0px rgba(0, 0, 0, 0.4)' );
|
||||
}
|
||||
}
|
||||
|
||||
// standard sticky styles
|
||||
$css->set_selector( '.item-is-stuck .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button' );
|
||||
$bg_type_sticky = ! empty( $attributes['backgroundStickyType'] ) ? $attributes['backgroundStickyType'] : 'normal';
|
||||
$bg_hover_type_sticky = ! empty( $attributes['backgroundStickyHoverType'] ) ? $attributes['backgroundStickyHoverType'] : 'normal';
|
||||
if ( ! empty( $attributes['colorSticky'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['colorSticky'] ) );
|
||||
}
|
||||
if ( 'normal' === $bg_type_sticky && ! empty( $attributes['backgroundSticky'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['backgroundSticky'] ) . ( 'gradient' === $bg_hover_type_sticky ? ' !important' : '' ) );
|
||||
}
|
||||
if ( 'gradient' === $bg_type_sticky && ! empty( $attributes['gradientSticky'] ) ) {
|
||||
$css->add_property( 'background', $attributes['gradientSticky'] . ' !important' );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderStickyRadius', 'border-radius', [ 'unit_key' => 'borderStickyRadiusUnit' ] );
|
||||
$css->render_border_styles( $attributes, 'borderStickyStyle', true );
|
||||
if ( isset( $attributes['displayShadowSticky'] ) && true === $attributes['displayShadowSticky'] ) {
|
||||
if ( isset( $attributes['shadowSticky'] ) && is_array( $attributes['shadowSticky'] ) && isset( $attributes['shadowSticky'][0] ) && is_array( $attributes['shadowSticky'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadowSticky'][0]['inset'] ) && true === $attributes['shadowSticky'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadowSticky'][0]['hOffset'] ) && is_numeric( $attributes['shadowSticky'][0]['hOffset'] ) ? $attributes['shadowSticky'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowSticky'][0]['vOffset'] ) && is_numeric( $attributes['shadowSticky'][0]['vOffset'] ) ? $attributes['shadowSticky'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowSticky'][0]['blur'] ) && is_numeric( $attributes['shadowSticky'][0]['blur'] ) ? $attributes['shadowSticky'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadowSticky'][0]['spread'] ) && is_numeric( $attributes['shadowSticky'][0]['spread'] ) ? $attributes['shadowSticky'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadowSticky'][0]['color'] ) && ! empty( $attributes['shadowSticky'][0]['color'] ) ? $attributes['shadowSticky'][0]['color'] : '#000000' ), ( isset( $attributes['shadowSticky'][0]['opacity'] ) && is_numeric( $attributes['shadowSticky'][0]['opacity'] ) ? $attributes['shadowSticky'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', '1px 1px 2px 0px rgba(0, 0, 0, 0.2)' );
|
||||
}
|
||||
}
|
||||
|
||||
// hover sticky styles
|
||||
$css->set_selector( '.item-is-stuck .wp-block-kadence-advancedbtn .kb-btn' . $unique_id . '.kb-button:hover' );
|
||||
if ( ! empty( $attributes['colorStickyHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['colorStickyHover'] ) );
|
||||
}
|
||||
if ( 'gradient' !== $bg_type_sticky && 'normal' === $bg_hover_type_sticky && ! empty( $attributes['backgroundStickyHover'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['backgroundStickyHover'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderStickyHoverRadius', 'border-radius' );
|
||||
$css->render_border_styles( $attributes, 'borderStickyHoverStyle', true );
|
||||
if ( isset( $attributes['displayHoverShadowSticky'] ) && true === $attributes['displayHoverShadowSticky'] ) {
|
||||
if ( ( 'gradient' === $bg_type_sticky || 'gradient' === $bg_hover_type_sticky ) && isset( $attributes['shadowStickyHover'][0]['inset'] ) && true === $attributes['shadowStickyHover'][0]['inset'] ) {
|
||||
$css->add_property( 'box-shadow', '0px 0px 0px 0px rgba(0, 0, 0, 0)' );
|
||||
$css->set_selector( '.kb-btn' . $unique_id . '.kb-button:hover::before' );
|
||||
}
|
||||
if ( isset( $attributes['shadowStickyHover'] ) && is_array( $attributes['shadowStickyHover'] ) && isset( $attributes['shadowStickyHover'][0] ) && is_array( $attributes['shadowStickyHover'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadowStickyHover'][0]['inset'] ) && true === $attributes['shadowStickyHover'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadowStickyHover'][0]['hOffset'] ) && is_numeric( $attributes['shadowStickyHover'][0]['hOffset'] ) ? $attributes['shadowStickyHover'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowStickyHover'][0]['vOffset'] ) && is_numeric( $attributes['shadowStickyHover'][0]['vOffset'] ) ? $attributes['shadowStickyHover'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowStickyHover'][0]['blur'] ) && is_numeric( $attributes['shadowStickyHover'][0]['blur'] ) ? $attributes['shadowStickyHover'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadowStickyHover'][0]['spread'] ) && is_numeric( $attributes['shadowStickyHover'][0]['spread'] ) ? $attributes['shadowStickyHover'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadowStickyHover'][0]['color'] ) && ! empty( $attributes['shadowStickyHover'][0]['color'] ) ? $attributes['shadowStickyHover'][0]['color'] : '#000000' ), ( isset( $attributes['shadowStickyHover'][0]['opacity'] ) && is_numeric( $attributes['shadowStickyHover'][0]['opacity'] ) ? $attributes['shadowStickyHover'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', '2px 2px 3px 0px rgba(0, 0, 0, 0.4)' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for dynamic blocks
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if ( ! empty( $attributes['tooltip'] ) ) {
|
||||
$this->enqueue_script( 'kadence-blocks-tippy' );
|
||||
}
|
||||
|
||||
$inheritClassSuffix = ! empty( $attributes['inheritStyles'] ) && 'inherit-secondary' === $attributes['inheritStyles'] ? 'inherit' : $attributes['inheritStyles'];
|
||||
|
||||
$classes = [ 'kb-button', 'kt-button', 'button', 'kb-btn' . $unique_id ];
|
||||
$classes[] = ! empty( $attributes['sizePreset'] ) ? 'kt-btn-size-' . $attributes['sizePreset'] : 'kt-btn-size-standard';
|
||||
$classes[] = ! empty( $attributes['widthType'] ) ? 'kt-btn-width-type-' . $attributes['widthType'] : 'kt-btn-width-type-auto';
|
||||
$classes[] = ! empty( $attributes['inheritStyles'] ) ? 'kb-btn-global-' . $inheritClassSuffix : 'kb-btn-global-fill';
|
||||
$classes[] = ! empty( $attributes['inheritStyles'] ) && 'inherit-secondary' === $attributes['inheritStyles'] ? 'button-style-secondary' : '';
|
||||
$classes[] = ! empty( $attributes['text'] ) ? 'kt-btn-has-text-true' : 'kt-btn-has-text-false';
|
||||
$classes[] = ! empty( $attributes['icon'] ) ? 'kt-btn-has-svg-true' : 'kt-btn-has-svg-false';
|
||||
$classes[] = ! empty( $attributes['iconReveal'] ) && ! empty( $attributes['icon'] ) ? 'icon-reveal' : '';
|
||||
|
||||
if ( ! empty( $attributes['target'] ) && 'video' === $attributes['target'] ) {
|
||||
$classes[] = 'ktblocksvideopop';
|
||||
}
|
||||
if ( ! empty( $attributes['inheritStyles'] ) && ('inherit' === $attributes['inheritStyles'] || 'inherit-secondary' === $attributes['inheritStyles']) ) {
|
||||
$classes[] = 'wp-block-button__link';
|
||||
}
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $classes ),
|
||||
];
|
||||
if ( ! empty( $attributes['anchor'] ) ) {
|
||||
$wrapper_args['id'] = $attributes['anchor'];
|
||||
}
|
||||
if ( ! empty( $attributes['label'] ) ) {
|
||||
$wrapper_args['aria-label'] = $attributes['label'];
|
||||
}
|
||||
if ( ! empty( $attributes['link'] ) ) {
|
||||
$wrapper_args['href'] = esc_url( do_shortcode( $attributes['link'] ) );
|
||||
$rel_add = '';
|
||||
if ( isset( $attributes['download'] ) && $attributes['download'] ) {
|
||||
$wrapper_args['download'] = '';
|
||||
}
|
||||
if ( ! empty( $attributes['target'] ) && '_blank' === $attributes['target'] ) {
|
||||
$wrapper_args['target'] = '_blank';
|
||||
$rel_add = 'noreferrer noopener';
|
||||
}
|
||||
if ( isset( $attributes['noFollow'] ) && $attributes['noFollow'] ) {
|
||||
$rel_add .= ' nofollow';
|
||||
}
|
||||
if ( isset( $attributes['sponsored'] ) && $attributes['sponsored'] ) {
|
||||
$rel_add .= ' sponsored';
|
||||
}
|
||||
if ( ! empty( $rel_add ) ) {
|
||||
$wrapper_args['rel'] = $rel_add;
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['isSubmit'] ) ) {
|
||||
$wrapper_args['type'] = 'submit';
|
||||
}
|
||||
if ( ! empty( $attributes['tooltip'] ) ) {
|
||||
$wrapper_args['data-kb-tooltip-content'] = esc_attr( $attributes['tooltip'] );
|
||||
if ( ! empty( $attributes['tooltipPlacement'] ) ) {
|
||||
$wrapper_args['data-tooltip-placement'] = esc_attr( $attributes['tooltipPlacement'] );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['buttonRole'] ) && $attributes['buttonRole'] ) {
|
||||
$wrapper_args['role'] = 'button';
|
||||
}
|
||||
if ( ! empty( $attributes['link'] ) && apply_filters( 'kadence_blocks_button_auto_apply_role', true ) ) {
|
||||
// check if the link is a download link.
|
||||
if ( $attributes['link'] === '#' && empty( $wrapper_args['target'] ) ) {
|
||||
$wrapper_args['role'] = 'button';
|
||||
}
|
||||
}
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
|
||||
$text = ! empty( $attributes['text'] ) ? '<span class="kt-btn-inner-text">' . $attributes['text'] . '</span>' : '';
|
||||
$svg_icon = '';
|
||||
if ( ! empty( $attributes['icon'] ) ) {
|
||||
$type = substr( $attributes['icon'], 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = 2;
|
||||
}
|
||||
$title = ( ! empty( $attributes['iconTitle'] ) ? $attributes['iconTitle'] : '' );
|
||||
$hidden = ( empty( $title ) ? true : false );
|
||||
$svg_icon = Kadence_Blocks_Svg_Render::render( $attributes['icon'], $fill, $stroke_width, $title, $hidden );
|
||||
}
|
||||
$icon_left = ! empty( $svg_icon ) && ! empty( $attributes['iconSide'] ) && 'left' === $attributes['iconSide'] ? '<span class="kb-svg-icon-wrap kb-svg-icon-' . esc_attr( $attributes['icon'] ) . ' kt-btn-icon-side-left">' . $svg_icon . '</span>' : '';
|
||||
$icon_right = ! empty( $svg_icon ) && ! empty( $attributes['iconSide'] ) && 'right' === $attributes['iconSide'] ? '<span class="kb-svg-icon-wrap kb-svg-icon-' . esc_attr( $attributes['icon'] ) . ' kt-btn-icon-side-right">' . $svg_icon . '</span>' : '';
|
||||
$html_tag = ! empty( $attributes['link'] ) ? 'a' : 'span';
|
||||
|
||||
// Try to Detect if this is a show more button and make it a button.
|
||||
if ( isset( $attributes['lock'] ) && $attributes['lock'] && isset( $attributes['lock']['remove'] ) && $attributes['lock']['remove'] && isset( $attributes['lock']['move'] ) && $attributes['lock']['move'] && empty( $attributes['link'] ) ) {
|
||||
$html_tag = 'button';
|
||||
}
|
||||
|
||||
$content = sprintf( '<%1$s %2$s>%3$s%4$s%5$s</%1$s>', $html_tag, $wrapper_attributes, $icon_left, $text, $icon_right );
|
||||
|
||||
/* Wrap in div is AOS is enabled. AOS transitions will interfere with hover transitions. */
|
||||
$aos_args = [];
|
||||
$aos_args = kadence_apply_aos_wrapper_args( $attributes, $aos_args );
|
||||
if ( ! empty( $aos_args ) ) {
|
||||
$aos_classes = [ 'kb-blocks-button-aos' ];
|
||||
$aos_classes[] = ! empty( $attributes['widthType'] ) ? 'kb-btn-width-type-' . $attributes['widthType'] : 'kb-btn-width-type-auto';
|
||||
$aos_args['class'] = implode( ' ', $aos_classes );
|
||||
$normalized_attributes = [];
|
||||
foreach ( $aos_args as $key => $value ) {
|
||||
$normalized_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', implode( ' ', $normalized_attributes ), $content );
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_style( 'kadence-glightbox', KADENCE_BLOCKS_URL . 'includes/assets/css/kb-glightbox.min.css', [], KADENCE_BLOCKS_VERSION );
|
||||
wp_register_script( 'kadence-glightbox', KADENCE_BLOCKS_URL . 'includes/assets/js/glightbox.min.js', [], KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-glight-video-init', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-glight-video-init.min.js', [ 'kadence-glightbox' ], KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-popper', KADENCE_BLOCKS_URL . 'includes/assets/js/popper.min.js', [], KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-tippy', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-tippy.min.js', [ 'kadence-blocks-popper' ], KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Singlebtn_Block::get_instance();
|
||||
@@ -0,0 +1,166 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Spacer Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Spacer Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Spacer_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'spacer';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-block-spacer' );
|
||||
$units = ! empty( $attributes['spacerHeightUnits'] ) ? $attributes['spacerHeightUnits'] : 'px';
|
||||
if ( ! empty( $attributes['spacerHeight'] ) || $units !== 'px' ) {
|
||||
$height = ( ! empty( $attributes['spacerHeight'] ) ? $attributes['spacerHeight'] : '60' );
|
||||
$css->add_property( 'height', $height . $units );
|
||||
}
|
||||
if ( ! empty( $attributes['tabletSpacerHeight'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-block-spacer' );
|
||||
$css->add_property( 'height', $attributes['tabletSpacerHeight'] . ( isset( $attributes['spacerHeightUnits'] ) ? $attributes['spacerHeightUnits'] : 'px' ) . '!important' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['mobileSpacerHeight'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-block-spacer' );
|
||||
$css->add_property( 'height', $attributes['mobileSpacerHeight'] . ( isset( $attributes['spacerHeightUnits'] ) ? $attributes['spacerHeightUnits'] : 'px' ) . '!important' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['dividerStyle'] ) && 'stripe' === $attributes['dividerStyle'] ) {
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-divider-stripe' );
|
||||
$divider_height = ( ! empty( $attributes['dividerHeight'] ) ? $attributes['dividerHeight'] : '10' );
|
||||
$css->add_property( 'height', $divider_height . 'px' );
|
||||
$divider_width = ( ! empty( $attributes['dividerWidth'] ) ? $attributes['dividerWidth'] : '80' );
|
||||
$divider_width_units = ( isset( $attributes['dividerWidthUnits'] ) && ! empty( $attributes['dividerWidthUnits'] ) ? $attributes['dividerWidthUnits'] : '%' );
|
||||
$css->add_property( 'width', $divider_width . $divider_width_units );
|
||||
if ( ( ! empty( $attributes['tabletDividerHeight'] ) ) || ( isset( $attributes['tabletDividerWidth'] ) && ! empty( $attributes['tabletDividerWidth'] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-divider-stripe' );
|
||||
if ( ! empty( $attributes['tabletDividerHeight'] ) ) {
|
||||
$css->add_property( 'height', $attributes['tabletSpacerHeight'] . 'px !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['tabletDividerWidth'] ) ) {
|
||||
$css->add_property( 'width', $attributes['tabletDividerWidth'] . $divider_width_units . '!important' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['mobileDividerHeight'] ) || ! empty( $attributes['mobileDividerWidth'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-divider-stripe' );
|
||||
if ( ! empty( $attributes['mobileDividerHeight'] ) ) {
|
||||
$css->add_property( 'height', $attributes['mobileSpacerHeight'] . 'px !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['mobileDividerWidth'] ) ) {
|
||||
$css->add_property( 'width', $attributes['mobileDividerWidth'] . $divider_width_units . '!important' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
} else {
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-divider' );
|
||||
if ( isset( $attributes['dividerHeight'] ) && ! empty( $attributes['dividerHeight'] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['dividerHeight'] . 'px' );
|
||||
// Adding this prevents a blur when browsers are rendering.
|
||||
if( ! empty( $attributes['dividerHeight'] ) && intval( absint( $attributes['dividerHeight'] ) % 2 ) != 0 ){
|
||||
$css->add_property( 'height', '1px' );
|
||||
}
|
||||
}
|
||||
if ( ! empty( $attributes['dividerColor'] ) ) {
|
||||
$alp_opacity = ( isset( $attributes['dividerOpacity'] ) && is_numeric( $attributes['dividerOpacity'] ) ? $attributes['dividerOpacity'] : 100 );
|
||||
if ( $alp_opacity < 10 ) {
|
||||
$alp = '0.0' . $alp_opacity;
|
||||
} else if ( $alp_opacity >= 100 ) {
|
||||
$alp = '1';
|
||||
} else {
|
||||
$alp = '0.' . $alp_opacity;
|
||||
}
|
||||
$css->add_property( 'border-top-color', $css->render_color( $attributes['dividerColor'], $alp ) );
|
||||
}
|
||||
$divider_width = ( ! empty( $attributes['dividerWidth'] ) ? $attributes['dividerWidth'] : '80' );
|
||||
$divider_width_units = ( isset( $attributes['dividerWidthUnits'] ) && ! empty( $attributes['dividerWidthUnits'] ) ? $attributes['dividerWidthUnits'] : '%' );
|
||||
$css->add_property( 'width', $divider_width . $divider_width_units );
|
||||
if ( isset( $attributes['dividerStyle'] ) && ! empty( $attributes['dividerStyle'] ) ) {
|
||||
$css->add_property( 'border-top-style', $attributes['dividerStyle'] );
|
||||
}
|
||||
if ( ( ! empty( $attributes['tabletDividerHeight'] ) ) || ( ! empty( $attributes['tabletDividerWidth'] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-divider' );
|
||||
if ( ! empty( $attributes['tabletDividerHeight'] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['tabletDividerHeight'] . 'px !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['tabletDividerWidth'] ) ) {
|
||||
$css->add_property( 'width', $attributes['tabletDividerWidth'] . $divider_width_units . '!important' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( ! empty( $attributes['mobileDividerHeight'] ) ) || ( ! empty( $attributes['mobileDividerWidth'] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-spacer.kt-block-spacer-' . $unique_id . ' .kt-divider' );
|
||||
if ( ! empty( $attributes['mobileDividerHeight'] ) ) {
|
||||
$css->add_property( 'border-top-width', $attributes['mobileDividerHeight'] . 'px !important' );
|
||||
}
|
||||
if ( ! empty( $attributes['mobileDividerWidth'] ) ) {
|
||||
$css->add_property( 'width', $attributes['mobileDividerWidth'] . $divider_width_units . '!important' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Spacer_Block::get_instance();
|
||||
@@ -0,0 +1,304 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Table Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Table Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Table_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'table';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = true;
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
// Render pro styles
|
||||
if( class_exists( 'Kadence_Blocks_Pro' ) && class_exists( 'Kadence_Blocks_Pro_Table_Block' ) ) {
|
||||
$pro_table = new Kadence_Blocks_Pro_Table_Block();
|
||||
$pro_table->build_css( $attributes, $css, $unique_id, $unique_style_id );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-table-container' . esc_attr( $unique_id ) );
|
||||
$css->render_typography( $attributes, 'dataTypography' );
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding' );
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin' );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'maxHeight', 'max-height', 'maxHeighUnit' );
|
||||
|
||||
if ( !empty( $attributes['maxHeighUnit'][0] ) ) {
|
||||
$css->add_property('overflow-y', 'auto');
|
||||
}
|
||||
|
||||
if ( !empty( $attributes['maxWidthUnit'][0] ) ) {
|
||||
$css->add_property('overflow-x', 'auto');
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['columnSettings'] ) && is_array( $attributes['columnSettings'] ) ) {
|
||||
$has_fixed_columns = false;
|
||||
|
||||
foreach ( $attributes['columnSettings'] as $index => $settings ) {
|
||||
if ( ( empty( $settings['useAuto'] ) || !$settings['useAuto'] ) ) {
|
||||
$has_fixed_columns = true;
|
||||
$width_unit = ! empty( $settings['unit'] ) ? $settings['unit'] : '%';
|
||||
|
||||
if( isset( $settings['width'] ) && '' !== $settings['width'] ) {
|
||||
$css->set_selector('.kb-table' . esc_attr($unique_id) . ' td:nth-of-type(' . ($index + 1) . '), ' .
|
||||
'.kb-table' . esc_attr($unique_id) . ' th:nth-of-type(' . ($index + 1) . ')');
|
||||
$css->add_property('width', $settings['width'] . $width_unit);
|
||||
}
|
||||
|
||||
if( isset( $settings['widthTablet'] ) && '' !== $settings['widthTablet'] ) {
|
||||
if( ! empty( $settings['unitTablet'] ) ) {
|
||||
$width_unit = $settings['unitTablet'];
|
||||
}
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property('width', $settings['widthTablet'] . $width_unit);
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if( isset( $settings['widthMobile'] ) && '' !== $settings['widthMobile'] ) {
|
||||
if( ! empty( $settings['unitMobile'] ) ) {
|
||||
$width_unit = $settings['unitMobile'];
|
||||
}
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property('width', $settings['widthMobile'] . $width_unit);
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only set table-layout fixed if we have any fixed width columns.
|
||||
if ( $has_fixed_columns ) {
|
||||
$css->set_selector( '.kb-table' . esc_attr( $unique_id ) );
|
||||
$css->add_property( 'table-layout', 'fixed' );
|
||||
$css->add_property( 'width', '100%' );
|
||||
}
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-table' . esc_attr( $unique_id ) . ' tr' );
|
||||
$css->render_responsive_size( $attributes, [ 'rowMinHeight', 'tabletRowMinHeight', 'mobileRowMinHeight' ], 'height' );
|
||||
|
||||
if( !empty( $attributes['overflowXScroll'] ) ){
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ));
|
||||
$css->add_property( 'overflow-x', 'scroll');
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' th' );
|
||||
$css->render_typography( $attributes, 'headerTypography' );
|
||||
$css->render_measure_output( $attributes, 'cellPadding', 'padding' );
|
||||
|
||||
$text_align_args = array(
|
||||
'desktop_key' => 'headerAlign',
|
||||
'tablet_key' => 'headerAlignTablet',
|
||||
'mobile_key' => 'headerAlignMobile',
|
||||
);
|
||||
$css->render_text_align( $attributes, 'headerAlign', $text_align_args );
|
||||
|
||||
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' caption' );
|
||||
$css->render_typography( $attributes, 'captionTypography' );
|
||||
|
||||
$text_align_args = array(
|
||||
'desktop_key' => 'captionAlign',
|
||||
'tablet_key' => 'captionAlignTablet',
|
||||
'mobile_key' => 'captionAlignMobile',
|
||||
);
|
||||
$css->render_text_align( $attributes, 'captionAlign', $text_align_args );
|
||||
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td' );
|
||||
$css->render_measure_output( $attributes, 'cellPadding', 'padding' );
|
||||
|
||||
$text_align_args = array(
|
||||
'desktop_key' => 'textAlign',
|
||||
'tablet_key' => 'textAlignTablet',
|
||||
'mobile_key' => 'textAlignMobile',
|
||||
);
|
||||
$css->render_text_align( $attributes, 'textAlign', $text_align_args );
|
||||
|
||||
|
||||
if ( !empty( $attributes['evenOddBackground'] ) ) {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-of-type(even)' );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundColorEven'] ?? 'undefined' ) );
|
||||
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-of-type(odd)' );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundColorOdd'] ?? 'undefined' ) );
|
||||
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-of-type(odd):hover' );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundHoverColorOdd'] ?? 'undefined' ) );
|
||||
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-of-type(even):hover' );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundHoverColorEven'] ?? 'undefined' ) );
|
||||
} else {
|
||||
|
||||
if( !empty( $attributes['backgroundColorEven'] ) ) {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr' );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundColorEven'] ) );
|
||||
}
|
||||
|
||||
if( !empty( $attributes['backgroundHoverColorEven'] ) ) {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:hover' );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundHoverColorEven'] ) );
|
||||
}
|
||||
}
|
||||
|
||||
if( !empty( $attributes['columnBackgrounds'] ) ) {
|
||||
foreach( $attributes['columnBackgrounds'] as $index => $background ) {
|
||||
if ( $background ) {
|
||||
if (!empty($attributes['isFirstColumnHeader']) && $attributes['isFirstColumnHeader']) {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index ) . ')' );
|
||||
} else {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index + 1 ) . ')' );
|
||||
}
|
||||
$css->add_property( 'background-color', $css->render_color( $background ) );
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' th:nth-of-type(' . ( $index + 1 ) . ')' );
|
||||
$css->add_property( 'background-color', $css->render_color( $background ) );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if( !empty( $attributes['columnBackgroundsHover'] ) ) {
|
||||
foreach( $attributes['columnBackgroundsHover'] as $index => $background ) {
|
||||
if ( $background ) {
|
||||
if ( !empty( $attributes['isFirstColumnHeader'] ) && $attributes['isFirstColumnHeader'] ) {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index ) . '):hover' );
|
||||
} else {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index + 1 ) . '):hover' );
|
||||
}
|
||||
$css->add_property( 'background-color', $css->render_color( $background ) );
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' th:nth-of-type(' . ( $index + 1 ) . '):hover' );
|
||||
$css->add_property( 'background-color', $css->render_color( $background ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Render borders for the table
|
||||
if( !empty( $attributes['borderOnRowOnly'])) {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr' );
|
||||
} else {
|
||||
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td, .kb-table' . esc_attr( $unique_id ) . ' th' );
|
||||
}
|
||||
$css->render_border_styles( $attributes, 'borderStyle' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
|
||||
$wrapper_classes = [
|
||||
'kb-table-container',
|
||||
'kb-table-container' . esc_attr( $unique_id ),
|
||||
];
|
||||
|
||||
if(! empty( $attributes['className'] )) {
|
||||
$wrapper_classes[] = esc_attr( $attributes['className'] );
|
||||
}
|
||||
|
||||
$wrapper_attributes = get_block_wrapper_attributes( [
|
||||
'class' => implode( ' ', $wrapper_classes ),
|
||||
] );
|
||||
|
||||
$caption_html = '';
|
||||
$is_enabled = filter_var( $attributes['enableCaption'] ?? false, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE );
|
||||
if ( $is_enabled === true && isset( $attributes['caption'] ) && is_string( $attributes['caption'] ) && trim( $attributes['caption'] ) !== '' ) {
|
||||
$caption_html = '<caption>' . esc_html( $attributes['caption'] ) . '</caption>';
|
||||
}
|
||||
|
||||
return sprintf(
|
||||
'<div %1$s><table class="kb-table kb-table%2$s">%3$s%4$s</table></div>',
|
||||
$wrapper_attributes,
|
||||
esc_attr( $unique_id ),
|
||||
$caption_html,
|
||||
$content
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kt-tabs.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Table_Block::get_instance();
|
||||
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Table Data Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Table Data Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Table_Data_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'data';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
protected $has_style = false;
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/table/children/' . $this->block_name . '/block.json',
|
||||
array(
|
||||
'render_callback' => array( $this, 'render_css' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$css->set_selector( '.kb-table-container tr td.kb-table-data' . $unique_id . ', .kb-table-container tr th.kb-table-data' . $unique_id );
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$tag = $this->is_this_block_header( $attributes, $block_instance->context ) ? 'th' : 'td';
|
||||
|
||||
return sprintf(
|
||||
'<%s class="kb-table-data kb-table-data%2$s">%3$s</%4$s>',
|
||||
$tag,
|
||||
esc_attr( $unique_id ),
|
||||
$content,
|
||||
$tag
|
||||
);
|
||||
}
|
||||
|
||||
private function is_this_block_header( $attributes, $context ) {
|
||||
$isFirstRowHeader = ! empty( $context['kadence/table/isFirstRowHeader'] );
|
||||
$isFirstColumnHeader = ! empty( $context['kadence/table/isFirstColumnHeader'] );
|
||||
|
||||
$column = $attributes['column'] ?? -1;
|
||||
$row = $context['kadence/table/parentRow'] ?? -1;
|
||||
|
||||
return ( $column === 0 && $isFirstColumnHeader ) || ( $row === 0 && $isFirstRowHeader );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Table_Data_Block::get_instance();
|
||||
@@ -0,0 +1,325 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Table of Contents Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Table of Contents Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Tableofcontents_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'tableofcontents';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
|
||||
add_filter( 'rank_math/researches/toc_plugins', array( $this, 'toc_filter_rankmath' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
// Container.
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-wrap' );
|
||||
$css->render_measure_output( $attributes, 'containerMargin', 'margin', array(
|
||||
'tablet_key' => 'containerTabletMargin',
|
||||
'mobile_key' => 'containerMobileMargin',
|
||||
'unit_key' => 'containerMarginUnit',
|
||||
) );
|
||||
$css->render_measure_output(
|
||||
$attributes,
|
||||
'containerPadding',
|
||||
'padding',
|
||||
array(
|
||||
'unit_key' => 'containerPaddingUnit',
|
||||
)
|
||||
);
|
||||
if ( isset( $attributes['containerBackground'] ) && ! empty( $attributes['containerBackground'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['containerBackground'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['containerBorderColor'] ) || $css->is_number( $attributes['containerBorder'][0] ) || $css->is_number( $attributes['containerBorder'][1] ) || $css->is_number( $attributes['containerBorder'][2] ) || $css->is_number( $attributes['containerBorder'][3] ) ) {
|
||||
if ( ! empty( $attributes['containerBorderColor'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['containerBorderColor'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'containerBorder', 'border-width' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'borderStyle' );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) );
|
||||
if ( isset( $attributes['displayShadow'] ) && true == $attributes['displayShadow'] ) {
|
||||
if ( isset( $attributes['shadow'] ) && is_array( $attributes['shadow'] ) && isset( $attributes['shadow'][0] ) && is_array( $attributes['shadow'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', $css->render_shadow( $attributes['shadow'][0] ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', 'rgba(0, 0, 0, 0.2) 0px 0px 14px 0px' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['maxWidth'] ) && ! empty( $attributes['maxWidth'] ) ) {
|
||||
$maxWidthType = ( isset( $attributes['maxWidthType'] ) ? $attributes['maxWidthType'] : 'px' );
|
||||
$css->add_property( 'max-width', $css->render_number( $attributes['maxWidth'], $maxWidthType ) );
|
||||
}
|
||||
// Title.
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-contents-title-wrap' );
|
||||
if ( isset( $attributes['titleAlign'] ) ) {
|
||||
$css->add_property( 'text-align', $css->render_string( $attributes['titleAlign'] ) );
|
||||
}
|
||||
$css->render_measure_output(
|
||||
$attributes,
|
||||
'titlePadding',
|
||||
'padding',
|
||||
array(
|
||||
'unit_key' => 'titlePaddingType',
|
||||
)
|
||||
);
|
||||
// Border, check old first.
|
||||
if ( ! empty( $attributes['titleBorderColor'] ) || $css->is_number( $attributes['titleBorder'][0] ) || $css->is_number( $attributes['titleBorder'][1] ) || $css->is_number( $attributes['titleBorder'][2] ) || $css->is_number( $attributes['titleBorder'][3] ) ) {
|
||||
if ( ! empty( $attributes['titleBorderColor'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['titleBorderColor'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'titleBorder', 'border-width' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'titleBorderStyle' );
|
||||
}
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . '.kb-collapsible-toc.kb-toc-toggle-hidden .kb-table-of-contents-title-wrap' );
|
||||
if ( isset( $attributes['titleCollapseBorderColor'] ) && ! empty( $attributes['titleCollapseBorderColor'] ) ) {
|
||||
$css->add_property( 'border-color', $css->render_color( $attributes['titleCollapseBorderColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleColor'] ) && ! empty( $attributes['titleColor'] ) ) {
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-contents-title-wrap' );
|
||||
$css->add_property( 'color', $css->render_color( $attributes['titleColor'] ) );
|
||||
}
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-contents-title' );
|
||||
if ( isset( $attributes['titleColor'] ) && ! empty( $attributes['titleColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['titleColor'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['titleSize'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['titleSize'][0], ( isset( $attributes['titleSizeType'] ) && ! empty( $attributes['titleSizeType'] ) ? $attributes['titleSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['titleLineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['titleLineHeight'][0] . ( isset( $attributes['titleLineType'] ) ? $attributes['titleLineType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['titleLetterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $css->render_number( $attributes['titleLetterSpacing'], 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['titleTypography'] ) ) {
|
||||
$google = isset( $attributes['titleGoogleFont'] ) && $attributes['titleGoogleFont'] ? true : false;
|
||||
$google = $google && ( isset( $attributes['titleLoadGoogleFont'] ) && $attributes['titleLoadGoogleFont'] || ! isset( $attributes['titleLoadGoogleFont'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $attributes['titleTypography'], $google, ( isset( $attributes['titleFontVariant'] ) ? $attributes['titleFontVariant'] : '' ), ( isset( $attributes['titleFontSubset'] ) ? $attributes['titleFontSubset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $attributes['titleFontWeight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_string( $attributes['titleFontWeight'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleFontStyle'] ) ) {
|
||||
$css->add_property( 'font-style', $css->render_string( $attributes['titleFontStyle'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleTextTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $css->render_string( $attributes['titleTextTransform'] ) );
|
||||
}
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-wrap .kb-table-of-content-list' );
|
||||
if ( isset( $attributes['contentColor'] ) && ! empty( $attributes['contentColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['contentColor'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['contentSize'][0] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['contentSize'][0], ( isset( $attributes['contentSizeType'] ) && ! empty( $attributes['contentSizeType'] ) ? $attributes['contentSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['contentLineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['contentLineHeight'][0] . ( isset( $attributes['contentLineType'] ) ? $attributes['contentLineType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['contentLetterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $css->render_number( $attributes['contentLetterSpacing'], 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['contentTypography'] ) ) {
|
||||
$google = isset( $attributes['contentGoogleFont'] ) && $attributes['contentGoogleFont'] ? true : false;
|
||||
$google = $google && ( isset( $attributes['contentLoadGoogleFont'] ) && $attributes['contentLoadGoogleFont'] || ! isset( $attributes['contentLoadGoogleFont'] ) ) ? true : false;
|
||||
$css->add_property( 'font-family', $css->render_font_family( $attributes['contentTypography'], $google, ( isset( $attributes['contentFontVariant'] ) ? $attributes['contentFontVariant'] : '' ), ( isset( $attributes['contentFontSubset'] ) ? $attributes['contentFontSubset'] : '' ) ) );
|
||||
}
|
||||
if ( isset( $attributes['contentFontWeight'] ) ) {
|
||||
$css->add_property( 'font-weight', $css->render_string( $attributes['contentFontWeight'] ) );
|
||||
}
|
||||
if ( isset( $attributes['contentFontStyle'] ) ) {
|
||||
$css->add_property( 'font-style', $css->render_string( $attributes['contentFontStyle'] ) );
|
||||
}
|
||||
if ( isset( $attributes['contentTextTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $css->render_string( $attributes['contentTextTransform'] ) );
|
||||
}
|
||||
$css->render_measure_output(
|
||||
$attributes,
|
||||
'contentMargin',
|
||||
'margin',
|
||||
array(
|
||||
'unit_key' => 'contentMarginType',
|
||||
)
|
||||
);
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover' );
|
||||
if ( isset( $attributes['contentHoverColor'] ) && ! empty( $attributes['contentHoverColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['contentHoverColor'] ) );
|
||||
}
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-wrap .kb-table-of-content-list .active > .kb-table-of-contents__entry' );
|
||||
if ( isset( $attributes['contentActiveColor'] ) && ! empty( $attributes['contentActiveColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['contentActiveColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['listGap'] ) && is_array( $attributes['listGap'] ) && isset( $attributes['listGap'][0] ) && ! empty( $attributes['listGap'][0] ) ) {
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-list li' );
|
||||
$css->add_property( 'margin-bottom', $css->render_string( $attributes['listGap'][0], 'px' ) );
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-list li .kb-table-of-contents-list-sub' );
|
||||
$css->add_property( 'margin-top', $css->render_string( $attributes['listGap'][0], 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['containerBackground'] ) && ! empty( $attributes['containerBackground'] ) ) {
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-toggle-icon-style-basiccircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-toggle-icon-style-basiccircle .kb-table-of-contents-icon-trigger:before, .kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-toggle-icon-style-arrowcircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-toggle-icon-style-arrowcircle .kb-table-of-contents-icon-trigger:before, .kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-toggle-icon-style-xclosecircle .kb-table-of-contents-icon-trigger:after, .kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-toggle-icon-style-xclosecircle .kb-table-of-contents-icon-trigger:before' );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['containerBackground'] ) );
|
||||
}
|
||||
|
||||
/*
|
||||
* Tablet
|
||||
*/
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-contents-title' );
|
||||
if ( ! empty( $attributes['titleSize'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['titleSize'][1], ( isset( $attributes['titleSizeType'] ) && ! empty( $attributes['titleSizeType'] ) ? $attributes['titleSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['titleLineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['titleLineHeight'][1] . ( isset( $attributes['titleLineType'] ) ? $attributes['titleLineType'] : 'px' ) );
|
||||
}
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-wrap .kb-table-of-content-list' );
|
||||
if ( ! empty( $attributes['contentSize'][1] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['contentSize'][1], ( isset( $attributes['contentSizeType'] ) && ! empty( $attributes['contentSizeType'] ) ? $attributes['contentSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( ! empty( $attributes['contentLineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['contentLineHeight'][1] . ( isset( $attributes['contentLineType'] ) ? $attributes['contentLineType'] : 'px' ) );
|
||||
}
|
||||
if ( ! empty( $attributes['listGap'][1] ) ) {
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-list li' );
|
||||
$css->add_property( 'margin-bottom', $css->render_string( $attributes['listGap'][1], 'px' ) );
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-list li .kb-table-of-contents-list-sub' );
|
||||
$css->add_property( 'margin-top', $css->render_string( $attributes['listGap'][1], 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
/*
|
||||
* Mobile
|
||||
*/
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ':not(.this-class-is-for-specificity):not(.class-is-for-specificity)' );
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-contents-title' );
|
||||
if ( ! empty( $attributes['titleSize'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['titleSize'][2], ( isset( $attributes['titleSizeType'] ) && ! empty( $attributes['titleSizeType'] ) ? $attributes['titleSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $attributes['titleLineHeight'] ) && is_array( $attributes['titleLineHeight'] ) && isset( $attributes['titleLineHeight'][2] ) && ! empty( $attributes['titleLineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['titleLineHeight'][2] . ( isset( $attributes['titleLineType'] ) ? $attributes['titleLineType'] : 'px' ) );
|
||||
}
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-wrap .kb-table-of-content-list' );
|
||||
if ( ! empty( $attributes['contentSize'][2] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['contentSize'][2], ( isset( $attributes['contentSizeType'] ) && ! empty( $attributes['contentSizeType'] ) ? $attributes['contentSizeType'] : 'px' ) ) );
|
||||
}
|
||||
if ( isset( $attributes['contentLineHeight'] ) && is_array( $attributes['contentLineHeight'] ) && isset( $attributes['contentLineHeight'][2] ) && ! empty( $attributes['contentLineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['contentLineHeight'][2] . ( isset( $attributes['contentLineType'] ) ? $attributes['contentLineType'] : 'px' ) );
|
||||
}
|
||||
if ( isset( $attributes['listGap'] ) && is_array( $attributes['listGap'] ) && isset( $attributes['listGap'][2] ) && ! empty( $attributes['listGap'][2] ) ) {
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-list li' );
|
||||
$css->add_property( 'margin-bottom', $css->render_string( $attributes['listGap'][2], 'px' ) );
|
||||
$css->set_selector( '.kb-table-of-content-nav.kb-table-of-content-id' . $unique_id . ' .kb-table-of-content-list li .kb-table-of-contents-list-sub' );
|
||||
$css->add_property( 'margin-top', $css->render_string( $attributes['listGap'][2], 'px' ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if ( is_feed() ) {
|
||||
return;
|
||||
}
|
||||
if ( isset( $attributes['enableScrollSpy'] ) && $attributes['enableScrollSpy'] ) {
|
||||
wp_register_script( 'kadence-blocks-gumshoe', KADENCE_BLOCKS_URL . 'includes/assets/js/gumshoe.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
|
||||
$toc = new Kadence_Blocks_Table_Of_Contents();
|
||||
|
||||
return $toc->render_table_of_content( $attributes, $content );
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-table-of-contents.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter to add plugins to the TOC list.
|
||||
*
|
||||
* @param array $toc_plugins TOC plugins.
|
||||
*/
|
||||
public function toc_filter_rankmath( $toc_plugins ) {
|
||||
$toc_plugins['kadence-blocks/kadence-blocks.php'] = 'Kadence Blocks';
|
||||
|
||||
return $toc_plugins;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Tableofcontents_Block::get_instance();
|
||||
@@ -0,0 +1,111 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Table Row Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Table Row Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Table_Row_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'row';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
protected $has_style = false;
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/table/children/' . $this->block_name . '/block.json',
|
||||
array(
|
||||
'render_callback' => array( $this, 'render_css' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$css->set_selector( '.kb-table-container .kb-table tr.kb-table-row' . $unique_id );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundColor'] ) );
|
||||
$css->render_responsive_size( $attributes, [ 'minHeight', 'tabletMinHeight', 'mobileMinHeight' ], 'height' );
|
||||
|
||||
$css->set_selector( '.kb-table-container .kb-table tr.kb-table-row' . $unique_id . ':hover' );
|
||||
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundHoverColor'] ) );
|
||||
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
return sprintf(
|
||||
'<tr class="kb-table-row kb-table-row%1$s">%2$s</tr>',
|
||||
esc_attr( $unique_id ),
|
||||
$content
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Table_Row_Block::get_instance();
|
||||
@@ -0,0 +1,445 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Tabs Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Tabs Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Tabs_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'tabs';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$layout = ! empty( $attributes['layout'] ) ? $attributes['layout'] : 'tabs';
|
||||
$tablet_layout = ! empty( $attributes['tabletLayout'] ) && 'inherit' !== $attributes['tabletLayout'] ? $attributes['tabletLayout'] : $layout;
|
||||
$mobile_layout = ! empty( $attributes['mobileLayout'] ) && 'inherit' !== $attributes['mobileLayout'] ? $attributes['mobileLayout'] : $tablet_layout;
|
||||
|
||||
// Main font
|
||||
if ( isset( $attributes['googleFont'] ) && $attributes['googleFont'] && ( ! isset( $attributes['loadGoogleFont'] ) || true == $attributes['loadGoogleFont'] ) && isset( $attributes['typography'] ) ) {
|
||||
|
||||
$font_variant = isset( $attributes['fontVariant'] ) ? $attributes['fontVariant'] : null;
|
||||
$font_subset = isset( $attributes['fontSubset'] ) ? $attributes['fontSubset'] : null;
|
||||
|
||||
$css->maybe_add_google_font( $attributes['typography'], $font_variant, $font_subset );
|
||||
}
|
||||
|
||||
// Subtitle font
|
||||
if ( isset( $attributes['subtitleFont'] ) && is_array( $attributes['subtitleFont'] ) && isset( $attributes['subtitleFont'][0] ) && is_array( $attributes['subtitleFont'][0] ) && isset( $attributes['subtitleFont'][0]['google'] ) && $attributes['subtitleFont'][0]['google'] && ( ! isset( $attributes['subtitleFont'][0]['loadGoogle'] ) || true === $attributes['subtitleFont'][0]['loadGoogle'] ) && isset( $attributes['subtitleFont'][0]['family'] ) ) {
|
||||
$subtitle_font = $attributes['subtitleFont'][0];
|
||||
|
||||
$font_variant = isset( $subtitle_font['variant'] ) ? $subtitle_font['variant'] : null;
|
||||
$font_subset = isset( $subtitle_font['subset'] ) ? $subtitle_font['subset'] : null;
|
||||
|
||||
$css->maybe_add_google_font( $subtitle_font['family'], $font_variant, $font_subset );
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Container
|
||||
*/
|
||||
$css->set_selector( '.kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .wp-block-kadence-tab' );
|
||||
|
||||
if ( ( isset( $attributes['contentBorder'][0] ) && $css->is_number( $attributes['contentBorder'][0] ) ) || ( isset( $attributes['contentBorder'][1] ) && $css->is_number( $attributes['contentBorder'][1] ) ) || ( isset( $attributes['contentBorder'][2] ) && $css->is_number( $attributes['contentBorder'][2] ) ) || ( isset( $attributes['contentBorder'][3] ) && $css->is_number( $attributes['contentBorder'][3] ) ) ) {
|
||||
$css->render_measure_output( $attributes, 'contentBorder', 'border-width', array( 'tablet_key' => false, 'mobile_key' => false ) );
|
||||
if ( ! empty( $attributes['contentBorderColor'] ) ) {
|
||||
$css->add_property( 'border-color', $css->sanitize_color( $attributes['contentBorderColor'] ) );
|
||||
}
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'contentBorderStyles' );
|
||||
}
|
||||
|
||||
$css->render_measure_output( $attributes, 'contentBorderRadius', 'border-radius' );
|
||||
|
||||
$css->render_measure_output( $attributes, 'innerPadding', 'padding' );
|
||||
|
||||
if ( ! empty( $attributes['minHeight'] ) ) {
|
||||
$minHeight = array(
|
||||
'minHeight' => array(
|
||||
isset( $attributes['minHeight'] ) ? $attributes['minHeight'] : '',
|
||||
isset( $attributes['tabletMinHeight'] ) ? $attributes['tabletMinHeight'] : '',
|
||||
isset( $attributes['mobileMinHeight'] ) ? $attributes['mobileMinHeight'] : '',
|
||||
)
|
||||
);
|
||||
$css->render_responsive_range( $minHeight, 'minHeight', 'min-height', 'px' );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['contentBgColor'] ) ) {
|
||||
$css->add_property( 'background', $css->sanitize_color( $attributes['contentBgColor'] ) );
|
||||
}
|
||||
$widthType = isset( $attributes['widthType'] ) ? $attributes['widthType'] : 'normal';
|
||||
if ( ( ! empty( $attributes['titleMargin'] ) && is_array( $attributes['titleMargin'] ) ) || ( ! empty( $attributes['tabletTitleMargin'] ) && is_array( $attributes['tabletTitleMargin'] ) ) || ( ! empty( $attributes['mobileTitleMargin'] ) && is_array( $attributes['mobileTitleMargin'] ) ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li' );
|
||||
$css->render_measure_output( $attributes, 'titleMargin', 'margin', array( 'unit_key' => 'titleMarginUnit' ) );
|
||||
|
||||
if( ( ! isset( $attributes['layout'] ) || ( isset( $attributes['layout'] ) && 'tabs' === $attributes['layout'] ) ) && ( isset( $attributes['widthType'] ) && $attributes['widthType'] === 'percent' ) ) {
|
||||
$css->add_property( 'margin-right', '0px' );
|
||||
$css->add_property( 'margin-left', '0px' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li:last-child' );
|
||||
if( !isset($attributes['layout'] ) || ( isset($attributes['layout'] ) && 'tabs' === $attributes['layout'] ) ) {
|
||||
$css->add_property( 'margin-right', '0px' );
|
||||
}
|
||||
}
|
||||
if ( 'vtabs' === $layout && ! empty( $attributes['verticalTabWidth'][0] ) ) {
|
||||
$css->set_media_state( 'desktopOnly' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list' );
|
||||
$css->add_property( 'float', 'none' );
|
||||
$css->add_property( 'width', $attributes['verticalTabWidth'][0] . ( ! empty( $attributes['verticalTabWidthUnit'] ) ? $attributes['verticalTabWidthUnit'] : '%' ) );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap' );
|
||||
$css->add_property( 'float', 'none' );
|
||||
$css->add_property( 'width', 'auto' );
|
||||
$css->add_property( 'flex', '1' );
|
||||
}
|
||||
if ( 'vtabs' === $tablet_layout && ( ! empty( $attributes['verticalTabWidth'][0] ) || ! empty( $attributes['verticalTabWidth'][1] ) ) ) {
|
||||
$css->set_media_state( 'tabletOnly' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list' );
|
||||
$css->add_property( 'float', 'none' );
|
||||
$css->add_property( 'width', ( ! empty( $attributes['verticalTabWidth'][1] ) ? $attributes['verticalTabWidth'][1] : $attributes['verticalTabWidth'][0] ) . ( ! empty( $attributes['verticalTabWidthUnit'] ) ? $attributes['verticalTabWidthUnit'] : '%' ) );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap' );
|
||||
$css->add_property( 'float', 'none' );
|
||||
$css->add_property( 'width', 'auto' );
|
||||
$css->add_property( 'flex', '1' );
|
||||
}
|
||||
if ( 'vtabs' === $mobile_layout && ( ! empty( $attributes['verticalTabWidth'][0] ) || ! empty( $attributes['verticalTabWidth'][1] ) || ! empty( $attributes['verticalTabWidth'][2] ) ) ) {
|
||||
$mobile_width = ( ! empty( $attributes['verticalTabWidth'][2] ) ? $attributes['verticalTabWidth'][2] : $attributes['verticalTabWidth'][1] );
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list' );
|
||||
$css->add_property( 'float', 'none' );
|
||||
$css->add_property( 'width', ( ! empty( $mobile_width ) ? $mobile_width : $attributes['verticalTabWidth'][0] ) . ( ! empty( $attributes['verticalTabWidthUnit'] ) ? $attributes['verticalTabWidthUnit'] : '%' ) );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap' );
|
||||
$css->add_property( 'float', 'none' );
|
||||
$css->add_property( 'width', 'auto' );
|
||||
$css->add_property( 'flex', '1' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
if ( 'vtabs' !== $layout && 'percent' === $widthType ) {
|
||||
$gap = ( isset( $attributes['gutter'][0] ) && is_numeric( $attributes['gutter'][0] ) ) ? $attributes['gutter'][0] : 10;
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list' );
|
||||
$css->add_property( 'margin-right', -$gap . 'px' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title' );
|
||||
$css->add_property( 'margin-right', $gap . 'px' );
|
||||
|
||||
if ( is_rtl() ) {
|
||||
$css->set_selector( '.rtl .wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title' );
|
||||
$css->add_property( 'margin-right', '0px' );
|
||||
$css->add_property( 'margin-left', $gap . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['tabWidth'] ) && ! empty( $attributes['tabWidth'] ) && is_array( $attributes['tabWidth'] ) && ! empty( $attributes['tabWidth'][1] ) && '' !== $attributes['tabWidth'][1] ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list.kb-tabs-list-columns > li' );
|
||||
$css->add_property( 'flex', '0 1 ' . round( 100 / $attributes['tabWidth'][1], 2 ) . '%' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['gutter'] ) && is_array( $attributes['gutter'] ) && isset( $attributes['gutter'][1] ) && is_numeric( $attributes['gutter'][1] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title' );
|
||||
$css->add_property( 'margin-right', $attributes['gutter'][1] . 'px' );
|
||||
|
||||
|
||||
if ( is_rtl() ) {
|
||||
$css->set_selector( '.rtl .wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title' );
|
||||
$css->add_property( 'margin-right', '0px' );
|
||||
$css->add_property( 'margin-left', $attributes['gutter'][1] . 'px' );
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['tabWidth'] ) && is_array( $attributes['tabWidth'] ) && ! empty( $attributes['tabWidth'][2] ) && '' !== $attributes['tabWidth'][2] ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list.kb-tabs-list-columns > li' );
|
||||
$css->add_property( 'flex', '0 1 ' . round( 100 / $attributes['tabWidth'][2], 2 ) . '%' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['gutter'] ) && is_array( $attributes['gutter'] ) && isset( $attributes['gutter'][2] ) && is_numeric( $attributes['gutter'][2] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title' );
|
||||
$css->add_property( 'margin-right', $attributes['gutter'][2] . 'px' );
|
||||
|
||||
if ( is_rtl() ) {
|
||||
$css->set_selector( '.rtl .wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title' );
|
||||
$css->add_property( 'margin-right', '0px' );
|
||||
$css->add_property( 'margin-left', $attributes['gutter'][2] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title' );
|
||||
if ( isset( $attributes['size'] ) && ! empty( $attributes['size'] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size($attributes['size'], ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['lineHeight'] ) && ! empty( $attributes['lineHeight'] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['lineHeight'] . ( ! isset( $attributes['lineType'] ) ? 'px' : $attributes['lineType'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $attributes['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['typography'] ) && ! empty( $attributes['typography'] ) ) {
|
||||
$css->add_property( 'font-family', $attributes['typography'] );
|
||||
}
|
||||
if ( isset( $attributes['fontWeight'] ) && ! empty( $attributes['fontWeight'] ) ) {
|
||||
$css->add_property( 'font-weight', $attributes['fontWeight'] );
|
||||
}
|
||||
if ( isset( $attributes['fontStyle'] ) && ! empty( $attributes['fontStyle'] ) ) {
|
||||
$css->add_property( 'font-style', $attributes['fontStyle'] );
|
||||
}
|
||||
if ( isset( $attributes['textTransform'] ) && ! empty( $attributes['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $attributes['textTransform'] );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'titleBorderWidth', 'border-width', array( 'unit_key' => 'titleBorderWidthUnit' ) );
|
||||
|
||||
$css->render_measure_output( $attributes, 'titleBorderRadius', 'border-radius', array( 'unit_key' => 'titleBorderRadiusUnit' ) );
|
||||
$css->render_measure_output( $attributes, 'titlePadding', 'padding', array( 'unit_key' => 'titlePaddingUnit' ) );
|
||||
if ( isset( $attributes['titleBorder'] ) && ! empty( $attributes['titleBorder'] ) ) {
|
||||
$css->add_property( 'border-color', $css->sanitize_color( $attributes['titleBorder'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleColor'] ) && ! empty( $attributes['titleColor'] ) ) {
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['titleColor'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleBg'] ) && ! empty( $attributes['titleBg'] ) ) {
|
||||
$css->add_property( 'background', $css->sanitize_color( $attributes['titleBg'] ) );
|
||||
}
|
||||
if ( ( ! empty( $attributes['titleMargin'] ) && is_array( $attributes['titleMargin'] ) ) || ( ! empty( $attributes['tabletTitleMargin'] ) && is_array( $attributes['tabletTitleMargin'] ) ) || ( ! empty( $attributes['mobileTitleMargin'] ) && is_array( $attributes['mobileTitleMargin'] ) ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title' );
|
||||
$css->render_measure_output( $attributes, 'titleMargin', 'margin', array( 'unit_key' => 'titleMarginUnit' ) );
|
||||
}
|
||||
|
||||
/*
|
||||
* Hover
|
||||
*/
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title:hover, .wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title:hover' );
|
||||
if ( ! empty( $attributes['titleBorderHover'] ) ) {
|
||||
$css->add_property( 'border-color', $css->sanitize_color( $attributes['titleBorderHover'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['titleColorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['titleColorHover'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['titleBgHover'] ) ) {
|
||||
$css->add_property( 'background', $css->sanitize_color( $attributes['titleBgHover'] ) );
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Active
|
||||
*/
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title.kt-tab-title-active .kt-tab-title' );
|
||||
if ( ! empty( $attributes['titleBorderActive'] ) ) {
|
||||
$css->add_property( 'border-color', $css->sanitize_color( $attributes['titleBorderActive'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['titleColorActive'] ) ) {
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['titleColorActive'] ) );
|
||||
}
|
||||
if ( ! empty( $attributes['titleBgActive'] ) ) {
|
||||
$css->add_property( 'background', $css->sanitize_color( $attributes['titleBgActive'] ) );
|
||||
} else {
|
||||
$css->add_property( 'background', '#ffffff' );
|
||||
}
|
||||
|
||||
/*
|
||||
* Subtitle Colors
|
||||
*/
|
||||
$css->set_selector( '.kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-title-sub-text, .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-title-sub-text' );
|
||||
if ( isset( $attributes['subtitleColor'] ) && ! empty( $attributes['subtitleColor'] ) ) {
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['subtitleColor'] ) );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title:hover .kt-title-sub-text, .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title:hover .kt-title-sub-text' );
|
||||
if ( ! empty( $attributes['subtitleColorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['subtitleColorHover'] ) );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li.kt-tab-title-active .kt-title-sub-text, .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title.kt-tab-title-active .kt-title-sub-text' );
|
||||
if ( ! empty( $attributes['subtitleColorActive'] ) ) {
|
||||
$css->add_property( 'color', $css->sanitize_color( $attributes['subtitleColorActive'] ) );
|
||||
}
|
||||
|
||||
|
||||
if ( isset( $attributes['tabSize'] ) || isset( $attributes['tabLineHeight'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title' );
|
||||
if ( isset( $attributes['tabSize'] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size($attributes['tabSize'], ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['tabLineHeight'] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['tabLineHeight'] . ( ! isset( $attributes['lineType'] ) ? 'px' : $attributes['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['mobileSize'] ) || isset( $attributes['mobileLineHeight'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title' );
|
||||
if ( isset( $attributes['mobileSize'] ) ) {
|
||||
$css->add_property( 'font-size', $css->get_font_size( $attributes['mobileSize'], ( ! isset( $attributes['sizeType'] ) ? 'px' : $attributes['sizeType'] ) ) );
|
||||
}
|
||||
if ( isset( $attributes['mobileLineHeight'] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['mobileLineHeight'] . ( ! isset( $attributes['lineType'] ) ? 'px' : $attributes['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
}
|
||||
|
||||
|
||||
if ( isset( $attributes['enableSubtitle'] ) && true == $attributes['enableSubtitle'] && isset( $attributes['subtitleFont'] ) && is_array( $attributes['subtitleFont'] ) && is_array( $attributes['subtitleFont'][0] ) ) {
|
||||
$css->set_selector( '.kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-title-sub-text, .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-title-sub-text' );
|
||||
$subtitle_font = $attributes['subtitleFont'][0];
|
||||
if ( isset( $subtitle_font['size'] ) && is_array( $subtitle_font['size'] ) && ! empty( $subtitle_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $subtitle_font['size'][0] . ( ! isset( $subtitle_font['sizeType'] ) ? 'px' : $subtitle_font['sizeType'] ) );
|
||||
}
|
||||
if ( isset( $subtitle_font['lineHeight'] ) && is_array( $subtitle_font['lineHeight'] ) && ! empty( $subtitle_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $subtitle_font['lineHeight'][0] . ( ! isset( $subtitle_font['lineType'] ) ? 'px' : $subtitle_font['lineType'] ) );
|
||||
}
|
||||
if ( ! empty( $subtitle_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $subtitle_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( ! empty( $subtitle_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $subtitle_font['textTransform'] );
|
||||
}
|
||||
if ( ! empty( $subtitle_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $subtitle_font['family'] );
|
||||
}
|
||||
if ( ! empty( $subtitle_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $subtitle_font['style'] );
|
||||
}
|
||||
if ( ! empty( $subtitle_font['weight'] ) ) {
|
||||
$css->add_property( 'font-weight', $subtitle_font['weight'] );
|
||||
}
|
||||
if ( isset( $subtitle_font['padding'] ) && is_array( $subtitle_font['padding'] ) ) {
|
||||
$css->add_property( 'padding', $subtitle_font['padding'][0] . 'px ' . $subtitle_font['padding'][1] . 'px ' . $subtitle_font['padding'][2] . 'px ' . $subtitle_font['padding'][3] . 'px' );
|
||||
}
|
||||
if ( isset( $subtitle_font['margin'] ) && is_array( $subtitle_font['margin'] ) ) {
|
||||
$css->add_property( 'margin', $subtitle_font['margin'][0] . 'px ' . $subtitle_font['margin'][1] . 'px ' . $subtitle_font['margin'][2] . 'px ' . $subtitle_font['margin'][3] . 'px' );
|
||||
}
|
||||
}
|
||||
|
||||
if ( isset( $attributes['subtitleFont'] ) && is_array( $attributes['subtitleFont'] ) && isset( $attributes['subtitleFont'][0] ) && is_array( $attributes['subtitleFont'][0] ) && ( ( isset( $attributes['subtitleFont'][0]['size'] ) && is_array( $attributes['subtitleFont'][0]['size'] ) && isset( $attributes['subtitleFont'][0]['size'][1] ) && ! empty( $attributes['subtitleFont'][0]['size'][1] ) ) || ( isset( $attributes['subtitleFont'][0]['lineHeight'] ) && is_array( $attributes['subtitleFont'][0]['lineHeight'] ) && isset( $attributes['subtitleFont'][0]['lineHeight'][1] ) && ! empty( $attributes['subtitleFont'][0]['lineHeight'][1] ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-title-sub-text, .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-title-sub-text' );
|
||||
if ( isset( $attributes['subtitleFont'][0]['size'][1] ) && ! empty( $attributes['subtitleFont'][0]['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['subtitleFont'][0]['size'][1] . ( ! isset( $attributes['subtitleFont'][0]['sizeType'] ) ? 'px' : $attributes['subtitleFont'][0]['sizeType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['subtitleFont'][0]['lineHeight'][1] ) && ! empty( $attributes['subtitleFont'][0]['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['subtitleFont'][0]['lineHeight'][1] . ( ! isset( $attributes['subtitleFont'][0]['lineType'] ) ? 'px' : $attributes['subtitleFont'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
|
||||
if ( isset( $attributes['subtitleFont'] ) && is_array( $attributes['subtitleFont'] ) && isset( $attributes['subtitleFont'][0] ) && is_array( $attributes['subtitleFont'][0] ) && ( ( isset( $attributes['subtitleFont'][0]['size'] ) && is_array( $attributes['subtitleFont'][0]['size'] ) && isset( $attributes['subtitleFont'][0]['size'][2] ) && ! empty( $attributes['subtitleFont'][0]['size'][2] ) ) || ( isset( $attributes['subtitleFont'][0]['lineHeight'] ) && is_array( $attributes['subtitleFont'][0]['lineHeight'] ) && isset( $attributes['subtitleFont'][0]['lineHeight'][2] ) && ! empty( $attributes['subtitleFont'][0]['lineHeight'][2] ) ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li .kt-title-sub-text, .kt-tabs-id' . $unique_id . ' > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-title-sub-text' );
|
||||
if ( isset( $attributes['subtitleFont'][0]['size'][2] ) && ! empty( $attributes['subtitleFont'][0]['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['subtitleFont'][0]['size'][2] . ( ! isset( $attributes['subtitleFont'][0]['sizeType'] ) ? 'px' : $attributes['subtitleFont'][0]['sizeType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['subtitleFont'][0]['lineHeight'][2] ) && ! empty( $attributes['subtitleFont'][0]['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['subtitleFont'][0]['lineHeight'][2] . ( ! isset( $attributes['subtitleFont'][0]['lineType'] ) ? 'px' : $attributes['subtitleFont'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id );
|
||||
$maxWidth = array(
|
||||
'maxWidth' => array(
|
||||
isset( $attributes['maxWidth'] ) ? $attributes['maxWidth'] : '',
|
||||
isset( $attributes['tabletMaxWidth'] ) ? $attributes['tabletMaxWidth'] : '',
|
||||
isset( $attributes['mobileMaxWidth'] ) ? $attributes['mobileMaxWidth'] : '',
|
||||
)
|
||||
);
|
||||
$css->render_responsive_range( $maxWidth, 'maxWidth', 'max-width', 'px' );
|
||||
|
||||
/* SVG Icon */
|
||||
if ( isset( $attributes['titles'] ) && array_filter( array_column( $attributes['titles'], 'icon' ) ) ) {
|
||||
$css->set_selector( '.wp-block-kadence-tabs .kt-tabs-id' . $unique_id . ' > .kt-tabs-title-list li svg' );
|
||||
|
||||
$iconSizes = array(
|
||||
'size' => array(
|
||||
( isset( $attributes['iSize'] ) ? $attributes['iSize'] : '' ),
|
||||
( isset( $attributes['tabletISize'] ) ? $attributes['tabletISize'] : '14' ),
|
||||
( isset( $attributes['mobileISize'] ) ? $attributes['mobileISize'] : '' ),
|
||||
),
|
||||
);
|
||||
|
||||
$css->render_responsive_range( $iconSizes,'size', 'font-size' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kt-tabs.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Tabs_Block::get_instance();
|
||||
@@ -0,0 +1,392 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Testimonial Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Testimonial Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Testimonial_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'testimonial';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$layout = $this->get_context( $block_instance->context, 'layout' );
|
||||
$containerVAlign = $this->get_context( $block_instance->context, 'containerVAlign' );
|
||||
$containerMaxWidth = $this->get_context( $block_instance->context, 'containerMaxWidth' );
|
||||
$style = $this->get_context( $block_instance->context, 'style' );
|
||||
$displayIcon = $this->get_context( $block_instance->context, 'displayIcon' );
|
||||
$displayMedia = $this->get_context( $block_instance->context, 'displayMedia' );
|
||||
$iconStyles = $this->get_context( $block_instance->context, 'iconStyles' );
|
||||
$displayTitle = $this->get_context( $block_instance->context, 'displayTitle' );
|
||||
$displayRating = $this->get_context( $block_instance->context, 'displayRating' );
|
||||
$displayContent = $this->get_context( $block_instance->context, 'displayContent' );
|
||||
$displayOccupation = $this->get_context( $block_instance->context, 'displayOccupation' );
|
||||
$displayName = $this->get_context( $block_instance->context, 'displayName' );
|
||||
$titleFont = $this->get_context( $block_instance->context, 'titleFont' );
|
||||
$mediaStyles = $this->get_context( $block_instance->context, 'mediaStyles' );
|
||||
$ratingStyles = $this->get_context( $block_instance->context, 'ratingStyles' );
|
||||
$content = '';
|
||||
if ( $layout === 'carousel' ) {
|
||||
$content .= '<li class="kt-blocks-testimonial-carousel-item kb-slide-item">';
|
||||
} elseif ( $layout === 'grid' ) {
|
||||
$content .= '<li class="kt-testimonial-grid-item">';
|
||||
}
|
||||
|
||||
$classes = [
|
||||
'kt-testimonial-item-wrap',
|
||||
'kt-testimonial-item-' . $unique_id,
|
||||
];
|
||||
|
||||
if ( $containerVAlign ) {
|
||||
$classes[] = 'testimonial-valign-' . $containerVAlign;
|
||||
}
|
||||
|
||||
$wrapper_args = [
|
||||
'id' => ! empty( $attributes['anchor'] ) ? $attributes['anchor'] : '',
|
||||
'class' => implode( ' ', $classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
|
||||
$content .= sprintf( '<div %s>', $wrapper_attributes );
|
||||
$content .= '<div class="kt-testimonial-text-wrap">';
|
||||
|
||||
if ( $displayIcon && $iconStyles[0]['icon'] && $style !== 'card' ) {
|
||||
$content .= $this->render_icon( $attributes, $iconStyles );
|
||||
}
|
||||
|
||||
if ( $displayMedia && in_array(
|
||||
$style,
|
||||
[
|
||||
'card',
|
||||
'inlineimage',
|
||||
]
|
||||
) && ( ( $attributes['media'] !== 'icon' && $attributes['url'] ) || ( $attributes['media'] === 'icon' && $attributes['icon'] ) ) ) {
|
||||
$content .= $this->render_media( $attributes, $mediaStyles, $style, $containerMaxWidth );
|
||||
}
|
||||
|
||||
if ( $displayIcon && $iconStyles[0]['icon'] && $style === 'card' ) {
|
||||
$content .= $this->render_icon( $attributes, $iconStyles );
|
||||
}
|
||||
|
||||
if ( $displayTitle ) {
|
||||
$content .= $this->render_title( $attributes, $titleFont );
|
||||
}
|
||||
|
||||
if ( $displayRating ) {
|
||||
$content .= $this->render_rating( $attributes, $ratingStyles );
|
||||
}
|
||||
|
||||
if ( $displayContent ) {
|
||||
$content .= $this->render_content( $attributes );
|
||||
}
|
||||
|
||||
// end: kt-testimonial-text-wrap
|
||||
$content .= '</div>';
|
||||
if ( ( $displayMedia && ! in_array(
|
||||
$style,
|
||||
[
|
||||
'card',
|
||||
'inlineimage',
|
||||
]
|
||||
) ) || $displayOccupation || $displayName ) {
|
||||
$content .= '<div class="kt-testimonial-meta-wrap">';
|
||||
if ( $displayMedia && ! in_array(
|
||||
$style,
|
||||
[
|
||||
'card',
|
||||
'inlineimage',
|
||||
]
|
||||
) && ( ( 'icon' !== $attributes['media'] && $attributes['url'] ) || ( 'icon' === $attributes['media'] && $attributes['icon'] ) ) ) {
|
||||
$content .= $this->render_media( $attributes, $mediaStyles, $style, $containerMaxWidth );
|
||||
}
|
||||
$content .= '<div class="kt-testimonial-meta-name-wrap">';
|
||||
|
||||
if ( $displayName ) {
|
||||
$content .= '<div class="kt-testimonial-name-wrap">';
|
||||
$content .= '<div class="kt-testimonial-name">' . $attributes['name'] . '</div>';
|
||||
$content .= '</div>';
|
||||
}
|
||||
|
||||
if ( $displayOccupation ) {
|
||||
$content .= '<div class="kt-testimonial-occupation-wrap">';
|
||||
$content .= '<div class="kt-testimonial-occupation">' . $attributes['occupation'] . '</div>';
|
||||
$content .= '</div>';
|
||||
}
|
||||
|
||||
$content .= '</div>'; // end: kt-testimonial-meta-name-wrap
|
||||
$content .= '</div>'; // end: kt-testimonial-meta-wrap
|
||||
}
|
||||
|
||||
$content .= '</div>';
|
||||
|
||||
if ( $layout === 'carousel' || $layout === 'grid' ) {
|
||||
$content .= '</li>';
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
private function get_context( $context, $key, $default = '' ) {
|
||||
return $context[ 'kadence/testimonials-' . $key ] ?? $default;
|
||||
}
|
||||
|
||||
private function render_icon( $attributes, $iconStyles ) {
|
||||
$icon = '<div class="kt-svg-testimonial-global-icon-wrap">';
|
||||
|
||||
$title = $iconStyles[0]['title'] ?? '';
|
||||
$type = substr( $iconStyles[0]['icon'], 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = ( ! empty( $iconStyles[0]['stroke'] ) ? $iconStyles[0]['stroke'] : 2 );
|
||||
}
|
||||
|
||||
$svg = Kadence_Blocks_Svg_Render::render( $iconStyles[0]['icon'], $fill, $stroke_width, $title );
|
||||
|
||||
$icon .= "<div class='kt-svg-testimonial-global-icon kt-svg-testimonial-global-icon-icon-" . $iconStyles[0]['icon'] . "'>";
|
||||
$icon .= $svg;
|
||||
$icon .= '</div>';
|
||||
|
||||
$icon .= '</div>';
|
||||
|
||||
return $icon;
|
||||
}
|
||||
|
||||
private function render_media( $attributes, $media_styles, $style, $container_max_width ) {
|
||||
$css_class = Kadence_Blocks_CSS::get_instance();
|
||||
$type = substr( $attributes['icon'], 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = ( ! empty( $attributes['istroke'] ) ? $attributes['istroke'] : 2 );
|
||||
}
|
||||
|
||||
$media = '<div class="kt-testimonial-media-wrap">';
|
||||
$media .= '<div class="kt-testimonial-media-inner-wrap">';
|
||||
$media .= '<div class="kadence-testimonial-image-intrisic">';
|
||||
|
||||
if ( $attributes['media'] === 'icon' && $attributes['icon'] ) {
|
||||
$extras = ' height="' . esc_attr( $attributes['isize'] ) . '" width="' . esc_attr( $attributes['isize'] ) . '" style="color: ' . ( isset( $attributes['color'] ) ? $css_class->render_color( $attributes['color'] ) : 'undefined' ) . '"';
|
||||
$svg = Kadence_Blocks_Svg_Render::render( $attributes['icon'], $fill, $stroke_width, $attributes['ititle'], false, $extras );
|
||||
|
||||
$media .= '<div class="kt-svg-testimonial-icon kt-svg-testimonial-icon-' . esc_attr( $attributes['icon'] ) . '">';
|
||||
$media .= $svg;
|
||||
$media .= '</div>';
|
||||
}
|
||||
if ( $attributes['media'] !== 'icon' && $attributes['url'] ) {
|
||||
$media .= $this->get_media_output_html( $attributes, $media_styles, $style, $container_max_width );
|
||||
}
|
||||
$media .= '</div>';
|
||||
$media .= '</div>';
|
||||
$media .= '</div>';
|
||||
return $media;
|
||||
}
|
||||
/**
|
||||
* Get the media output HTML
|
||||
*
|
||||
* @param array $attributes The attributes.
|
||||
* @param array $mediaStyles The media styles.
|
||||
* @param string $style The style.
|
||||
* @param int $containerMaxWidth The container max width.
|
||||
* @return string The media output HTML.
|
||||
*/
|
||||
private function get_media_output_html( $attributes, $media_styles, $style, $container_max_width ) {
|
||||
$use_attachment = false;
|
||||
if ( ! empty( $attributes['id'] ) ) {
|
||||
$image_attachment = wp_get_attachment_image_url( $attributes['id'], 'full' );
|
||||
if ( ! empty( $image_attachment ) && $attributes['url'] === $image_attachment ) {
|
||||
$use_attachment = true;
|
||||
}
|
||||
}
|
||||
// Figure out the Media size.
|
||||
$media_width = ( ! empty( $media_styles[0]['width'] ) ) ? $media_styles[0]['width'] : 60;
|
||||
if ( ( 'card' === $style && $container_max_width > 500 ) || $media_width > 600 ) {
|
||||
$size = 'full';
|
||||
} elseif ( 'card' === $style && $container_max_width <= 500 && $container_max_width > 100 ) {
|
||||
$size = 'large';
|
||||
} elseif ( 'card' === $style && $container_max_width <= 100 ) {
|
||||
$size = 'medium';
|
||||
} elseif ( $media_width <= 600 && $media_width > 100 ) {
|
||||
$size = 'large';
|
||||
} elseif ( $media_width <= 100 && $media_width > 75 ) {
|
||||
$size = 'medium';
|
||||
} elseif ( $media_width <= 75 ) {
|
||||
$size = 'thumbnail';
|
||||
} else {
|
||||
$size = 'full';
|
||||
}
|
||||
$object_fit = ( ! empty( $media_styles[0]['backgroundSize'] ) ) ? $media_styles[0]['backgroundSize'] : '';
|
||||
$object_fit = ( 'auto' === $object_fit ) ? 'none' : $object_fit;
|
||||
$css_style = ( $style === 'card' && ! empty( $object_fit ) ? 'object-fit: ' . $object_fit . ';' : '' );
|
||||
if ( isset( $media_styles[0]['borderRadius'] ) && is_numeric( $media_styles[0]['borderRadius'] ) ) {
|
||||
$css_style .= 'border-radius: ' . $media_styles[0]['borderRadius'] . 'px;';
|
||||
}
|
||||
if ( $use_attachment ) {
|
||||
$classes = [ 'kt-testimonial-image', 'wp-image-' . $attributes['id'], 'size-' . $size ];
|
||||
$args = [ 'class' => implode( ' ', $classes ) ];
|
||||
if ( ! empty( $css_style ) ) {
|
||||
$args['style'] = $css_style;
|
||||
}
|
||||
return wp_get_attachment_image( $attributes['id'], $size, false, $args );
|
||||
}
|
||||
$image_url = $this->get_media_url( $attributes, $media_styles, $style, $container_max_width );
|
||||
return '<img src="' . $image_url . '" class="kt-testimonial-image"' . ( ! empty( $css_style ) ? ' style="' . $css_style . '"' : '' ) . ' />';
|
||||
}
|
||||
/**
|
||||
* Get the media URL
|
||||
*
|
||||
* @param array $attributes The attributes.
|
||||
* @param array $mediaStyles The media styles.
|
||||
* @param string $style The style.
|
||||
* @param int $containerMaxWidth The container max width.
|
||||
* @return string The media URL.
|
||||
*/
|
||||
private function get_media_url( $attributes, $mediaStyles, $style, $containerMaxWidth ) {
|
||||
|
||||
$urlOutput = $attributes['url'];
|
||||
|
||||
if ( ! empty( $attributes['sizes'] ) && ! empty( $attributes['sizes']['thumbnail'] ) ) {
|
||||
if ( ( 'card' === $style && $containerMaxWidth > 500 ) || $mediaStyles[0]['width'] > 600 ) {
|
||||
$urlOutput = $attributes['url'];
|
||||
} elseif ( 'card' === $style && $containerMaxWidth <= 500 && $containerMaxWidth > 100 ) {
|
||||
if ( isset( $attributes['sizes']['large'] ) && $attributes['sizes']['large'] && $attributes['sizes']['large']['width'] > 1000 ) {
|
||||
$urlOutput = $attributes['sizes']['large']['url'];
|
||||
}
|
||||
} elseif ( 'card' === $style && $containerMaxWidth <= 100 ) {
|
||||
if ( isset( $attributes['sizes']['medium'] ) && $attributes['sizes']['medium'] && $attributes['sizes']['medium']['width'] > 200 ) {
|
||||
$urlOutput = $attributes['sizes']['medium']['url'];
|
||||
} elseif ( isset( $attributes['sizes']['large'] ) && $attributes['sizes']['large'] && $attributes['sizes']['large']['width'] > 200 ) {
|
||||
$urlOutput = $attributes['sizes']['large']['url'];
|
||||
}
|
||||
} elseif ( $mediaStyles[0]['width'] <= 600 && $mediaStyles[0]['width'] > 100 ) {
|
||||
if ( isset( $attributes['sizes']['large'] ) && $attributes['sizes']['large'] && $attributes['sizes']['large']['width'] > 1000 ) {
|
||||
$urlOutput = $attributes['sizes']['large']['url'];
|
||||
}
|
||||
} elseif ( $mediaStyles[0]['width'] <= 100 && $mediaStyles[0]['width'] > 75 ) {
|
||||
if ( isset( $attributes['sizes']['medium'] ) && $attributes['sizes']['medium'] && $attributes['sizes']['medium']['width'] > 200 ) {
|
||||
$urlOutput = $attributes['sizes']['medium']['url'];
|
||||
} elseif ( isset( $attributes['sizes']['large'] ) && $attributes['sizes']['large'] && $attributes['sizes']['large']['width'] > 200 ) {
|
||||
$urlOutput = $attributes['sizes']['large']['url'];
|
||||
}
|
||||
} elseif ( $mediaStyles[0]['width'] <= 75 ) {
|
||||
if ( isset( $attributes['sizes']['thumbnail'] ) && $attributes['sizes']['thumbnail'] && $attributes['sizes']['thumbnail']['width'] > 140 ) {
|
||||
$urlOutput = $attributes['sizes']['thumbnail']['url'];
|
||||
} elseif ( isset( $attributes['sizes']['medium'] ) && $attributes['sizes']['medium'] && $attributes['sizes']['medium']['width'] > 140 ) {
|
||||
$urlOutput = $attributes['sizes']['medium']['url'];
|
||||
} elseif ( isset( $attributes['sizes']['large'] ) && $attributes['sizes']['large'] && $attributes['sizes']['large']['width'] > 200 ) {
|
||||
$urlOutput = $attributes['sizes']['large']['url'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $urlOutput;
|
||||
}
|
||||
|
||||
private function render_title( $attributes, $titleFont ) {
|
||||
$title = '<div class="kt-testimonial-title-wrap">';
|
||||
|
||||
$level = ( ! empty( $titleFont[0]['level'] ) && is_numeric( $titleFont[0]['level'] ) ? $titleFont[0]['level'] : 2 );
|
||||
|
||||
$title .= '<h' . $level . ' class="kt-testimonial-title">';
|
||||
$title .= $attributes['title'];
|
||||
$title .= '</h' . $level . '>';
|
||||
|
||||
$title .= '</div>';
|
||||
|
||||
return $title;
|
||||
}
|
||||
|
||||
private function render_rating( $attributes, $ratingStyles ) {
|
||||
if ( ! empty( $ratingStyles[0]['size'] ) ) {
|
||||
$extras = ' height="' . esc_attr( $ratingStyles[0]['size'] ) . '" width="' . esc_attr( $ratingStyles[0]['size'] ) . '"';
|
||||
} else {
|
||||
$extras = '';
|
||||
}
|
||||
// Remove title from individual SVGs since we'll use aria-label on container
|
||||
$svg = Kadence_Blocks_Svg_Render::render( 'fas_star', 'currentColor', ( ! empty( $ratingStyles[0]['size'] ) ? $ratingStyles[0]['size'] : '' ), '', false, $extras . ' aria-hidden="true"' );
|
||||
|
||||
// translators: %1$d is the rating number, %2$d is the total number of stars.
|
||||
$aria_label = sprintf( esc_attr__( '%1$d out of %2$d stars', 'kadence-blocks' ), $attributes['rating'], 5 );
|
||||
|
||||
$rating = '<div class="kt-testimonial-rating-wrap kt-testimonial-rating-' . esc_attr( $attributes['rating'] ) . '" role="img" aria-label="' . $aria_label . '">';
|
||||
|
||||
for ( $i = 0; $i < $attributes['rating']; $i++ ) {
|
||||
$rating .= '<div class="kt-svg-testimonial-rating-icon kt-svg-testimonial-rating-icon-' . ( $i + 1 ) . '" aria-hidden="true">';
|
||||
$rating .= $svg;
|
||||
$rating .= '</div>';
|
||||
}
|
||||
|
||||
$rating .= '</div>';
|
||||
|
||||
return $rating;
|
||||
}
|
||||
|
||||
private function render_content( $attributes ) {
|
||||
$content = '<div class="kt-testimonial-content-wrap">';
|
||||
$content .= '<blockquote class="kt-testimonial-content">';
|
||||
$content .= $attributes['content'];
|
||||
$content .= '</blockquote>';
|
||||
$content .= '</div>';
|
||||
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Testimonial_Block::get_instance();
|
||||
@@ -0,0 +1,951 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Testimonial Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Testimonials Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Testimonials_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'testimonials';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
/* Load any Google fonts that are needed */
|
||||
$attributes_with_fonts = array( 'titleFont', 'contentFont', 'nameFont', 'occupationFont' );
|
||||
foreach ( $attributes_with_fonts as $attribute_font_key ) {
|
||||
if ( isset( $attributes[ $attribute_font_key ][0] ) && isset( $attributes[ $attribute_font_key ][0]['google'] ) && ( isset( $attributes[ $attribute_font_key ][0]['loadGoogle'] ) && true === $attributes[ $attribute_font_key ][0]['loadGoogle'] ) && isset( $attributes[ $attribute_font_key ][0]['family'] ) && true === $attributes[ $attribute_font_key ][0]['google']) {
|
||||
$title_font = $attributes[ $attribute_font_key ][0];
|
||||
|
||||
$font_variant = isset( $title_font['variant'] ) ? $title_font['variant'] : null;
|
||||
$font_subset = isset( $title_font['subset'] ) ? $title_font['subset'] : null;
|
||||
|
||||
$css->maybe_add_google_font( $title_font['family'], $font_variant, $font_subset );
|
||||
}
|
||||
}
|
||||
$style = ! empty( $attributes['style'] ) ? $attributes['style'] : 'basic';
|
||||
/* Tiny slider is required if we're using a carousel layout */
|
||||
if ( isset( $attributes['layout'] ) && 'carousel' === $attributes['layout'] ) {
|
||||
$this->enqueue_style( 'kadence-blocks-splide' );
|
||||
$this->enqueue_script( 'kadence-blocks-splide-init' );
|
||||
}
|
||||
// Main Icon.
|
||||
if ( isset( $attributes['iconStyles'][0] ) && is_array( $attributes['iconStyles'][0] ) ) {
|
||||
$icon_styles = $attributes['iconStyles'][0];
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-svg-testimonial-global-icon' );
|
||||
if ( ! empty( $icon_styles['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $icon_styles['color'] ) );
|
||||
}
|
||||
if ( $css->is_number( $icon_styles['size'] ) ) {
|
||||
$css->add_property( 'font-size', $icon_styles['size'] . 'px' );
|
||||
}
|
||||
if ( $css->is_number( $icon_styles['borderRadius'] ) ) {
|
||||
$css->add_property( 'border-radius', $icon_styles['borderRadius'] . 'px' );
|
||||
} else {
|
||||
$css->render_border_radius( $attributes, 'iconBorderRadius', ( isset( $attributes['iconBorderRadiusUnit'] ) ? $attributes['iconBorderRadiusUnit'] : 'px') );
|
||||
}
|
||||
if ( ! empty( $icon_styles['background'] ) ) {
|
||||
$alpha = ( $css->is_number( $icon_styles['backgroundOpacity'] ) ? $icon_styles['backgroundOpacity'] : 1 );
|
||||
$css->add_property( 'background', $css->render_color( $icon_styles['background'], $alpha ) );
|
||||
}
|
||||
if ( ! empty( $icon_styles['border'] ) ) {
|
||||
$alpha = ( $css->is_number( $icon_styles['borderOpacity'] ) ? $icon_styles['borderOpacity'] : 1 );
|
||||
$css->add_property( 'border-color', $css->render_color( $icon_styles['border'], $alpha ) );
|
||||
}
|
||||
|
||||
if( !empty( $icon_styles['borderWidth'][0] ) || !empty( $icon_styles['borderWidth'][1] ) || !empty( $icon_styles['borderWidth'][2] ) || !empty( $icon_styles['borderWidth'][3] ) ) {
|
||||
$css->render_measure_range( $icon_styles, 'borderWidth', 'border-width' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'iconBorderStyle', 'border' );
|
||||
}
|
||||
|
||||
if( array_filter( $icon_styles['padding'] ) ){
|
||||
$css->render_measure_range( $icon_styles, 'padding', 'padding' );
|
||||
} else {
|
||||
$css->render_measure_output( $attributes, 'iconPadding', 'padding' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-svg-testimonial-global-icon-wrap' );
|
||||
if( array_filter( $icon_styles['margin'] ) ){
|
||||
$css->render_measure_range( $icon_styles, 'margin', 'margin' );
|
||||
} else {
|
||||
$css->render_measure_output( $attributes, 'iconMargin', 'margin' );
|
||||
}
|
||||
}
|
||||
// Testimonial specific Icon.
|
||||
if ( isset( $attributes['testimonials'] ) && is_array( $attributes['testimonials'] ) ) {
|
||||
foreach ( $attributes['testimonials'] as $key => $value ) {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-' . $key . ' .kt-svg-testimonial-icon' );
|
||||
if ( ! empty( $value['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $value['color'] ) );
|
||||
}
|
||||
if ( $css->is_number( $value['isize'] ) ) {
|
||||
$css->add_property( 'font-size', $value['isize'] . 'px' );
|
||||
}
|
||||
}
|
||||
}
|
||||
// Rating icons.
|
||||
if ( isset( $attributes['ratingStyles'][0] ) && is_array( $attributes['ratingStyles'][0] ) ) {
|
||||
$rating_styles = $attributes['ratingStyles'][0];
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-rating-wrap' );
|
||||
$css->render_measure_range( $rating_styles, 'margin', 'margin' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-rating-wrap .kb-svg-icon-wrap' );
|
||||
if ( ! empty( $rating_styles['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $rating_styles['color'] ) );
|
||||
}
|
||||
if ( $css->is_number( $rating_styles['size'] ) ) {
|
||||
$css->add_property( 'font-size', $rating_styles['size'] . 'px' );
|
||||
}
|
||||
}
|
||||
/*
|
||||
* Wrapper padding
|
||||
*/
|
||||
$wrapper_padding_type = ! empty( $attributes['wrapperPaddingType'] ) ? $attributes['wrapperPaddingType'] : 'px';
|
||||
$wrapper_margin_type = ! empty( $attributes['wrapperMarginUnit'] ) ? $attributes['wrapperMarginUnit'] : 'px';
|
||||
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id );
|
||||
|
||||
// Desktop wrapper padding L/R
|
||||
if ( isset( $attributes['wrapperPadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $this->get_usable_value( $css, $attributes['wrapperPadding'][1], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['wrapperPadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $this->get_usable_value( $css, $attributes['wrapperPadding'][3], $wrapper_padding_type ) );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['wrapperMargin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $this->get_usable_value( $css, $attributes['wrapperMargin'][1], $wrapper_margin_type ) );
|
||||
}
|
||||
if ( isset( $attributes['wrapperMargin'][3] )) {
|
||||
$css->add_property( 'margin-left', $this->get_usable_value( $css, $attributes['wrapperMargin'][3], $wrapper_margin_type ) );
|
||||
}
|
||||
|
||||
// Tablet wrapper padding L/R
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( isset( $attributes['wrapperTabletPadding'][1] )) {
|
||||
$css->add_property( 'padding-right', $this->get_usable_value( $css, $attributes['wrapperTabletPadding'][1], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['wrapperTabletPadding'][3] )) {
|
||||
$css->add_property( 'padding-left', $this->get_usable_value( $css, $attributes['wrapperTabletPadding'][3], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['tabletWrapperMargin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $this->get_usable_value( $css, $attributes['tabletWrapperMargin'][1], $wrapper_margin_type ) );
|
||||
}
|
||||
if ( isset( $attributes['tabletWrapperMargin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $this->get_usable_value( $css, $attributes['tabletWrapperMargin'][3], $wrapper_margin_type ) );
|
||||
}
|
||||
|
||||
// Mobile wrapper padding L/R
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( isset( $attributes['wrapperMobilePadding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $this->get_usable_value( $css, $attributes['wrapperMobilePadding'][1], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['wrapperMobilePadding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $this->get_usable_value( $css, $attributes['wrapperMobilePadding'][3], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['mobileWrapperMargin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $this->get_usable_value( $css, $attributes['mobileWrapperMargin'][1], $wrapper_margin_type ) );
|
||||
}
|
||||
if ( isset( $attributes['mobileWrapperMargin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $this->get_usable_value( $css, $attributes['mobileWrapperMargin'][3], $wrapper_margin_type ) );
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
/*
|
||||
* If the layout style is carousel, we set the top & bottom wrapper padding on the carousel item instead of the wrapper.
|
||||
*/
|
||||
if ( isset( $attributes['layout'] ) && 'carousel' === $attributes['layout'] ) {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-carousel .kt-blocks-testimonial-carousel-item' );
|
||||
|
||||
// If a box shadow is enabled with a carousel, lets give some padding by default, they can override with a value from the wrapper section.
|
||||
if ( isset( $attributes['displayShadow'] ) && $attributes['displayShadow'] ) {
|
||||
$css->add_property( 'padding-top', 'var(--global-kb-spacing-xxs, .5rem)' );
|
||||
$css->add_property( 'padding-bottom', 'var(--global-kb-spacing-xxs, .5rem)' );
|
||||
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'padding', 'var(--global-kb-spacing-xxs, .5rem)' );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop wrapper padding T/B.
|
||||
if ( isset( $attributes['wrapperPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $this->get_usable_value( $css, $attributes['wrapperPadding'][0], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['wrapperPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $this->get_usable_value( $css, $attributes['wrapperPadding'][2], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['wrapperMargin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $this->get_usable_value( $css, $attributes['wrapperMargin'][0], $wrapper_margin_type ) );
|
||||
}
|
||||
if ( isset( $attributes['wrapperMargin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $this->get_usable_value( $css, $attributes['wrapperMargin'][2], $wrapper_margin_type ) );
|
||||
}
|
||||
// Tablet wrapper padding T/B
|
||||
$css->set_media_state( 'tablet' );
|
||||
if ( isset( $attributes['wrapperTabletPadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $this->get_usable_value( $css, $attributes['wrapperTabletPadding'][0], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['wrapperTabletPadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $this->get_usable_value( $css, $attributes['wrapperTabletPadding'][2], $wrapper_padding_type ) );
|
||||
}
|
||||
if ( isset( $attributes['tabletWrapperMargin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $this->get_usable_value( $css, $attributes['tabletWrapperMargin'][0], $wrapper_margin_type ) );
|
||||
}
|
||||
if ( isset( $attributes['tabletWrapperMargin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $this->get_usable_value( $css, $attributes['tabletWrapperMargin'][2], $wrapper_margin_type ) );
|
||||
}
|
||||
|
||||
// Mobile wrapper padding T/B
|
||||
$css->set_media_state( 'mobile' );
|
||||
if ( isset( $attributes['wrapperMobilePadding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $attributes['wrapperMobilePadding'][0] . $wrapper_padding_type );
|
||||
}
|
||||
if ( isset( $attributes['wrapperMobilePadding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['wrapperMobilePadding'][2] . $wrapper_padding_type );
|
||||
}
|
||||
if ( isset( $attributes['mobileWrapperMargin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $attributes['mobileWrapperMargin'][0] . $wrapper_margin_type );
|
||||
}
|
||||
if ( isset( $attributes['mobileWrapperMargin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $attributes['mobileWrapperMargin'][2] . $wrapper_margin_type );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
|
||||
/*
|
||||
* columnGap
|
||||
*/
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-grid-wrap' );
|
||||
$css->render_gap( $attributes );
|
||||
if ( ! empty( $attributes['layout'] ) && 'carousel' === $attributes['layout'] ) {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider) .kb-slide-item' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
$gap_unit = ! empty( $attributes['gap_unit'] ) ? $attributes['gap_unit'] : 'px';
|
||||
$gap = isset( $attributes['gap'][0] ) && '' !== $attributes['gap'][0] ? $attributes['gap'][0] : '32';
|
||||
$tablet_gap = ( isset( $attributes['gap'][1] ) && '' !== $attributes['gap'][1] ? $attributes['gap'][1] : $gap );
|
||||
$mobile_gap = ( isset( $attributes['gap'][2] ) && '' !== $attributes['gap'][2] ? $attributes['gap'][2] : $tablet_gap );
|
||||
$columns_xxl = ( ! empty( $attributes['columns'][0] ) ? $attributes['columns'][0] : '1' );
|
||||
$columns_md = ( ! empty( $attributes['columns'][2] ) ? $attributes['columns'][2] : '1' );
|
||||
$columns_ss = ( ! empty( $attributes['columns'][5] ) ? $attributes['columns'][5] : '1' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider) .kb-slide-item:nth-child(-n+' . $columns_xxl . ')' );
|
||||
$css->add_property( 'padding-left', $gap . $gap_unit );
|
||||
$css->add_property( 'display', 'block' );
|
||||
$css->add_property( 'float', 'left' );
|
||||
$css->add_property( 'width', 'calc(100% / ' . $columns_xxl . ')' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider)' );
|
||||
$css->add_property( 'margin-left', '-' . $gap . $gap_unit );
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider) .kb-slide-item' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider) .kb-slide-item:nth-child(-n+' . $columns_md . ')' );
|
||||
$css->add_property( 'padding-left', $tablet_gap . $gap_unit );
|
||||
$css->add_property( 'display', 'block' );
|
||||
$css->add_property( 'float', 'left' );
|
||||
$css->add_property( 'width', 'calc(100% / ' . $columns_md . ')' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider)' );
|
||||
$css->add_property( 'margin-left', '-' . $tablet_gap . $gap_unit );
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider) .kb-slide-item' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider) .kb-slide-item:nth-child(-n+' . $columns_ss . ')' );
|
||||
$css->add_property( 'display', 'block' );
|
||||
$css->add_property( 'float', 'left' );
|
||||
$css->add_property( 'width', 'calc(100% / ' . $columns_ss . ')' );
|
||||
$css->add_property( 'padding-left', $mobile_gap . $gap_unit );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-blocks-testimonials-inner-wrap .kt-blocks-carousel-init:not(.splide-initialized):not(.tns-slider)' );
|
||||
$css->add_property( 'margin-left', '-' . $mobile_gap . $gap_unit );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if ( 'bubble' === $style || 'inlineimage' === $style ) {
|
||||
$css->set_selector( '.wp-block-kadence-testimonials.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-text-wrap:after' );
|
||||
if ( isset( $attributes['containerBorderWidth'] ) && is_array( $attributes['containerBorderWidth'] ) && ! empty( $attributes['containerBorderWidth'][2] ) ) {
|
||||
$css->add_property( 'margin-top', $attributes['containerBorderWidth'][2] . 'px' );
|
||||
} else if ( ! empty( $attributes['borderStyle'][0]['bottom'][2] ) ) {
|
||||
$css->add_property( 'margin-top', $attributes['borderStyle'][0]['bottom'][2] . ( !empty( $attributes['borderStyle'][0]['unit'] ) ? $attributes['borderStyle'][0]['unit'] : 'px' ) );
|
||||
}
|
||||
if ( ! empty( $attributes['borderStyle'][0]['bottom'][0] ) ) {
|
||||
$css->add_property( 'border-top-color', $css->render_color( $attributes['borderStyle'][0]['bottom'][0] ) );
|
||||
} else if ( isset( $attributes['containerBorder'] ) && ! empty( $attributes['containerBorder'] ) ) {
|
||||
$alpha = ( isset( $attributes['containerBorderOpacity'] ) && is_numeric( $attributes['containerBorderOpacity'] ) ? $attributes['containerBorderOpacity'] : 1 );
|
||||
$css->add_property( 'border-top-color', $css->render_color( $attributes['containerBorder'], $alpha ) );
|
||||
}
|
||||
}
|
||||
|
||||
// See if container styles are applied to the item or text.
|
||||
if ( 'bubble' !== $style && 'inlineimage' !== $style ){
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap' );
|
||||
} else {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap .kt-testimonial-text-wrap' );
|
||||
}
|
||||
/* Container Padding */
|
||||
$css->render_measure_output( $attributes, 'containerPadding', 'padding' );
|
||||
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap' );
|
||||
/* Container min-height */
|
||||
$css->render_responsive_range( $attributes, 'containerMinHeight', 'min-height' );
|
||||
|
||||
// Title font.
|
||||
$title_font = null;
|
||||
if ( isset( $attributes['titleFont'] ) && is_array( $attributes['titleFont'] ) && isset( $attributes['titleFont'][0] ) && is_array( $attributes['titleFont'][0] ) ) {
|
||||
$title_font = $attributes['titleFont'][0];
|
||||
}
|
||||
if ( $title_font || ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][0] ) && is_numeric( $attributes['titleMinHeight'][0] ) ) ) {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap .kt-testimonial-title' );
|
||||
if ( isset( $title_font['color'] ) && ! empty( $title_font['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $title_font['color'] ) );
|
||||
}
|
||||
if ( isset( $title_font['size'] ) && is_array( $title_font['size'] ) && ! empty( $title_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $title_font['size'][0], ( ! isset( $title_font['sizeType'] ) ? 'px' : $title_font['sizeType'] ), true ) );
|
||||
|
||||
}
|
||||
if ( isset( $title_font['lineHeight'] ) && is_array( $title_font['lineHeight'] ) && ! empty( $title_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $title_font['lineHeight'][0] . ( ! isset( $title_font['lineType'] ) ? 'px' : $title_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $title_font['letterSpacing'] ) && ! empty( $title_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $title_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['textTransform'] ) && ! empty( $title_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $title_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $title_font['family'] ) && ! empty( $title_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $css->render_font_family( $title_font['family'] ) );
|
||||
}
|
||||
if ( isset( $title_font['style'] ) && ! empty( $title_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $title_font['style'] );
|
||||
}
|
||||
if ( isset( $title_font['weight'] ) && ! empty( $title_font['weight'] ) && 'regular' !== $title_font['weight'] ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $title_font['weight'] ) );
|
||||
}
|
||||
|
||||
if ( isset( $title_font['margin'] ) && is_array( $title_font['margin'] ) && array_filter( $title_font['margin'] ) ) {
|
||||
if ( isset( $title_font['margin'][0] ) && is_numeric( $title_font['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $title_font['margin'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['margin'][1] ) && is_numeric( $title_font['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $title_font['margin'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['margin'][2] ) && is_numeric( $title_font['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $title_font['margin'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['margin'][3] ) && is_numeric( $title_font['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $title_font['margin'][3] . 'px' );
|
||||
}
|
||||
} else {
|
||||
$css->render_measure_output( $attributes, 'titleMargin', 'margin' );
|
||||
}
|
||||
|
||||
if ( isset( $title_font['padding'] ) && is_array( $title_font['padding'] ) && array_filter( $title_font['padding'] ) ) {
|
||||
if ( isset( $title_font['padding'][0] ) && is_numeric( $title_font['padding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $title_font['padding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['padding'][1] ) && is_numeric( $title_font['padding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $title_font['padding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['padding'][2] ) && is_numeric( $title_font['padding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $title_font['padding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $title_font['padding'][3] ) && is_numeric( $title_font['padding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $title_font['padding'][3] . 'px' );
|
||||
}
|
||||
} else {
|
||||
$css->render_measure_output( $attributes, 'titlePadding', 'padding' );
|
||||
}
|
||||
if ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][0] ) && is_numeric( $attributes['titleMinHeight'][0] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][0] . 'px' );
|
||||
}
|
||||
}
|
||||
|
||||
if ( ( $title_font && ( ( isset( $title_font['size'] ) && is_array( $title_font['size'] ) && isset( $title_font['size'][1] ) && ! empty( $title_font['size'][1] ) ) || ( isset( $title_font['lineHeight'] ) && is_array( $title_font['lineHeight'] ) && isset( $title_font['lineHeight'][1] ) && ! empty( $title_font['lineHeight'][1] ) ) ) ) || ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][1] ) && is_numeric( $attributes['titleMinHeight'][1] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap .kt-testimonial-title' );
|
||||
if ( isset( $title_font['size'][1] ) && ! empty( $title_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $title_font['size'][1], ( ! isset( $title_font['sizeType'] ) ? 'px' : $title_font['sizeType'] ), true ) );
|
||||
}
|
||||
if ( isset( $title_font['lineHeight'][1] ) && ! empty( $title_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $title_font['lineHeight'][1] . ( ! isset( $title_font['lineType'] ) ? 'px' : $title_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][1] ) && is_numeric( $attributes['titleMinHeight'][1] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][1] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
if ( ( $title_font && ( ( isset( $title_font['size'] ) && is_array( $title_font['size'] ) && isset( $title_font['size'][2] ) && ! empty( $title_font['size'][2] ) ) || ( isset( $title_font['lineHeight'] ) && is_array( $title_font['lineHeight'] ) && isset( $title_font['lineHeight'][2] ) && ! empty( $title_font['lineHeight'][2] ) ) ) ) || ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][1] ) && is_numeric( $attributes['titleMinHeight'][1] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap .kt-testimonial-title' );
|
||||
if ( isset( $title_font['size'][2] ) && ! empty( $title_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $title_font['size'][2], ( ! isset( $title_font['sizeType'] ) ? 'px' : $title_font['sizeType'] ), true ) );
|
||||
}
|
||||
if ( isset( $title_font['lineHeight'][2] ) && ! empty( $title_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $title_font['lineHeight'][2] . ( ! isset( $title_font['lineType'] ) ? 'px' : $title_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['titleMinHeight'] ) && is_array( $attributes['titleMinHeight'] ) && isset( $attributes['titleMinHeight'][2] ) && is_numeric( $attributes['titleMinHeight'][2] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['titleMinHeight'][2] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
// Content font.
|
||||
$content_font = null;
|
||||
if ( isset( $attributes['contentFont'] ) && is_array( $attributes['contentFont'] ) && isset( $attributes['contentFont'][0] ) && is_array( $attributes['contentFont'][0] ) ) {
|
||||
$content_font = $attributes['contentFont'][0];
|
||||
}
|
||||
if ( $content_font || ( isset( $attributes['contentMinHeight'] ) && is_array( $attributes['contentMinHeight'] ) && isset( $attributes['contentMinHeight'][0] ) && is_numeric( $attributes['contentMinHeight'][0] ) ) ) {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-content' );
|
||||
if ( isset( $content_font['color'] ) && ! empty( $content_font['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $content_font['color'] ) );
|
||||
}
|
||||
if ( isset( $content_font['size'] ) && is_array( $content_font['size'] ) && ! empty( $content_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $content_font['size'][0], ( ! isset( $content_font['sizeType'] ) ? 'px' : $content_font['sizeType'] ), true ) );
|
||||
}
|
||||
if ( isset( $content_font['lineHeight'] ) && is_array( $content_font['lineHeight'] ) && ! empty( $content_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $content_font['lineHeight'][0] . ( ! isset( $content_font['lineType'] ) ? 'px' : $content_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $content_font['letterSpacing'] ) && ! empty( $content_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $content_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $content_font['textTransform'] ) && ! empty( $content_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $content_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $content_font['family'] ) && ! empty( $content_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $css->render_font_family( $content_font['family'] ) );
|
||||
}
|
||||
if ( isset( $content_font['style'] ) && ! empty( $content_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $content_font['style'] );
|
||||
}
|
||||
if ( isset( $content_font['weight'] ) && ! empty( $content_font['weight'] ) && 'regular' !== $content_font['weight'] ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $content_font['weight'] ) );
|
||||
}
|
||||
if ( isset( $content_font['margin'] ) && is_array( $content_font['margin'] ) && isset( $content_font['margin'][0] ) && is_numeric( $content_font['margin'][0] ) ) {
|
||||
$css->add_property( 'margin-top', $content_font['margin'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $content_font['margin'] ) && is_array( $content_font['margin'] ) && isset( $content_font['margin'][1] ) && is_numeric( $content_font['margin'][1] ) ) {
|
||||
$css->add_property( 'margin-right', $content_font['margin'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $content_font['margin'] ) && is_array( $content_font['margin'] ) && isset( $content_font['margin'][2] ) && is_numeric( $content_font['margin'][2] ) ) {
|
||||
$css->add_property( 'margin-bottom', $content_font['margin'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $content_font['margin'] ) && is_array( $content_font['margin'] ) && isset( $content_font['margin'][3] ) && is_numeric( $content_font['margin'][3] ) ) {
|
||||
$css->add_property( 'margin-left', $content_font['margin'][3] . 'px' );
|
||||
}
|
||||
if ( isset( $content_font['padding'] ) && is_array( $content_font['padding'] ) && isset( $content_font['padding'][0] ) && is_numeric( $content_font['padding'][0] ) ) {
|
||||
$css->add_property( 'padding-top', $content_font['padding'][0] . 'px' );
|
||||
}
|
||||
if ( isset( $content_font['padding'] ) && is_array( $content_font['padding'] ) && isset( $content_font['padding'][1] ) && is_numeric( $content_font['padding'][1] ) ) {
|
||||
$css->add_property( 'padding-right', $content_font['padding'][1] . 'px' );
|
||||
}
|
||||
if ( isset( $content_font['padding'] ) && is_array( $content_font['padding'] ) && isset( $content_font['padding'][2] ) && is_numeric( $content_font['padding'][2] ) ) {
|
||||
$css->add_property( 'padding-bottom', $content_font['padding'][2] . 'px' );
|
||||
}
|
||||
if ( isset( $content_font['padding'] ) && is_array( $content_font['padding'] ) && isset( $content_font['padding'][3] ) && is_numeric( $content_font['padding'][3] ) ) {
|
||||
$css->add_property( 'padding-left', $content_font['padding'][3] . 'px' );
|
||||
}
|
||||
if ( isset( $attributes['contentMinHeight'] ) && is_array( $attributes['contentMinHeight'] ) && isset( $attributes['contentMinHeight'][0] ) && is_numeric( $attributes['contentMinHeight'][0] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['contentMinHeight'][0] . 'px' );
|
||||
}
|
||||
}
|
||||
if ( ( $content_font && ( ( isset( $content_font['size'] ) && is_array( $content_font['size'] ) && isset( $content_font['size'][1] ) && ! empty( $content_font['size'][1] ) ) || ( isset( $content_font['lineHeight'] ) && is_array( $content_font['lineHeight'] ) && isset( $content_font['lineHeight'][1] ) && ! empty( $content_font['lineHeight'][1] ) ) ) ) || ( isset( $attributes['contentMinHeight'] ) && is_array( $attributes['contentMinHeight'] ) && isset( $attributes['contentMinHeight'][1] ) && is_numeric( $attributes['contentMinHeight'][1] ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-content' );
|
||||
if ( isset( $content_font['size'][1] ) && ! empty( $content_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $content_font['size'][1], ( ! isset( $content_font['sizeType'] ) ? 'px' : $content_font['sizeType'] ), true ) );
|
||||
}
|
||||
if ( isset( $content_font['lineHeight'][1] ) && ! empty( $content_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $content_font['lineHeight'][1] . ( ! isset( $content_font['lineType'] ) ? 'px' : $content_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['contentMinHeight'] ) && is_array( $attributes['contentMinHeight'] ) && isset( $attributes['contentMinHeight'][1] ) && is_numeric( $attributes['contentMinHeight'][1] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['contentMinHeight'][1] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ( $content_font && ( ( isset( $content_font['size'] ) && is_array( $content_font['size'] ) && isset( $content_font['size'][2] ) && ! empty( $content_font['size'][2] ) ) || ( isset( $content_font['lineHeight'] ) && is_array( $content_font['lineHeight'] ) && isset( $content_font['lineHeight'][2] ) && ! empty( $content_font['lineHeight'][2] ) ) ) ) || ( isset( $attributes['contentMinHeight'] ) && is_array( $attributes['contentMinHeight'] ) && isset( $attributes['contentMinHeight'][2] ) && is_numeric( $attributes['contentMinHeight'][2] ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-content' );
|
||||
if ( isset( $content_font['size'][2] ) && ! empty( $content_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $content_font['size'][2], ( ! isset( $content_font['sizeType'] ) ? 'px' : $content_font['sizeType'] ), true ) );
|
||||
}
|
||||
if ( isset( $content_font['lineHeight'][2] ) && ! empty( $content_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $content_font['lineHeight'][2] . ( ! isset( $content_font['lineType'] ) ? 'px' : $content_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['contentMinHeight'] ) && is_array( $attributes['contentMinHeight'] ) && isset( $attributes['contentMinHeight'][2] ) && is_numeric( $attributes['contentMinHeight'][2] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['contentMinHeight'][2] . 'px' );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
// Name font.
|
||||
$name_font = null;
|
||||
if ( isset( $attributes['nameFont'] ) && is_array( $attributes['nameFont'] ) && isset( $attributes['nameFont'][0] ) && is_array( $attributes['nameFont'][0] ) ) {
|
||||
$name_font = $attributes['nameFont'][0];
|
||||
}
|
||||
if ( $name_font ) {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-name' );
|
||||
if ( isset( $name_font['color'] ) && ! empty( $name_font['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $name_font['color'] ) );
|
||||
}
|
||||
if ( isset( $name_font['size'] ) && is_array( $name_font['size'] ) && ! empty( $name_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $name_font['size'][0], ( ! isset( $name_font['sizeType'] ) ? 'px' : $name_font['sizeType'] ), true ) );
|
||||
}
|
||||
if ( isset( $name_font['lineHeight'] ) && is_array( $name_font['lineHeight'] ) && ! empty( $name_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $name_font['lineHeight'][0] . ( ! isset( $name_font['lineType'] ) ? 'px' : $name_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $name_font['letterSpacing'] ) && ! empty( $name_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $name_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $name_font['textTransform'] ) && ! empty( $name_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $name_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $name_font['family'] ) && ! empty( $name_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $css->render_font_family( $name_font['family'] ) );
|
||||
}
|
||||
if ( isset( $name_font['style'] ) && ! empty( $name_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $name_font['style'] );
|
||||
}
|
||||
if ( isset( $name_font['weight'] ) && ! empty( $name_font['weight'] ) && 'regular' !== $name_font['weight'] ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $name_font['weight'] ) );
|
||||
}
|
||||
}
|
||||
if ( $name_font && ( ( isset( $name_font['size'] ) && is_array( $name_font['size'] ) && isset( $name_font['size'][1] ) && ! empty( $name_font['size'][1] ) ) || ( isset( $name_font['lineHeight'] ) && is_array( $name_font['lineHeight'] ) && isset( $name_font['lineHeight'][1] ) && ! empty( $name_font['lineHeight'][1] ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-name' );
|
||||
if ( isset( $name_font['size'][1] ) && ! empty( $name_font['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $name_font['size'][1], ( ! isset( $name_font['sizeType'] ) ? 'px' : $name_font['sizeType'] ), true ) );
|
||||
}
|
||||
if ( isset( $name_font['lineHeight'][1] ) && ! empty( $name_font['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $name_font['lineHeight'][1] . ( ! isset( $name_font['lineType'] ) ? 'px' : $name_font['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( $name_font && ( ( isset( $name_font['size'] ) && is_array( $name_font['size'] ) && isset( $name_font['size'][2] ) && ! empty( $name_font['size'][2] ) ) || ( isset( $name_font['lineHeight'] ) && is_array( $name_font['lineHeight'] ) && isset( $name_font['lineHeight'][2] ) && ! empty( $name_font['lineHeight'][2] ) ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-name' );
|
||||
if ( isset( $name_font['size'][2] ) && ! empty( $name_font['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $this->get_usable_value( $css, $name_font['size'][2], ( ! isset( $name_font['sizeType'] ) ? 'px' : $name_font['sizeType'] ), true ) );
|
||||
}
|
||||
if ( isset( $name_font['lineHeight'][2] ) && ! empty( $name_font['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $name_font['lineHeight'][2] . ( ! isset( $name_font['lineType'] ) ? 'px' : $name_font['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['occupationFont'] ) && is_array( $attributes['occupationFont'] ) && is_array( $attributes['occupationFont'][0] ) ) {
|
||||
$occupation_font = $attributes['occupationFont'][0];
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-occupation' );
|
||||
if ( isset( $occupation_font['color'] ) && ! empty( $occupation_font['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $occupation_font['color'] ) );
|
||||
}
|
||||
if ( isset( $occupation_font['size'] ) && is_array( $occupation_font['size'] ) && ! empty( $occupation_font['size'][0] ) ) {
|
||||
$css->add_property( 'font-size', $occupation_font['size'][0] . ( ! isset( $occupation_font['sizeType'] ) ? 'px' : $occupation_font['sizeType'] ) );
|
||||
}
|
||||
if ( isset( $occupation_font['lineHeight'] ) && is_array( $occupation_font['lineHeight'] ) && ! empty( $occupation_font['lineHeight'][0] ) ) {
|
||||
$css->add_property( 'line-height', $occupation_font['lineHeight'][0] . ( ! isset( $occupation_font['lineType'] ) ? 'px' : $occupation_font['lineType'] ) );
|
||||
}
|
||||
if ( isset( $occupation_font['letterSpacing'] ) && ! empty( $occupation_font['letterSpacing'] ) ) {
|
||||
$css->add_property( 'letter-spacing', $occupation_font['letterSpacing'] . 'px' );
|
||||
}
|
||||
if ( isset( $occupation_font['textTransform'] ) && ! empty( $occupation_font['textTransform'] ) ) {
|
||||
$css->add_property( 'text-transform', $occupation_font['textTransform'] );
|
||||
}
|
||||
if ( isset( $occupation_font['family'] ) && ! empty( $occupation_font['family'] ) ) {
|
||||
$css->add_property( 'font-family', $css->render_font_family( $occupation_font['family'] ) );
|
||||
}
|
||||
if ( isset( $occupation_font['style'] ) && ! empty( $occupation_font['style'] ) ) {
|
||||
$css->add_property( 'font-style', $occupation_font['style'] );
|
||||
}
|
||||
if ( isset( $occupation_font['weight'] ) && ! empty( $occupation_font['weight'] ) && 'regular' !== $occupation_font['weight'] ) {
|
||||
$css->add_property( 'font-weight', $css->render_font_weight( $occupation_font['weight'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['occupationFont'] ) && is_array( $attributes['occupationFont'] ) && isset( $attributes['occupationFont'][0] ) && is_array( $attributes['occupationFont'][0] ) && ( ( isset( $attributes['occupationFont'][0]['size'] ) && is_array( $attributes['occupationFont'][0]['size'] ) && isset( $attributes['occupationFont'][0]['size'][1] ) && ! empty( $attributes['occupationFont'][0]['size'][1] ) ) || ( isset( $attributes['occupationFont'][0]['lineHeight'] ) && is_array( $attributes['occupationFont'][0]['lineHeight'] ) && isset( $attributes['occupationFont'][0]['lineHeight'][1] ) && ! empty( $attributes['occupationFont'][0]['lineHeight'][1] ) ) ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-occupation' );
|
||||
if ( isset( $attributes['occupationFont'][0]['size'][1] ) && ! empty( $attributes['occupationFont'][0]['size'][1] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['occupationFont'][0]['size'][1] . ( ! isset( $attributes['occupationFont'][0]['sizeType'] ) ? 'px' : $attributes['occupationFont'][0]['sizeType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['occupationFont'][0]['lineHeight'][1] ) && ! empty( $attributes['occupationFont'][0]['lineHeight'][1] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['occupationFont'][0]['lineHeight'][1] . ( ! isset( $attributes['occupationFont'][0]['lineType'] ) ? 'px' : $attributes['occupationFont'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( isset( $attributes['occupationFont'] ) && is_array( $attributes['occupationFont'] ) && isset( $attributes['occupationFont'][0] ) && is_array( $attributes['occupationFont'][0] ) && ( ( isset( $attributes['occupationFont'][0]['size'] ) && is_array( $attributes['occupationFont'][0]['size'] ) && isset( $attributes['occupationFont'][0]['size'][2] ) && ! empty( $attributes['occupationFont'][0]['size'][2] ) ) || ( isset( $attributes['occupationFont'][0]['lineHeight'] ) && is_array( $attributes['occupationFont'][0]['lineHeight'] ) && isset( $attributes['occupationFont'][0]['lineHeight'][2] ) && ! empty( $attributes['occupationFont'][0]['lineHeight'][2] ) ) ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-occupation' );
|
||||
if ( isset( $attributes['occupationFont'][0]['size'][2] ) && ! empty( $attributes['occupationFont'][0]['size'][2] ) ) {
|
||||
$css->add_property( 'font-size', $attributes['occupationFont'][0]['size'][2] . ( ! isset( $attributes['occupationFont'][0]['sizeType'] ) ? 'px' : $attributes['occupationFont'][0]['sizeType'] ) );
|
||||
}
|
||||
if ( isset( $attributes['occupationFont'][0]['lineHeight'][2] ) && ! empty( $attributes['occupationFont'][0]['lineHeight'][2] ) ) {
|
||||
$css->add_property( 'line-height', $attributes['occupationFont'][0]['lineHeight'][2] . ( ! isset( $attributes['occupationFont'][0]['lineType'] ) ? 'px' : $attributes['occupationFont'][0]['lineType'] ) );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
|
||||
/*
|
||||
* Global styles to apply to all testimonial items
|
||||
*/
|
||||
if( 'bubble' === $style || 'inlineimage' === $style ){
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap' );
|
||||
|
||||
$css->add_property( 'max-width', ( isset( $attributes['containerMaxWidth'] ) ? $attributes['containerMaxWidth'] : 500 ) . 'px');
|
||||
if ( isset( $attributes['displayIcon'] ) && $attributes['displayIcon'] && $attributes['iconStyles'][ 0 ]['icon'] && $attributes['iconStyles'][ 0 ]['margin'] && $attributes['iconStyles'][ 0 ]['margin'][ 0 ] && ( $attributes['iconStyles'][ 0 ]['margin'][ 0 ] < 0 ) ) {
|
||||
$css->add_property( 'padding-top', abs( $attributes['iconStyles'][0]['margin'][0] ) . 'px' );
|
||||
}
|
||||
} elseif ( $style === 'basic' ){
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap' );
|
||||
$css->add_property( 'max-width', ( isset( $attributes['containerMaxWidth'] ) ? $attributes['containerMaxWidth'] : 500 ) . 'px');
|
||||
}
|
||||
|
||||
// See if container styles are applied to the item or text
|
||||
if ( 'bubble' !== $style && 'inlineimage' !== $style ){
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap' );
|
||||
} else {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-item-wrap .kt-testimonial-text-wrap' );
|
||||
}
|
||||
if( isset( $attributes['displayShadow'] ) && $attributes['displayShadow'] ){
|
||||
$default_shadow = array(
|
||||
'color' => '#000000',
|
||||
'opacity' => 0.2,
|
||||
'spread' => 0,
|
||||
'blur' => 14,
|
||||
'hOffset' => 4,
|
||||
'vOffset' => 2,
|
||||
|
||||
);
|
||||
$shadow = isset( $attributes['shadow'][0] ) ? $attributes['shadow'][0] : $default_shadow;
|
||||
|
||||
$css->add_property( 'box-shadow', $shadow['hOffset'] .'px '. $shadow['vOffset'] .'px '. $shadow['blur'] . 'px '. $shadow['spread'] . 'px ' . $css->render_color( $shadow['color'], $shadow['opacity'] ) );
|
||||
}
|
||||
|
||||
if( !empty( $attributes['containerBorderWidth'][0] ) || !empty( $attributes['containerBorderWidth'][1] ) || !empty( $attributes['containerBorderWidth'][2] ) || !empty( $attributes['containerBorderWidth'][3] ) ) {
|
||||
$css->render_measure_range( $attributes, 'containerBorderWidth', 'border-width' );
|
||||
|
||||
if ( ! isset( $attributes['containerBorder'] )){
|
||||
$attributes['containerBorder'] = '#eeeeee';
|
||||
}
|
||||
$css->render_color_output( $attributes, 'containerBorder', 'border-color', 'containerBorderOpacity' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'borderStyle' );
|
||||
}
|
||||
|
||||
$css->render_color_output( $attributes, 'containerBackground', 'background', 'containerBackgroundOpacity' );
|
||||
|
||||
if( !empty( $attributes['containerBorderRadius'] ) ){
|
||||
$css->render_range( $attributes, 'containerBorderRadius', 'border-radius' );
|
||||
} else {
|
||||
$br_attributes = array(
|
||||
'unit_key' => 'containerBorderRadiusUnit',
|
||||
'desktop_key' => 'responsiveContainerBorderRadius',
|
||||
'tablet_key' => 'tabletContainerBorderRadius',
|
||||
'mobile_key' => 'mobileContainerBorderRadius',
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'containerBorderRadius', 'border-radius', $br_attributes );
|
||||
}
|
||||
|
||||
// $css->render_range( $attributes, 'containerPadding', 'padding' );
|
||||
|
||||
if ( in_array( $style, array( 'card', 'inlineimage', 'bubble') ) ) {
|
||||
$css->add_property( 'max-width', isset( $attributes['containerMaxWidth'] ) ? $attributes['containerMaxWidth'] . 'px' : '500px' );
|
||||
}
|
||||
|
||||
/*
|
||||
* Global Media styles
|
||||
*/
|
||||
if ( ! isset( $attributes['displayMedia'] ) || ( isset( $attributes['displayMedia'] ) && $attributes['displayMedia'] ) ){
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-media-inner-wrap' );
|
||||
if ( isset( $attributes['mediaStyles'][0]['width'] ) && $style !== 'card' ) {
|
||||
$css->add_property( 'width', $attributes['mediaStyles'][0]['width'] . 'px' );
|
||||
}
|
||||
|
||||
|
||||
if ( ! empty( $attributes['mediaStyles'][0]['borderWidth'][0] ) || ! empty( $attributes['mediaStyles'][0]['borderWidth'][1] ) || ! empty( $attributes['mediaStyles'][0]['borderWidth'][2] ) || ! empty( $attributes['mediaStyles'][0]['borderWidth'][3] ) ) {
|
||||
if ( ! isset( $attributes['mediaStyles'][0]['border'] ) ) {
|
||||
$attributes['mediaStyles'][0]['border'] = '#555555';
|
||||
}
|
||||
|
||||
$css->render_color_output( $attributes['mediaStyles'][0], 'border', 'border-color' );
|
||||
$css->render_measure_range( $attributes['mediaStyles'][0], 'borderWidth', 'border-width' );
|
||||
$css->render_range( $attributes['mediaStyles'][0], 'borderRadius', 'border-radius' );
|
||||
} else {
|
||||
$css->render_border_styles( $attributes, 'mediaBorderStyle', 'border' );
|
||||
$css->render_border_radius( $attributes, 'mediaBorderRadius', ( isset( $attributes['mediaBorderRadiusUnit'] ) ? $attributes['mediaBorderRadiusUnit'] : 'px' ) );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['mediaStyles'][0] ) ) {
|
||||
$css->render_color_output( $attributes['mediaStyles'][0], 'background', 'background-color', 'backgroundOpacity' );
|
||||
}
|
||||
|
||||
if( isset( $attributes['mediaStyles'][0] ) && array_filter( $attributes['mediaStyles'][0]['padding'] ) ) {
|
||||
$css->render_range( $attributes['mediaStyles'][0], 'padding', 'padding' );
|
||||
} else {
|
||||
$css->render_measure_output( $attributes, 'mediaPadding', 'padding' );
|
||||
}
|
||||
|
||||
if( isset( $attributes['mediaStyles'][0] ) && array_filter( $attributes['mediaStyles'][0]['margin'] ) ) {
|
||||
$css->render_range( $attributes['mediaStyles'][0], 'margin', 'margin' );
|
||||
} else {
|
||||
$css->render_measure_output( $attributes, 'mediaMargin', 'margin' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-svg-testimonial-icon' );
|
||||
$css->add_property( 'justify-content', 'center' );
|
||||
$css->add_property( 'align-items', 'center' );
|
||||
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-media-inner-wrap .kadence-testimonial-image-intrisic' );
|
||||
if ( $style === 'card' && ! empty( $attributes['mediaStyles'][0]['ratio'] ) ) {
|
||||
$css->add_property( 'padding-bottom', $attributes['mediaStyles'][0]['ratio'] . '%' );
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Rating Styles
|
||||
*/
|
||||
if( isset( $attributes['displayRating'] ) && $attributes['displayRating'] ){
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-rating-wrap' );
|
||||
|
||||
if( isset( $attributes['ratingStyles'][0]['margin'] ) && array_filter( $attributes['ratingStyles'][0]['margin'] ) ){
|
||||
$css->render_range( $attributes['ratingStyles'][0], 'margin', 'margin' );
|
||||
} else {
|
||||
$css->render_measure_output( $attributes, 'ratingMargin', 'margin' );
|
||||
}
|
||||
|
||||
$css->render_measure_output( $attributes, 'ratingPadding', 'padding' );
|
||||
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-testimonial-rating-wrap .kt-svg-testimonial-rating-icon' );
|
||||
$css->render_color_output( isset( $attributes['ratingStyles'][0] ) ? $attributes['ratingStyles'][0] : array( 'color' => '#ffd700' ), 'color', 'color' );
|
||||
$css->add_property( 'font-size', isset( $attributes['ratingStyles'][0] ) && isset( $attributes['ratingStyles'][0]['size'] ) ? $attributes['ratingStyles'][0]['size'] . 'px' : '16px' );
|
||||
|
||||
$css->add_property( 'display', 'inline-flex' );
|
||||
$css->add_property( 'justify-content', 'center' );
|
||||
$css->add_property( 'align-items', 'center' );
|
||||
}
|
||||
|
||||
/*
|
||||
* Icon Styles
|
||||
*/
|
||||
if( isset( $attributes['displayIcon'] ) && $attributes['displayIcon'] ) {
|
||||
$css->set_selector( '.kt-blocks-testimonials-wrap' . $unique_id . ' .kt-svg-testimonial-global-icon svg' );
|
||||
$css->add_property( 'display', 'inline-block' );
|
||||
$css->add_property( 'vertical-align', 'middle' );
|
||||
}
|
||||
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Build HTML for dynamic blocks
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$css_class = Kadence_Blocks_CSS::get_instance();
|
||||
|
||||
if ( ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ) {
|
||||
$columns_xxl = ( ! empty( $attributes['columns'][0] ) ? $attributes['columns'][0] : '1' );
|
||||
$columns_xl = ( ! empty( $attributes['columns'][1] ) ? $attributes['columns'][1] : '1' );
|
||||
$columns_md = ( ! empty( $attributes['columns'][2] ) ? $attributes['columns'][2] : '1' );
|
||||
$columns_sm = ( ! empty( $attributes['columns'][3] ) ? $attributes['columns'][3] : '1' );
|
||||
$columns_xs = ( ! empty( $attributes['columns'][4] ) ? $attributes['columns'][4] : '1' );
|
||||
$columns_ss = ( ! empty( $attributes['columns'][5] ) ? $attributes['columns'][5] : '1' );
|
||||
$gap = ( ! empty( $attributes['gap'][0] ) ? $attributes['gap'][0] : '32' );
|
||||
$tablet_gap = ( ! empty( $attributes['gap'][1] ) ? $attributes['gap'][1] : $gap );
|
||||
$mobile_gap = ( ! empty( $attributes['gap'][2] ) ? $attributes['gap'][2] : $tablet_gap );
|
||||
$gap_unit = ( ! empty( $attributes['gapUnit'] ) ? $attributes['gapUnit'] : 'px' );
|
||||
$dot_style = ( ! empty( $attributes['dotStyle'] ) ? $attributes['dotStyle'] : 'dark' );
|
||||
$arrow_style = ( ! empty( $attributes['arrowStyle'] ) ? $attributes['arrowStyle'] : 'whiteondark' );
|
||||
$autoplay = ( ! empty( $attributes['autoPlay'] ) && $attributes['autoPlay'] ? true : false );
|
||||
$show_pause_button = ( ! empty( $attributes['showPauseButton'] ) && $attributes['showPauseButton'] ? true : false );
|
||||
$trans_speed = ( ! empty( $attributes['transSpeed'] ) ? $attributes['transSpeed'] : 400 );
|
||||
$auto_speed = ( ! empty( $attributes['autoSpeed'] ) ? $attributes['autoSpeed'] : 7000 );
|
||||
$slides_sc = ( ! empty( $attributes['slidesScroll'] ) ? $attributes['slidesScroll'] : '1' );
|
||||
$slider_type = ( ! empty( $attributes['carouselType'] ) ? $attributes['carouselType'] : 'loop' );
|
||||
|
||||
$outer_classes = array( 'kt-blocks-testimonials-wrap' . $unique_id );
|
||||
$outer_classes[] = ! empty( $attributes['hAlign'] ) ? 'kt-testimonial-halign-' . $attributes['hAlign'] : 'kt-testimonial-halign-center';
|
||||
$outer_classes[] = ! empty( $attributes['style'] ) ? 'kt-testimonial-style-' . $attributes['style'] : 'kt-testimonial-style-basic';
|
||||
$outer_classes[] = isset( $attributes['displayMedia'] ) && $attributes['displayMedia'] ? 'kt-testimonials-media-on' : 'kt-testimonials-media-off';
|
||||
$outer_classes[] = isset( $attributes['displayIcon'] ) && $attributes['displayIcon'] ? 'kt-testimonials-icon-on' : 'kt-testimonials-icon-off';
|
||||
$outer_classes[] = 'kt-testimonial-columns-' . $columns_xxl; // assume column count is the one set for the biggest size.
|
||||
$outer_classes[] = 'kt-t-xxl-col-' . $columns_xxl;
|
||||
$outer_classes[] = 'kt-t-xl-col-' . $columns_xl;
|
||||
$outer_classes[] = 'kt-t-lg-col-' . $columns_md;
|
||||
$outer_classes[] = 'kt-t-md-col-' . $columns_sm;
|
||||
$outer_classes[] = 'kt-t-sm-col-' . $columns_xs;
|
||||
$outer_classes[] = 'kt-t-xs-col-' . $columns_ss;
|
||||
|
||||
$inner_classes = array( 'kt-blocks-testimonials-inner-wrap' );
|
||||
$inner_classes[] = ! empty( $attributes['layout'] ) && 'carousel' === $attributes['layout'] ? 'kt-blocks-carousel' : 'kt-testimonial-grid-wrap';
|
||||
if ( ! empty( $attributes['layout'] ) && 'carousel' === $attributes['layout'] ) {
|
||||
$inner_classes[] = 'kt-carousel-container-dotstyle-' . $dot_style;
|
||||
$inner_classes[] = 'kt-carousel-container-arrowstyle-' . $arrow_style;
|
||||
|
||||
$inner_args = array(
|
||||
'class' => implode( ' ', $inner_classes ),
|
||||
);
|
||||
$inner_wrap_attributes = array();
|
||||
foreach ( $inner_args as $key => $value ) {
|
||||
$inner_wrap_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$inner_wrapper_attributes = implode( ' ', $inner_wrap_attributes );
|
||||
$carousel_content = '';
|
||||
|
||||
// Output proper Splide.js structure: splide > splide__track > splide__list > splide__slide
|
||||
// Add splide__slide class to testimonial items that have kb-slide-item class
|
||||
$content = str_replace( 'class="kt-blocks-testimonial-carousel-item kb-slide-item"', 'class="kt-blocks-testimonial-carousel-item kb-slide-item splide__slide"', $content );
|
||||
$content = str_replace( 'class="kb-slide-item"', 'class="kb-slide-item splide__slide"', $content );
|
||||
$carousel_content .= '<div class="kt-blocks-carousel-init splide kb-gallery-carousel kt-carousel-arrowstyle-' . esc_attr( $arrow_style ) . ' kt-carousel-dotstyle-' . esc_attr( $dot_style ) . '" data-columns-xxl="' . esc_attr( $columns_xxl ) . '" data-columns-xl="' . esc_attr( $columns_xl ) . '" data-columns-md="' . esc_attr( $columns_md ) . '" data-columns-sm="' . esc_attr( $columns_sm ) . '" data-columns-xs="' . esc_attr( $columns_xs ) . '" data-columns-ss="' . esc_attr( $columns_ss ) . '" data-slider-anim-speed="' . esc_attr( $trans_speed ) . '" data-slider-scroll="' . esc_attr( $slides_sc ) . '" data-slider-type="' . esc_attr( $slider_type ) . '" data-slider-arrows="' . esc_attr( 'none' === $arrow_style ? 'false' : 'true' ) . '" data-slider-dots="' . esc_attr( 'none' === $dot_style ? 'false' : 'true' ) . '" data-slider-hover-pause="false" data-slider-auto="' . esc_attr( $autoplay ) . '" data-slider-speed="' . esc_attr( $auto_speed ) . '" data-slider-gap="' . esc_attr( $this->get_usable_value( $css_class, $gap, $gap_unit ) ) . '" data-slider-gap-tablet="' . esc_attr( $this->get_usable_value( $css_class, $tablet_gap, $gap_unit ) ) . '" data-slider-gap-mobile="' . esc_attr( $this->get_usable_value( $css_class, $mobile_gap, $gap_unit ) ) . '" data-show-pause-button="' . esc_attr( $show_pause_button ? 'true' : 'false' ) . '">';
|
||||
$carousel_content .= '<div class="splide__track">';
|
||||
$carousel_content .= '<ul class="splide__list">';
|
||||
$carousel_content .= $content;
|
||||
$carousel_content .= '</ul>';
|
||||
$carousel_content .= '</div>';
|
||||
if ( $autoplay && $show_pause_button ) {
|
||||
$carousel_content .= '<button class="kb-gallery-pause-button splide__toggle" type="button" aria-label="' . esc_attr( __( 'Toggle autoplay', 'kadence-blocks' ) ) . '">';
|
||||
$carousel_content .= '<span class="kb-gallery-pause-icon splide__toggle__pause"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="4" width="4" height="16" fill="currentColor"/><rect x="14" y="4" width="4" height="16" fill="currentColor"/></svg></span>';
|
||||
$carousel_content .= '<span class="kb-gallery-play-icon splide__toggle__play"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z" fill="currentColor"/></svg></span>';
|
||||
$carousel_content .= '</button>';
|
||||
}
|
||||
$carousel_content .= '</div>';
|
||||
$inner_content = sprintf( '<div %1$s>%2$s</div>', $inner_wrapper_attributes, $carousel_content );
|
||||
} else {
|
||||
$inner_args = array(
|
||||
'class' => implode( ' ', $inner_classes ),
|
||||
);
|
||||
$inner_wrap_attributes = array();
|
||||
foreach ( $inner_args as $key => $value ) {
|
||||
$inner_wrap_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$inner_wrapper_attributes = implode( ' ', $inner_wrap_attributes );
|
||||
$inner_content = sprintf( '<ul %1$s>%2$s</ul>', $inner_wrapper_attributes, $content );
|
||||
}
|
||||
$wrapper_args = array(
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
);
|
||||
if(isset($attributes['anchor']) && !empty($attributes['anchor'])) {
|
||||
$wrapper_args['id'] = $attributes['anchor'];
|
||||
}
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
} elseif ( ! empty( $attributes['layout'] ) && 'carousel' === $attributes['layout'] ) {
|
||||
$gap = isset( $attributes['columnGap'] ) && '' !== $attributes['columnGap'] ? $attributes['columnGap'] : 30;
|
||||
$columns_ss = ! empty( $attributes['columns'][5] ) ? $attributes['columns'][5] : '1';
|
||||
$gap_unit = 'px';
|
||||
$content = str_replace( 'data-columns-ss="' . esc_attr( $columns_ss ) . '"', 'data-columns-ss="' . esc_attr( $columns_ss ) . '" data-slider-gap="' . esc_attr( $gap . $gap_unit ) . '" data-slider-gap-tablet="' . esc_attr( $gap . $gap_unit ) . '" data-slider-gap-mobile="' . esc_attr( $gap . $gap_unit ) . '"', $content );
|
||||
}
|
||||
return $content;
|
||||
}
|
||||
|
||||
public function get_usable_value( $css, $value, $unit = 'px', $is_font = false ) {
|
||||
if ( $is_font ) {
|
||||
if ( $css->is_variable_font_size_value( $value ) ) {
|
||||
return $css->get_variable_font_size_value( $value );
|
||||
}
|
||||
} else {
|
||||
if ( $css->is_variable_value( $value ) ) {
|
||||
return $css->get_variable_value( $value );
|
||||
}
|
||||
}
|
||||
|
||||
if ( is_numeric( $value ) ) {
|
||||
return $value . $unit;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_style( 'kadence-kb-splide', KADENCE_BLOCKS_URL . 'includes/assets/css/kadence-splide.min.css', array(), KADENCE_BLOCKS_VERSION );
|
||||
wp_register_style( 'kadence-blocks-splide', KADENCE_BLOCKS_URL . 'includes/assets/css/kb-blocks-splide.min.css', array( 'kadence-kb-splide' ), KADENCE_BLOCKS_VERSION );
|
||||
wp_register_script( 'kad-splide', KADENCE_BLOCKS_URL . 'includes/assets/js/splide.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-splide-init', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-splide-init.min.js', array( 'kad-splide' ), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_localize_script(
|
||||
'kadence-blocks-splide-init',
|
||||
'kb_splide',
|
||||
array(
|
||||
'i18n' => array(
|
||||
'prev' => __( 'Previous slide', 'kadence-blocks' ),
|
||||
'next' => __( 'Next slide', 'kadence-blocks' ),
|
||||
'first' => __( 'Go to first slide', 'kadence-blocks' ),
|
||||
'last' => __( 'Go to last slide', 'kadence-blocks' ),
|
||||
'slideX' => __( 'Go to slide %s', 'kadence-blocks' ),
|
||||
'pageX' => __( 'Go to page %s', 'kadence-blocks' ),
|
||||
'play' => __( 'Start autoplay', 'kadence-blocks' ),
|
||||
'pause' => __( 'Pause autoplay', 'kadence-blocks' ),
|
||||
'carousel' => __( 'carousel', 'kadence-blocks' ),
|
||||
'slide' => __( 'slide', 'kadence-blocks' ),
|
||||
'select' => __( 'Select a slide to show', 'kadence-blocks' ),
|
||||
'slideLabel' => __( '%s of %s', 'kadence-blocks' ),
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Testimonials_Block::get_instance();
|
||||
@@ -0,0 +1,147 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Vector Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Vector Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Vector_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'vector';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
|
||||
/**
|
||||
* Block determines if style needs to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = true;
|
||||
|
||||
/**
|
||||
* Placeholder SVG
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $placeholder_svg = '<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 496.016 496.016" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path style="fill:#1C769B;" d="M0.008,248c0,98.16,57.04,183,139.768,223.184L21.472,147.072C7.728,177.904,0.008,212.04,0.008,248 z"></path> <path style="fill:#1C769B;" d="M252.36,269.688l-74.416,216.224c22.232,6.536,45.712,10.104,70.064,10.104 c28.872,0,56.576-4.992,82.352-14.056c-0.656-1.072-1.272-2.184-1.768-3.416L252.36,269.688z"></path> <path style="fill:#1C769B;" d="M415.432,235.496c0-30.664-11.024-51.88-20.448-68.392c-12.584-20.456-24.376-37.752-24.376-58.168 c0-22.808,17.288-44.032,41.648-44.032c1.104,0,2.144,0.152,3.2,0.208C371.368,24.68,312.568,0,248.008,0 c-86.656,0-162.864,44.456-207.2,111.776c5.824,0.184,11.304,0.304,15.952,0.304c25.928,0,66.104-3.152,66.104-3.152 c13.36-0.8,14.928,18.856,1.568,20.424c0,0-13.432,1.584-28.384,2.376l90.312,268.616l54.28-162.768l-38.616-105.848 c-13.376-0.792-26.032-2.376-26.032-2.376c-13.36-0.792-11.8-21.216,1.584-20.424c0,0,40.952,3.152,65.32,3.152 c25.936,0,66.096-3.152,66.096-3.152c13.376-0.8,14.944,18.856,1.576,20.424c0,0-13.448,1.584-28.376,2.376l89.624,266.576 l24.76-82.648C407.256,281.336,415.432,256.712,415.432,235.496z"></path> <path style="fill:#1C769B;" d="M467.312,154.52c0,25.16-4.704,53.448-18.872,88.832l-75.744,219 c73.728-42.976,123.312-122.864,123.312-214.344c0-43.128-11.016-83.664-30.376-118.992 C466.712,136.92,467.312,145.384,467.312,154.52z"></path> </g> <path style="fill:#2795B7;" d="M370.616,108.928c0-22.808,17.288-44.032,41.648-44.032c1.104,0,2.144,0.152,3.2,0.208 C371.368,24.68,312.568,0,248.008,0c-86.656,0-162.864,44.456-207.2,111.776c5.824,0.184,11.304,0.304,15.952,0.304 c25.928,0,66.104-3.152,66.104-3.152c13.36-0.8,14.928,18.856,1.568,20.424c0,0-13.432,1.584-28.384,2.376l34.44,102.432 c23.432,8.272,48.816,12.824,75.328,12.824c11.032,0,21.872-0.792,32.472-2.304l2.36-7.096l-38.616-105.848 C188.656,130.944,176,129.36,176,129.36c-13.36-0.792-11.8-21.216,1.584-20.424c0,0,40.952,3.152,65.32,3.152 c25.936,0,66.096-3.152,66.096-3.152c13.376-0.8,14.944,18.856,1.576,20.424c0,0-13.448,1.584-28.376,2.376l29.84,88.768 c30.288-16.288,55.952-39.288,74.664-66.88C377.688,138.656,370.616,124.72,370.616,108.928z"></path> <path style="fill:#3FB5D1;" d="M248.008,0c-77.816,0-147.128,35.92-192.6,91.984c39.912,8.296,83.744,12.896,129.744,12.896 c87.104,0,166.464-16.456,226.136-43.448C367.672,23.216,310.56,0,248.008,0z"></path> </g></svg>';
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.kb-vector-container' . $unique_id );
|
||||
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin');
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding' );
|
||||
|
||||
// Center the SVG when alignment is not set
|
||||
if ( empty( $attributes['align'] ) ) {
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->add_property( 'justify-content', 'center' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-vector-container' . $unique_id . ' svg' );
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$classes = [
|
||||
'kb-vector-container',
|
||||
'kb-vector-container' . esc_attr( $unique_id ),
|
||||
];
|
||||
|
||||
if ( ! empty( $attributes['align'] ) ) {
|
||||
$classes[] = 'align' . esc_attr( $attributes['align'] );
|
||||
}
|
||||
|
||||
$wrapper_attributes = get_block_wrapper_attributes( [
|
||||
'class' => implode( ' ', $classes ),
|
||||
'id' => !empty( $attributes['anchor'] ) ? esc_attr( $attributes['anchor'] ) : '',
|
||||
] );
|
||||
|
||||
$svg = $this->get_vector_svg( $attributes );
|
||||
|
||||
return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $svg );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the SVG content
|
||||
*
|
||||
* @param array $attributes Block attributes.
|
||||
* @return string
|
||||
*/
|
||||
private function get_vector_svg( $attributes ) {
|
||||
$svg_content = $this->placeholder_svg;
|
||||
|
||||
if ( isset( $attributes['id'] ) && ! empty( $attributes['id'] ) ) {
|
||||
$post_id = $attributes['id'];
|
||||
if ( ! empty( $post_id ) ) {
|
||||
$post = get_post( $post_id );
|
||||
if ( $post && 'kadence_vector' === $post->post_type ) {
|
||||
$svg_content = $post->post_content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $svg_content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Vector_Block::get_instance();
|
||||
@@ -0,0 +1,240 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Video Popup Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Video Popup Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Videopopup_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'videopopup';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$this->enqueue_script( 'kadence-blocks-pro-glight-video-init' );
|
||||
$this->enqueue_script( 'kadence-glightbox' );
|
||||
$this->enqueue_style( 'kadence-glightbox' );
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
// Render pro styles
|
||||
if( class_exists( 'Kadence_Blocks_Pro' ) && class_exists( 'Kadence_Blocks_Pro_Video_Popup_Block' ) ) {
|
||||
$pro_videopopup = new Kadence_Blocks_Pro_Video_Popup_Block();
|
||||
$pro_videopopup->build_css( $attributes, $css, $unique_id, $unique_style_id );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['maxWidth'] ) ) {
|
||||
$css->set_selector('.kadence-video-popup' . $unique_id . ' .kadence-video-popup-wrap' );
|
||||
$css->add_property('max-width', $attributes['maxWidth'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) . ';');
|
||||
}
|
||||
if ( isset( $attributes['kadenceDynamic'] ) && is_array( $attributes['kadenceDynamic'] ) ) {
|
||||
if ( isset( $attributes['ratio'] ) && 'custom' === $attributes['ratio'] ) {
|
||||
if ( isset( $attributes['background'] ) && is_array( $attributes['background'] ) && is_array( $attributes['background'][0] ) ) {
|
||||
$background = $attributes['background'][0];
|
||||
if ( ! empty( $background['imageHeight'] ) && ! empty( $background['imgWidth'] ) ) {
|
||||
$css->set_selector( '.kadence-video-popup' . $unique_id . ' .kadence-video-popup-wrap .kadence-video-intrinsic.kadence-video-set-ratio-custom' );
|
||||
$css->add_property( 'padding-bottom', floor( $background['imageHeight'] / $background['imgWidth'] * 100 ) . '% !important' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$css->set_selector( '.kadence-video-popup' . $unique_id . ' .kadence-video-popup-wrap' );
|
||||
if ( ! empty( $attributes['maxWidth'] ) ) {
|
||||
$css->set_selector('.kb-section-dir-horizontal > .kt-inside-inner-col > .kadence-video-popup' . $unique_id);
|
||||
$css->add_property('max-width', $attributes['maxWidth'] . 'px');
|
||||
$css->add_property('width', '100%');
|
||||
}
|
||||
|
||||
$css->set_selector('.kadence-video-popup' . $unique_id);
|
||||
|
||||
if ( isset( $attributes['padding'] ) && is_array( $attributes['padding'] ) ){
|
||||
$padding = $attributes['padding'][0];
|
||||
$padding_attr = array(
|
||||
'padding' => ( isset( $padding['desk'] ) && is_array( $padding['desk'] ) ) ? $padding['desk'] : array(),
|
||||
'tabletPadding' => ( isset( $padding['tablet'] ) && is_array( $padding['tablet'] ) ) ? $padding['tablet'] : array(),
|
||||
'mobilePadding' => ( isset( $padding['mobile'] ) && is_array( $padding['mobile'] ) ) ? $padding['mobile'] : array(),
|
||||
'paddingType' => ( ! empty( $attributes['paddingUnit'] ) ) ? $attributes['paddingUnit'] : 'px',
|
||||
);
|
||||
|
||||
$css->render_measure_output( $padding_attr, 'padding', 'padding' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['margin'] ) && is_array( $attributes['margin'] ) ){
|
||||
$margin = $attributes['margin'][0];
|
||||
$margin_attr = array(
|
||||
'margin' => ( isset( $margin['desk'] ) && is_array( $margin['desk'] ) ) ? $margin['desk'] : array(),
|
||||
'tabletMargin' => ( isset( $margin['tablet'] ) && is_array( $margin['tablet'] ) ) ? $margin['tablet'] : array(),
|
||||
'mobileMargin' => ( isset( $margin['mobile'] ) && is_array( $margin['mobile'] ) ) ? $margin['mobile'] : array(),
|
||||
'marginType' => ( ! empty( $attributes['marginUnit'] ) ) ? $attributes['marginUnit'] : 'px',
|
||||
);
|
||||
|
||||
$css->render_measure_output( $margin_attr, 'margin', 'margin' );
|
||||
}
|
||||
|
||||
if ( isset( $attributes['background'] ) && is_array( $attributes['background'] ) && is_array( $attributes['background'][0] ) ) {
|
||||
$background = $attributes['background'][0];
|
||||
if ( isset( $background['color'] ) && ! empty( $background['color'] ) ) {
|
||||
$css->set_selector( '.kadence-video-popup' . $unique_id . ' .kadence-video-popup-wrap .kadence-video-intrinsic' );
|
||||
$css->add_property( 'background-color', $css->render_color( $background['color'], ( isset( $background['colorOpacity'] ) ? $background['colorOpacity'] : 1 ) ) );
|
||||
}
|
||||
}
|
||||
|
||||
//popup styles
|
||||
if ( isset( $attributes['popup'] ) && is_array( $attributes['popup'] ) && is_array( $attributes['popup'][0] ) ) {
|
||||
$popup = $attributes['popup'][0];
|
||||
if ( ( isset( $popup['background'] ) && ! empty( $popup['background'] ) ) || isset( $popup['backgroundOpacity'] ) && ! empty( $popup['backgroundOpacity'] ) ) {
|
||||
$css->set_selector('.glightbox-kadence-dark.kadence-popup-' . $unique_id . ' .goverlay');
|
||||
if ( isset( $popup['background'] ) && ! empty( $popup['background'] ) ) {
|
||||
$css->add_property('background', $css->render_color( $popup['background'] ) );
|
||||
}
|
||||
if ( isset( $popup['backgroundOpacity'] ) && ! empty( $popup['backgroundOpacity'] ) ) {
|
||||
$css->add_property('opacity', $popup['backgroundOpacity'] );
|
||||
}
|
||||
|
||||
$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gclose, .glightbox-container.kadence-popup-' . $unique_id . ' .gnext, .glightbox-container.kadence-popup-' . $unique_id . ' .gprev' );
|
||||
if ( isset( $popup['closeBackground'] ) && ! empty( $popup['closeBackground'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $popup['closeBackground'] ) );
|
||||
}
|
||||
}
|
||||
if ( isset( $popup['closeColor'] ) && ! empty( $popup['closeColor'] ) ) {
|
||||
$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gclose path, .glightbox-container.kadence-popup-' . $unique_id . ' .gnext path, .glightbox-container.kadence-popup-' . $unique_id . ' .gprev path' );
|
||||
$css->add_property( 'fill', $css->render_color( $popup['closeColor'] ) );
|
||||
}
|
||||
if ( isset( $popup['maxWidth'] ) && ! empty( $popup['maxWidth'] ) ) {
|
||||
$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gslide-video, .glightbox-container.kadence-popup-' . $unique_id . ' .gvideo-local' );
|
||||
$css->add_property( 'max-width', $popup['maxWidth'] . ( $popup['maxWidthUnit'] ? $popup['maxWidthUnit'] : 'px' ) . ' !important' );
|
||||
}
|
||||
if ( isset( $popup['maxWidthTablet'] ) && ! empty( $popup['maxWidthTablet'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gslide-video, .glightbox-container.kadence-popup-' . $unique_id . ' .gvideo-local' );
|
||||
$css->add_property( 'max-width', $popup['maxWidthTablet'] . ( $popup['maxWidthUnit'] ? $popup['maxWidthUnit'] : 'px' ) . ' !important' );
|
||||
}
|
||||
if ( isset( $popup['maxWidthMobile'] ) && ! empty( $popup['maxWidthMobile'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gslide-video, .glightbox-container.kadence-popup-' . $unique_id . ' .gvideo-local' );
|
||||
$css->add_property( 'max-width', $popup['maxWidthMobile'] . ( $popup['maxWidthUnit'] ? $popup['maxWidthUnit'] : 'px' ), 'important' );
|
||||
}
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
if( isset( $attributes['url'], $attributes['isVimeoPrivate'] ) && strpos( $attributes['url'], 'vimeo.com/') !== false && $attributes['isVimeoPrivate'] ) {
|
||||
$css->set_selector( '.kadence-popup-' . $unique_id . ' .vimeo-video .plyr__control--overlaid, .kadence-popup-' . $unique_id . ' .vimeo-video .plyr__poster' );
|
||||
$css->add_property( 'display', 'none !important');
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for dynamic blocks
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
if( !empty( $attributes['url'] ) && !empty( $attributes['type'] ) && $attributes['type'] === 'iframe' ) {
|
||||
$shorts_prefix_www = 'https://www.youtube.com/shorts/';
|
||||
$shorts_prefix = 'https://youtube.com/shorts/';
|
||||
|
||||
if( substr($attributes['url'], 0, strlen($shorts_prefix_www)) === $shorts_prefix_www || substr($attributes['url'], 0, strlen($shorts_prefix)) === $shorts_prefix ) {
|
||||
$content = str_replace( $shorts_prefix, 'https://www.youtube.com/watch?v=', $content );
|
||||
}
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
|
||||
// Skip calling parent because this block does not have a dedicated CSS file.
|
||||
parent::register_scripts();
|
||||
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_style( 'kadence-glightbox', KADENCE_BLOCKS_URL . 'includes/assets/css/kb-glightbox.min.css', array(), KADENCE_BLOCKS_VERSION );
|
||||
wp_register_script( 'kadence-glightbox', KADENCE_BLOCKS_URL . 'includes/assets/js/glightbox.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
wp_register_script( 'kadence-blocks-pro-glight-video-init', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-glight-video-pop-init.min.js', array( 'kadence-glightbox' ), KADENCE_BLOCKS_VERSION, true );
|
||||
|
||||
$pop_video_array = array(
|
||||
'plyr_js' => KADENCE_BLOCKS_URL . 'includes/assets/js/plyr.min.js',
|
||||
'plyr_css' => KADENCE_BLOCKS_URL . 'includes/assets/css/plyr.min.css',
|
||||
);
|
||||
wp_localize_script( 'kadence-blocks-pro-glight-video-init', 'kadence_pro_video_pop', $pop_video_array );
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns if this block should register or not.
|
||||
*/
|
||||
public function should_register() {
|
||||
//this block was moved to here from pro after this version
|
||||
if ( $this->get_pro_version() === null || ( version_compare( $this->get_pro_version(), '2.6.0', '>' ) ) ) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Videopopup_Block::get_instance();
|
||||
@@ -0,0 +1,376 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"title": "Form",
|
||||
"name": "kadence/form",
|
||||
"category": "kadence-blocks",
|
||||
"textdomain": "kadence-blocks",
|
||||
"keywords": ["contact", "marketing", "KB"],
|
||||
"attributes": {
|
||||
"uniqueID": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"postID": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"hAlign": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"fields": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"label": "Name",
|
||||
"showLabel": true,
|
||||
"placeholder": "",
|
||||
"default": "",
|
||||
"description": "",
|
||||
"rows": 4,
|
||||
"options": [
|
||||
{
|
||||
"value": "",
|
||||
"label": ""
|
||||
}
|
||||
],
|
||||
"multiSelect": false,
|
||||
"inline": false,
|
||||
"showLink": false,
|
||||
"min": "",
|
||||
"max": "",
|
||||
"type": "text",
|
||||
"required": false,
|
||||
"width": ["100", "", ""],
|
||||
"auto": "",
|
||||
"errorMessage": "",
|
||||
"requiredMessage": "",
|
||||
"slug": "",
|
||||
"ariaLabel": ""
|
||||
},
|
||||
{
|
||||
"label": "Email",
|
||||
"showLabel": true,
|
||||
"placeholder": "",
|
||||
"default": "",
|
||||
"description": "",
|
||||
"rows": 4,
|
||||
"options": [
|
||||
{
|
||||
"value": "",
|
||||
"label": ""
|
||||
}
|
||||
],
|
||||
"multiSelect": false,
|
||||
"inline": false,
|
||||
"showLink": false,
|
||||
"min": "",
|
||||
"max": "",
|
||||
"type": "email",
|
||||
"required": true,
|
||||
"width": ["100", "", ""],
|
||||
"auto": "",
|
||||
"errorMessage": "",
|
||||
"requiredMessage": "",
|
||||
"slug": "",
|
||||
"ariaLabel": ""
|
||||
},
|
||||
{
|
||||
"label": "Message",
|
||||
"showLabel": true,
|
||||
"placeholder": "",
|
||||
"default": "",
|
||||
"description": "",
|
||||
"rows": 4,
|
||||
"options": [
|
||||
{
|
||||
"value": "",
|
||||
"label": ""
|
||||
}
|
||||
],
|
||||
"multiSelect": false,
|
||||
"inline": false,
|
||||
"showLink": false,
|
||||
"min": "",
|
||||
"max": "",
|
||||
"type": "textarea",
|
||||
"required": true,
|
||||
"width": ["100", "", ""],
|
||||
"auto": "",
|
||||
"errorMessage": "",
|
||||
"requiredMessage": "",
|
||||
"slug": "",
|
||||
"ariaLabel": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
"messages": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"success": "",
|
||||
"error": "",
|
||||
"required": "",
|
||||
"invalid": "",
|
||||
"recaptchaerror": "",
|
||||
"preError": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
"messageFont": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"colorSuccess": "",
|
||||
"colorError": "",
|
||||
"borderSuccess": "",
|
||||
"borderError": "",
|
||||
"backgroundSuccess": "",
|
||||
"backgroundSuccessOpacity": 1,
|
||||
"backgroundError": "",
|
||||
"backgroundErrorOpacity": 1,
|
||||
"borderWidth": ["", "", "", ""],
|
||||
"borderRadius": "",
|
||||
"size": ["", "", ""],
|
||||
"sizeType": "px",
|
||||
"lineHeight": ["", "", ""],
|
||||
"lineType": "px",
|
||||
"letterSpacing": "",
|
||||
"textTransform": "",
|
||||
"family": "",
|
||||
"google": "",
|
||||
"style": "",
|
||||
"weight": "",
|
||||
"variant": "",
|
||||
"subset": "",
|
||||
"loadGoogle": true,
|
||||
"padding": ["", "", "", ""],
|
||||
"margin": ["", "", "", ""]
|
||||
}
|
||||
]
|
||||
},
|
||||
"style": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"showRequired": true,
|
||||
"size": "standard",
|
||||
"deskPadding": ["", "", "", ""],
|
||||
"tabletPadding": ["", "", "", ""],
|
||||
"mobilePadding": ["", "", "", ""],
|
||||
"color": "",
|
||||
"requiredColor": "",
|
||||
"background": "",
|
||||
"border": "",
|
||||
"backgroundOpacity": 1,
|
||||
"borderOpacity": 1,
|
||||
"borderRadius": "",
|
||||
"borderWidth": ["", "", "", ""],
|
||||
"colorActive": "",
|
||||
"backgroundActive": "",
|
||||
"borderActive": "",
|
||||
"backgroundActiveOpacity": 1,
|
||||
"borderActiveOpacity": 1,
|
||||
"gradient": ["#999999", 1, 0, 100, "linear", 180, "center center"],
|
||||
"gradientActive": ["#777777", 1, 0, 100, "linear", 180, "center center"],
|
||||
"backgroundType": "solid",
|
||||
"backgroundActiveType": "solid",
|
||||
"boxShadow": [false, "#000000", 0.2, 1, 1, 2, 0, false],
|
||||
"boxShadowActive": [false, "#000000", 0.4, 2, 2, 3, 0, false],
|
||||
"fontSize": ["", "", ""],
|
||||
"fontSizeType": "px",
|
||||
"lineHeight": ["", "", ""],
|
||||
"lineType": "px",
|
||||
"rowGap": "",
|
||||
"rowGapType": "px",
|
||||
"gutter": "",
|
||||
"gutterType": "px",
|
||||
"tabletRowGap": "",
|
||||
"mobileRowGap": "",
|
||||
"tabletGutter": "",
|
||||
"mobileGutter": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
"labelFont": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"color": "",
|
||||
"size": ["", "", ""],
|
||||
"sizeType": "px",
|
||||
"lineHeight": ["", "", ""],
|
||||
"lineType": "px",
|
||||
"letterSpacing": "",
|
||||
"textTransform": "",
|
||||
"family": "",
|
||||
"google": "",
|
||||
"style": "",
|
||||
"weight": "",
|
||||
"variant": "",
|
||||
"subset": "",
|
||||
"loadGoogle": true,
|
||||
"padding": ["", "", "", ""],
|
||||
"margin": ["", "", "", ""]
|
||||
}
|
||||
]
|
||||
},
|
||||
"submit": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"label": "",
|
||||
"width": ["100", "", ""],
|
||||
"size": "standard",
|
||||
"widthType": "auto",
|
||||
"fixedWidth": ["", "", ""],
|
||||
"align": ["", "", ""],
|
||||
"deskPadding": ["", "", "", ""],
|
||||
"tabletPadding": ["", "", "", ""],
|
||||
"mobilePadding": ["", "", "", ""],
|
||||
"color": "",
|
||||
"background": "",
|
||||
"border": "",
|
||||
"backgroundOpacity": 1,
|
||||
"borderOpacity": 1,
|
||||
"borderRadius": "",
|
||||
"borderWidth": ["", "", "", ""],
|
||||
"colorHover": "",
|
||||
"backgroundHover": "",
|
||||
"borderHover": "",
|
||||
"backgroundHoverOpacity": 1,
|
||||
"borderHoverOpacity": 1,
|
||||
"icon": "",
|
||||
"iconSide": "right",
|
||||
"iconHover": false,
|
||||
"cssClass": "",
|
||||
"gradient": ["#999999", 1, 0, 100, "linear", 180, "center center"],
|
||||
"gradientHover": ["#777777", 1, 0, 100, "linear", 180, "center center"],
|
||||
"btnStyle": "basic",
|
||||
"btnSize": "standard",
|
||||
"backgroundType": "solid",
|
||||
"backgroundHoverType": "solid",
|
||||
"boxShadow": [false, "#000000", 0.2, 1, 1, 2, 0, false],
|
||||
"boxShadowHover": [false, "#000000", 0.4, 2, 2, 3, 0, false]
|
||||
}
|
||||
]
|
||||
},
|
||||
"submitMargin": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"desk": ["", "", "", ""],
|
||||
"tablet": ["", "", "", ""],
|
||||
"mobile": ["", "", "", ""],
|
||||
"unit": "px",
|
||||
"control": "linked"
|
||||
}
|
||||
]
|
||||
},
|
||||
"submitFont": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"size": ["", "", ""],
|
||||
"sizeType": "px",
|
||||
"lineHeight": ["", "", ""],
|
||||
"lineType": "px",
|
||||
"letterSpacing": "",
|
||||
"textTransform": "",
|
||||
"family": "",
|
||||
"google": "",
|
||||
"style": "",
|
||||
"weight": "",
|
||||
"variant": "",
|
||||
"subset": "",
|
||||
"loadGoogle": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"actions": {
|
||||
"type": "array",
|
||||
"default": ["email"]
|
||||
},
|
||||
"email": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"emailTo": "",
|
||||
"subject": "",
|
||||
"fromEmail": "",
|
||||
"fromName": "",
|
||||
"replyTo": "email_field",
|
||||
"cc": "",
|
||||
"bcc": "",
|
||||
"html": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"redirect": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"recaptcha": {
|
||||
"type": "bool",
|
||||
"default": false
|
||||
},
|
||||
"recaptchaVersion": {
|
||||
"type": "string",
|
||||
"default": "v3"
|
||||
},
|
||||
"honeyPot": {
|
||||
"type": "bool",
|
||||
"default": true
|
||||
},
|
||||
"mailerlite": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"group": [],
|
||||
"map": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"fluentcrm": {
|
||||
"type": "array",
|
||||
"default": [
|
||||
{
|
||||
"lists": [],
|
||||
"tags": [],
|
||||
"map": [],
|
||||
"doubleOptin": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"containerMarginType": {
|
||||
"type": "string",
|
||||
"default": "px"
|
||||
},
|
||||
"containerMargin": {
|
||||
"type": "array",
|
||||
"default": ["", "", "", ""]
|
||||
},
|
||||
"tabletContainerMargin": {
|
||||
"type": "array",
|
||||
"default": ["", "", "", ""]
|
||||
},
|
||||
"mobileContainerMargin": {
|
||||
"type": "array",
|
||||
"default": ["", "", "", ""]
|
||||
},
|
||||
"submitLabel": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"anchor": true,
|
||||
"align": ["wide", "full"],
|
||||
"ktanimate": true,
|
||||
"ktanimateadd": true,
|
||||
"ktanimatepreview": true,
|
||||
"ktanimateswipe": true
|
||||
},
|
||||
"usesContext": ["postId"]
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Accept Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Accept_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'accept';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'checkbox';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$check_label = $attributes;
|
||||
$check_label['inputName'] = 'cb' . $class_id;
|
||||
|
||||
$inner_content .= '<fieldset class="kb-radio-check-item-wrap" id="' . $this->field_name( $check_label ) . '" data-type="accept" data-required="' . $is_required . '" ' . $this->additional_fieldset_attributes( $attributes ) . '>';
|
||||
$inner_content .= $this->field_legend( $check_label );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
$is_checked_from_param = ! empty( $this->get_default( $attributes ) );
|
||||
$is_checked_from_editor = isset( $attributes['isChecked'] ) && true === $attributes['isChecked'] ? true : false;
|
||||
$is_checked = $is_checked_from_editor || $is_checked_from_param;
|
||||
$inner_content .= '<div class="kb-radio-check-item">';
|
||||
$inner_content .= '<input name="' . $this->field_name( $attributes ) . '" id="' . $this->field_id( $attributes ) . '_0"' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . $type . '" value="' . esc_attr( $this->get_accept_default( $attributes ) ) . '"' . ( $is_checked ? ' checked' : '' ) . ' data-type="accept" class="kb-field kb-accept-field kb-' . $type . '-field" data-required="' . $is_required . '" ' . $this->additional_field_attributes( $attributes ) . '/>';
|
||||
$inner_content .= '<label for="' . $this->field_id( $attributes ) . '_0">' . $attributes['description'];
|
||||
if ( ! empty( $attributes['required'] ) && $attributes['required'] && ( empty( $attributes['label'] ) || ( isset( $attributes['showLabel'] ) && ! $attributes['showLabel'] ) ) ) {
|
||||
$inner_content .= '<span class="' . self::REQUIRED_CLASS_NAME . '">*</span>';
|
||||
}
|
||||
$inner_content .= '</label>';
|
||||
|
||||
$inner_content .= '</div>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
$inner_content .= '</fieldset>';
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Accept_Block::get_instance();
|
||||
@@ -0,0 +1,398 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Accordion Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Advanced_Form_Input_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
const HELP_CLASS_NAME = 'kb-adv-form-help';
|
||||
|
||||
const REQUIRED_CLASS_NAME = 'kb-adv-form-required';
|
||||
|
||||
const LABEL_CLASS_NAME = 'kb-adv-form-label';
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = '';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/advanced-form/fields/' . $this->block_name . '/block.json',
|
||||
[
|
||||
'render_callback' => [ $this, 'render_css' ],
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add Class name to list of blocks to render in header.
|
||||
*
|
||||
* @param array $block_class_array the blocks that are registered to be rendered.
|
||||
*/
|
||||
public function add_block_to_post_generate_css( $block_class_array ) {
|
||||
if ( $this->should_register() ) {
|
||||
if ( ! isset( $block_class_array[ $this->namespace . '/advanced-form-' . $this->block_name ] ) ) {
|
||||
$has_input = in_array( $this->block_name, [ 'text', 'email', 'date', 'number', 'telephone', 'time', 'textarea', 'hidden' ], true );
|
||||
$block_class_array[ $this->namespace . '/advanced-form-' . $this->block_name ] = 'Kadence_Blocks_' . str_replace( ' ', '_', ucwords( str_replace( '-', ' ', $this->block_name ) ) ) . ( $has_input ? '_Input' : '' ) . '_Block';
|
||||
}
|
||||
}
|
||||
|
||||
return $block_class_array;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get default attributes for a block.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
protected function get_block_default_attributes() {
|
||||
$block_name = 'kadence/advanced-form-' . $this->block_name;
|
||||
if ( ! isset( $this->default_attributes_cache[ $block_name ] ) ) {
|
||||
$registry = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
|
||||
$default_attributes = [];
|
||||
|
||||
if ( $registry && property_exists( $registry, 'attributes' ) && ! empty( $registry->attributes ) ) {
|
||||
foreach ( $registry->attributes as $key => $value ) {
|
||||
if ( isset( $value['default'] ) ) {
|
||||
$default_attributes[ $key ] = $value['default'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$this->default_attributes_cache[ $block_name ] = $default_attributes;
|
||||
}
|
||||
|
||||
return $this->default_attributes_cache[ $block_name ];
|
||||
}
|
||||
/**
|
||||
* Add help text for given block to the response
|
||||
*
|
||||
* @param $attributes array
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function field_help_text( $attributes ) {
|
||||
if ( ! empty( $attributes['helpText'] ) ) {
|
||||
$form_id = ! empty( $attributes['formID'] ) ? $attributes['formID'] : '';
|
||||
return '<div class="' . self::HELP_CLASS_NAME . '"' . ( empty( $attributes['ariaDescription'] ) ? ' id="aria-describe' . esc_attr( $form_id ) . esc_attr( $attributes['uniqueID'] ) . '"' : '' ) . '>' . esc_html( $attributes['helpText'] ) . '</div>';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
/**
|
||||
* Add the label to the HTML response if it should be shown
|
||||
*
|
||||
* @param $attributes array
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function field_label( $attributes ) {
|
||||
$html = '';
|
||||
if ( ! empty( $this->get_label( $attributes ) ) && ( ! isset( $attributes['showLabel'] ) || ( isset( $attributes['showLabel'] ) && $attributes['showLabel'] ) ) ) {
|
||||
$html .= '<label class="' . self::LABEL_CLASS_NAME . '" for="' . esc_attr( $this->field_id( $attributes ) ) . '">' . $this->get_label( $attributes );
|
||||
|
||||
if ( ! empty( $attributes['required'] ) && $attributes['required'] ) {
|
||||
$html .= '<span class="' . self::REQUIRED_CLASS_NAME . '">*</span>';
|
||||
}
|
||||
|
||||
$html .= '</label>';
|
||||
}
|
||||
return $html;
|
||||
}
|
||||
/**
|
||||
* Add the label to the HTML response if it should be shown
|
||||
*
|
||||
* @param $attributes array
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function field_legend( $attributes ) {
|
||||
$html = '';
|
||||
if ( ! empty( $this->get_label( $attributes ) ) && ( ! isset( $attributes['showLabel'] ) || ( isset( $attributes['showLabel'] ) && $attributes['showLabel'] ) ) ) {
|
||||
$html .= '<legend class="' . self::LABEL_CLASS_NAME . '">' . $this->get_label( $attributes );
|
||||
|
||||
if ( ! empty( $attributes['required'] ) && $attributes['required'] ) {
|
||||
$html .= '<span class="' . self::REQUIRED_CLASS_NAME . '">*</span>';
|
||||
}
|
||||
|
||||
$html .= '</legend>';
|
||||
} elseif ( ! empty( $this->get_label( $attributes ) ) ) {
|
||||
$html .= '<legend class="screen-reader-text">' . $this->get_label( $attributes ) . '</legend>';
|
||||
}
|
||||
return $html;
|
||||
}
|
||||
/**
|
||||
* Add the field name to the HTML response.
|
||||
*
|
||||
* @param $attributes array
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function field_name( $attributes ) {
|
||||
return ! empty( $attributes['inputName'] ) ? $attributes['inputName'] : 'field' . $attributes['uniqueID'];
|
||||
}
|
||||
/**
|
||||
* Add the field name to the HTML response.
|
||||
*
|
||||
* @param $attributes array
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function field_id( $attributes ) {
|
||||
$form_id = ! empty( $attributes['formID'] ) ? $attributes['formID'] : '';
|
||||
return ! empty( $attributes['anchor'] ) ? $attributes['anchor'] : 'field' . $form_id . $attributes['uniqueID'];
|
||||
}
|
||||
/**
|
||||
* Add the field wrapper class ID.
|
||||
*
|
||||
* @param $attributes array
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function class_id( $attributes ) {
|
||||
$form_id = ! empty( $attributes['formID'] ) ? $attributes['formID'] : '';
|
||||
return $form_id . $attributes['uniqueID'];
|
||||
}
|
||||
/**
|
||||
* Generate the aria-describedby attribute
|
||||
*
|
||||
* @param $block
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function field_aria_label( $attributes ) {
|
||||
|
||||
if ( ! empty( $attributes['ariaDescription'] ) ) {
|
||||
$form_id = ! empty( $attributes['formID'] ) ? $attributes['formID'] : '';
|
||||
return '<span id="aria-describe' . esc_attr( $form_id ) . esc_attr( $attributes['uniqueID'] ) . '" class="kb-form-aria-describe screen-reader-text">' . $attributes['ariaDescription'] . '</span>';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
/**
|
||||
* Generate the default attribute
|
||||
*
|
||||
* @param $block
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function get_accept_default( $attributes ) {
|
||||
$default = $this->get_default( $attributes );
|
||||
if ( empty( $default ) ) {
|
||||
return 'accept';
|
||||
}
|
||||
if ( ! empty( $default ) && ( 'true' === $default || true === $default ) ) {
|
||||
return 'accept';
|
||||
}
|
||||
|
||||
return $default;
|
||||
}
|
||||
/**
|
||||
* Generate the default attribute
|
||||
*
|
||||
* @param $block
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function get_default( $attributes ) {
|
||||
$default = '';
|
||||
if ( isset( $attributes['defaultValue'] ) && $attributes['defaultValue'] !== '' ) {
|
||||
$default = do_shortcode( $attributes['defaultValue'] );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['defaultParameter'] ) ) {
|
||||
if ( isset( $_GET[ $attributes['defaultParameter'] ] ) ) {
|
||||
$default = sanitize_text_field( kadence_blocks_wc_clean( wp_unslash( $_GET[ $attributes['defaultParameter'] ] ) ) );
|
||||
}
|
||||
}
|
||||
|
||||
return $default;
|
||||
}
|
||||
/**
|
||||
* Generate the aria-describedby attribute
|
||||
*
|
||||
* @param $block
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function aria_described_by( $attributes ) {
|
||||
|
||||
if ( ! empty( $attributes['ariaDescription'] ) || ! empty( $attributes['helpText'] ) ) {
|
||||
$form_id = ! empty( $attributes['formID'] ) ? $attributes['formID'] : '';
|
||||
return ' aria-describedby="aria-describe' . esc_attr( $form_id ) . esc_attr( $attributes['uniqueID'] ) . '"';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the auto complete value
|
||||
*
|
||||
* @param $block
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function get_auto_complete( $attributes ) {
|
||||
if ( ! empty( $attributes['auto'] ) ) {
|
||||
$value = $attributes['auto'] === 'custom' ? ( ! empty( $attributes['autoCustom'] ) ? $attributes['autoCustom'] : '' ) : $attributes['auto'];
|
||||
return ' autocomplete="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @param $block array Attributes for a specific input field
|
||||
* @param $true string Text for HTML if field is required
|
||||
* @param $false string Text for HTML if field is not required
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function is_required( $attributes, $true = 'yes', $false = 'no' ) {
|
||||
if ( ! empty( $attributes['required'] ) && $attributes['required'] ) {
|
||||
return $true;
|
||||
}
|
||||
|
||||
return $false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param $attributes
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function a11y_helpers( $attributes ) {
|
||||
$response = '';
|
||||
|
||||
$is_required_bool = $this->is_required( $attributes, true, false );
|
||||
if ( $is_required_bool ) {
|
||||
$response .= 'required aria-required="true"';
|
||||
}
|
||||
|
||||
// if label is hidden and not empty, add as aria-label to input.
|
||||
if ( isset( $attributes['showLabel'] ) && ! $attributes['showLabel'] && ! empty( $attributes['label'] ) ) {
|
||||
if ( ! empty( $response ) ) {
|
||||
$response .= ' ';
|
||||
}
|
||||
$response .= 'aria-label="' . esc_attr( $attributes['label'] ) . '"';
|
||||
}
|
||||
|
||||
return $response;
|
||||
}
|
||||
/**
|
||||
* Get placeholder text for a given input field
|
||||
*
|
||||
* @param $block array Attributes for a specific input field
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function get_placeholder( $attributes ) {
|
||||
if ( isset( $attributes['placeholder'] ) ) {
|
||||
return $attributes['placeholder'];
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get label for field
|
||||
*
|
||||
* @param $block
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function get_label( $attributes ) {
|
||||
if ( isset( $attributes['label'] ) ) {
|
||||
return $attributes['label'];
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Option value given attributes for an input field
|
||||
*
|
||||
* @param $attrs array Attributes for a specific input field
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function get_option_value( $attributes ) {
|
||||
if ( isset( $attributes['value'] ) && $attributes['value'] !== '' ) {
|
||||
return $attributes['value'];
|
||||
}
|
||||
|
||||
return $attributes['label'] ?? '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get any additional attributes to be applied to the form <input /> element
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function additional_field_attributes( $attributes ) {
|
||||
$additional_attributes = '';
|
||||
$additional_attributes .= $this->a11y_helpers( $attributes );
|
||||
$additional_attributes .= $this->custom_required_message( $attributes );
|
||||
|
||||
return apply_filters( 'kadence_advanced_form_input_attributes', $additional_attributes, $attributes );
|
||||
}
|
||||
/**
|
||||
* Get any additional attributes to be applied to the form <fieldset /> element
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function additional_fieldset_attributes( $attributes ) {
|
||||
$additional_attributes = '';
|
||||
$additional_attributes .= $this->custom_required_message( $attributes );
|
||||
|
||||
return apply_filters( 'kadence_advanced_form_input_attributes', $additional_attributes, $attributes );
|
||||
}
|
||||
/**
|
||||
* Generates data attribute for the users custom "required" error message
|
||||
*
|
||||
* @param $attributes
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function custom_required_message( $attributes ) {
|
||||
if ( ! empty( $attributes['requiredMessage'] ) ) {
|
||||
return ' data-kb-required-message="' . esc_attr( $attributes['requiredMessage'] ) . '" ';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Captcha Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Captcha_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'captcha';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
if ( ! empty( $attributes['hideRecaptcha'] ) ) {
|
||||
$css->set_selector( '.grecaptcha-badge' );
|
||||
$css->add_property( 'visibility', 'hidden' );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
$captcha_settings = new Kadence_Blocks_Form_Captcha_Settings( $attributes );
|
||||
$this->register_scripts_with_attrs( $attributes, $captcha_settings );
|
||||
|
||||
/* We can't tell captcha type, or key isn't set */
|
||||
if ( ! $captcha_settings->is_valid ) {
|
||||
return '';
|
||||
}
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
|
||||
switch ( $captcha_settings->service ) {
|
||||
case 'googlev2':
|
||||
$inner_content .= $this->render_google_v2( $captcha_settings );
|
||||
break;
|
||||
case 'googlev3':
|
||||
return $this->render_google_v3( $captcha_settings, $unique_id );
|
||||
break;
|
||||
case 'turnstile':
|
||||
$inner_content .= $this->render_turnstile( $captcha_settings );
|
||||
break;
|
||||
case 'hcaptcha':
|
||||
$inner_content .= $this->render_hcaptcha( $captcha_settings );
|
||||
break;
|
||||
}
|
||||
|
||||
return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
}
|
||||
|
||||
private function render_google_v2( $captcha_settings ) {
|
||||
|
||||
$recaptcha_v2_script = "var kbOnloadV2Callback = function(){jQuery( '.wp-block-kadence-form' ).find( '.kadence-blocks-g-recaptcha-v2' ).each( function() {grecaptcha.render( jQuery( this ).attr( 'id' ), {'sitekey' : '" . esc_attr( $captcha_settings->public_key ) . "'});});}";
|
||||
wp_add_inline_script( 'kadence-blocks-recaptcha', $recaptcha_v2_script, 'before' );
|
||||
$this->enqueue_script( 'kadence-blocks-recaptcha' );
|
||||
|
||||
return '<div class="g-recaptcha" data-language="' . esc_attr( $captcha_settings->language ) . '" data-size="' . esc_attr( $captcha_settings->size ) . '" data-theme="' . esc_attr( $captcha_settings->theme ) . '" data-sitekey="' . esc_attr( $captcha_settings->public_key ) . '"></div>';
|
||||
}
|
||||
|
||||
private function render_google_v3( $captcha_settings, $unique_id ) {
|
||||
|
||||
$recaptcha_v3_script = "grecaptcha.ready(function () {
|
||||
var kb_recaptcha_inputs = document.getElementsByClassName('kb_recaptcha_response');
|
||||
|
||||
if ( ! kb_recaptcha_inputs.length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < kb_recaptcha_inputs.length; i++) {
|
||||
const e = i; grecaptcha.execute('" . esc_attr( $captcha_settings->public_key ) . "', { action: 'kb_form' }).then(
|
||||
function (token) {
|
||||
kb_recaptcha_inputs[e].setAttribute('value', token);
|
||||
});
|
||||
}
|
||||
});";
|
||||
wp_add_inline_script( 'kadence-blocks-recaptcha', $recaptcha_v3_script, 'after' );
|
||||
$this->enqueue_script( 'kadence-blocks-recaptcha' );
|
||||
|
||||
$output = '<input type="hidden" name="recaptcha_response" class="kb_recaptcha_response kb_recaptcha_' . esc_attr( $unique_id ) . '" />';
|
||||
|
||||
// Handle Kadence Captcha plugin settings
|
||||
$recaptcha_notice_html = '<span style="max-width: 100%%; font-size: 11px; color: #555; line-height: 1.2; display: block; margin-bottom: 16px; padding: 10px; background: #f2f2f2;" class="kt-recaptcha-branding-string">%s</span>';
|
||||
if ( $captcha_settings->using_kadence_captcha ) {
|
||||
$hide_v3 = $captcha_settings->get_kadence_captcha_stored_value( 'hide_v3_badge', false );
|
||||
$add_notice = $captcha_settings->get_kadence_captcha_stored_value( 'show_v3_notice', false );
|
||||
if ( $hide_v3 && $add_notice ) {
|
||||
$default = __( 'This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply', 'kadence-blocks' );
|
||||
$custom_notice = $captcha_settings->get_kadence_captcha_stored_value( 'v3_notice', $default );
|
||||
|
||||
$output .= sprintf( $recaptcha_notice_html, $custom_notice );
|
||||
}
|
||||
} elseif ( isset( $captcha_settings->hideRecaptcha ) && $captcha_settings->hideRecaptcha &&
|
||||
isset( $captcha_settings->showRecaptchaNotice ) && $captcha_settings->showRecaptchaNotice ) {
|
||||
|
||||
$default = __( 'This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply', 'kadence-blocks' );
|
||||
$custom_notice = isset( $captcha_settings->recaptchaNotice ) && ! empty( $captcha_settings->recaptchaNotice ) ? $captcha_settings->recaptchaNotice : $default;
|
||||
|
||||
$output .= sprintf( $recaptcha_notice_html, $custom_notice );
|
||||
|
||||
}
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
private function render_turnstile( $captcha_settings ) {
|
||||
$this->enqueue_script( 'kadence-blocks-turnstile' );
|
||||
|
||||
return '<div class="cf-turnstile" data-language="' . esc_attr( $captcha_settings->language ) . '" data-size="' . esc_attr( $captcha_settings->size ) . '" data-theme="' . esc_attr( $captcha_settings->theme ) . '" data-sitekey="' . esc_attr( $captcha_settings->public_key ) . '"></div>';
|
||||
}
|
||||
|
||||
private function render_hcaptcha( $captcha_settings ) {
|
||||
$this->enqueue_script( 'kadence-blocks-hcaptcha' );
|
||||
|
||||
return '<div class="h-captcha" data-language="' . esc_attr( $captcha_settings->language ) . '" data-size="' . esc_attr( $captcha_settings->size ) . '" data-theme="' . esc_attr( $captcha_settings->theme ) . '" data-sitekey="' . esc_attr( $captcha_settings->public_key ) . '"></div>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts_with_attrs( $attributes, $captcha_settings ) {
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-turnstile', 'https://challenges.cloudflare.com/turnstile/v0/api.js', [], null, true );
|
||||
wp_register_script( 'kadence-blocks-hcaptcha', 'https://js.hcaptcha.com/1/api.js', [], null, true );
|
||||
|
||||
$recaptcha_url = 'https://www.google.com/recaptcha/api.js';
|
||||
$recaptcha_net_url = 'https://www.recaptcha.net/recaptcha/api.js';
|
||||
|
||||
if ( $captcha_settings->using_kadence_captcha && $captcha_settings->get_kadence_captcha_stored_value( 'recaptcha_url' ) === 'recaptcha' ) {
|
||||
$recaptcha_url = $recaptcha_net_url;
|
||||
}
|
||||
|
||||
if ( $captcha_settings->language !== false ) {
|
||||
$recaptcha_url = add_query_arg( [ 'hl' => $captcha_settings->language ], $recaptcha_url );
|
||||
}
|
||||
|
||||
if ( $captcha_settings->service === 'googlev3' ) {
|
||||
$recaptcha_url = add_query_arg( [ 'render' => $captcha_settings->public_key ], $recaptcha_url );
|
||||
}
|
||||
|
||||
wp_register_script( 'kadence-blocks-recaptcha', $recaptcha_url, [], null, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Captcha_Block::get_instance();
|
||||
@@ -0,0 +1,119 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Checkbox Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Checkbox_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'checkbox';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$check_label = $attributes;
|
||||
$check_label['inputName'] = 'cb' . $class_id;
|
||||
$inline_class = '';
|
||||
if ( isset( $attributes['inline'] ) && true === $attributes['inline'] ) {
|
||||
$inline_class = ' kb-radio-check-items-inline';
|
||||
}
|
||||
$inner_content .= '<fieldset class="kb-radio-check-item-wrap' . esc_attr( $inline_class ) . '" id="' . esc_attr( $this->field_name( $check_label ) ) . '" data-type="checkbox" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_fieldset_attributes( $attributes ) . '>';
|
||||
$inner_content .= $this->field_legend( $check_label );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
foreach ( $attributes['options'] as $key => $option ) {
|
||||
$id = 'field' . $class_id . '_' . $key;
|
||||
$option_value = $this->get_option_value( $option );
|
||||
$is_checked_from_param = ! empty( $option_value ) && $option_value && in_array( $option_value, explode( ',', $this->get_default( $attributes ) ) );
|
||||
$is_checked_from_editor = ! empty( $option['selected'] );
|
||||
$is_checked = $is_checked_from_editor || $is_checked_from_param;
|
||||
|
||||
$inner_content .= '<div class="kb-radio-check-item">';
|
||||
$inner_content .= '<input class="kb-checkbox-style" type="checkbox" ' . $this->aria_described_by( $attributes ) . ' id="' . esc_attr( $id ) . '" name="' . esc_attr( $this->field_name( $attributes ) ) . '[]"' . ( $is_checked ? ' checked' : '' ) . ' value="' . esc_attr( $option_value ) . '">';
|
||||
|
||||
$inner_content .= '<label for="' . esc_attr( $id ) . '">' . $option['label'] . '</label>';
|
||||
|
||||
$description = [
|
||||
'uniqueID' => $id,
|
||||
'label' => ! empty( $attributes['description'] ) ? ' ' . $attributes['description'] : '',
|
||||
];
|
||||
$inner_content .= $this->field_label( $description );
|
||||
|
||||
$inner_content .= '</div>';
|
||||
}
|
||||
|
||||
$inner_content .= '</fieldset>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Checkbox_Block::get_instance();
|
||||
@@ -0,0 +1,96 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Date Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Date_Input_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'date';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'date';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
if ( ! empty( $attributes['defaultValue'] ) && $attributes['defaultValue'] === 'today' ) {
|
||||
$default_value = wp_date( 'Y-m-d' );
|
||||
} else {
|
||||
$default_value = $this->get_default( $attributes );
|
||||
}
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
$inner_content .= '<input name="' . esc_attr( $this->field_name( $attributes ) ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '"' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . esc_attr( $type ) . '" value="' . esc_attr( $default_value ) . '" data-type="' . esc_attr( $type ) . '" class="kb-field kb-' . esc_attr( $type ) . '-field" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_field_attributes( $attributes ) . '/>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Date_Input_Block::get_instance();
|
||||
@@ -0,0 +1,94 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Email Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
/**
|
||||
* Class to Build the Accordion Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Email_Input_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'email';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'email';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-text-type-input', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= '<input name="' . esc_attr( $this->field_name( $attributes ) ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '"' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . esc_attr( $type ) . '" placeholder="' . esc_attr( $this->get_placeholder( $attributes ) ) . '" value="' . esc_attr( $this->get_default( $attributes ) ) . '" data-type="' . esc_attr( $type ) . '" class="kb-field kb-' . esc_attr( $type ) . '-field" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_field_attributes( $attributes ) . '/>';
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Email_Input_Block::get_instance();
|
||||
@@ -0,0 +1,94 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form File Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_File_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'file';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'file';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-file-type-input', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$is_multiple = ( isset( $attributes['multiple'] ) && $attributes['multiple'] ? true : false );
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
$inner_content .= '<input name="' . esc_attr( $this->field_name( $attributes ) ) . '' . ( $is_multiple ? '[]' : '' ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '"' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . esc_attr( $type ) . '" placeholder="' . esc_attr( $this->get_placeholder( $attributes ) ) . '" value="' . esc_attr( $this->get_default( $attributes ) ) . '" data-type="' . esc_attr( $type ) . '" class="kb-field kb-' . esc_attr( $type ) . '-field" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_field_attributes( $attributes ) . '' . ( $is_multiple ? ' multiple' : '' ) . '/>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_File_Block::get_instance();
|
||||
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Hidden Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Hidden_Input_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'hidden';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'hidden';
|
||||
|
||||
$content = '<input name="' . esc_attr( $this->field_name( $attributes ) ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '"' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . esc_attr( $type ) . '" placeholder="' . esc_attr( $this->get_placeholder( $attributes ) ) . '" value="' . esc_attr( $this->get_default( $attributes ) ) . '" data-type="' . esc_attr( $type ) . '" class="kb-field kb-' . esc_attr( $type ) . '-field" />';
|
||||
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Hidden_Input_Block::get_instance();
|
||||
@@ -0,0 +1,97 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Number Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Number_Input_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'number';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'number';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$min = isset( $attributes['minValue'] ) && $attributes['minValue'] !== '' ? ' min="' . esc_attr( $attributes['minValue'] ) . '" ' : '';
|
||||
$max = isset( $attributes['maxValue'] ) && $attributes['maxValue'] !== '' ? ' max="' . esc_attr( $attributes['maxValue'] ) . '" ' : '';
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-text-type-input', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
$step = '';
|
||||
if ( ! empty( $attributes['allowDecimals'] ) ) {
|
||||
$step = 'step="any"';
|
||||
}
|
||||
$inner_content .= '<input name="' . esc_attr( $this->field_name( $attributes ) ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '"' . $min . $max . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . esc_attr( $type ) . '" placeholder="' . esc_attr( $this->get_placeholder( $attributes ) ) . '" value="' . esc_attr( $this->get_default( $attributes ) ) . '" data-type="' . esc_attr( $type ) . '" class="kb-field kb-' . esc_attr( $type ) . '-field" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_field_attributes( $attributes ) . ' ' . $step . '/>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Number_Input_Block::get_instance();
|
||||
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Radio Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Radio_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'radio';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'radio';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
|
||||
$radio_label = $attributes;
|
||||
$radio_label['inputName'] = 'rb' . $class_id;
|
||||
$inline_class = '';
|
||||
if ( isset( $attributes['inline'] ) && true === $attributes['inline'] ) {
|
||||
$inline_class = ' kb-radio-check-items-inline';
|
||||
}
|
||||
$inner_content .= '<fieldset class="kb-radio-check-item-wrap' . esc_attr( $inline_class ) . '" id="' . esc_attr( $this->field_name( $radio_label ) ) . '" data-type="radio" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_fieldset_attributes( $attributes ) . '>';
|
||||
$inner_content .= $this->field_legend( $radio_label );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
foreach ( $attributes['options'] as $key => $option ) {
|
||||
$id = 'field' . $class_id . '_' . $key;
|
||||
$option_value = $this->get_option_value( $option );
|
||||
$is_checked_from_param = ! empty( $option_value ) && $option_value && in_array( $option_value, explode( ',', $this->get_default( $attributes ) ) );
|
||||
$is_checked_from_editor = ! empty( $option['selected'] );
|
||||
$is_checked = $is_checked_from_editor || $is_checked_from_param;
|
||||
|
||||
$inner_content .= '<div class="kb-radio-check-item">';
|
||||
$inner_content .= '<input class="kb-radio-style" type="radio" ' . $this->aria_described_by( $attributes ) . ' id="' . esc_attr( $id ) . '" name="' . esc_attr( $this->field_name( $attributes ) ) . '" ' . ( $is_checked ? 'checked' : '' ) . ' value="' . esc_attr( $option_value ) . '">';
|
||||
|
||||
$inner_content .= '<label for="' . esc_attr( $id ) . '">' . $option['label'] . '</label>';
|
||||
|
||||
$description = [
|
||||
'uniqueID' => $id,
|
||||
'label' => ! empty( $attributes['description'] ) ? ' ' . $attributes['description'] : '',
|
||||
];
|
||||
$inner_content .= $this->field_label( $description );
|
||||
|
||||
$inner_content .= '</div>';
|
||||
}
|
||||
|
||||
$inner_content .= '</fieldset>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Radio_Block::get_instance();
|
||||
@@ -0,0 +1,119 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Select Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Select_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'select';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$is_required = $this->is_required( $attributes, 'required', '' );
|
||||
$is_multiselect = ( isset( $attributes['multiSelect'] ) && $attributes['multiSelect'] === true ) ? 'multiple' : '';
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$default_value = $this->get_default( $attributes );
|
||||
$show_placeholder = true;
|
||||
if ( isset( $attributes['options'] ) && is_array( $attributes['options'] ) ) {
|
||||
foreach ( $attributes['options'] as $option ) {
|
||||
$option_value = $this->get_option_value( $option );
|
||||
if ( $default_value === $option_value ) {
|
||||
$show_placeholder = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
$inner_content = '';
|
||||
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
|
||||
$name = $is_multiselect ? $this->field_name( $attributes ) . '[]' : $this->field_name( $attributes );
|
||||
|
||||
$inner_content .= '<select ' . $is_multiselect . ' name="' . esc_attr( $name ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '"' . $this->aria_described_by( $attributes ) . ' ' . $this->additional_field_attributes( $attributes ) . '>';
|
||||
if ( ! empty( $attributes['placeholder'] ) && $show_placeholder ) {
|
||||
$inner_content .= '<option value="" disabled selected>' . $attributes['placeholder'] . '</option>';
|
||||
}
|
||||
if ( isset( $attributes['options'] ) && is_array( $attributes['options'] ) ) {
|
||||
foreach ( $attributes['options'] as $option ) {
|
||||
$option_value = $this->get_option_value( $option );
|
||||
$is_selected_from_param = ! empty( $option_value ) && $option_value && in_array( $option_value, explode( ',', $default_value ) );
|
||||
$has_multiple_param_values = count( explode( ',', $default_value ) ) > 1;
|
||||
// if you have multiple values coming in from the default value, then this field must be a multi select to preselect options
|
||||
$selected = ( $has_multiple_param_values && $is_multiselect && $is_selected_from_param ) || ( ! $has_multiple_param_values && $is_selected_from_param );
|
||||
$inner_content .= '<option value="' . esc_attr( $option_value ) . '"' . ( $selected ? ' selected' : '' ) . '>' . $option['label'] . '</option>';
|
||||
}
|
||||
}
|
||||
$inner_content .= '</select>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Select_Block::get_instance();
|
||||
@@ -0,0 +1,268 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Text Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Accordion Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Submit_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'submit';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
* @param string $unique_id The block unique id.
|
||||
* @param string $content The block content.
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-submit-field', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$classes = [ 'kb-button', 'kt-button', 'button', 'kb-adv-form-submit-button', 'kb-btn' . $class_id ];
|
||||
$classes[] = ! empty( $attributes['sizePreset'] ) ? 'kt-btn-size-' . $attributes['sizePreset'] : 'kt-btn-size-standard';
|
||||
$classes[] = ! empty( $attributes['widthType'] ) ? 'kt-btn-width-type-' . $attributes['widthType'] : 'kt-btn-width-type-auto';
|
||||
$classes[] = ! empty( $attributes['inheritStyles'] ) ? 'kb-btn-global-' . $attributes['inheritStyles'] : 'kb-btn-global-fill';
|
||||
$classes[] = ! empty( $attributes['text'] ) ? 'kt-btn-has-text-true' : 'kt-btn-has-text-false';
|
||||
$classes[] = ! empty( $attributes['icon'] ) ? 'kt-btn-has-svg-true' : 'kt-btn-has-svg-false';
|
||||
if ( ! empty( $attributes['inheritStyles'] ) && 'inherit' === $attributes['inheritStyles'] ) {
|
||||
$classes[] = 'wp-block-button__link';
|
||||
}
|
||||
if ( ! empty( $attributes['className'] ) ) {
|
||||
$wrapper_attributes = str_replace( ' ' . $attributes['className'], '', $wrapper_attributes );
|
||||
$classes[] = $attributes['className'];
|
||||
}
|
||||
$button_args = [
|
||||
'class' => implode( ' ', $classes ),
|
||||
];
|
||||
if ( ! empty( $attributes['anchor'] ) ) {
|
||||
$button_args['id'] = $attributes['anchor'];
|
||||
}
|
||||
$button_args['type'] = 'submit';
|
||||
if ( ! empty( $attributes['label'] ) ) {
|
||||
$button_args['aria-label'] = $attributes['label'];
|
||||
}
|
||||
$button_wrap_attributes = [];
|
||||
foreach ( $button_args as $key => $value ) {
|
||||
$button_wrap_attributes[] = $key . '="' . esc_attr( $value ) . '"';
|
||||
}
|
||||
$button_wrapper_attributes = implode( ' ', $button_wrap_attributes );
|
||||
$text = ! empty( $attributes['text'] ) ? '<span class="kt-btn-inner-text">' . $attributes['text'] . '</span>' : '';
|
||||
$svg_icon = '';
|
||||
if ( ! empty( $attributes['icon'] ) ) {
|
||||
$type = substr( $attributes['icon'], 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = 2;
|
||||
}
|
||||
$svg_icon = Kadence_Blocks_Svg_Render::render( $attributes['icon'], $fill, $stroke_width );
|
||||
}
|
||||
$icon_left = ! empty( $svg_icon ) && ! empty( $attributes['iconSide'] ) && 'left' === $attributes['iconSide'] ? '<span class="kb-svg-icon-wrap kb-svg-icon-' . esc_attr( $attributes['icon'] ) . ' kt-btn-icon-side-left">' . $svg_icon . '</span>' : '';
|
||||
$icon_right = ! empty( $svg_icon ) && ! empty( $attributes['iconSide'] ) && 'right' === $attributes['iconSide'] ? '<span class="kb-svg-icon-wrap kb-svg-icon-' . esc_attr( $attributes['icon'] ) . ' kt-btn-icon-side-right">' . $svg_icon . '</span>' : '';
|
||||
$html_tag = 'button';
|
||||
$content = sprintf( '<%1$s %2$s>%3$s%4$s%5$s</%1$s>', $html_tag, $button_wrapper_attributes, $icon_left, $text, $icon_right );
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $content );
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$width_type = ! empty( $attributes['widthType'] ) ? $attributes['widthType'] : 'auto';
|
||||
if ( 'fixed' === $width_type ) {
|
||||
$css->set_selector( '.kb-submit-field .kb-btn' . $class_id . '.kb-button, ul.menu .kb-submit-field .kb-btn' . $class_id . '.kb-button' );
|
||||
$css->render_responsive_range( $attributes, 'width', 'width', 'widthUnit' );
|
||||
} else {
|
||||
$css->set_selector( 'ul.menu .kb-submit-field .kb-btn' . $class_id . '.kb-button' );
|
||||
$css->add_property( 'width', 'initial' );
|
||||
}
|
||||
|
||||
if ( $width_type === 'fixed' && ! empty( $attributes['inheritStyles'] ) && 'inherit' === $attributes['inheritStyles'] ) {
|
||||
$css->set_selector( '.kb-submit-field.kb-field' . $class_id );
|
||||
$css->add_property( 'display', 'contents' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.kb-submit-field .kb-btn' . $class_id . '.kb-button' );
|
||||
$bg_type = ! empty( $attributes['backgroundType'] ) ? $attributes['backgroundType'] : 'normal';
|
||||
$bg_hover_type = ! empty( $attributes['backgroundHoverType'] ) ? $attributes['backgroundHoverType'] : 'normal';
|
||||
if ( ! empty( $attributes['color'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['color'] ) );
|
||||
}
|
||||
if ( 'normal' === $bg_type && ! empty( $attributes['background'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['background'] ) . ( 'gradient' === $bg_hover_type ? ' !important' : '' ) );
|
||||
}
|
||||
if ( 'gradient' === $bg_type && ! empty( $attributes['gradient'] ) ) {
|
||||
$css->add_property( 'background', $attributes['gradient'] . ' !important' );
|
||||
}
|
||||
$css->render_typography( $attributes, 'typography' );
|
||||
$css->render_measure_output(
|
||||
$attributes,
|
||||
'borderRadius',
|
||||
'border-radius',
|
||||
[
|
||||
'unit_key' => 'borderRadiusUnit',
|
||||
]
|
||||
);
|
||||
$css->render_border_styles( $attributes, 'borderStyle', true );
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', [ 'unit_key' => 'paddingUnit' ] );
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin', [ 'unit_key' => 'marginUnit' ] );
|
||||
if ( isset( $attributes['displayShadow'] ) && true === $attributes['displayShadow'] ) {
|
||||
if ( isset( $attributes['shadow'] ) && is_array( $attributes['shadow'] ) && isset( $attributes['shadow'][0] ) && is_array( $attributes['shadow'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadow'][0]['inset'] ) && true === $attributes['shadow'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadow'][0]['hOffset'] ) && is_numeric( $attributes['shadow'][0]['hOffset'] ) ? $attributes['shadow'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadow'][0]['vOffset'] ) && is_numeric( $attributes['shadow'][0]['vOffset'] ) ? $attributes['shadow'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadow'][0]['blur'] ) && is_numeric( $attributes['shadow'][0]['blur'] ) ? $attributes['shadow'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadow'][0]['spread'] ) && is_numeric( $attributes['shadow'][0]['spread'] ) ? $attributes['shadow'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadow'][0]['color'] ) && ! empty( $attributes['shadow'][0]['color'] ) ? $attributes['shadow'][0]['color'] : '#000000' ), ( isset( $attributes['shadow'][0]['opacity'] ) && is_numeric( $attributes['shadow'][0]['opacity'] ) ? $attributes['shadow'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', '1px 1px 2px 0px rgba(0, 0, 0, 0.2)' );
|
||||
}
|
||||
}
|
||||
// Icon.
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button .kb-svg-icon-wrap' );
|
||||
if ( ! empty( $attributes['iconColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['iconColor'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'iconPadding', 'padding', [ 'unit_key' => 'iconPaddingUnit' ] );
|
||||
$css->render_responsive_range( $attributes, 'iconSize', 'font-size', 'iconSizeUnit' );
|
||||
// Icon Hover.
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button:hover .kb-svg-icon-wrap, .kb-btn' . $class_id . '.kb-button:focus .kb-svg-icon-wrap' );
|
||||
if ( ! empty( $attributes['iconColorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['iconColorHover'] ) );
|
||||
}
|
||||
// Hover.
|
||||
$css->set_selector( '.kb-submit-field .kb-btn' . $class_id . '.kb-button:hover, .kb-submit-field .kb-btn' . $class_id . '.kb-button:focus' );
|
||||
if ( ! empty( $attributes['colorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $attributes['colorHover'] ) );
|
||||
}
|
||||
if ( 'gradient' !== $bg_type && 'normal' === $bg_hover_type && ! empty( $attributes['backgroundHover'] ) ) {
|
||||
$css->add_property( 'background', $css->render_color( $attributes['backgroundHover'] ) );
|
||||
}
|
||||
$css->render_measure_output( $attributes, 'borderHoverRadius', 'border-radius' );
|
||||
$css->render_border_styles( $attributes, 'borderHoverStyle', true );
|
||||
if ( isset( $attributes['displayHoverShadow'] ) && true === $attributes['displayHoverShadow'] ) {
|
||||
if ( ( 'gradient' === $bg_type || 'gradient' === $bg_hover_type ) && isset( $attributes['shadowHover'][0]['inset'] ) && true === $attributes['shadowHover'][0]['inset'] ) {
|
||||
$css->add_property( 'box-shadow', '0px 0px 0px 0px rgba(0, 0, 0, 0)' );
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button:hover::before' );
|
||||
}
|
||||
if ( isset( $attributes['shadowHover'] ) && is_array( $attributes['shadowHover'] ) && isset( $attributes['shadowHover'][0] ) && is_array( $attributes['shadowHover'][0] ) ) {
|
||||
$css->add_property( 'box-shadow', ( isset( $attributes['shadowHover'][0]['inset'] ) && true === $attributes['shadowHover'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['shadowHover'][0]['hOffset'] ) && is_numeric( $attributes['shadowHover'][0]['hOffset'] ) ? $attributes['shadowHover'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['vOffset'] ) && is_numeric( $attributes['shadowHover'][0]['vOffset'] ) ? $attributes['shadowHover'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['blur'] ) && is_numeric( $attributes['shadowHover'][0]['blur'] ) ? $attributes['shadowHover'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['shadowHover'][0]['spread'] ) && is_numeric( $attributes['shadowHover'][0]['spread'] ) ? $attributes['shadowHover'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['shadowHover'][0]['color'] ) && ! empty( $attributes['shadowHover'][0]['color'] ) ? $attributes['shadowHover'][0]['color'] : '#000000' ), ( isset( $attributes['shadowHover'][0]['opacity'] ) && is_numeric( $attributes['shadowHover'][0]['opacity'] ) ? $attributes['shadowHover'][0]['opacity'] : 0.2 ) ) );
|
||||
} else {
|
||||
$css->add_property( 'box-shadow', '2px 2px 3px 0px rgba(0, 0, 0, 0.4)' );
|
||||
}
|
||||
}
|
||||
// Hover before.
|
||||
if ( 'gradient' === $bg_type && 'normal' === $bg_hover_type && ! empty( $attributes['backgroundHover'] ) ) {
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button:hover::before' );
|
||||
$css->add_property( 'background', $css->render_color( $attributes['backgroundHover'] ) );
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button::before' );
|
||||
$css->add_property( 'transition', 'opacity .3s ease-in-out' );
|
||||
}
|
||||
if ( 'gradient' === $bg_hover_type && ! empty( $attributes['gradientHover'] ) ) {
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button:hover::before, .kb-btn' . $class_id . '.kb-button:focus::before' );
|
||||
$css->add_property( 'background', $attributes['gradientHover'] );
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button::before' );
|
||||
$css->add_property( 'transition', 'opacity .3s ease-in-out' );
|
||||
}
|
||||
// Only Icon.
|
||||
if ( isset( $attributes['onlyIcon'][0] ) && '' !== $attributes['onlyIcon'][0] && true == $attributes['onlyIcon'][0] ) {
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button .kt-btn-inner-text' );
|
||||
$css->add_property( 'display', 'none' );
|
||||
}
|
||||
if ( isset( $attributes['onlyIcon'][1] ) && '' !== $attributes['onlyIcon'][1] ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button .kt-btn-inner-text' );
|
||||
if ( true == $attributes['onlyIcon'][1] ) {
|
||||
$css->add_property( 'display', 'none' );
|
||||
} elseif ( false == $attributes['onlyIcon'][1] ) {
|
||||
$css->add_property( 'display', 'block' );
|
||||
}
|
||||
}
|
||||
if ( isset( $attributes['onlyIcon'][2] ) && '' !== $attributes['onlyIcon'][2] ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->set_selector( '.kb-btn' . $class_id . '.kb-button .kt-btn-inner-text' );
|
||||
if ( true == $attributes['onlyIcon'][2] ) {
|
||||
$css->add_property( 'display', 'none' );
|
||||
} elseif ( false == $attributes['onlyIcon'][2] ) {
|
||||
$css->add_property( 'display', 'block' );
|
||||
}
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
$css->set_selector( '.kb-submit-field.kb-field' . $class_id );
|
||||
$hAlignKeys = [
|
||||
'hAlign' => 'desktop',
|
||||
'thAlign' => 'tablet',
|
||||
'mhAlign' => 'mobile',
|
||||
];
|
||||
foreach ( $hAlignKeys as $alignKey => $device ) {
|
||||
if ( ! empty( $attributes[ $alignKey ] ) ) {
|
||||
$css->set_media_state( $device );
|
||||
switch ( $attributes[ $alignKey ] ) {
|
||||
case 'left':
|
||||
$css->add_property( 'justify-content', 'flex-start' );
|
||||
break;
|
||||
case 'center':
|
||||
$css->add_property( 'justify-content', 'center' );
|
||||
break;
|
||||
case 'right':
|
||||
$css->add_property( 'justify-content', 'flex-end' );
|
||||
break;
|
||||
}
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Submit_Block::get_instance();
|
||||
@@ -0,0 +1,91 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Telephone Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Telephone_Input_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'telephone';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'tel';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-text-type-input', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
$inner_content .= '<input name="' . esc_attr( $this->field_name( $attributes ) ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '"' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . esc_attr( $type ) . '" placeholder="' . esc_attr( $this->get_placeholder( $attributes ) ) . '" value="' . esc_attr( $this->get_default( $attributes ) ) . '" data-type="' . esc_attr( $type ) . '" class="kb-field kb-' . esc_attr( $type ) . '-field" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_field_attributes( $attributes ) . '/>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Telephone_Input_Block::get_instance();
|
||||
@@ -0,0 +1,96 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Text Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Accordion Block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Text_Input_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'text';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'text';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-text-type-input', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
|
||||
$inner_content = '';
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
$inner_content .= '<input name="' . esc_attr( $this->field_name( $attributes ) ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '"' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . esc_attr( $type ) . '" placeholder="' . esc_attr( $this->get_placeholder( $attributes ) ) . '" value="' . esc_attr( $this->get_default( $attributes ) ) . '" data-type="' . esc_attr( $type ) . '" class="kb-field kb-' . esc_attr( $type ) . '-field" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_field_attributes( $attributes ) . '/>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Text_Input_Block::get_instance();
|
||||
@@ -0,0 +1,96 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Textarea Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Textarea_Input_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'textarea';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'textarea';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$rows = ! empty( $attributes['rows'] ) ? $attributes['rows'] : 3;
|
||||
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-text-type-input', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
|
||||
$inner_content .= '<textarea name="' . esc_attr( $this->field_name( $attributes ) ) . '" id="' . esc_attr( $this->field_id( $attributes ) ) . '" rows="' . esc_attr( $rows ) . '" ' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' placeholder="' . esc_attr( $this->get_placeholder( $attributes ) ) . '" data-type="' . esc_attr( $type ) . '" class="kb-field kb-' . esc_attr( $type ) . '-field" data-required="' . esc_attr( $is_required ) . '" ' . $this->additional_field_attributes( $attributes ) . '>';
|
||||
$inner_content .= esc_attr( $this->get_default( $attributes ) );
|
||||
$inner_content .= '</textarea>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Textarea_Input_Block::get_instance();
|
||||
@@ -0,0 +1,91 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Advanced Form Time Input Block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class Kadence_Blocks_Time_Input_Block extends Kadence_Blocks_Advanced_Form_Input_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'time';
|
||||
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param string $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
$css->set_selector( '.wp-block-kadence-advanced-form .kb-field' . $class_id );
|
||||
|
||||
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', 'maxWidthUnit' );
|
||||
$css->render_responsive_range( $attributes, 'minWidth', 'min-width', 'minWidthUnit' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return dynamically generated HTML for block
|
||||
*
|
||||
* @param $attributes
|
||||
* @param $unique_id
|
||||
* @param $content
|
||||
* @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$type = 'time';
|
||||
$is_required = $this->is_required( $attributes );
|
||||
$class_id = $this->class_id( $attributes );
|
||||
$outer_classes = [ 'kb-adv-form-field', 'kb-adv-form-infield-type-input', 'kb-field' . $class_id ];
|
||||
$wrapper_args = [
|
||||
'class' => implode( ' ', $outer_classes ),
|
||||
];
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
$inner_content = '';
|
||||
$inner_content .= $this->field_label( $attributes );
|
||||
$inner_content .= $this->field_aria_label( $attributes );
|
||||
$inner_content .= '<input name="' . $this->field_name( $attributes ) . '" id="' . $this->field_id( $attributes ) . '"' . $this->aria_described_by( $attributes ) . ' data-label="' . esc_attr( $this->get_label( $attributes ) ) . '"' . $this->get_auto_complete( $attributes ) . ' type="' . $type . '" value="' . esc_attr( $this->get_default( $attributes ) ) . '" data-type="' . $type . '" class="kb-field kb-' . $type . '-field" data-required="' . $is_required . '" ' . $this->additional_field_attributes( $attributes ) . '/>';
|
||||
|
||||
$inner_content .= $this->field_help_text( $attributes );
|
||||
|
||||
$content = sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $inner_content );
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Time_Input_Block::get_instance();
|
||||
@@ -0,0 +1,130 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Header block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Headers container Block for desktop.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Header_Column_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'header-column';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/header/children/column/block.json',
|
||||
[
|
||||
'render_callback' => [ $this, 'render_css' ],
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-header-column' . $unique_id );
|
||||
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* The innerblocks are stored on the $content variable. We just wrap with our data, if needed
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
if( !empty( $block_instance->context['kadence/headerRowLayoutConfig'] ) && $block_instance->context['kadence/headerRowLayoutConfig'] === 'single' && !empty( $attributes['location'] ) && $attributes['location'] !== 'left' && $attributes['location'] !== 'tablet-left' ) {
|
||||
$content = '';
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['location'] ) && ! in_array( $attributes['location'], ['tablet-center', 'tablet-left', 'tablet-right', 'center-left', 'center', 'center-right' ] ) ) {
|
||||
return $content;
|
||||
}
|
||||
|
||||
$classes = [ 'wp-block-kadence-header-column' ];
|
||||
|
||||
if ( ! empty( $attributes['location'] ) ) {
|
||||
$classes[] = 'wp-block-kadence-header-column-' . esc_attr( $attributes['location'] );
|
||||
|
||||
//append a fake column in tablet left and right for more consistent styling compared to desktop
|
||||
if ( $attributes['location'] == 'tablet-left' ) {
|
||||
$content .= '<div class="wp-block-kadence-header-column wp-block-kadence-header-column-center-left"></div>';
|
||||
}
|
||||
if ( $attributes['location'] == 'tablet-right' ) {
|
||||
$content = '<div class="wp-block-kadence-header-column wp-block-kadence-header-column-center-right"></div>' . $content;
|
||||
}
|
||||
}
|
||||
if ( empty( $content ) ) {
|
||||
$classes[] = 'no-content';
|
||||
if ( ! empty( $attributes['location'] ) && ( 'center' === $attributes['location'] || 'tablet-center' === $attributes['location'] ) ) {
|
||||
$classes[] = 'no-content-column-center';
|
||||
}
|
||||
}
|
||||
|
||||
return sprintf( '<div class="%1$s">%2$s</div>', esc_attr( implode( ' ', $classes ) ), $content );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Header_Column_Block::get_instance();
|
||||
@@ -0,0 +1,109 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Header block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Headers container Block for desktop.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Header_Container_Desktop_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'header-container-desktop';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/header/children/container-desktop/block.json',
|
||||
array(
|
||||
'render_callback' => array( $this, 'render_css' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* The innerblocks are stored on the $content variable. We just wrap with our data, if needed
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$html = '';
|
||||
|
||||
$classes = array(
|
||||
'wp-block-kadence-header-desktop',
|
||||
'kb-header-container',
|
||||
);
|
||||
|
||||
$html .= '<div class="' . esc_attr( implode( ' ', $classes ) ) . '">';
|
||||
$html .= $content;
|
||||
$html .= '</div>';
|
||||
|
||||
return $html; }
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Header_Container_Desktop_Block::get_instance();
|
||||
@@ -0,0 +1,111 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Header block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Headers container Block for desktop.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Header_Container_Tablet_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'header-container-tablet';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/header/children/container-tablet/block.json',
|
||||
array(
|
||||
'render_callback' => array( $this, 'render_css' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* The innerblocks are stored on the $content variable. We just wrap with our data, if needed
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$html = '';
|
||||
|
||||
$classes = array(
|
||||
'wp-block-kadence-header-tablet',
|
||||
'kb-header-container',
|
||||
);
|
||||
|
||||
$html .= '<div class="' . esc_attr( implode( ' ', $classes ) ) . '">';
|
||||
$html .= $content;
|
||||
$html .= '</div>';
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Header_Container_Tablet_Block::get_instance();
|
||||
@@ -0,0 +1,290 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Header block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Headers container Block for desktop.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Header_Row_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'header-row';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/header/children/row/block.json',
|
||||
array(
|
||||
'render_callback' => array( $this, 'render_css' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$layout = ( ! empty( $attributes['layout'] ) ? $attributes['layout'] : 'standard' );
|
||||
$bg = $attributes['background'];
|
||||
$bg_transparent = $attributes['backgroundTransparent'];
|
||||
$sizes = array( 'Desktop', 'Tablet', 'Mobile' );
|
||||
|
||||
foreach ( $sizes as $size ) {
|
||||
$this->sized_dynamic_styles( $css, $attributes, $unique_id, $size );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
// Min Height.
|
||||
$css->set_selector( '.wp-block-kadence-header-row.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' );
|
||||
if ( ! empty( $attributes['minHeight'] ) ) {
|
||||
$css->add_property( 'min-height', $attributes['minHeight'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['minHeightTablet'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'min-height', $attributes['minHeightTablet'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( $css->is_number( $attributes['minHeightMobile'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'min-height', $attributes['minHeightMobile'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( ! empty( $attributes['maxWidth'] ) ) {
|
||||
$css->add_property( 'max-width', $attributes['maxWidth'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) );
|
||||
}
|
||||
if ( $css->is_number( $attributes['maxWidthTablet'] ) ) {
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'max-width', $attributes['maxWidthTablet'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
if ( $css->is_number( $attributes['maxWidthMobile'] ) ) {
|
||||
$css->set_media_state( 'mobile' );
|
||||
$css->add_property( 'max-width', $attributes['maxWidthMobile'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) );
|
||||
$css->set_media_state( 'desktop' );
|
||||
}
|
||||
// Background Variables.
|
||||
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id );
|
||||
$css->render_background( $bg, $css, '--kb-header-row-bg' );
|
||||
$css->render_background( $bg, $css, '--kb-stuck-header-bg' );
|
||||
$css->render_background( $bg_transparent, $css, '--kb-transparent-header-row-bg' );
|
||||
if ( 'contained' !== $layout ) {
|
||||
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ', .wp-block-kadence-header-row' . $unique_id . '.item-is-stuck.item-is-stuck');
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array(
|
||||
'desktop_key' => 'borderRadius',
|
||||
'tablet_key' => 'borderRadiusTablet',
|
||||
'mobile_key' => 'borderRadiusMobile',
|
||||
) );
|
||||
$css->render_border_styles( $attributes, 'border', false, array(
|
||||
'desktop_key' => 'border',
|
||||
'tablet_key' => 'borderTablet',
|
||||
'mobile_key' => 'borderMobile',
|
||||
) );
|
||||
}
|
||||
// Container.
|
||||
if ( 'contained' === $layout ) {
|
||||
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' );
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array(
|
||||
'desktop_key' => 'borderRadius',
|
||||
'tablet_key' => 'borderRadiusTablet',
|
||||
'mobile_key' => 'borderRadiusMobile',
|
||||
) );
|
||||
$css->render_border_styles( $attributes, 'border', false, array(
|
||||
'desktop_key' => 'border',
|
||||
'tablet_key' => 'borderTablet',
|
||||
'mobile_key' => 'borderMobile',
|
||||
) );
|
||||
}
|
||||
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' );
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', array(
|
||||
'desktop_key' => 'padding',
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
'unit_key' => 'paddingUnit'
|
||||
) );
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin', array(
|
||||
'desktop_key' => 'margin',
|
||||
'tablet_key' => 'marginTablet',
|
||||
'mobile_key' => 'marginMobile',
|
||||
'unit_key' => 'marginUnit'
|
||||
) );
|
||||
|
||||
// Pass down to sections.
|
||||
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .wp-block-kadence-header-column, .wp-block-kadence-header-row' . $unique_id . ' .wp-block-kadence-header-section' );
|
||||
// $css->render_row_gap( $attributes, array( 'itemGap', 'itemGapTablet', 'itemGapMobile' ), 'gap', '', 'itemGapUnit' );
|
||||
$css->render_gap( $attributes, 'itemGap', 'gap', 'itemGapUnit', array(
|
||||
'desktop_key' => 'itemGap',
|
||||
'tablet_key' => 'itemGapTablet',
|
||||
'mobile_key' => 'itemGapMobile',
|
||||
) );
|
||||
|
||||
$css->set_media_state( 'desktop' );
|
||||
if ( isset( $attributes['kadenceBlockCSS'] ) && ! empty( $attributes['kadenceBlockCSS'] ) ) {
|
||||
$css->add_css_string( str_replace( 'selector', '.wp-block-kadence-header-row' . $unique_id, $attributes['kadenceBlockCSS'] ) );
|
||||
}
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build up the dynamic styles for a size.
|
||||
*
|
||||
* @param string $size The size.
|
||||
* @return array
|
||||
*/
|
||||
public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'Desktop' ) {
|
||||
$sized_attributes = $css->get_sized_attributes_auto( $attributes, $size, false );
|
||||
$sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size );
|
||||
$css->set_media_state( strtolower( $size ) );
|
||||
|
||||
// Pass down to sections.
|
||||
$css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .wp-block-kadence-header-column, .wp-block-kadence-header-row' . $unique_id . ' .wp-block-kadence-header-section' );
|
||||
if ( isset( $sized_attributes['vAlign'] ) && $sized_attributes['vAlign'] === 'top' ) {
|
||||
$css->add_property( 'align-items', 'flex-start' );
|
||||
} elseif ( isset( $sized_attributes['vAlign'] ) && $sized_attributes['vAlign'] === 'center' ) {
|
||||
$css->add_property( 'align-items', 'center' );
|
||||
} elseif ( isset( $sized_attributes['vAlign'] ) && $sized_attributes['vAlign'] === 'bottom' ) {
|
||||
$css->add_property( 'align-items', 'flex-end' );
|
||||
}
|
||||
|
||||
$css->set_selector('.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner');
|
||||
if ($sized_attributes['layoutConfig'] !== 'single') {
|
||||
if ($sized_attributes['sectionPriority'] == 'center') {
|
||||
$css->add_property('grid-template-columns', 'auto minmax(0, 1fr) auto');
|
||||
} else if ($sized_attributes['sectionPriority'] == 'left') {
|
||||
$css->add_property('grid-template-columns', '1fr minmax(0, auto) auto');
|
||||
} else if ($sized_attributes['sectionPriority'] == 'right') {
|
||||
$css->add_property('grid-template-columns', 'auto minmax(0, auto) 1fr');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The innerblocks are stored on the $content variable. We just wrap with our data, if needed
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$html = '';
|
||||
|
||||
// If this row is empty, don't render it
|
||||
if( $this->are_innerblocks_empty( $block_instance ) ) {
|
||||
return $html;
|
||||
}
|
||||
|
||||
$classes = array(
|
||||
'wp-block-kadence-header-row',
|
||||
'wp-block-kadence-header-row' . esc_attr( $unique_id ),
|
||||
);
|
||||
|
||||
if ( ! empty( $attributes['location'] ) ) {
|
||||
$classes[] = 'wp-block-kadence-header-row-' . esc_attr( $attributes['location'] );
|
||||
}
|
||||
if ( ! empty( $attributes['className'] ) ) {
|
||||
$classes[] = $attributes['className'];
|
||||
}
|
||||
$layout = ! empty( $attributes['layout'] ) ? $attributes['layout'] : 'standard';
|
||||
$classes[] = 'kb-header-row-layout-' . esc_attr( $layout );
|
||||
if ( ! empty( $attributes['layoutConfig'] ) ) {
|
||||
$classes[] = 'kb-header-row-layout-config-' . esc_attr( $attributes['layoutConfig'] );
|
||||
}
|
||||
|
||||
$html .= '<div class="' . esc_attr( implode( ' ', $classes ) ) . '">';
|
||||
$html .= '<div class="kadence-header-row-inner">';
|
||||
$html .= $content;
|
||||
$html .= '</div>';
|
||||
$html .= '</div>';
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the innerblocks are empty. We won't render the row if all the innerblocks are empty
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function are_innerblocks_empty( $block_instance ) {
|
||||
$is_empty = true;
|
||||
|
||||
$inner_blocks = $block_instance->parsed_block['innerBlocks'] ?? [];
|
||||
|
||||
foreach( $inner_blocks as $top_level_inner_blocks ) {
|
||||
if ($top_level_inner_blocks['blockName'] === 'kadence/header-column' && !empty($top_level_inner_blocks['innerBlocks'])) {
|
||||
$is_empty = false;
|
||||
break;
|
||||
}
|
||||
|
||||
if (!empty($top_level_inner_blocks['innerBlocks'])) {
|
||||
foreach ($top_level_inner_blocks['innerBlocks'] as $section_inner_block) {
|
||||
// Check if any 'kadence/header-column' inner block is not empty
|
||||
if ($section_inner_block['blockName'] === 'kadence/header-column' && !empty($section_inner_block['innerBlocks'])) {
|
||||
$is_empty = false;
|
||||
break 2; // Break both loops
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $is_empty;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Header_Row_Block::get_instance();
|
||||
@@ -0,0 +1,117 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Header block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Headers container Block for desktop.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Header_Section_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'header-section';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/header/children/section/block.json',
|
||||
array(
|
||||
'render_callback' => array( $this, 'render_css' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$css->set_selector( '.wp-block-kadence-header-desktop' . $unique_id );
|
||||
$css->add_property( 'display', 'block' );
|
||||
|
||||
$css->set_media_state( 'tablet' );
|
||||
$css->add_property( 'display', 'none');
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
/**
|
||||
* The innerblocks are stored on the $content variable. We just wrap with our data, if needed
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
$html = '';
|
||||
|
||||
$classes = array(
|
||||
'wp-block-kadence-header-section',
|
||||
'wp-block-kadence-header-section' . esc_attr( $unique_id ),
|
||||
);
|
||||
|
||||
$html .= '<div class="' . esc_attr( implode( ' ', $classes ) ) . '">';
|
||||
$html .= $content;
|
||||
$html .= '</div>';
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Kadence_Blocks_Header_Section_Block::get_instance();
|
||||
@@ -0,0 +1,304 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the Off Canvas block.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Off Canvas block.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Off_Canvas_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'off-canvas';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = false;
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/header/children/off-canvas/block.json',
|
||||
array(
|
||||
'render_callback' => array( $this, 'render_css' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$sizes = array( 'Desktop', 'Tablet', 'Mobile' );
|
||||
|
||||
foreach ( $sizes as $size ) {
|
||||
$this->sized_dynamic_styles( $css, $attributes, $unique_id, $size );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
// container.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-inner-wrap' );
|
||||
$css->render_border_styles( $attributes, 'border', false, array(
|
||||
'desktop_key' => 'border',
|
||||
'tablet_key' => 'borderTablet',
|
||||
'mobile_key' => 'borderMobile',
|
||||
) );
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array(
|
||||
'desktop_key' => 'borderRadius',
|
||||
'tablet_key' => 'borderRadiusTablet',
|
||||
'mobile_key' => 'borderRadiusMobile',
|
||||
) );
|
||||
|
||||
// inner container.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-inner');
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', array(
|
||||
'desktop_key' => 'padding',
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
) );
|
||||
|
||||
// For the close icon container styles.
|
||||
// close icon container.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-close' );
|
||||
$css->render_measure_output(
|
||||
$attributes,
|
||||
'closeIconPadding',
|
||||
'padding',
|
||||
[
|
||||
'desktop_key' => 'closeIconPadding',
|
||||
'tablet_key' => 'closeIconPaddingTablet',
|
||||
'mobile_key' => 'closeIconPaddingMobile',
|
||||
'unit_key' => 'closeIconPaddingUnit',
|
||||
]
|
||||
);
|
||||
$css->render_measure_output( $attributes, 'closeIconMargin', 'margin', array(
|
||||
'desktop_key' => 'closeIconMargin',
|
||||
'tablet_key' => 'closeIconMarginTablet',
|
||||
'mobile_key' => 'closeIconMarginMobile',
|
||||
'unit_key' => 'closeIconMarginUnit',
|
||||
) );
|
||||
$css->render_measure_output( $attributes, 'closeIconBorderRadius', 'border-radius', array(
|
||||
'desktop_key' => 'closeIconBorderRadius',
|
||||
'tablet_key' => 'closeIconBorderRadiusTablet',
|
||||
'mobile_key' => 'closeIconBorderRadiusMobile',
|
||||
) );
|
||||
$css->render_border_styles( $attributes, 'closeIconBorder', false, array(
|
||||
'desktop_key' => 'closeIconBorder',
|
||||
'tablet_key' => 'closeIconBorderTablet',
|
||||
'mobile_key' => 'closeIconBorderMobile',
|
||||
) );
|
||||
|
||||
// Close icon container hover.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-close:hover, .wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-close:focus-visible' );
|
||||
$css->render_border_styles(
|
||||
$attributes,
|
||||
'closeIconBorderHover',
|
||||
false,
|
||||
[
|
||||
'desktop_key' => 'closeIconBorderHover',
|
||||
'tablet_key' => 'closeIconBorderHoverTablet',
|
||||
'mobile_key' => 'closeIconBorderHoverMobile',
|
||||
]
|
||||
);
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build up the dynamic styles for a size.
|
||||
*
|
||||
* @param string $size The size.
|
||||
* @return array
|
||||
*/
|
||||
public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'Desktop' ) {
|
||||
$sized_attributes = $css->get_sized_attributes_auto( $attributes, $size, false );
|
||||
$sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size );
|
||||
|
||||
$css->set_media_state( strtolower( $size ) );
|
||||
|
||||
// Container.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-inner-wrap' );
|
||||
if ( empty( $sized_attributes_inherit['widthType'] ) || $sized_attributes_inherit['widthType'] !== 'full' ) {
|
||||
$max_width_unit = ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px';
|
||||
if ( ! empty( $sized_attributes['maxWidth']) ) {
|
||||
$css->add_property( 'max-width', $sized_attributes['maxWidth'] . $max_width_unit );
|
||||
}
|
||||
} else {
|
||||
$css->add_property( 'max-width', 'initial' );
|
||||
$css->add_property( 'width', '100%' );
|
||||
}
|
||||
|
||||
if ( ! empty( $sized_attributes['backgroundColor'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $sized_attributes['backgroundColor'] ) );
|
||||
}
|
||||
|
||||
// Inner container.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-inner' );
|
||||
|
||||
if ( ! empty( $sized_attributes['containerMaxWidth'] ) ) {
|
||||
$max_width_unit = ! empty( $sized_attributes['containerMaxWidthUnit'] ) ? $sized_attributes['containerMaxWidthUnit'] : 'px';
|
||||
$css->add_property( 'max-width', $sized_attributes['containerMaxWidth'] . $max_width_unit );
|
||||
}
|
||||
|
||||
// Content area inner alignment.
|
||||
if ( $sized_attributes['hAlign'] == 'center') {
|
||||
$css->add_property( 'align-items', 'center' );
|
||||
$css->add_property( 'margin-left', 'auto' );
|
||||
$css->add_property( 'margin-right', 'auto' );
|
||||
} elseif ( $sized_attributes['hAlign'] == 'right' ) {
|
||||
$css->add_property( 'align-items', 'flex-end' );
|
||||
$css->add_property( 'margin-left', 'auto' );
|
||||
}
|
||||
if ( $sized_attributes['vAlign'] == 'center' ) {
|
||||
$css->add_property( 'justify-content', 'center' );
|
||||
} elseif ( $sized_attributes['vAlign'] == 'bottom' ) {
|
||||
$css->add_property( 'justify-content', 'flex-end' );
|
||||
}
|
||||
|
||||
// Overlay.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas .kb-off-canvas-overlay' . $unique_id );
|
||||
if ( ! empty( $sized_attributes['pageBackgroundColor'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $sized_attributes['pageBackgroundColor'] ) );
|
||||
}
|
||||
|
||||
// For the close icon container styles, they need to get applied to the hover state too, due to resets on hover styles in the css
|
||||
// Close Icon container.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-close' );
|
||||
if ( ! empty( $sized_attributes['closeIconBackgroundColor'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $sized_attributes['closeIconBackgroundColor'] ) );
|
||||
}
|
||||
if ( ! empty( $sized_attributes['closeIconColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $sized_attributes['closeIconColor'] ) );
|
||||
}
|
||||
|
||||
// Close Icon container hover.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-close:hover, .wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-close:focus-visible' );
|
||||
if ( ! empty( $sized_attributes['closeIconBackgroundColorHover'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $sized_attributes['closeIconBackgroundColorHover'] ) );
|
||||
}
|
||||
if ( ! empty( $sized_attributes['closeIconColorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $sized_attributes['closeIconColorHover'] ) );
|
||||
}
|
||||
|
||||
// Close Icon.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas' . $unique_id . ' .kb-off-canvas-close svg' );
|
||||
if ( ! empty( $sized_attributes['closeIconSize'] ) ) {
|
||||
$css->add_property( 'width', $sized_attributes['closeIconSize'] . 'px' );
|
||||
$css->add_property( 'height', $sized_attributes['closeIconSize'] . 'px' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The innerblocks are stored on the $content variable. We just wrap with our data, if needed
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
$html = '';
|
||||
$overlay = '';
|
||||
$icon = '';
|
||||
$css = Kadence_Blocks_CSS::get_instance();
|
||||
|
||||
if ( ! empty( $attributes['closeIcon'] ) ) {
|
||||
$close_icon = $attributes['closeIcon'];
|
||||
$type = substr( $close_icon, 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = ( ! empty( $attributes['closeLineWidth'] ) ? $attributes['closeLineWidth'] : 2 );
|
||||
}
|
||||
$title = '';
|
||||
$hidden = true;
|
||||
$label = ( ! empty( $attributes['closeLabel'] ) ? $attributes['closeLabel'] : esc_attr__( 'Close Menu', 'kadence-blocks' ) );
|
||||
$icon = '<button aria-label="' . esc_attr( $label ) . '" aria-expanded="false" class="kb-off-canvas-close">' . Kadence_Blocks_Svg_Render::render( $close_icon, $fill, $stroke_width, $title, $hidden ) . '</button>';
|
||||
}
|
||||
|
||||
$open_side = $css->get_inherited_value( $attributes['slideFrom'], $attributes['slideFromTablet'], $attributes['slideFromMobile'], 'Desktop' );
|
||||
$open_side_tablet = $css->get_inherited_value( $attributes['slideFrom'], $attributes['slideFromTablet'], $attributes['slideFromMobile'], 'Tablet' );
|
||||
$open_side_mobile = $css->get_inherited_value( $attributes['slideFrom'], $attributes['slideFromTablet'], $attributes['slideFromMobile'], 'Mobile' );
|
||||
$classes = array(
|
||||
'wp-block-kadence-off-canvas',
|
||||
'wp-block-kadence-off-canvas' . $unique_id,
|
||||
'open-' . $open_side,
|
||||
'open-tablet-' . $open_side_tablet,
|
||||
'open-mobile-' . $open_side_mobile,
|
||||
);
|
||||
|
||||
$overlay_classes = array(
|
||||
'kb-off-canvas-overlay',
|
||||
'kb-off-canvas-overlay' . $unique_id,
|
||||
);
|
||||
|
||||
$width_type = $css->get_inherited_value( $attributes['widthType'], $attributes['widthTypeTablet'], $attributes['widthTypeMobile'], 'Desktop' );
|
||||
$width_type_tablet = $css->get_inherited_value( $attributes['widthType'], $attributes['widthTypeTablet'], $attributes['widthTypeMobile'], 'Tablet' );
|
||||
$width_type_mobile = $css->get_inherited_value( $attributes['widthType'], $attributes['widthTypeTablet'], $attributes['widthTypeMobile'], 'Mobile' );
|
||||
if ( ( ! $width_type || $width_type === 'partial' ) || ( ! $width_type_tablet || $width_type_tablet === 'partial' ) || ( ! $width_type_mobile || $width_type_mobile === 'partial' ) ) {
|
||||
$overlay = '<div data-unique-id="' . esc_attr( $unique_id ) . '" class="' . esc_attr( implode( ' ', $overlay_classes ) ) . '"></div>';
|
||||
}
|
||||
|
||||
$wrapper_args = array(
|
||||
'class' => implode( ' ', $classes ),
|
||||
);
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
|
||||
$html .= sprintf( '<div %1$s>%2$s<div class="kb-off-canvas-inner-wrap">%3$s<div class="kb-off-canvas-inner">%4$s</div></div></div>', $wrapper_attributes, $overlay, $icon, $content );
|
||||
|
||||
return $html;
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Off_Canvas_Block::get_instance();
|
||||
@@ -0,0 +1,229 @@
|
||||
<?php
|
||||
/**
|
||||
* Class to Build the off canvas trigger.
|
||||
*
|
||||
* @package Kadence Blocks
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class to Build the Off Canvas Trigger.
|
||||
*
|
||||
* @category class
|
||||
*/
|
||||
class Kadence_Blocks_Off_Canvas_Trigger_Block extends Kadence_Blocks_Abstract_Block {
|
||||
|
||||
/**
|
||||
* Instance of this class
|
||||
*
|
||||
* @var null
|
||||
*/
|
||||
private static $instance = null;
|
||||
|
||||
|
||||
/**
|
||||
* Block name within this namespace.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'off-canvas-trigger';
|
||||
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_script = true;
|
||||
/**
|
||||
* Block determines in scripts need to be loaded for block.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $has_style = false;
|
||||
|
||||
/**
|
||||
* Instance Control
|
||||
*/
|
||||
public static function get_instance() {
|
||||
if ( is_null( self::$instance ) ) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* On init startup register the block.
|
||||
*/
|
||||
public function on_init() {
|
||||
register_block_type(
|
||||
KADENCE_BLOCKS_PATH . 'dist/blocks/header/children/off-canvas-trigger/block.json',
|
||||
array(
|
||||
'render_callback' => array( $this, 'render_css' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Builds CSS for block.
|
||||
*
|
||||
* @param array $attributes the blocks attributes.
|
||||
* @param Kadence_Blocks_CSS $css the css class for blocks.
|
||||
* @param string $unique_id the blocks attr ID.
|
||||
* @param string $unique_style_id the blocks alternate ID for queries.
|
||||
*/
|
||||
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
|
||||
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
|
||||
|
||||
$sizes = array( 'Desktop', 'Tablet', 'Mobile' );
|
||||
|
||||
foreach ( $sizes as $size ) {
|
||||
$this->sized_dynamic_styles( $css, $attributes, $unique_id, $size );
|
||||
}
|
||||
$css->set_media_state( 'desktop' );
|
||||
|
||||
// For the close icon container styles, they need to get applied to the hover state too, due to resets on hover styles in the css
|
||||
//container
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas-trigger' . $unique_id . ', .wp-block-kadence-off-canvas-trigger' . $unique_id . ':hover' );
|
||||
$css->render_measure_output( $attributes, 'padding', 'padding', array(
|
||||
'desktop_key' => 'padding',
|
||||
'tablet_key' => 'paddingTablet',
|
||||
'mobile_key' => 'paddingMobile',
|
||||
) );
|
||||
$css->render_measure_output( $attributes, 'margin', 'margin', array(
|
||||
'desktop_key' => 'margin',
|
||||
'tablet_key' => 'marginTablet',
|
||||
'mobile_key' => 'marginMobile',
|
||||
) );
|
||||
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array(
|
||||
'desktop_key' => 'borderRadius',
|
||||
'tablet_key' => 'borderRadiusTablet',
|
||||
'mobile_key' => 'borderRadiusMobile',
|
||||
) );
|
||||
$css->render_border_styles( $attributes, 'border', false, array(
|
||||
'desktop_key' => 'border',
|
||||
'tablet_key' => 'borderTablet',
|
||||
'mobile_key' => 'borderMobile',
|
||||
));
|
||||
|
||||
//container hover
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas-trigger' . $unique_id . ':hover' );
|
||||
$css->render_border_styles( $attributes, 'borderHover', false, array(
|
||||
'desktop_key' => 'borderHover',
|
||||
'tablet_key' => 'borderHoverTablet',
|
||||
'mobile_key' => 'borderHoverMobile',
|
||||
) );
|
||||
|
||||
//icon
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas-trigger' . $unique_id . ' svg' );
|
||||
|
||||
return $css->css_output();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Build up the dynamic styles for a size.
|
||||
*
|
||||
* @param string $size The size.
|
||||
* @return array
|
||||
*/
|
||||
public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'Desktop' ) {
|
||||
$sized_attributes = $css->get_sized_attributes_auto( $attributes, $size, false );
|
||||
$sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size );
|
||||
|
||||
$css->set_media_state( strtolower( $size ) );
|
||||
|
||||
// For the close icon container styles, they need to get applied to the hover state too, due to resets on hover styles in the css
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas-trigger' . $unique_id. ', .wp-block-kadence-off-canvas-trigger' . $unique_id . ':hover' );
|
||||
if ( ! empty( $sized_attributes['iconBackgroundColor'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $sized_attributes['iconBackgroundColor'] ) );
|
||||
}
|
||||
if ( ! empty( $sized_attributes['iconColor'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $sized_attributes['iconColor'] ) );
|
||||
}
|
||||
|
||||
// Hover styles.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas-trigger' . $unique_id . ':hover' );
|
||||
if ( ! empty( $sized_attributes['iconBackgroundColorHover'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $sized_attributes['iconBackgroundColorHover'] ) );
|
||||
}
|
||||
if ( ! empty( $sized_attributes['iconColorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $sized_attributes['iconColorHover'] ) );
|
||||
}
|
||||
|
||||
// Focus styles - only when aria-expanded is not "false"
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas-trigger' . $unique_id . ':focus:not([aria-expanded="false"])' );
|
||||
if ( ! empty( $sized_attributes['iconBackgroundColorHover'] ) ) {
|
||||
$css->add_property( 'background-color', $css->render_color( $sized_attributes['iconBackgroundColorHover'] ) );
|
||||
}
|
||||
if ( ! empty( $sized_attributes['iconColorHover'] ) ) {
|
||||
$css->add_property( 'color', $css->render_color( $sized_attributes['iconColorHover'] ) );
|
||||
}
|
||||
// Icon styles.
|
||||
$css->set_selector( '.wp-block-kadence-off-canvas-trigger' . $unique_id . ' svg' );
|
||||
if ( ! empty( $sized_attributes['iconSize'] ) ) {
|
||||
$css->add_property( 'width', $sized_attributes['iconSize'] . 'px' );
|
||||
$css->add_property( 'height', $sized_attributes['iconSize'] . 'px' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The innerblocks are stored on the $content variable. We just wrap with our data, if needed
|
||||
*
|
||||
* @param array $attributes The block attributes.
|
||||
*
|
||||
* @return string Returns the block output.
|
||||
*/
|
||||
public function build_html( $attributes, $unique_id, $content, $block_instance ) {
|
||||
|
||||
$classes = array(
|
||||
'wp-block-kadence-off-canvas-trigger',
|
||||
'wp-block-kadence-off-canvas-trigger' . $unique_id,
|
||||
);
|
||||
$icon = ( ! empty( $attributes['icon'] ) ? $attributes['icon'] : 'fe_menu' );
|
||||
$type = substr( $icon, 0, 2 );
|
||||
$line_icon = ( ! empty( $type ) && 'fe' == $type ? true : false );
|
||||
$fill = ( $line_icon ? 'none' : 'currentColor' );
|
||||
$stroke_width = false;
|
||||
if ( $line_icon ) {
|
||||
$stroke_width = ( ! empty( $attributes['lineWidth'] ) ? $attributes['lineWidth'] : 2 );
|
||||
}
|
||||
$title = '';
|
||||
$hidden = true;
|
||||
$content = Kadence_Blocks_Svg_Render::render( $icon, $fill, $stroke_width, $title, $hidden );
|
||||
$label = ( ! empty( $attributes['label'] ) ? $attributes['label'] : esc_attr__( 'Toggle Menu', 'kadence-blocks' ) );
|
||||
|
||||
$wrapper_args = array(
|
||||
'class' => implode( ' ', $classes ),
|
||||
'aria-label' => $label,
|
||||
'aria-expanded' => 'false',
|
||||
'aria-haspopup' => 'true',
|
||||
'id' => 'kadence-off-canvas-trigger' . $unique_id,
|
||||
);
|
||||
$wrapper_attributes = get_block_wrapper_attributes( $wrapper_args );
|
||||
|
||||
return sprintf( '<button %1$s>%2$s</button>', $wrapper_attributes, $content );
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers scripts and styles.
|
||||
*/
|
||||
public function register_scripts() {
|
||||
parent::register_scripts();
|
||||
// If in the backend, bail out.
|
||||
if ( is_admin() ) {
|
||||
return;
|
||||
}
|
||||
if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
|
||||
return;
|
||||
}
|
||||
wp_register_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-off-canvas-trigger.min.js', array(), KADENCE_BLOCKS_VERSION, true );
|
||||
}
|
||||
}
|
||||
|
||||
Kadence_Blocks_Off_Canvas_Trigger_Block::get_instance();
|
||||
Reference in New Issue
Block a user