Merge pull request #86 from xwp/update/gutenberg-changes

Update the blocks to the latest version of Gutenberg
xwp · Apr 3, 2019 · 42381c7 · 42381c7
2 parents 51bbdf5 + 4ce2b7f
commit 42381c7
Show file tree

Hide file tree

Showing 13 changed files with 148 additions and 306 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -36,8 +36,8 @@ env:
   - WP_VERSION=trunk WP_MULTISITE=1
 
 install:
-  - npm install
-  - export DEV_LIB_PATH=node_modules/wp-dev-lib
+  - composer install
+  - export DEV_LIB_PATH=vendor/xwp/wp-dev-lib/scripts
   - source $DEV_LIB_PATH/travis.install.sh
 
 script:

diff --git a/assets/css/editor-blocks.css b/assets/css/editor-blocks.css
diff --git a/blocks/activity-list/index.js b/blocks/activity-list/index.js
@@ -1,83 +1,56 @@
-// jscs:disable disallowMultipleLineStrings
-// jscs:disable validateQuoteMarks
 /* eslint-disable space-in-parens */
 
 /**
  * Internal block libraries.
  */
+const { registerBlockType } = wp.blocks;
+const { InspectorControls } = wp.editor;
+const { Disabled, ServerSideRender, TextControl, PanelBody } = wp.components;
+const { Fragment } = wp.element;
 const { __ } = wp.i18n;
