Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Blocks: Try using the new shared Button component #14931

Closed
wants to merge 17 commits into from
Closed

[WIP] Blocks: Try using the new shared Button component #14931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d9bfe81
Add a new shared Button component
Copons Mar 7, 2020
84ca861
Rename attributes file
Copons Mar 7, 2020
382b994
Add the button URL to the attributes
Copons Mar 7, 2020
b6e26a1
Add two helpers for SSR classes and styles
Copons Mar 7, 2020
a645abf
Document the getButtonAttributes function
Copons Mar 7, 2020
bfecfed
Add a utility to get the ButtonEdit props
Copons Mar 8, 2020
3605437
Fix ButtonSave
Copons Mar 8, 2020
b396759
Fix support for block styles
Copons Mar 8, 2020
520f4d7
Add a constant file
Copons Mar 8, 2020
f0b9acb
Avoid validating attributes when the attributesDefinition object is m…
Copons Mar 10, 2020
1f009d4
Fix button props
Copons Mar 10, 2020
7e6c5c4
Autogenerate the block class name on ButtonSave
Copons Mar 11, 2020
abf1186
Turn ButtonSave into an actual component with a placeholder ID
Copons Mar 11, 2020
28467ad
[not verified] Eventbrite example
Copons Mar 10, 2020
de8e150
[not verified] Revue example
Copons Mar 10, 2020
dd45164
[not verified] Contact Form example
Copons Mar 10, 2020
787ed48
[not verified] Calendly example
Copons Mar 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions _inc/lib/functions.jetpack-button-helper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<?php
/**
* Helper for the shared Button component for CTA blocks.
*
* @package jetpack
*/

if ( ! function_exists( 'jetpack_get_button_classes' ) ) {
/**
* Get the shared Button component classes.
*
* @param array $attributes Array containing the block attributes.
*
* @return string
*/
function jetpack_get_button_classes( $attributes ) {
$classes = array( 'wp-block-button__link' );
$has_class_name = array_key_exists( 'className', $attributes );
$has_named_text_color = array_key_exists( 'buttonTextColor', $attributes );
$has_custom_text_color = array_key_exists( 'customButtonTextColor', $attributes );
$has_named_background_color = array_key_exists( 'buttonBackgroundColor', $attributes );
$has_custom_background_color = array_key_exists( 'customButtonBackgroundColor', $attributes );
$has_named_gradient = array_key_exists( 'buttonGradient', $attributes );
$has_custom_gradient = array_key_exists( 'customButtonGradient', $attributes );
$has_border_radius = array_key_exists( 'buttonBorderRadius', $attributes );

if ( $has_class_name ) {
$classes[] = $attributes['className'];
}

if ( $has_named_text_color || $has_custom_text_color ) {
$classes[] = 'has-text-color';
}
if ( $has_named_text_color ) {
$classes[] = sprintf( 'has-%s-color', $attributes['buttonTextColor'] );
}

if (
$has_named_background_color ||
$has_custom_background_color ||
$has_named_gradient ||
$has_custom_gradient
) {
$classes[] = 'has-background';
}
if ( $has_named_background_color && ! $has_custom_gradient ) {
$classes[] = sprintf( 'has-%s-background-color', $attributes['buttonBackgroundColor'] );
}
if ( $has_named_gradient ) {
$classes[] = sprintf( 'has-%s-gradient-background', $attributes['buttonGradient'] );
}

// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
if ( $has_border_radius && 0 == $attributes['buttonBorderRadius'] ) {
$classes[] = 'no-border-radius';
}

return implode( ' ', $classes );
}
}

