Skip to content

Commit

Permalink
Refactor Spreadsheet block to use hydration (#1102)
Browse files Browse the repository at this point in the history 
This is to stop using the deprecated frontendRendered function
  • Loading branch information
@mleray
mleray authored Oct 19, 2023
1 parent 4f49948 commit 056f995
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 312 deletions.
42 changes: 30 additions & 12 deletions assets/src/blocks/Spreadsheet/SpreadsheetBlock.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,46 @@
import {SpreadsheetEditor} from './SpreadsheetEditorScript';
import {SpreadsheetEditor} from './SpreadsheetEditor';
import {CSS_VARIABLES_ATTRIBUTE} from '../CssVariablesAttribute';
import {frontendRendered} from '../frontendRendered';
import {SpreadsheetFrontend} from './SpreadsheetFrontend';
import {renderToString} from 'react-dom/server';

const BLOCK_NAME = 'planet4-blocks/spreadsheet';

const attributes = {
url: {
type: 'string',
default: '',
},
color: {
type: 'string',
default: 'grey',
},
};

export const registerSpreadsheetBlock = () => {
const {registerBlockType} = wp.blocks;
const {RawHTML} = wp.element;

registerBlockType(BLOCK_NAME, {
title: 'Spreadsheet',
icon: 'editor-table',
category: 'planet4-blocks',
attributes: {
url: {
type: 'string',
default: '',
},
color: {
type: 'string',
default: 'grey',
},
attributes,
edit: SpreadsheetEditor,
save: props => {
const markup = renderToString(<div
data-hydrate={BLOCK_NAME}
data-attributes={JSON.stringify(props.attributes)}
>
<SpreadsheetFrontend {...props.attributes} />
</div>);
return <RawHTML>{markup}</RawHTML>;
},
deprecated: [
{
attributes,
save: frontendRendered(BLOCK_NAME),
},
{
attributes: {
url: {
Expand All @@ -34,7 +54,5 @@ export const registerSpreadsheetBlock = () => {
},
},
],
edit: SpreadsheetEditor,
save: frontendRendered(BLOCK_NAME),
});
};
117 changes: 117 additions & 0 deletions assets/src/blocks/Spreadsheet/SpreadsheetEditor.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import {useState} from '@wordpress/element';
import {InspectorControls} from '@wordpress/block-editor';
import ColorPaletteControl from '../../components/ColorPaletteControl/ColorPaletteControl';
import {SpreadsheetFrontend} from './SpreadsheetFrontend';
import {debounce} from 'lodash';
import {TextControl, PanelBody} from '@wordpress/components';

const isNewIdentity = window.p4ge_vars.planet4_options.new_identity_styles || false;

const {__} = wp.i18n;

let colors = [
{name: 'blue', color: '#c9e7fa'},
{name: 'green', color: '#d0fac9'},
{name: 'grey', color: '#ececec'},
];

if (isNewIdentity) {
colors = [
{name: 'blue', color: '#167f82'},
{name: 'green', color: '#1f4912'},
{name: 'grey', color: '#45494c'},
{name: 'gp-green', color: '#198700'},
];
}

export const SpreadsheetEditor = ({
attributes,
setAttributes,
isSelected,
}) => {
const [invalidSheetId, setInvalidSheetId] = useState(false);
const [url, setUrl] = useState(attributes.url);

const debounceUrl = debounce(newUrl => {
setAttributes({url: newUrl});
}, 300);

const toColorName = code => colors.find(color => color.color === code)?.name || 'grey';

const toColorCode = name => colors.find(color => color.name === name)?.color || '#ececec';

const renderEdit = () => (
<>
<InspectorControls>
<PanelBody title={__('Settings', 'planet4-blocks-backend')}>
<ColorPaletteControl
label={__('Table Color', 'planet4-blocks-backend')}
value={toColorCode(attributes.color)}
onChange={value => setAttributes({color: toColorName(value)})}
disableCustomColors
clearable={false}
options={colors}
/>
<TextControl
label={__('Spreadsheet URL', 'planet4-blocks-backend')}
placeholder={__('Enter Google Spreadsheet URL', 'planet4-blocks-backend')}
value={url}
onChange={newUrl => {
setUrl(newUrl);
debounceUrl(newUrl);
}}
/>
<div className="sidebar-blocks-help">
<ul>
<li>
{/* eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace, no-restricted-syntax */}
{ __(`From Your Google Spreadsheet Table choose File -> Publish on web.
No need to choose the output format, any of them will work.
A pop-up window will show up, click on the Publish button and then OK when the confirmation message is displayed.
Copy the URL that is highlighted and paste it in this block.`, 'planet4-blocks-backend') }
</li>
<li>
{/* eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace, no-restricted-syntax */}
{ __(`If you make changes to the sheet after publishing
then these changes do not always immediately get reflected,
even when "Automatically republish when changes are made" is checked.`, 'planet4-blocks-backend') }
</li>
<li>
{/* eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace, no-restricted-syntax */}
{ __(`You can force an update by unpublishing and republishing the sheet.
This will not change the sheet's public url.`, 'planet4-blocks-backend') }
</li>
</ul>
</div>
</PanelBody>
</InspectorControls>
</>
);

const renderView = () => (
<>
{!attributes.url ?
<div className="block-edit-mode-warning components-notice is-warning">
{ __('No URL has been specified. Please edit the block and provide a Spreadsheet URL using the sidebar.', 'planet4-blocks-backend') }
</div> :
null
}

{attributes.url && invalidSheetId ?
<div className="block-edit-mode-warning components-notice is-error">
{ __('The Spreadsheet URL appears to be invalid.', 'planet4-blocks-backend') }
</div> :
null
}

<SpreadsheetFrontend {...attributes} setInvalidSheetId={setInvalidSheetId} />
</>
);

return (
<>
{isSelected ? renderEdit() : null}
{renderView()}
</>
);
};
147 changes: 2 additions & 145 deletions assets/src/blocks/Spreadsheet/SpreadsheetEditorScript.js
View file
Original file line number Diff line number Diff line change
@@ -1,146 +1,3 @@
import {Component, Fragment} from '@wordpress/element';
import {InspectorControls} from '@wordpress/block-editor';
import ColorPaletteControl from '../../components/ColorPaletteControl/ColorPaletteControl';
import {registerSpreadsheetBlock} from './SpreadsheetBlock';

import {debounce} from 'lodash';

const isNewIdentity = window.p4ge_vars.planet4_options.new_identity_styles || false;

const {__} = wp.i18n;

import {
TextControl,
PanelBody,
} from '@wordpress/components';

import {SpreadsheetFrontend} from './SpreadsheetFrontend';

let colors = [
{name: 'blue', color: '#c9e7fa'},
{name: 'green', color: '#d0fac9'},
{name: 'grey', color: '#ececec'},
];

if (isNewIdentity) {
colors = [
{name: 'blue', color: '#167f82'},
{name: 'green', color: '#1f4912'},
{name: 'grey', color: '#45494c'},
{name: 'gp-green',color: '#198700'},
];
}

export class SpreadsheetEditor extends Component {
constructor(props) {
super(props);
this.handleErrors = this.handleErrors.bind(this);
this.state = {
invalidSheetId: false,
errorFetchingSpreadsheet: false,
url: props.attributes.url,
};

this.debounceSearch = debounce(url => {
this.props.setAttributes({url});
}, 300);

this.debounceSearch = this.debounceSearch.bind(this);
}

handleErrors(errors) {
this.setState(errors);
}

renderEdit() {
const {attributes, setAttributes} = this.props;

const toColorName = code => colors.find(color => color.color === code)?.name || 'grey';

const toColorCode = name => colors.find(color => color.name === name)?.color || '#ececec';

return (
<Fragment>
<InspectorControls>
<PanelBody title={__('Settings', 'planet4-blocks-backend')}>
<ColorPaletteControl
label={__('Table Color', 'planet4-blocks-backend')}
value={toColorCode(attributes.color)}
onChange={value => setAttributes({color: toColorName(value)})}
disableCustomColors
clearable={false}
options={colors}
/>
<TextControl
label={__('Spreadsheet URL', 'planet4-blocks-backend')}
placeholder={__('Enter Google Spreadsheet URL', 'planet4-blocks-backend')}
value={this.state.url}
onChange={url => {
this.setState({url});
this.debounceSearch(url);
}}
/>
<div className="sidebar-blocks-help">
<ul>
<li>
{/* eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace, no-restricted-syntax */}
{ __(`From Your Google Spreadsheet Table choose File -> Publish on web.
No need to choose the output format, any of them will work.
A pop-up window will show up, click on the Publish button and then OK when the confirmation message is displayed.
Copy the URL that is highlighted and paste it in this block.`, 'planet4-blocks-backend') }
</li>
<li>
{/* eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace, no-restricted-syntax */}
{ __(`If you make changes to the sheet after publishing
then these changes do not always immediately get reflected,
even when "Automatically republish when changes are made" is checked.`, 'planet4-blocks-backend') }
</li>
<li>
{/* eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace, no-restricted-syntax */}
{ __(`You can force an update by unpublishing and republishing the sheet.
This will not change the sheet's public url.`, 'planet4-blocks-backend') }
</li>
</ul>
</div>
</PanelBody>
</InspectorControls>
</Fragment>
);
}

renderView() {
const {attributes} = this.props;

return <Fragment>
{
!attributes.url ?
<div className="block-edit-mode-warning components-notice is-warning">
{ __('No URL has been specified. Please edit the block and provide a Spreadsheet URL using the sidebar.', 'planet4-blocks-backend') }
</div> :
null
}

{
attributes.url && this.state.invalidSheetId ?
<div className="block-edit-mode-warning components-notice is-error">
{ __('The Spreadsheet URL appears to be invalid.', 'planet4-blocks-backend') }
</div> :
null
}

<SpreadsheetFrontend {...attributes} handleErrors={this.handleErrors} />
</Fragment>;
}

render() {
return (
<Fragment>
{
this.props.isSelected ?
this.renderEdit() :
null
}
{ this.renderView() }
</Fragment>
);
}
}
registerSpreadsheetBlock();
Loading

0 comments on commit 056f995

Please sign in to comment.