Chrome: Hide several Sidebar Panels if the CPT doesn't support it

editor/components/index.js

@@ -15,6 +15,7 @@ export { default as PostComments } from './post-comments';
 export { default as PostExcerpt } from './post-excerpt';
 export { default as PostExcerptCheck } from './post-excerpt/check';
 export { default as PostFeaturedImage } from './post-featured-image';
+export { default as PostFeaturedImageCheck } from './post-featured-image/check';
 export { default as PostFormat } from './post-format';
 export { default as PostFormatCheck } from './post-format/check';
 export { default as PostLastRevision } from './post-last-revision';
@@ -38,6 +39,7 @@ export { default as PostTextEditorToolbar } from './post-text-editor/toolbar';
 export { default as PostTitle } from './post-title';
 export { default as PostTrash } from './post-trash';
 export { default as PostTrashCheck } from './post-trash/check';
+export { default as PostTypeSupportCheck } from './post-type-support-check';
 export { default as PostVisibility } from './post-visibility';
 export { default as PostVisibilityLabel } from './post-visibility/label';
 export { default as TableOfContents } from './table-of-contents';

editor/components/post-author/check.js

@@ -13,6 +13,7 @@ import { compose } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import PostTypeSupportCheck from '../post-type-support-check';
 import { getCurrentPostType } from '../../store/selectors';
 
 export function PostAuthorCheck( { user, users, children } ) {
@@ -23,7 +24,7 @@ export function PostAuthorCheck( { user, users, children } ) {
 		return null;
 	}
 
-	return children;
+	return <PostTypeSupportCheck supportKeys="author">{ children }</PostTypeSupportCheck>;
 }
 
 const applyConnect = connect(

editor/components/post-excerpt/check.js

@@ -4,7 +4,7 @@
 import PostTypeSupportCheck from '../post-type-support-check';
 
 function PostExcerptCheck( props ) {
-	return <PostTypeSupportCheck { ...props } supportKey="excerpt" />;
+	return <PostTypeSupportCheck { ...props } supportKeys="excerpt" />;
 }
 
 export default PostExcerptCheck;

editor/components/post-featured-image/check.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import PostTypeSupportCheck from '../post-type-support-check';
+
+function PostFeaturedImageCheck( props ) {
+	return <PostTypeSupportCheck { ...props } supportKeys="thumbnail" />;
+}
+
+export default PostFeaturedImageCheck;

editor/components/post-featured-image/index.js

@@ -16,6 +16,7 @@ import { compose } from '@wordpress/element';
  * Internal dependencies
  */
 import './style.scss';
+import PostFeaturedImageCheck from './check';
 import { getCurrentPostType, getEditedPostAttribute } from '../../store/selectors';
 import { editPost } from '../../store/actions';
 
@@ -25,47 +26,50 @@ const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = __( 'Remove featured image' );
 
 function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media, postType } ) {
 	const postLabel = get( postType, 'data.labels', {} );
+
 	return (
-		<div className="editor-post-featured-image">
-			{ !! featuredImageId &&
-				<MediaUploadButton
-					title={ postLabel.set_featured_image }
-					buttonProps={ { className: 'button-link editor-post-featured-image__preview' } }
-					onSelect={ onUpdateImage }
-					type="image"
-				>
-					{ media && !! media.data &&
-						<ResponsiveWrapper
-							naturalWidth={ media.data.media_details.width }
-							naturalHeight={ media.data.media_details.height }
-						>
-							<img src={ media.data.source_url } alt={ __( 'Featured image' ) } />
-						</ResponsiveWrapper>
-					}
-					{ media && media.isLoading && <Spinner /> }
-				</MediaUploadButton>
-			}
-			{ !! featuredImageId && media && ! media.isLoading &&
-				<p className="editor-post-featured-image__howto">
-					{ __( 'Click the image to edit or update' ) }
-				</p>
-			}
-			{ ! featuredImageId &&
-				<MediaUploadButton
-					title={ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
-					buttonProps={ { className: 'editor-post-featured-image__toggle button-link' } }
-					onSelect={ onUpdateImage }
-					type="image"
-				>
-					{ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
-				</MediaUploadButton>
-			}
-			{ !! featuredImageId &&
-				<Button className="editor-post-featured-image__toggle button-link" onClick={ onRemoveImage }>
-					{ postLabel.remove_featured_image || DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
-				</Button>
-			}
-		</div>
+		<PostFeaturedImageCheck>
+			<div className="editor-post-featured-image">
+				{ !! featuredImageId &&
+					<MediaUploadButton
+						title={ postLabel.set_featured_image }
+						buttonProps={ { className: 'button-link editor-post-featured-image__preview' } }
+						onSelect={ onUpdateImage }
+						type="image"
+					>
+						{ media && !! media.data &&
+							<ResponsiveWrapper
+								naturalWidth={ media.data.media_details.width }
+								naturalHeight={ media.data.media_details.height }
+							>
+								<img src={ media.data.source_url } alt={ __( 'Featured image' ) } />
+							</ResponsiveWrapper>
+						}
+						{ media && media.isLoading && <Spinner /> }
+					</MediaUploadButton>
+				}
+				{ !! featuredImageId && media && ! media.isLoading &&
+					<p className="editor-post-featured-image__howto">
+						{ __( 'Click the image to edit or update' ) }
+					</p>
+				}
+				{ ! featuredImageId &&
+					<MediaUploadButton
+						title={ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
+						buttonProps={ { className: 'editor-post-featured-image__toggle button-link' } }
+						onSelect={ onUpdateImage }
+						type="image"
+					>
+						{ postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL }
+					</MediaUploadButton>
+				}
+				{ !! featuredImageId &&
+					<Button className="editor-post-featured-image__toggle button-link" onClick={ onRemoveImage }>
+						{ postLabel.remove_featured_image || DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
+					</Button>
+				}
+			</div>
+		</PostFeaturedImageCheck>
 	);
 }
 

editor/components/post-format/check.js

@@ -1,41 +1,10 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { withAPIData } from '@wordpress/components';
-import { compose } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import { getCurrentPostType } from '../../store/selectors';
+import PostTypeSupportCheck from '../post-type-support-check';
 
-function PostFormatCheck( { postType, children } ) {
-	if ( ! get( postType.data, [ 'supports', 'post-formats' ] ) ) {
-		return null;
-	}
-
-	return children;
+function PostFormatCheck( props ) {
+	return <PostTypeSupportCheck { ...props } supportKeys="post-formats" />;
 }
 
-export default compose( [
-	connect(
-		( state ) => {
-			return {
-				postTypeSlug: getCurrentPostType( state ),
-			};
-		},
-	),
-	withAPIData( ( props ) => {
-		const { postTypeSlug } = props;
-
-		return {
-			postType: `/wp/v2/types/${ postTypeSlug }?context=edit`,
-		};
-	} ),
-] )( PostFormatCheck );
+export default PostFormatCheck;

editor/components/post-last-revision/check.js

@@ -7,13 +7,14 @@ import { connect } from 'react-redux';
  * Internal dependencies
  */
 import { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } from '../../store/selectors';
+import PostTypeSupportCheck from '../post-type-support-check';
 
 export function PostLastRevisionCheck( { lastRevisionId, revisionsCount, children } ) {
 	if ( ! lastRevisionId || revisionsCount < 2 ) {
 		return null;
 	}
 
-	return children;
+	return <PostTypeSupportCheck supportKeys="revisions" >{ children }</PostTypeSupportCheck>;
 }
 
 export default connect(

editor/components/post-last-revision/test/check.js

@@ -36,6 +36,6 @@ describe( 'PostLastRevisionCheck', () => {
 			</PostLastRevisionCheck>
 		);
 
-		expect( wrapper.text() ).toEqual( 'Children' );
+		expect( wrapper.text() ).not.toBe( null );
 	} );
 } );

editor/components/post-type-support-check/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { get } from 'lodash';
+import { get, some, castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,8 +15,10 @@ import { compose } from '@wordpress/element';
  */
 import { getCurrentPostType } from '../../store/selectors';
 
-function PostTypeSupportCheck( { postType, children, supportKey } ) {
-	const isSupported = get( postType, [ 'data', 'supports', supportKey ], false );
+function PostTypeSupportCheck( { postType, children, supportKeys } ) {
+	const isSupported = some(
+		castArray( supportKeys ), key => get( postType, [ 'data', 'supports', key ], false )
+	);
 
 	if ( ! isSupported ) {
 		return null;

editor/edit-post/sidebar/discussion-panel/index.js

@@ -12,7 +12,7 @@ import { PanelBody, PanelRow } from '@wordpress/components';
 /**
  * Internal Dependencies
  */
-import { PostComments, PostPingbacks } from '../../../components';
+import { PostComments, PostPingbacks, PostTypeSupportCheck } from '../../../components';
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
 import { toggleSidebarPanel } from '../../../store/actions';
 
@@ -23,14 +23,21 @@ const PANEL_NAME = 'discussion-panel';
 
 function DiscussionPanel( { isOpened, onTogglePanel } ) {
 	return (
-		<PanelBody title={ __( 'Discussion' ) } opened={ isOpened } onToggle={ onTogglePanel }>
-			<PanelRow>
-				<PostComments />
-			</PanelRow>
-			<PanelRow>
-				<PostPingbacks />
-			</PanelRow>
-		</PanelBody>
+		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
+			<PanelBody title={ __( 'Discussion' ) } opened={ isOpened } onToggle={ onTogglePanel }>
+				<PostTypeSupportCheck supportKeys="comments">
+					<PanelRow>
+						<PostComments />
+					</PanelRow>
+				</PostTypeSupportCheck>
+
+				<PostTypeSupportCheck supportKeys="trackbacks">
+					<PanelRow>
+						<PostPingbacks />
+					</PanelRow>
+				</PostTypeSupportCheck>
+			</PanelBody>
+		</PostTypeSupportCheck>
 	);
 }
 

editor/edit-post/sidebar/featured-image/index.js

@@ -12,7 +12,7 @@ import { PanelBody } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { PostFeaturedImage } from '../../../components';
+import { PostFeaturedImage, PostFeaturedImageCheck } from '../../../components';
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
 import { toggleSidebarPanel } from '../../../store/actions';
 
@@ -23,9 +23,11 @@ const PANEL_NAME = 'featured-image';
 
 function FeaturedImage( { isOpened, onTogglePanel } ) {
 	return (
-		<PanelBody title={ __( 'Featured Image' ) } opened={ isOpened } onToggle={ onTogglePanel }>
-			<PostFeaturedImage />
-		</PanelBody>
+		<PostFeaturedImageCheck>
+			<PanelBody title={ __( 'Featured Image' ) } opened={ isOpened } onToggle={ onTogglePanel }>
+				<PostFeaturedImage />
+			</PanelBody>
+		</PostFeaturedImageCheck>
 	);
 }