if ( ! function_exists( 'jetpack_get_button_styles' ) ) {
/**
* Get the shared Button component styles.
*
* @param array $attributes Array containing the block attributes.
*
* @return string
*/
function jetpack_get_button_styles( $attributes ) {
$styles = array();
$has_named_text_color = array_key_exists( 'buttonTextColor', $attributes );
$has_custom_text_color = array_key_exists( 'customButtonTextColor', $attributes );
$has_named_background_color = array_key_exists( 'buttonBackgroundColor', $attributes );
$has_custom_background_color = array_key_exists( 'customButtonBackgroundColor', $attributes );
$has_named_gradient = array_key_exists( 'buttonGradient', $attributes );
$has_custom_gradient = array_key_exists( 'customButtonGradient', $attributes );
$has_border_radius = array_key_exists( 'buttonBorderRadius', $attributes );

if ( ! $has_named_text_color && $has_custom_text_color ) {
$styles[] = sprintf( 'color: %s;', $attributes['customButtonTextColor'] );
}

if ( ! $has_named_background_color && ! $has_named_gradient && $has_custom_gradient ) {
$styles[] = sprintf( 'background: %s;', $attributes['customButtonGradient'] );
}

if (
$has_custom_background_color &&
! $has_named_background_color &&
! $has_named_gradient &&
! $has_custom_gradient
) {
$styles[] = sprintf( 'background-color: %s;', $attributes['customButtonBackgroundColor'] );
}

// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
if ( $has_border_radius && 0 != $attributes['buttonBorderRadius'] ) {
$styles[] = sprintf( 'border-radius: %spx;', $attributes['buttonBorderRadius'] );
}

return implode( ' ', $styles );
}
}
29 changes: 4 additions & 25 deletions extensions/blocks/calendly/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { getButtonAttributes } from '../../shared/components/button';
import colorValidator from '../../shared/colorValidator';

const urlValidator = url => ! url || url.startsWith( 'https://calendly.com/' );
Expand All @@ -16,17 +17,6 @@ export default {
default: 'ffffff',
validator: colorValidator,
},
submitButtonText: {
type: 'string',
default: __( 'Schedule time with me', 'jetpack' ),
},
submitButtonTextColor: {
type: 'string',
},
submitButtonBackgroundColor: {
type: 'string',
},
submitButtonClasses: { type: 'string' },
hideEventTypeDetails: {
type: 'boolean',
default: false,
Expand All @@ -50,18 +40,7 @@ export default {
type: 'string',
validator: urlValidator,
},
backgroundButtonColor: {
type: 'string',
},
textButtonColor: {
type: 'string',
},
customBackgroundButtonColor: {
type: 'string',
validator: colorValidator,
},
customTextButtonColor: {
type: 'string',
validator: colorValidator,
},
...getButtonAttributes( {
defaultText: __( 'Schedule time with me', 'jetpack' ),
} ),
};
149 changes: 102 additions & 47 deletions extensions/blocks/calendly/calendly.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,39 @@ function set_availability() {
}
add_action( 'init', 'Jetpack\Calendly_Block\set_availability' );

/**
* Enqueues the Calendly JS library, and adds an inline
* function to attach event handlers to the button
*/
function enqueue_calendly_js() {
wp_enqueue_script(
'jetpack-calendly-external-js',
'https://assets.calendly.com/assets/external/widget.js',
null,
JETPACK__VERSION,
false
);
wp_add_inline_script(
'jetpack-calendly-external-js',
"function calendly_attach_link_events( elementId ) {
var widget = document.getElementById( elementId );
if ( widget ) {
widget.addEventListener( 'click', function( event ) {
event.preventDefault();
Calendly.initPopupWidget({url:event.target.href});
} );
widget.addEventListener( 'keydown', function( event ) {
// Enter and space keys.
if ( event.keyCode === 13 || event.keyCode === 32 ) {
event.preventDefault();
event.target && event.target.click();
}
} );
}
}"
);
}

