Skip to content

Commit

Permalink
added support for new Ghost Kit extensions
Browse files Browse the repository at this point in the history
  • Loading branch information
nk-o committed Mar 15, 2024
1 parent 6daa4bb commit d9a5a7c
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 45 deletions.
98 changes: 78 additions & 20 deletions assets/editor-constructor/boxes/supports-ghost-kit/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* WordPress dependencies.
*/
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import {
Notice,
BaseControl,
Expand All @@ -16,13 +17,29 @@ export default function SupportsGhostKitSettings(props) {
const {
supports_classname: supportsClassname,

supports_ghostkit_effects: supportsGktEffects,
supports_ghostkit_position: supportsGktPosition,
supports_ghostkit_spacings: supportsGktSpacings,
supports_ghostkit_display: supportsGktDisplay,
supports_ghostkit_scroll_reveal: supportsGktScrollReveal,
supports_ghostkit_frame: supportsGktFrame,
supports_ghostkit_transform: supportsGktTransform,
supports_ghostkit_custom_css: supportsGktCustomCSS,
supports_ghostkit_display: supportsGktDisplay,
supports_ghostkit_attributes: supportsGktAttributes,

// Deprecated.
supports_ghostkit_scroll_reveal: supportsGktScrollReveal,
} = data;

// Migrate old attribute.
useEffect(() => {
if (typeof supportsGktScrollReveal !== 'undefined') {
updateData({
supports_ghostkit_scroll_reveal: undefined,
supports_ghostkit_effects: supportsGktScrollReveal,
});
}
}, [supportsGktScrollReveal, updateData]);

return (
<>
{!window.GHOSTKIT ? (
Expand Down Expand Up @@ -50,10 +67,13 @@ export default function SupportsGhostKitSettings(props) {
</BaseControl>
) : null}

{(supportsGktSpacings ||
{(supportsGktPosition ||
supportsGktSpacings ||
supportsGktDisplay ||
supportsGktFrame ||
supportsGktCustomCSS) &&
supportsGktTransform ||
supportsGktCustomCSS ||
supportsGktAttributes) &&
!supportsClassname ? (
<BaseControl>
<Notice
Expand All @@ -72,39 +92,41 @@ export default function SupportsGhostKitSettings(props) {
) : null}

<ToggleControl
label={__('Spacings', 'lazy-blocks')}
help={__('Change block margins and paddings.', 'lazy-blocks')}
checked={supportsGktSpacings}
label={__('Effects', 'lazy-blocks')}
help={__(
'Add visual effects, reveal, scroll animations, etc.',
'lazy-blocks'
)}
checked={supportsGktEffects}
onChange={(value) =>
updateData({
supports_ghostkit_spacings: value,
supports_classname: value || supportsClassname,
supports_ghostkit_effects: value,
})
}
/>
<ToggleControl
label={__('Display', 'lazy-blocks')}
label={__('Position', 'lazy-blocks')}
help={__(
'Display / Hide blocks on different screen sizes.',
'Change block position to either absolute or fixed.',
'lazy-blocks'
)}
checked={supportsGktDisplay}
checked={supportsGktPosition}
onChange={(value) =>
updateData({
supports_ghostkit_display: value,
supports_ghostkit_position: value,
supports_classname: value || supportsClassname,
})
}
/>
<ToggleControl
label={__('Animate on Scroll', 'lazy-blocks')}
help={__(
'Display block with animation on scroll.',
'lazy-blocks'
)}
checked={supportsGktScrollReveal}
label={__('Spacings', 'lazy-blocks')}
help={__('Change block margins and paddings.', 'lazy-blocks')}
checked={supportsGktSpacings}
onChange={(value) =>
updateData({ supports_ghostkit_scroll_reveal: value })
updateData({
supports_ghostkit_spacings: value,
supports_classname: value || supportsClassname,
})
}
/>
<ToggleControl
Expand All @@ -118,6 +140,17 @@ export default function SupportsGhostKitSettings(props) {
})
}
/>
<ToggleControl
label={__('Transform', 'lazy-blocks')}
help={__('Add CSS transformations to block.', 'lazy-blocks')}
checked={supportsGktTransform}
onChange={(value) =>
updateData({
supports_ghostkit_transform: value,
supports_classname: value || supportsClassname,
})
}
/>
<ToggleControl
label={__('Custom CSS', 'lazy-blocks')}
help={__(
Expand All @@ -132,6 +165,31 @@ export default function SupportsGhostKitSettings(props) {
})
}
/>
<ToggleControl
label={__('Display', 'lazy-blocks')}
help={__(
'Display / Hide blocks on different screen sizes.',
'lazy-blocks'
)}
checked={supportsGktDisplay}
onChange={(value) =>
updateData({
supports_ghostkit_display: value,
supports_classname: value || supportsClassname,
})
}
/>
<ToggleControl
label={__('Attributes', 'lazy-blocks')}
help={__(
'Insert custom HTML attributes with custom content.',
'lazy-blocks'
)}
checked={supportsGktAttributes}
onChange={(value) =>
updateData({ supports_ghostkit_attributes: value })
}
/>
</>
);
}
2 changes: 0 additions & 2 deletions assets/editor/blocks/main/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@ options.blocks.forEach((item) => {
keywords: item.keywords,
supports: item.supports,

ghostkit: item.ghostkit,

lazyblock: true,

edit(props) {
Expand Down
47 changes: 24 additions & 23 deletions classes/class-blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -954,6 +954,28 @@ public function marshal_block_data_with_controls( $id = null, $post_title = null

$styles = (array) $get_meta_value( 'lazyblocks_styles' );

// Prepare supports.
$supports = array(
'customClassName' => $get_meta_value( 'lazyblocks_supports_classname' ),
'anchor' => $get_meta_value( 'lazyblocks_supports_anchor' ),
'html' => $get_meta_value( 'lazyblocks_supports_html' ),
'multiple' => $get_meta_value( 'lazyblocks_supports_multiple' ),
'inserter' => $get_meta_value( 'lazyblocks_supports_inserter' ),
'reusable' => $get_meta_value( 'lazyblocks_supports_reusable' ),
'lock' => $get_meta_value( 'lazyblocks_supports_lock' ),
'align' => $align,
'ghostkit' => array(
'effects' => $get_meta_value( 'lazyblocks_supports_ghostkit_effects' ) || $get_meta_value( 'lazyblocks_supports_ghostkit_scroll_reveal' ) || false,
'position' => $get_meta_value( 'lazyblocks_supports_ghostkit_position' ) || false,
'spacings' => $get_meta_value( 'lazyblocks_supports_ghostkit_spacings' ) || false,
'frame' => $get_meta_value( 'lazyblocks_supports_ghostkit_frame' ) || false,
'transform' => $get_meta_value( 'lazyblocks_supports_ghostkit_transform' ) || false,
'customCSS' => $get_meta_value( 'lazyblocks_supports_ghostkit_custom_css' ) || false,
'display' => $get_meta_value( 'lazyblocks_supports_ghostkit_display' ) || false,
'attributes' => $get_meta_value( 'lazyblocks_supports_ghostkit_attributes' ) || false,
),
);

return apply_filters(
'lzb/block_data',
array(
Expand All @@ -965,25 +987,7 @@ public function marshal_block_data_with_controls( $id = null, $post_title = null
'description' => $get_meta_value( 'lazyblocks_description' ),
'category' => $this->sanitize_slug( esc_html( $get_meta_value( 'lazyblocks_category' ) ) ),
'category_label' => esc_html( $get_meta_value( 'lazyblocks_category' ) ),
'supports' => array(
'customClassName' => $get_meta_value( 'lazyblocks_supports_classname' ),
'anchor' => $get_meta_value( 'lazyblocks_supports_anchor' ),
'html' => $get_meta_value( 'lazyblocks_supports_html' ),
'multiple' => $get_meta_value( 'lazyblocks_supports_multiple' ),
'inserter' => $get_meta_value( 'lazyblocks_supports_inserter' ),
'reusable' => $get_meta_value( 'lazyblocks_supports_reusable' ),
'lock' => $get_meta_value( 'lazyblocks_supports_lock' ),
'align' => $align,
),
'ghostkit' => array(
'supports' => array(
'spacings' => $get_meta_value( 'lazyblocks_supports_ghostkit_spacings' ),
'display' => $get_meta_value( 'lazyblocks_supports_ghostkit_display' ),
'scrollReveal' => $get_meta_value( 'lazyblocks_supports_ghostkit_scroll_reveal' ),
'frame' => $get_meta_value( 'lazyblocks_supports_ghostkit_frame' ),
'customCSS' => $get_meta_value( 'lazyblocks_supports_ghostkit_custom_css' ),
),
),
'supports' => $supports,
'controls' => $controls,
'code' => array(
'output_method' => $get_meta_value( 'lazyblocks_code_output_method' ),
Expand Down Expand Up @@ -1406,6 +1410,7 @@ public function register_block_render() {
$data = array(
'api_version' => 3,
'attributes' => $attributes,
'supports' => $block['supports'],
'render_callback' => function( $render_attributes, $render_content = null ) {
// Usually this context is used to properly preload content in the Pro plugin.
$render_context = is_admin() ? 'editor' : 'frontend';
Expand Down Expand Up @@ -1603,10 +1608,6 @@ public function render_callback( $attributes, $content = null, $context = 'front
$array_atts['id'] = esc_attr( $attributes['anchor'] );
}

if ( isset( $attributes['ghostkitSR'] ) && $attributes['ghostkitSR'] ) {
$array_atts['data-ghostkit-sr'] = esc_attr( $attributes['ghostkitSR'] );
}

$html_atts = get_block_wrapper_attributes( $array_atts );

$result = '<div ' . $html_atts . '>' . $result . '</div>';
Expand Down

0 comments on commit d9a5a7c

Please sign in to comment.