diff --git a/editor/post-featured-image/index.js b/editor/post-featured-image/index.js
new file mode 100644
index 00000000000000..86754a68425e8f
--- /dev/null
+++ b/editor/post-featured-image/index.js
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { flowRight } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Spinner, ResponsiveWrapper, withAPIData } from '@wordpress/components';
+import { MediaUploadButton } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { getEditedPostAttribute } from '../selectors';
+import { editPost } from '../actions';
+
+function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media } ) {
+ return (
+
+ { !! featuredImageId &&
+
+ { media && !! media.data &&
+
+
+
+ }
+ { media && media.isLoading && }
+
+ }
+ { !! featuredImageId && media && ! media.isLoading &&
+
+ { __( 'Click the image to edit or update' ) }
+
+ }
+ { ! featuredImageId &&
+
+ { __( 'Set featured image' ) }
+
+ }
+ { !! featuredImageId &&
+
+ }
+
+ );
+}
+
+const applyConnect = connect(
+ ( state ) => {
+ return {
+ featuredImageId: getEditedPostAttribute( state, 'featured_media' ),
+ };
+ },
+ {
+ onUpdateImage( image ) {
+ return editPost( { featured_media: image.id } );
+ },
+ onRemoveImage() {
+ return editPost( { featured_media: 0 } );
+ },
+ }
+);
+
+const applyWithAPIData = withAPIData( ( { featuredImageId } ) => {
+ if ( ! featuredImageId ) {
+ return {};
+ }
+
+ return {
+ media: `/wp/v2/media/${ featuredImageId }`,
+ };
+} );
+
+export default flowRight(
+ applyConnect,
+ applyWithAPIData,
+)( PostFeaturedImage );
diff --git a/editor/sidebar/featured-image/style.scss b/editor/post-featured-image/style.scss
similarity index 67%
rename from editor/sidebar/featured-image/style.scss
rename to editor/post-featured-image/style.scss
index a6b4683158fe18..8418acce1410bc 100644
--- a/editor/sidebar/featured-image/style.scss
+++ b/editor/post-featured-image/style.scss
@@ -1,4 +1,4 @@
-.editor-featured-image__content {
+.editor-post-featured-image {
padding: 10px 0 0;
.spinner {
@@ -6,7 +6,7 @@
}
}
-.editor-featured-image__toggle {
+.editor-post-featured-image__toggle {
text-decoration: underline;
color: $blue-wordpress;
@@ -20,12 +20,12 @@
}
}
-.editor-featured-image__preview {
+.editor-post-featured-image__preview {
display: block;
width: 100%;
}
-.editor-featured-image__howto {
+.editor-post-featured-image__howto {
color: $dark-gray-300;
font-style: italic;
margin: 10px 0;
diff --git a/editor/sidebar/featured-image/index.js b/editor/sidebar/featured-image/index.js
index 1ecdff9d264afe..cedc1f87f21abc 100644
--- a/editor/sidebar/featured-image/index.js
+++ b/editor/sidebar/featured-image/index.js
@@ -2,103 +2,42 @@
* External dependencies
*/
import { connect } from 'react-redux';
-import { flowRight } from 'lodash';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Button, PanelBody, Spinner, ResponsiveWrapper, withAPIData } from '@wordpress/components';
-import { MediaUploadButton } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
/**
* Internal dependencies
*/
-import './style.scss';
-import { getEditedPostAttribute, isEditorSidebarPanelOpened } from '../../selectors';
-import { editPost, toggleSidebarPanel } from '../../actions';
+import PostFeaturedImage from '../../post-featured-image';
+import { isEditorSidebarPanelOpened } from '../../selectors';
+import { toggleSidebarPanel } from '../../actions';
/**
* Module Constants
*/
const PANEL_NAME = 'featured-image';
-function FeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media, isOpened, onTogglePanel } ) {
+function FeaturedImage( { isOpened, onTogglePanel } ) {
return (
-
- { !! featuredImageId &&
-
- { media && !! media.data &&
-
-
-
- }
- { media && media.isLoading && }
-
- }
- { !! featuredImageId && media && ! media.isLoading &&
-
- { __( 'Click the image to edit or update' ) }
-
- }
- { ! featuredImageId &&
-
- { __( 'Set featured image' ) }
-
- }
- { !! featuredImageId &&
-
- }
-
+
);
}
-const applyConnect = connect(
+export default connect(
( state ) => {
return {
- featuredImageId: getEditedPostAttribute( state, 'featured_media' ),
isOpened: isEditorSidebarPanelOpened( state, PANEL_NAME ),
};
},
{
- onUpdateImage( image ) {
- return editPost( { featured_media: image.id } );
- },
- onRemoveImage() {
- return editPost( { featured_media: 0 } );
- },
onTogglePanel() {
return toggleSidebarPanel( PANEL_NAME );
},
}
-);
-
-const applyWithAPIData = withAPIData( ( { featuredImageId } ) => {
- if ( ! featuredImageId ) {
- return {};
- }
-
- return {
- media: `/wp/v2/media/${ featuredImageId }`,
- };
-} );
-
-export default flowRight(
- applyConnect,
- applyWithAPIData,
)( FeaturedImage );