Skip to content

Commit da11872

Browse files
GambitGambit
Gambit
authored and
Gambit
committed
separate into spacing and borders, buttons and icons
1 parent 5856580 commit da11872

File tree

19 files changed

+1451
-1079
lines changed

19 files changed

+1451
-1079
lines changed

‎plugin.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,8 @@ function is_frontend() {
230230
require_once( plugin_dir_path( __FILE__ ) . 'src/dynamic-breakpoints.php' );
231231
require_once( plugin_dir_path( __FILE__ ) . 'src/design-library/init.php' );
232232
require_once( plugin_dir_path( __FILE__ ) . 'src/global-settings.php' );
233-
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/block-layouts/index.php' );
233+
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
234+
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );
234235
require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
235236
require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
236237
require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );

‎src/global-settings.php‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
* Global Settings data handling.
44
*/
55

6+
use Blocksy\CustomPostType\Integrations\Stackable;
7+
68
// Exit if accessed directly.
79
if ( ! defined( 'ABSPATH' ) ) {
810
exit;
@@ -90,6 +92,58 @@ function __construct() {
9092
}
9193
}
9294

95+
public static function create_global_schema( $type ) {
96+
return array(
97+
'type' => 'object',
98+
'properties' => array(
99+
'desktop' => $type,
100+
'tablet' => $type,
101+
'mobile' => $type,
102+
'desktopHover' => $type,
103+
'tabletHover' => $type,
104+
'mobileHover' => $type,
105+
'desktopParentHover' => $type,
106+
'tabletParentHover' => $type,
107+
'mobileParentHover' => $type,
108+
'desktopUnit' => array( 'type' => 'string' ),
109+
'tabletUnit' => array( 'type' => 'string' ),
110+
'mobileUnit' => array( 'type' => 'string' ),
111+
'desktopHoverUnit' => array( 'type' => 'string' ),
112+
'tabletHoverUnit' => array( 'type' => 'string' ),
113+
'mobileHoverUnit' => array( 'type' => 'string' ),
114+
'desktopParentHoverUnit' => array( 'type' => 'string' ),
115+
'tabletParentHoverUnit' => array( 'type' => 'string' ),
116+
'mobileParentHoverUnit' => array( 'type' => 'string' ),
117+
)
118+
);
119+
}
120+
121+
public static function get_four_range_properties() {
122+
$four_range_type = array(
123+
'type' => 'object',
124+
'properties' => array(
125+
'top' => array( 'type' => 'number', 'default' => '' ),
126+
'right' => array( 'type' => 'number', 'default' => '' ),
127+
'bottom' => array( 'type' => 'number', 'default' => '' ),
128+
'left' => array( 'type' => 'number', 'default' => '' ),
129+
)
130+
);
131+
132+
return Stackable_Global_Settings::create_global_schema( $four_range_type );
133+
}
134+
135+
public static function get_string_properties() {
136+
$string_type = array( 'type' => 'string' );
137+
138+
return Stackable_Global_Settings::create_global_schema( $string_type );
139+
}
140+
141+
public static function get_number_properties() {
142+
$number_type = array( 'type' => 'number' );
143+
144+
return Stackable_Global_Settings::create_global_schema( $number_type );
145+
}
146+
93147
/**
94148
* Register the settings we need for global settings.
95149
*
@@ -811,6 +865,121 @@ public function posts_block_columns_fix( $selectors, $tag ) {
811865

812866
return $selectors;
813867
}
868+
869+
/**-----------------------------------------------------------------------------
870+
* Block Layouts functions
871+
*-----------------------------------------------------------------------------*/
872+
/**
873+
* Generate CSS for:
874+
* - Global Spacing and Borders
875+
* - Global Buttons and Icons
876+
*
877+
* @param String $current_css
878+
* @return String
879+
*/
880+
public static function generate_global_block_styles( $option_name, $settings_name, $defaults ) {
881+
$block_layouts = get_option( $option_name );
882+
883+
if ( ! $block_layouts || ! is_array( $block_layouts ) ) {
884+
return false;
885+
}
886+
887+
$tablet_breakpoint = 1023;
888+
$mobile_breakpoint = 767;
889+
890+
$css = array(
891+
'desktop' => array(),
892+
'tablet' => array(),
893+
'mobile' => array(),
894+
);
895+
896+
foreach ( $block_layouts as $property => $values ) {
897+
$states = array_filter( $values, array( 'Stackable_Global_Settings', 'get_block_style_states' ), ARRAY_FILTER_USE_KEY );
898+
899+
foreach ( $states as $state => $value ) {
900+
$unit = Stackable_Global_Settings::get_block_style_unit( $block_layouts, $property, $state );
901+
902+
$device = strpos( $state, 'desktop' ) !== false ? 'desktop' : ( strpos( $state, 'tablet' ) !== false ? 'tablet' : 'mobile' );
903+
$hover_state = strpos( $state, 'ParentHover' ) !== false ? 'parent-hover' : ( strpos( $state, 'Hover' ) !== false ? 'hover' : 'normal' );
904+
905+
$custom_property = $property;
906+
907+
if ( $hover_state !== 'normal' ) {
908+
$custom_property .= '-' . $hover_state;
909+
}
910+
911+
if ( is_string( $value ) ) {
912+
$style = $value;
913+
} else if ( is_array( $value ) ) {
914+
$default_value = Stackable_Global_Settings::get_block_style_defaults( $defaults, $property, $device );
915+
$top = isset( $value[ 'top' ] ) ? $value[ 'top' ] : $default_value[ 'top' ];
916+
$right = isset( $value[ 'right' ] ) ? $value[ 'right' ] : $default_value[ 'right' ];
917+
$bottom = isset( $value[ 'bottom' ] ) ? $value[ 'bottom' ] : $default_value[ 'bottom' ];
918+
$left = isset( $value[ 'left' ] ) ? $value[ 'left' ] : $default_value[ 'left' ];
919+
920+
$style = $top . $unit . ' ' . $right . $unit . ' ' . $bottom . $unit . ' ' . $left . $unit;
921+
} else {
922+
$style = $value . $unit;
923+
}
924+
925+
$css[ $device ][ $custom_property ] = $style;
926+
}
927+
}
928+
929+
$styles = array();
930+
$generated_css = '';
931+
932+
if ( ! empty( $css[ 'desktop' ] ) || ! empty( $css[ 'tablet' ] ) || ! empty( $css[ 'mobile' ] ) ) {
933+
$generated_css .= "\n/* " . $settings_name . " */\n";
934+
}
935+
936+
if ( ! empty( $css['desktop'] ) ) {
937+
$styles[] = array(
938+
'selector' => ':root',
939+
'declarations' => $css[ 'desktop' ]
940+
);
941+
}
942+
943+
if ( ! empty( $css['tablet'] ) ) {
944+
$styles[] = array(
945+
'rules_group' => '@media (max-width:' . $tablet_breakpoint .'px)',
946+
'selector' => ':root',
947+
'declarations' => $css[ 'tablet' ]
948+
);
949+
}
950+
951+
if ( ! empty( $css['mobile'] ) ) {
952+
$styles[] = array(
953+
'rules_group' => '@media (max-width:' . $mobile_breakpoint .'px)',
954+
'selector' => ':root',
955+
'declarations' => $css[ 'mobile' ]
956+
);
957+
}
958+
959+
$generated_css .= wp_style_engine_get_stylesheet_from_css_rules( $styles );
960+
return $generated_css;
961+
}
962+
963+
public static function get_block_style_unit( $block_styles, $property, $state ) {
964+
return $block_styles[ $property ][ $state . 'Unit' ] ?? 'px';
965+
}
966+
967+
public static function get_block_style_states( $state ) {
968+
return strpos( $state, 'Unit' ) === false;
969+
}
970+
971+
public static function get_block_style_defaults( $defaults, $property, $device ) {
972+
if ( ! isset( $defaults[ $property ] ) ) {
973+
return '';
974+
}
975+
976+
if ( ! isset( $defaults[ $property ][ $device ] ) ) {
977+
return $defaults[ $property ][ 'desktop' ];
978+
}
979+
980+
return $defaults[ $property ][ $device ];
981+
}
982+
814983
}
815984

