initial
This commit is contained in:
@@ -0,0 +1,306 @@
|
||||
<?php
|
||||
/**
|
||||
* Handles the Grid block.
|
||||
*
|
||||
* @package GenerateBlocks
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
/**
|
||||
* Add Grid related functions.
|
||||
*/
|
||||
class GenerateBlocks_Block_Grid {
|
||||
/**
|
||||
* Keep track of all blocks of this type on the page.
|
||||
*
|
||||
* @var array $block_ids The current block id.
|
||||
*/
|
||||
private static $block_ids = [];
|
||||
|
||||
/**
|
||||
* Keep track of CSS we want to output once per block type.
|
||||
*
|
||||
* @var boolean
|
||||
*/
|
||||
private static $singular_css_added = false;
|
||||
|
||||
/**
|
||||
* Block defaults.
|
||||
*/
|
||||
public static function defaults() {
|
||||
return [
|
||||
'horizontalGap' => '',
|
||||
'verticalGap' => '',
|
||||
'verticalAlignment' => '',
|
||||
'horizontalGapTablet' => '',
|
||||
'verticalGapTablet' => '',
|
||||
'verticalAlignmentTablet' => 'inherit',
|
||||
'horizontalGapMobile' => '',
|
||||
'verticalGapMobile' => '',
|
||||
'verticalAlignmentMobile' => 'inherit',
|
||||
'horizontalAlignment' => '',
|
||||
'horizontalAlignmentTablet' => '',
|
||||
'horizontalAlignmentMobile' => '',
|
||||
'useLegacyRowGap' => false,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Store our block ID in memory.
|
||||
*
|
||||
* @param string $id The block ID to store.
|
||||
*/
|
||||
public static function store_block_id( $id ) {
|
||||
self::$block_ids[] = $id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if our block ID exists.
|
||||
*
|
||||
* @param string $id The block ID to store.
|
||||
*/
|
||||
public static function block_id_exists( $id ) {
|
||||
return in_array( $id, (array) self::$block_ids );
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile our CSS data based on our block attributes.
|
||||
*
|
||||
* @param array $attributes Our block attributes.
|
||||
*/
|
||||
public static function get_css_data( $attributes ) {
|
||||
$css = new GenerateBlocks_Dynamic_CSS();
|
||||
$desktop_css = new GenerateBlocks_Dynamic_CSS();
|
||||
$tablet_css = new GenerateBlocks_Dynamic_CSS();
|
||||
$tablet_only_css = new GenerateBlocks_Dynamic_CSS();
|
||||
$mobile_css = new GenerateBlocks_Dynamic_CSS();
|
||||
$css_data = [];
|
||||
|
||||
$defaults = generateblocks_get_block_defaults();
|
||||
|
||||
$settings = wp_parse_args(
|
||||
$attributes,
|
||||
$defaults['gridContainer']
|
||||
);
|
||||
|
||||
$id = $attributes['uniqueId'];
|
||||
$blockVersion = ! empty( $settings['blockVersion'] ) ? $settings['blockVersion'] : 1;
|
||||
|
||||
// Use legacy settings if needed.
|
||||
if ( $blockVersion < 2 ) {
|
||||
$settings = GenerateBlocks_Legacy_Attributes::get_settings( '1.4.0', 'grid', $settings, $attributes );
|
||||
}
|
||||
|
||||
$gap_direction = 'left';
|
||||
|
||||
if ( is_rtl() ) {
|
||||
$gap_direction = 'right';
|
||||
}
|
||||
|
||||
// Don't output horizontal gap defaults if we're using global styles.
|
||||
if ( $blockVersion < 2 && isset( $settings['useGlobalStyle'] ) && $settings['useGlobalStyle'] && isset( $settings['globalStyleId'] ) && $settings['globalStyleId'] ) {
|
||||
if ( (string) $settings['horizontalGap'] === (string) $defaults['gridContainer']['horizontalGap'] ) {
|
||||
$settings['horizontalGap'] = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Only add this CSS once.
|
||||
if ( ! self::$singular_css_added ) {
|
||||
do_action(
|
||||
'generateblocks_block_one_time_css_data',
|
||||
'grid',
|
||||
$settings,
|
||||
$css
|
||||
);
|
||||
|
||||
self::$singular_css_added = true;
|
||||
}
|
||||
|
||||
$css->set_selector( '.gb-grid-wrapper-' . $id );
|
||||
$css->add_property( 'display', 'flex' );
|
||||
$css->add_property( 'flex-wrap', 'wrap' );
|
||||
$css->add_property( 'align-items', $settings['verticalAlignment'] );
|
||||
$css->add_property( 'justify-content', $settings['horizontalAlignment'] );
|
||||
|
||||
if ( $blockVersion > 2 && ! $settings['useLegacyRowGap'] ) {
|
||||
$css->add_property( 'row-gap', $settings['verticalGap'], 'px' );
|
||||
}
|
||||
|
||||
if ( $settings['horizontalGap'] ) {
|
||||
$css->add_property( 'margin-' . $gap_direction, '-' . $settings['horizontalGap'] . 'px' );
|
||||
}
|
||||
|
||||
$css->set_selector( '.gb-grid-wrapper-' . $id . ' > .gb-grid-column' );
|
||||
$css->add_property( 'box-sizing', 'border-box' );
|
||||
$css->add_property( 'padding-' . $gap_direction, $settings['horizontalGap'], 'px' );
|
||||
|
||||
if ( $blockVersion < 3 || $settings['useLegacyRowGap'] ) {
|
||||
$css->add_property( 'padding-bottom', $settings['verticalGap'], 'px' );
|
||||
}
|
||||
|
||||
$tablet_css->set_selector( '.gb-grid-wrapper-' . $id );
|
||||
|
||||
if ( $blockVersion > 2 && ! $settings['useLegacyRowGap'] ) {
|
||||
$tablet_css->add_property( 'row-gap', $settings['verticalGapTablet'], 'px' );
|
||||
}
|
||||
|
||||
if ( 'inherit' !== $settings['verticalAlignmentTablet'] ) {
|
||||
$tablet_css->add_property( 'align-items', $settings['verticalAlignmentTablet'] );
|
||||
}
|
||||
|
||||
if ( 'inherit' !== $settings['horizontalAlignmentTablet'] ) {
|
||||
$tablet_css->add_property( 'justify-content', $settings['horizontalAlignmentTablet'] );
|
||||
}
|
||||
|
||||
if ( $settings['horizontalGapTablet'] ) {
|
||||
$tablet_css->add_property( 'margin-' . $gap_direction, '-' . $settings['horizontalGapTablet'] . 'px' );
|
||||
} elseif ( 0 === $settings['horizontalGapTablet'] ) {
|
||||
$tablet_css->add_property( 'margin-' . $gap_direction, $settings['horizontalGapTablet'] );
|
||||
}
|
||||
|
||||
$tablet_css->set_selector( '.gb-grid-wrapper-' . $id . ' > .gb-grid-column' );
|
||||
$tablet_css->add_property( 'padding-' . $gap_direction, $settings['horizontalGapTablet'], 'px' );
|
||||
|
||||
if ( $blockVersion < 3 || $settings['useLegacyRowGap'] ) {
|
||||
$tablet_css->add_property( 'padding-bottom', $settings['verticalGapTablet'], 'px' );
|
||||
}
|
||||
|
||||
$mobile_css->set_selector( '.gb-grid-wrapper-' . $id );
|
||||
|
||||
if ( $blockVersion > 2 && ! $settings['useLegacyRowGap'] ) {
|
||||
$mobile_css->add_property( 'row-gap', $settings['verticalGapMobile'], 'px' );
|
||||
}
|
||||
|
||||
if ( 'inherit' !== $settings['verticalAlignmentMobile'] ) {
|
||||
$mobile_css->add_property( 'align-items', $settings['verticalAlignmentMobile'] );
|
||||
}
|
||||
|
||||
if ( 'inherit' !== $settings['horizontalAlignmentMobile'] ) {
|
||||
$mobile_css->add_property( 'justify-content', $settings['horizontalAlignmentMobile'] );
|
||||
}
|
||||
|
||||
if ( $settings['horizontalGapMobile'] ) {
|
||||
$mobile_css->add_property( 'margin-' . $gap_direction, '-' . $settings['horizontalGapMobile'] . 'px' );
|
||||
} elseif ( 0 === $settings['horizontalGapMobile'] ) {
|
||||
$mobile_css->add_property( 'margin-' . $gap_direction, $settings['horizontalGapMobile'] );
|
||||
}
|
||||
|
||||
$mobile_css->set_selector( '.gb-grid-wrapper-' . $id . ' > .gb-grid-column' );
|
||||
$mobile_css->add_property( 'padding-' . $gap_direction, $settings['horizontalGapMobile'], 'px' );
|
||||
|
||||
if ( $blockVersion < 3 || $settings['useLegacyRowGap'] ) {
|
||||
$mobile_css->add_property( 'padding-bottom', $settings['verticalGapMobile'], 'px' );
|
||||
}
|
||||
|
||||
// Store this block ID in memory.
|
||||
self::store_block_id( $id );
|
||||
|
||||
/**
|
||||
* Do generateblocks_block_css_data hook
|
||||
*
|
||||
* @since 1.0
|
||||
*
|
||||
* @param string $name The name of our block.
|
||||
* @param array $settings The settings for the current block.
|
||||
* @param object $css Our desktop/main CSS data.
|
||||
* @param object $desktop_css Our desktop only CSS data.
|
||||
* @param object $tablet_css Our tablet CSS data.
|
||||
* @param object $tablet_only_css Our tablet only CSS data.
|
||||
* @param object $mobile_css Our mobile CSS data.
|
||||
*/
|
||||
do_action(
|
||||
'generateblocks_block_css_data',
|
||||
'grid',
|
||||
$settings,
|
||||
$css,
|
||||
$desktop_css,
|
||||
$tablet_css,
|
||||
$tablet_only_css,
|
||||
$mobile_css
|
||||
);
|
||||
|
||||
return [
|
||||
'main' => $css->css_output(),
|
||||
'desktop' => $desktop_css->css_output(),
|
||||
'tablet' => $tablet_css->css_output(),
|
||||
'tablet_only' => $tablet_only_css->css_output(),
|
||||
'mobile' => $mobile_css->css_output(),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper function for our dynamic buttons.
|
||||
*
|
||||
* @since 1.6.0
|
||||
* @param array $attributes The block attributes.
|
||||
* @param string $content The dynamic text to display.
|
||||
* @param WP_Block $block Block instance.
|
||||
*/
|
||||
public static function render_block( $attributes, $content, $block ) {
|
||||
if ( ! isset( $attributes['isDynamic'] ) || ! $attributes['isDynamic'] ) {
|
||||
// Add styles to this block if needed.
|
||||
$content = generateblocks_maybe_add_block_css(
|
||||
$content,
|
||||
[
|
||||
'class_name' => 'GenerateBlocks_Block_Grid',
|
||||
'attributes' => $attributes,
|
||||
'block_ids' => self::$block_ids,
|
||||
]
|
||||
);
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
$defaults = generateblocks_get_block_defaults();
|
||||
|
||||
$settings = wp_parse_args(
|
||||
$attributes,
|
||||
$defaults['gridContainer']
|
||||
);
|
||||
|
||||
$classNames = array(
|
||||
'gb-grid-wrapper',
|
||||
'gb-grid-wrapper-' . $settings['uniqueId'],
|
||||
);
|
||||
|
||||
if ( ! empty( $settings['className'] ) ) {
|
||||
$classNames[] = $settings['className'];
|
||||
}
|
||||
|
||||
// Add styles to this block if needed.
|
||||
$output = generateblocks_maybe_add_block_css(
|
||||
'',
|
||||
[
|
||||
'class_name' => 'GenerateBlocks_Block_Grid',
|
||||
'attributes' => $attributes,
|
||||
'block_ids' => self::$block_ids,
|
||||
]
|
||||
);
|
||||
|
||||
$output .= sprintf(
|
||||
'<div %s>',
|
||||
generateblocks_attr(
|
||||
'grid-wrapper',
|
||||
array(
|
||||
'id' => isset( $settings['anchor'] ) ? $settings['anchor'] : null,
|
||||
'class' => implode( ' ', $classNames ),
|
||||
),
|
||||
$settings,
|
||||
$block
|
||||
)
|
||||
);
|
||||
|
||||
if ( empty( $attributes['isQueryLoop'] ) ) {
|
||||
$output .= $content;
|
||||
} else {
|
||||
$output .= GenerateBlocks_Block_Query_Loop::render_block( $attributes, $content, $block );
|
||||
}
|
||||
|
||||
$output .= '</div>';
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user