/**
* Calendly block registration/dependency declaration.
*
Expand All @@ -90,31 +123,25 @@ function load_assets( $attr, $content ) {
return;
}

$style = get_attribute( $attr, 'style' );
$hide_event_type_details = get_attribute( $attr, 'hideEventTypeDetails' );
$background_color = get_attribute( $attr, 'backgroundColor' );
$text_color = get_attribute( $attr, 'textColor' );
$primary_color = get_attribute( $attr, 'primaryColor' );
$classes = \Jetpack_Gutenberg::block_classes( 'calendly', $attr );
$is_amp_request = class_exists( 'Jetpack_AMP_Support' ) && \Jetpack_AMP_Support::is_amp_request();
$block_id = wp_unique_id( 'calendly-block-' );

/*
* Enqueue necessary scripts and styles.
*/
\Jetpack_Gutenberg::load_assets_as_required( 'calendly' );
wp_enqueue_script(
'jetpack-calendly-external-js',
'https://assets.calendly.com/assets/external/widget.js',
null,
JETPACK__VERSION,
true
);

$style = get_attribute( $attr, 'style' );
$hide_event_type_details = get_attribute( $attr, 'hideEventTypeDetails' );
$background_color = get_attribute( $attr, 'backgroundColor' );
$text_color = get_attribute( $attr, 'textColor' );
$primary_color = get_attribute( $attr, 'primaryColor' );
$submit_button_text = get_attribute( $attr, 'submitButtonText' );
$submit_button_classes = get_attribute( $attr, 'submitButtonClasses' );
$submit_button_text_color = get_attribute( $attr, 'customTextButtonColor' );
$submit_button_background_color = get_attribute( $attr, 'customBackgroundButtonColor' );
$classes = \Jetpack_Gutenberg::block_classes( 'calendly', $attr, array( 'calendly-style-' . $style ) );
$block_id = wp_unique_id( 'calendly-block-' );
if ( ! wp_script_is( 'jetpack-calendly-external-js' ) && ! $is_amp_request ) {
enqueue_calendly_js();
}

$url = add_query_arg(
$orig_url = $url;
$url = add_query_arg(
array(
'hide_event_type_details' => (int) $hide_event_type_details,
'background_color' => sanitize_hex_color_no_hash( $background_color ),
Expand All @@ -125,35 +152,19 @@ function load_assets( $attr, $content ) {
);

if ( 'link' === $style ) {
wp_enqueue_style( 'jetpack-calendly-external-css', 'https://assets.calendly.com/assets/external/widget.css', null, JETPACK__VERSION );

/*
* If we have some additional styles from the editor
* (a custom text color, custom bg color, or both )
* Let's add that CSS inline.
*/
if ( ! empty( $submit_button_text_color ) || ! empty( $submit_button_background_color ) ) {
$inline_styles = sprintf(
'#%1$s .wp-block-button__link{%2$s%3$s}',
esc_attr( $block_id ),
! empty( $submit_button_text_color )
? 'color:#' . sanitize_hex_color_no_hash( $submit_button_text_color ) . ';'
: '',
! empty( $submit_button_background_color )
? 'background-color:#' . sanitize_hex_color_no_hash( $submit_button_background_color ) . ';'
: ''
);
wp_add_inline_style( 'jetpack-calendly-external-css', $inline_styles );
if ( ! wp_style_is( 'jetpack-calendly-external-css' ) ) {
wp_enqueue_style( 'jetpack-calendly-external-css', 'https://assets.calendly.com/assets/external/widget.css', null, JETPACK__VERSION );
}
if ( strstr( $content, sprintf( '>%s</a>', $orig_url ) ) ) {
$content = deprecated_render_button( $attr, $block_id, $classes, $url );
} else {
// It's the new version so simply substitute the ID.
$content = preg_replace( '/data-id-attr="placeholder"/', 'id="' . esc_attr( $block_id ) . '"', $content );
}

$content = sprintf(
'<div class="wp-block-button %1$s" id="%2$s"><a class="%3$s" role="button" onclick="Calendly.initPopupWidget({url:\'%4$s\'});return false;">%5$s</a></div>',
esc_attr( $classes ),
esc_attr( $block_id ),
! empty( $submit_button_classes ) ? esc_attr( $submit_button_classes ) : 'wp-block-button__link',
esc_js( $url ),
wp_kses_post( $submit_button_text )
);
if ( ! $is_amp_request ) {
wp_add_inline_script( 'jetpack-calendly-external-js', sprintf( "calendly_attach_link_events( '%s' )", esc_js( $block_id ) ) );
}
} else { // Inline style.
$content = sprintf(
'<div class="%1$s" id="%2$s"></div>',
Expand All @@ -173,6 +184,50 @@ function load_assets( $attr, $content ) {
return $content;
}

/**
* The renders the legacy version of the button HTML.
*
* @param array $attr Array containing the Calendly block attributes.
* @param string $block_id The value for the ID attribute of the link.
* @param string $classes The CSS classes for the wrapper div.
* @param string $url Calendly URL for the link HREF.
*/
function deprecated_render_button( $attr, $block_id, $classes, $url ) {
// This is the legacy version, so create the full link content.
$submit_button_text = get_attribute( $attr, 'submitButtonText' );
$submit_button_classes = get_attribute( $attr, 'submitButtonClasses' );
$submit_button_text_color = get_attribute( $attr, 'customTextButtonColor' );
$submit_button_background_color = get_attribute( $attr, 'customBackgroundButtonColor' );

/*
* If we have some additional styles from the editor
* (a custom text color, custom bg color, or both )
* Let's add that CSS inline.
*/
if ( ! empty( $submit_button_text_color ) || ! empty( $submit_button_background_color ) ) {
$inline_styles = sprintf(
'#%1$s .wp-block-button__link{%2$s%3$s}',
esc_attr( $block_id ),
! empty( $submit_button_text_color )
? 'color:#' . sanitize_hex_color_no_hash( $submit_button_text_color ) . ';'
: '',
! empty( $submit_button_background_color )
? 'background-color:#' . sanitize_hex_color_no_hash( $submit_button_background_color ) . ';'
: ''
);
wp_add_inline_style( 'jetpack-calendly-external-css', $inline_styles );
}

return sprintf(
'<div class="%1$s" id="%2$s"><a class="%3$s" href="%4$s" role="button">%5$s</a></div>',
esc_attr( $classes ),
esc_attr( $block_id ),
! empty( $submit_button_classes ) ? esc_attr( $submit_button_classes ) : 'wp-block-button__link',
esc_js( $url ),
wp_kses_post( $submit_button_text )
);
}

/**
* Get filtered attributes.
*
Expand Down
16 changes: 3 additions & 13 deletions extensions/blocks/calendly/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External Dependencies
*/
import 'url-polyfill';
import { isEqual, pick } from 'lodash';
import { isEqual } from 'lodash';
import queryString from 'query-string';

/**
Expand Down Expand Up @@ -31,9 +31,9 @@ import './view.scss';
import icon from './icon';
import attributeDetails from './attributes';
import { getValidatedAttributes } from '../../shared/get-validated-attributes';
import SubmitButton from '../../shared/submit-button';
import { getAttributesFromEmbedCode } from './utils';
import BlockStylesSelector from '../../shared/components/block-styles-selector';
import { ButtonEdit, getButtonEditProps } from '../../shared/components/button';

function CalendlyEdit( props ) {
const {
Expand Down Expand Up @@ -153,17 +153,7 @@ function CalendlyEdit( props ) {
</>
);

const submitButtonProps = {
attributes: pick( validatedAttributes, [
'submitButtonText',
'backgroundButtonColor',
'textButtonColor',
'customBackgroundButtonColor',
'customBackgroundButtonColor',
] ),
setAttributes,
};
const submitButtonPreview = <SubmitButton { ...submitButtonProps } />;
const submitButtonPreview = <ButtonEdit { ...getButtonEditProps( props, attributeDetails ) } />;

const linkPreview = (
<>
Expand Down
Loading