-const { registerBlockType, InspectorControls } = wp.blocks;
-const { Placeholder, withAPIData, TextControl, PanelBody } = wp.components;
-const { RawHTML } = wp.element;
-const { decodeEntities } = wp.utils;
+
+const blockName = 'amp-travel/activity-list';
 
 /**
  * Register block.
  */
 export default registerBlockType(
-	'amp-travel/activity-list',
+	blockName,
 	{
-		title: __( 'Activity list' ),
+		title: __( 'Activity list', 'travel' ),
 		category: 'common',
 		icon: 'tickets',
 		keywords: [
-			__( 'Browse activities' ),
-			__( 'Travel' )
+			__( 'Browse activities', 'travel' ),
+			__( 'Travel', 'travel' )
 		],
 
-		edit: withAPIData( () => {
-			return {
-				activityResults: '/wp/v2/activities'
-			};
-		} )( ( { activityResults, isSelected, setAttributes, attributes: { heading } } ) => {
-			const hasActivities = Array.isArray( activityResults.data ) && activityResults.data.length;
-			if ( ! hasActivities ) {
-				return (
-					<Placeholder key="placeholder" icon="admin-post" label={ __( 'Activities' ) }
-					>
-						{ __( 'No activities found, add some to use the block.' ) }
-					</Placeholder>
-				);
-			}
-
-			const activities = activityResults.data;
+		edit( { attributes, isSelected, setAttributes } ) {
+			const { heading } = attributes;
 
 			return [
 				isSelected && (
-					<InspectorControls key='inspector'>
-						<PanelBody title={ __( 'Activity List settings' ) }>
+					<InspectorControls key="activity-inspector">
+						<PanelBody title={ __( 'Activity List settings', 'travel' ) }>
 							<TextControl
-								label={ __( 'Activity List Header' ) }
+								label={ __( 'Activity List Header', 'travel' ) }
 								value={ heading }
 								onChange={ ( value ) => setAttributes( { heading: value } ) }
 							/>
 						</PanelBody>
 					</InspectorControls>
 				),
-				<section key='activities' className='travel-activities pb4 pt3 relative'>
-					<div className='max-width-3 mx-auto px1 md-px2'>
-						<h3 className='center bold h1 line-height-2'>{ heading }</h3>
-					</div>
-					<div className='travel-overflow-container'>
-						<div className='justify-center flex flex-wrap flex-auto p1 md-px1 mxn1'>
-							{ activities.map( ( activity, i ) =>
-								<a key='activity' href={ activity.link } className={ 'travel-activities-activity mx1 travel-type-' + activity.slug } target="_blank">
-									<div className='travel-shadow circle inline-block'>
-										<div className='travel-activities-activity-icon'>
-											<RawHTML key='html'>{ decodeEntities( activity.svg ) }</RawHTML>
-											<RawHTML key='html'>{ decodeEntities( activity.meta.amp_travel_activity_svg ) }</RawHTML>
-										</div>
-									</div>
-									<p className='bold center line-height-4'>
-										{ activity.name }
-									</p>
-								</a>
-							) }
-						</div>
-					</div>
-				</section>
+				<Fragment key="activity-ssr">
+					<Disabled>
+						<ServerSideRender
+							block={ blockName }
+							attributes={ attributes }
+						/>
+					</Disabled>
+				</Fragment>
 			];
-		} ),
+		},
+
 		save() {
 
 			// Handled in PHP.

diff --git a/blocks/discover/index.js b/blocks/discover/index.js
@@ -3,83 +3,63 @@
 /**
  * Internal block libraries.
  */
+const { registerBlockType } = wp.blocks;
+const { TextControl, PanelBody, ServerSideRender } = wp.components;
+const { InspectorControls } = wp.editor;
+const { Fragment } = wp.element;
 const { __ } = wp.i18n;
-const { registerBlockType, InspectorControls } = wp.blocks;
-const { withAPIData, TextControl, PanelBody } = wp.components;
-const { RawHTML } = wp.element;
-const { decodeEntities }  = wp.utils;
+
+const blockName = 'amp-travel/discover';
 
 /**
  * Register block.
  */
 export default registerBlockType(
-	'amp-travel/discover',
+	blockName,
 	{
 		title: __( 'Discover block' ),
 		category: 'common',
 		icon: 'palmtree',
 		keywords: [
-			__( 'Adventures' ),
-			__( 'Travel' )
+			__( 'Adventures', 'travel' ),
+			__( 'Travel', 'travel' )
 		],
 
-		edit: withAPIData( () => {
-			return {
-				posts: '/wp/v2/posts?per_page=1'
-			};
-		} )( ( { posts, isSelected, setAttributes, attributes: { heading, subheading } } ) => {
-			if ( ! posts.data ) {
-				return __( 'Loading...' );
-			}
-
-			const content = 0 === posts.data.length ?
-				(
-					<div className='travel-discover-panel travel-shadow-hover px3 py2 ml1 mr3 myn3'>
-						<div>{ __( 'No posts found, add some to use the block.' ) }</div>
-					</div> ) :
-				(
-					<div className='travel-discover-panel travel-shadow-hover px3 py2 ml1 myn3'>
-						<div className='bold h2 line-height-2 my1'>{ posts.data[0].title.rendered }</div>
-						<p className='travel-discover-panel-subheading h3 my1 line-height-2'>
-							<RawHTML key='html'>{ decodeEntities( posts.data[0].excerpt.rendered ) }</RawHTML>
-						</p>
-						<p className='my1'>
-							<a className='travel-link' href={ posts.data[0].link }>{ __( 'Read more' ) }</a>
-						</p>
-					</div>
-				);
+		edit: ( { isSelected, setAttributes, attributes } ) => {
+			const { heading, subheading } = attributes;
 
 			return [
 				isSelected && (
-					<InspectorControls key='inspector'>
-						<PanelBody title={ __( 'Discover block settings' ) }>
+					<InspectorControls key="discover-inspector">
+						<PanelBody title={ __( 'Discover block settings', 'travel' ) }>
 							<TextControl
-								label={ __( 'Discover Header' ) }
+								label={ __( 'Discover Header', 'travel' ) }
 								value={ heading }
-								onChange={ ( value ) => setAttributes( { heading: value } ) }
+								onChange={ ( value ) => {
+									setAttributes( { heading: value } );
+								} }
 							/>
 							<TextControl
-								label={ __( 'Discover Sub-heading' ) }
+								label={ __( 'Discover Sub-heading', 'travel' ) }
 								value={ subheading }
-								onChange={ ( value ) => setAttributes( { subheading: value } ) }
+								onChange={ ( value ) => {
+									setAttributes( { subheading: value } );
+								} }
 							/>
 						</PanelBody>
 					</InspectorControls>
 				),
-				<section key='discover' className='travel-discover py4 mb3 relative'>
-					<div className='max-width-3 mx-auto'>
-						<div className='flex justify-between items-center'>
-							<header>
-								<h2 className='travel-discover-heading bold line-height-2 xs-hide sm-hide'>{ heading }</h2>
-								<div className='travel-discover-subheading h2 xs-hide sm-hide'>{ subheading }</div>
-							</header>
-							{ content }
-						</div>
-					</div>
-				</section>
+
+				<Fragment key="discover-ssr">
+					<ServerSideRender
+						block={ blockName }
+						attributes={ attributes }
+					/>
+				</Fragment>
 			];
-		} ),
-		save() {
+		},
+
+		save: () => {
 
 			// Render in PHP.
 			return null;