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.

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

Add Gutenberg v. 3.5+ support #64

Closed
jomurgel opened this issue Sep 10, 2018 · 3 comments · Fixed by #72
Closed

Add Gutenberg v. 3.5+ support #64

jomurgel opened this issue Sep 10, 2018 · 3 comments · Fixed by #72
Labels
hacktoberfest in progress Issue is in the works

Comments

@jomurgel
Copy link
Contributor

Gutenberg v. 3.5+ breaks some blocks. Needs testing and updates for all blocks.

@efuller
Copy link
Contributor

efuller commented Sep 11, 2018

I started looking into this today.

I pushed a branch, but no commits as of yet: https://github.com/WebDevStudios/WDS-Blocks/tree/feature/%2364-support-for-3-7-0

I upgraded my local Gutenberg to 3.7.0.

The image and video background options do not work globally. There is no button being supplied to upload/set a file:

https://d.pr/i/Z1YHio

https://d.pr/i/98mBHY

Other than the issue above, the following blocks look to be in working order:

  • Call to action
  • Default
  • Github Gist
  • Hero

The rest of the blocks do not seems to show up for selection. This is most likely due to some console errors.

It looks like withAPIData has been deprecated. As best I can tell, we will now need to use withSelect. You can find documentation on it here:

https://wordpress.org/gutenberg/handbook/blocks/creating-dynamic-blocks/
WordPress/gutenberg#7390 ( for more context )

@efuller efuller added the in progress Issue is in the works label Sep 11, 2018
@jomurgel
Copy link
Contributor Author

Pushed branch: feature/#64-gutenberg-3.9.0-fixes which contains the following updates for 3.7+ (tested on 3.9).

All blocks (except Users Grid, notes below) work now as expected in 3.9. A few items deprecating in 4.0, but I think all of those potential issues are already resolved as of now.

Changed

  • Removed all deprecated instances of withAPIData and replaced with new withSelect option for pulling posts. Resolves issue with related/recent posts block.

Added

  • Added custom block category WDS Blocks and housed all blocks under that heading.
    screenshot 2018-09-21 14 18 11

Updated

  • General data validation updates.
  • Cleans up some outputs.

Pending

The one block I can't get working at this moment is the user grid block. It uses the same post-renderer.js partial that the Related Posts block uses, but I think the issue might be around the way we're pulling in the post object by user of the getEntityRecords function inside the select.core

This works fine with posts and there's another option for categories getEntityRecords( 'taxonomy', 'categories' ) for example, but it doesn't appear that anything I try for users eg. getEntityRecords( 'postType', 'users' ) returns anything. Since there's a lack of WP team documentation we just have to track down how this is being used and/or if it works with users at all.

There is a getUserQueryResults function which takes in state and queryID, but I wasn't able to get that working either, again potentially because of lack of documentation.

@jomurgel
Copy link
Contributor Author

I reworked the withSelect to just make use of the apiFetch function to make the requests which work for both the users and posts. However, it's returning a promise to the selectedResults that I cannot resolve.

screenshot 2018-09-21 16 25 54

export default withSelect( ( select, props ) => {
	const { posts } = props;

	if ( undefined !== posts && '[]' !== posts ) {
		const selectedResultsQuery = JSON.parse( posts ).map( item => {
			return `include[]=${ item.id }&orderby=include`;
		} );

		if ( 0 < selectedResultsQuery.length ) {
			const selectedResultsFilter = selectedResultsQuery.join( '&' );

			const selectedResults = apiFetch( { path: `/wp/v2/${ props.attributes.queryFor }?_embed&${ selectedResultsFilter }&orderby=include` } )
				.then( ( response ) => {
					if ( response ) {
						return response;
					}
				} )
				.catch( ( error ) => console.log( error ) /* eslint-disable-line */ );

			return {
				selectedResults: selectedResults,
			};
		}
	}
} )( PostRenderer );

I can't tell if it's a result of withSelect or and issue with my promise. Going to have to look into this more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
hacktoberfest in progress Issue is in the works
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants