Fix Nav Block bug as Contributor user via fix to `*loadPostTypeEntiti…

…es` (#18669) * Utilise view context to ensure access to all post types. * Allow context to be overidden in query args * Set Nav to use “view” REST API context * Revert "Utilise view context to ensure access to all post types." This reverts commit 83ff2c8. * Revert "Allow context to be overidden in query args" This reverts commit f800f86. * Revert "Set Nav to use “view” REST API context" This reverts commit d77bd46. * Initial naive refactor to use apiFetch directly. * Improves handling of API request and adds comments * Fix errors from conflict solving. * lint * Extracted fetch hook * Added jsdoc * Change API pattern. * Clean up booleans and conditions * Move hook to api-fetch package * Attach hook to default export * Reset state before fetching, don't guess data type Co-authored-by: tellthemachines <isabel@tellthemachines.com>
WordPress · Apr 1, 2020 · f2b6778 · f2b6778
1 parent 3425305
commit f2b6778
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
@@ -23,6 +23,7 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.8.3",
+		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/url": "file:../url"
 	},

diff --git a/packages/api-fetch/src/index.js b/packages/api-fetch/src/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -156,6 +157,42 @@ function apiFetch( options ) {
 	} );
 }
 
+/**
+ * Function that fetches data using apiFetch, and updates the status.
+ *
+ * @param {string} path Query path.
+ */
+function useApiFetch( path ) {
+	// Indicate the fetching status
+	const [ isLoading, setIsLoading ] = useState( true );
+	const [ data, setData ] = useState( null );
+	const [ error, setError ] = useState( null );
+
+	useEffect( () => {
+		setIsLoading( true );
+		setData( null );
+		setError( null );
+
+		apiFetch( { path } )
+			.then( ( fetchedData ) => {
+				setData( fetchedData );
+				// We've stopped fetching
+				setIsLoading( false );
+			} )
+			.catch( ( err ) => {
+				setError( err );
+				// We've stopped fetching
+				setIsLoading( false );
+			} );
+	}, [ path ] );
+
+	return {
+		isLoading,
+		data,
+		error,
+	};
+}
+
 apiFetch.use = registerMiddleware;
 apiFetch.setFetchHandler = setFetchHandler;
 
@@ -165,4 +202,6 @@ apiFetch.createRootURLMiddleware = createRootURLMiddleware;
 apiFetch.fetchAllMiddleware = fetchAllMiddleware;
 apiFetch.mediaUploadMiddleware = mediaUploadMiddleware;
 
+apiFetch.useApiFetch = useApiFetch;
+
 export default apiFetch;
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -32,7 +32,8 @@ import {
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { menu } from '@wordpress/icons';
-
+import { addQueryArgs } from '@wordpress/url';
+import { useApiFetch } from '@wordpress/api-fetch';
 /**
  * Internal dependencies
  */
@@ -46,9 +47,6 @@ function Navigation( {
 	clientId,
 	fontSize,
 	hasExistingNavItems,
-	hasResolvedPages,
-	isRequestingPages,
-	pages,
 	setAttributes,
 	setFontSize,
 	updateNavItemBlocks,
@@ -57,10 +55,10 @@ function Navigation( {
 	//
 	// HOOKS
 	//
-	/* eslint-disable @wordpress/no-unused-vars-before-return */
 	const ref = useRef();
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 
+	/* eslint-disable @wordpress/no-unused-vars-before-return */
 	const {
 		TextColor,
 		BackgroundColor,
@@ -86,15 +84,37 @@ function Navigation( {
 		},
 		[ fontSize.size ]
 	);
-
 	/* eslint-enable @wordpress/no-unused-vars-before-return */
+
 	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
 		clientId
 	);
 
+	const baseUrl = '/wp/v2/pages';
+
+	// "view" is required to ensure Pages are returned by REST API
+	// for users with lower capabilities such as "Contributor" otherwise
+	// Pages are not returned in the request if "edit" context is set
+	const context = 'view';
+
+	const filterDefaultPages = {
+		parent: 0,
+		order: 'asc',
+		orderby: 'id',
+		context,
+	};
+
+	const queryPath = addQueryArgs( baseUrl, filterDefaultPages );
+
+	const { isLoading: isRequestingPages, data: pages } = useApiFetch(
+		queryPath
+	);
+
+	const hasPages = !! pages;
+
 	// Builds navigation links from default Pages.
 	const defaultPagesNavigationItems = useMemo( () => {
-		if ( ! pages ) {
+		if ( ! hasPages ) {
 			return null;
 		}
 
@@ -134,8 +154,6 @@ function Navigation( {
 		selectBlock( clientId );
 	}
 
-	const hasPages = hasResolvedPages && pages && pages.length;
-
 	const blockClassNames = classnames( className, {
 		[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 		[ fontSize.class ]: fontSize.class,
@@ -294,31 +312,8 @@ export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const innerBlocks = select( 'core/block-editor' ).getBlocks( clientId );
 
-		const filterDefaultPages = {
-			parent: 0,
-			order: 'asc',
-			orderby: 'id',
-		};
-
-		const pagesSelect = [
-			'core',
-			'getEntityRecords',
-			[ 'postType', 'page', filterDefaultPages ],
-		];
-
 		return {
 			hasExistingNavItems: !! innerBlocks.length,
-			pages: select( 'core' ).getEntityRecords(
-				'postType',
-				'page',
-				filterDefaultPages
-			),
-			isRequestingPages: select( 'core/data' ).isResolving(
-				...pagesSelect
-			),
-			hasResolvedPages: select( 'core/data' ).hasFinishedResolution(
-				...pagesSelect
-			),
 		};
 	} ),
 	withDispatch( ( dispatch, { clientId } ) => {