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 = '
'; // Find the opening div tag of the container and insert excerpt right after it // Match: