Skip to content

Commit

Permalink
Blocks: Update placeholders to use the withNotices HOC (#14884)
Browse files Browse the repository at this point in the history 
Update the Amazon, Calendly, Google Calendar, and OpenTable blocks to use the withNotices HOC instead of manually handling the error notices.
  • Loading branch information
@Copons
Copons authored Mar 5, 2020
1 parent 7988d52 commit 76ab061
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 80 deletions.
16 changes: 6 additions & 10 deletions extensions/blocks/amazon/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ import {
Button,
ExternalLink,
FormTokenField,
Notice,
PanelBody,
Placeholder,
ToggleControl,
withNotices,
} from '@wordpress/components';
import { getBlockDefaultClassName } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
Expand All @@ -32,7 +32,7 @@ import icon from './icon';
import data from './dummy-data';
import './editor.scss';

export default function AmazonEdit( {
function AmazonEdit( {
attributes: {
backgroundColor,
textColor,
Expand All @@ -46,10 +46,10 @@ export default function AmazonEdit( {
},
className,
name,
noticeUI,
setAttributes,
} ) {
const defaultClassName = getBlockDefaultClassName( name );
const notice = false; // TODO

const [ suggestions, setSuggestions ] = useState( [] );
const onInputChange = () => {
Expand Down Expand Up @@ -81,13 +81,7 @@ export default function AmazonEdit( {
label={ __( 'Amazon', 'jetpack' ) }
instructions={ __( 'Search by entering an Amazon product name or ID below.', 'jetpack' ) }
icon={ <BlockIcon icon={ icon } /> }
notices={
notice && (
<Notice status="error" isDismissible={ false }>
{ notice }
</Notice>
)
}
notices={ noticeUI } // TODO
>
<form>
<FormTokenField
Expand Down Expand Up @@ -255,3 +249,5 @@ export default function AmazonEdit( {
</div>
);
}

export default withNotices( AmazonEdit );
38 changes: 20 additions & 18 deletions extensions/blocks/calendly/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
Placeholder,
ToggleControl,
Toolbar,
withNotices,
} from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
Expand All @@ -34,8 +35,16 @@ import SubmitButton from '../../shared/submit-button';
import { getAttributesFromEmbedCode } from './utils';
import BlockStylesSelector from '../../shared/components/block-styles-selector';

export default function CalendlyEdit( props ) {
const { attributes, name, className, clientId, setAttributes } = props;
function CalendlyEdit( props ) {
const {
attributes,
className,
clientId,
name,
noticeOperations,
noticeUI,
setAttributes,
} = props;
const defaultClassName = getBlockDefaultClassName( name );
const validatedAttributes = getValidatedAttributes( attributeDetails, attributes );

Expand All @@ -53,17 +62,13 @@ export default function CalendlyEdit( props ) {
url,
} = validatedAttributes;
const [ embedCode, setEmbedCode ] = useState( '' );
const [ notice, setNotice ] = useState();

const setErrorNotice = () =>
setNotice(
<>
{ __(
"Your calendar couldn't be embedded. Please double check your URL or code.",
'jetpack'
) }
</>
const setErrorNotice = () => {
noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice(
__( "Your calendar couldn't be embedded. Please double check your URL or code.", 'jetpack' )
);
};

const parseEmbedCode = event => {
if ( ! event ) {
Expand All @@ -82,6 +87,7 @@ export default function CalendlyEdit( props ) {
const newValidatedAttributes = getValidatedAttributes( attributeDetails, newAttributes );

setAttributes( newValidatedAttributes );
noticeOperations.removeAllNotices();
};

const embedCodeForm = (
Expand Down Expand Up @@ -114,13 +120,7 @@ export default function CalendlyEdit( props ) {
label={ __( 'Calendly', 'jetpack' ) }
instructions={ __( 'Enter your Calendly web address or embed code below.', 'jetpack' ) }
icon={ <BlockIcon icon={ icon } /> }
notices={
notice && (
<Notice status="error" isDismissible={ false }>
{ notice }
</Notice>
)
}
notices={ noticeUI }
>
{ embedCodeForm }
</Placeholder>
Expand Down Expand Up @@ -267,3 +267,5 @@ export default function CalendlyEdit( props ) {
</div>
);
}

export default withNotices( CalendlyEdit );
42 changes: 19 additions & 23 deletions extensions/blocks/google-calendar/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ import {
Placeholder,
SandBox,
Button,
Notice,
ExternalLink,
PanelBody,
withNotices,
} from '@wordpress/components';
import { compose } from '@wordpress/compose';
import { BlockIcon, InspectorControls } from '@wordpress/block-editor';
import { withViewportMatch } from '@wordpress/viewport';
import { getBlockDefaultClassName } from '@wordpress/blocks';
Expand All @@ -36,7 +37,6 @@ class GoogleCalendarEdit extends Component {
editedEmbed: this.props.attributes.url || '',
editingUrl: false,
interactive: false,
notice: null,
};
}

Expand Down Expand Up @@ -64,6 +64,7 @@ class GoogleCalendarEdit extends Component {
if ( event ) {
event.preventDefault();
}
const { noticeOperations, setAttributes } = this.props;
const { editedEmbed } = this.state;
const embedString = editedEmbed.trim();
let attributes;
Expand All @@ -77,21 +78,19 @@ class GoogleCalendarEdit extends Component {
}

if ( ! URL_REGEX.test( attributes.url ) ) {
this.setErrorNotice();
noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice(
__(
"Your calendar couldn't be embedded. Please double check your URL or Embed Code. Please note, you need to use the 'Public URL' or 'Embed Code', the 'Shareable Link' will not work.",
'jetpack'
)
);
return;
}

this.props.setAttributes( attributes );
this.setState( { editingUrl: false, notice: null } );
};

setErrorNotice = () => {
this.setState( {
notice: __(
"Your calendar couldn't be embedded. Please double check your URL or Embed Code. Please note, you need to use the 'Public URL' or 'Embed Code', the 'Shareable Link' will not work.",
'jetpack'
),
} );
setAttributes( attributes );
this.setState( { editingUrl: false } );
noticeOperations.removeAllNotices();
};

getEditForm = ( className, editedEmbed ) => {
Expand All @@ -117,7 +116,7 @@ class GoogleCalendarEdit extends Component {
* @returns {object} The UI displayed when user edits this block.
*/
render() {
const { attributes, className, name } = this.props;
const { attributes, className, name, noticeUI } = this.props;
const defaultClassName = getBlockDefaultClassName( name );
const { url } = attributes;
const { editedEmbed, interactive, editingUrl } = this.state;
Expand Down Expand Up @@ -166,13 +165,7 @@ class GoogleCalendarEdit extends Component {
</li>
</ol>
}
notices={
this.state.notice && (
<Notice status="error" isDismissible={ false }>
{ this.state.notice }
</Notice>
)
}
notices={ noticeUI }
>
{ this.getEditForm( `${ defaultClassName }-embed-form-editor`, editedEmbed ) }
<div className={ `${ defaultClassName }-placeholder-links` }>
Expand Down Expand Up @@ -205,4 +198,7 @@ class GoogleCalendarEdit extends Component {
}
}

export default withViewportMatch( { isMobile: '< small' } )( GoogleCalendarEdit );
export default compose(
withNotices,
withViewportMatch( { isMobile: '< small' } )
)( GoogleCalendarEdit );
11 changes: 3 additions & 8 deletions extensions/blocks/google-calendar/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,22 @@
*/

.wp-block-jetpack-google-calendar {

&-embed-form-sidebar {
textarea {
width: 100%;
height: 75px;
};
}
button {
margin-top: 8px;
display: block;
};
}
}

&-embed-form-editor {
textarea {
height: 36px;
padding-top: 9px;
};
}
}

&-placeholder-links {
Expand Down Expand Up @@ -47,8 +46,4 @@
margin: 0px 0px 19px 0px;
}
}

.components-notice {
margin: 0 0 20px 0;
}
}
46 changes: 25 additions & 21 deletions extensions/blocks/opentable/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,13 @@ import {
} from '@wordpress/block-editor';
import {
ExternalLink,
Notice,
PanelBody,
Placeholder,
SelectControl,
ToggleControl,
Toolbar,
withNotices,
} from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { getBlockDefaultClassName } from '@wordpress/blocks';

Expand All @@ -46,7 +45,15 @@ import {
import { getValidatedAttributes } from '../../shared/get-validated-attributes';
import { getAttributesFromEmbedCode } from './utils';

export default function OpenTableEdit( { attributes, setAttributes, name, className, clientId } ) {
function OpenTableEdit( {
attributes,
className,
clientId,
name,
noticeOperations,
noticeUI,
setAttributes,
} ) {
const defaultClassName = getBlockDefaultClassName( name );
const validatedAttributes = getValidatedAttributes( defaultAttributes, attributes );

Expand All @@ -55,25 +62,26 @@ export default function OpenTableEdit( { attributes, setAttributes, name, classN
}

const { align, rid, style, iframe, domain, lang, newtab } = attributes;
const [ notice, setNotice ] = useState();

const setErrorNotice = () =>
setNotice(
<>
<strong>{ __( 'We ran into an issue', 'jetpack' ) }</strong>
<br />
{ __( 'Please ensure this embed matches the one from your OpenTable account', 'jetpack' ) }
</>
);

const parseEmbedCode = embedCode => {
const newAttributes = getAttributesFromEmbedCode( embedCode );
if ( ! newAttributes ) {
setErrorNotice();
noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice(
<>
<strong>{ __( 'We ran into an issue', 'jetpack' ) }</strong>
<br />
{ __(
'Please ensure this embed matches the one from your OpenTable account',
'jetpack'
) }
</>
);
}

const validatedNewAttributes = getValidatedAttributes( defaultAttributes, newAttributes );
setAttributes( validatedNewAttributes );
noticeOperations.removeAllNotices();
};

const styleOptions = getStyleOptions( rid );
Expand Down Expand Up @@ -200,13 +208,7 @@ export default function OpenTableEdit( { attributes, setAttributes, name, classN
'Enter your restaurant name, or paste an OpenTable Reservation Widget embed code.',
'jetpack'
) }
notices={
notice && (
<Notice status="error" isDismissible={ false }>
{ notice }
</Notice>
)
}
notices={ noticeUI }
>
<RestaurantPicker rids={ rid } onSubmit={ onPickerSubmit } />
<div className={ `${ defaultClassName }-placeholder-links` }>
Expand Down Expand Up @@ -236,3 +238,5 @@ export default function OpenTableEdit( { attributes, setAttributes, name, classN
</div>
);
}

export default withNotices( OpenTableEdit );

0 comments on commit 76ab061

Please sign in to comment.