816985
new Stackable_Global_Settings();

‎src/hooks/use-global-block-layout-defaults.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { useSelect } from '@wordpress/data'
2-
import { getBlockLayoutDefaults } from '~stackable/plugins/global-settings/block-layouts/utils'
2+
import defaultButtonsAndIcons from '~stackable/plugins/global-settings/buttons-and-icons/defaults.json'
3+
import defaultSpacingAndBorders from '~stackable/plugins/global-settings/spacing-and-borders/defaults.json'
34
/**
45
* Provides a function to get the placeholder for block componets from block layout settings.
56
*
67
* @return {Object} Functions
78
*/
89
export const useBlockLayoutDefaults = () => {
910
const { blockLayouts } = useSelect( select => {
10-
const _blockLayouts = select( 'stackable/global-block-layouts' ).getBlockLayouts()
11-
return { blockLayouts: { ..._blockLayouts } }
11+
const spacingAndBorders = select( 'stackable/global-spacing-and-borders' ).getBlockLayouts()
12+
const buttonsAndIcons = select( 'stackable/global-buttons-and-icons' ).getBlockLayouts()
13+
return { blockLayouts: { ...spacingAndBorders, ...buttonsAndIcons } }
1214
}, [] )
1315

14-
const defaults = getBlockLayoutDefaults()
16+
const defaults = { ...defaultSpacingAndBorders, ...defaultButtonsAndIcons }
1517

1618
const HoverStates = {
1719
normal: '',

0 commit comments

Comments
 (0)