132 lines
4.9 KiB
PHP
132 lines
4.9 KiB
PHP
<?php /**
|
|
* Function to generate random class and add dynamic padding styles
|
|
*/
|
|
function render_lcp_container( $attributes, $content ) {
|
|
// Debugging: Check the passed attributes
|
|
//var_dump($attributes);
|
|
|
|
// Generate a random class name (optional, could be customized)
|
|
$random_class = 'lcp-container-' . wp_generate_password( 12, false, false );
|
|
|
|
// Get the padding and backgroundColor attributes
|
|
$padding = isset( $attributes['padding'] ) ? $attributes['padding'] : array();
|
|
$background_color = isset( $attributes['backgroundColor'] ) ? $attributes['backgroundColor'] : '#ffffff'; // Default color
|
|
|
|
// Debugging: Check padding and background color
|
|
error_log(print_r($padding, true));
|
|
error_log(print_r($background_color, true));
|
|
|
|
// Check if all padding values are the same across all sizes
|
|
$same_padding = true;
|
|
$padding_top = $padding['extraLarge']['top'];
|
|
$padding_right = $padding['extraLarge']['right'];
|
|
$padding_bottom = $padding['extraLarge']['bottom'];
|
|
$padding_left = $padding['extraLarge']['left'];
|
|
|
|
// Compare the padding for all other sizes (large, medium, small)
|
|
foreach ( ['large', 'medium', 'small'] as $size ) {
|
|
if (
|
|
$padding[$size]['top'] !== $padding_top ||
|
|
$padding[$size]['right'] !== $padding_right ||
|
|
$padding[$size]['bottom'] !== $padding_bottom ||
|
|
$padding[$size]['left'] !== $padding_left
|
|
) {
|
|
$same_padding = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Prepare the inline style or media queries
|
|
$style = '';
|
|
|
|
// Add background-color to the inline style
|
|
$style .= sprintf( 'background-color: %s;', esc_attr( $background_color ) );
|
|
|
|
if ( $same_padding ) {
|
|
// If all padding values are the same, use inline style
|
|
$style .= sprintf(
|
|
'padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s;',
|
|
esc_attr( $padding_top ),
|
|
esc_attr( $padding_right ),
|
|
esc_attr( $padding_bottom ),
|
|
esc_attr( $padding_left )
|
|
);
|
|
} else {
|
|
// If padding is different, generate media queries for different sizes
|
|
$style .= sprintf(
|
|
'@media (min-width: 1200px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
|
esc_attr( $random_class ),
|
|
esc_attr( $padding['extraLarge']['top'] ),
|
|
esc_attr( $padding['extraLarge']['right'] ),
|
|
esc_attr( $padding['extraLarge']['bottom'] ),
|
|
esc_attr( $padding['extraLarge']['left'] )
|
|
);
|
|
|
|
$style .= sprintf(
|
|
'@media (min-width: 1024px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
|
esc_attr( $random_class ),
|
|
esc_attr( $padding['large']['top'] ),
|
|
esc_attr( $padding['large']['right'] ),
|
|
esc_attr( $padding['large']['bottom'] ),
|
|
esc_attr( $padding['large']['left'] )
|
|
);
|
|
|
|
$style .= sprintf(
|
|
'@media (min-width: 768px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
|
esc_attr( $random_class ),
|
|
esc_attr( $padding['medium']['top'] ),
|
|
esc_attr( $padding['medium']['right'] ),
|
|
esc_attr( $padding['medium']['bottom'] ),
|
|
esc_attr( $padding['medium']['left'] )
|
|
);
|
|
|
|
$style .= sprintf(
|
|
'@media (max-width: 767px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
|
esc_attr( $random_class ),
|
|
esc_attr( $padding['small']['top'] ),
|
|
esc_attr( $padding['small']['right'] ),
|
|
esc_attr( $padding['small']['bottom'] ),
|
|
esc_attr( $padding['small']['left'] )
|
|
);
|
|
}
|
|
|
|
// Generate the <style> tag with the final CSS (either inline or media queries)
|
|
$style_tag = '';
|
|
if ( ! empty( $style ) ) {
|
|
$style_tag = sprintf( '<style>.%s { %s }</style>', esc_attr( $random_class ), $style );
|
|
}
|
|
|
|
// Output the content wrapped in the div with the random class and padding styles
|
|
return $style_tag . sprintf(
|
|
'<div class="lcp-container %s">%s</div>',
|
|
esc_attr( $random_class ),
|
|
$content
|
|
);
|
|
}
|
|
|
|
|
|
/**
|
|
* Function to return the media query breakpoint based on the size
|
|
*/
|
|
function get_media_query_breakpoint( $size ) {
|
|
// Define breakpoints for each size
|
|
$breakpoints = array(
|
|
'extraLarge' => '1200px',
|
|
'large' => '1024px',
|
|
'medium' => '768px',
|
|
'small' => '480px',
|
|
);
|
|
|
|
return isset( $breakpoints[$size] ) ? $breakpoints[$size] : '480px';
|
|
}
|
|
|
|
/**
|
|
* Function to initialize the block
|
|
*/
|
|
function lcp_dynamic_container_block_init() {
|
|
register_block_type( __DIR__ . '/build', array(
|
|
'render_callback' => 'render_lcp_dynamic_container', // Add the render callback here
|
|
));
|
|
}
|
|
add_action( 'init', 'lcp_dynamic_container_block_init' );
|