Likes and sharing panel: Render on demand

extensions/blocks/likes/index.js

@@ -1,15 +1,8 @@
 /**
  * Internal dependencies
  */
-import JetpackLikesAndSharingPanel from '../../shared/jetpack-likes-and-sharing-panel';
 import LikesCheckbox from './likes-checkbox';
 
 export const name = 'likes';
 
-export const settings = {
-	render: ( { props } ) => (
-		<JetpackLikesAndSharingPanel>
-			<LikesCheckbox props={ props } />
-		</JetpackLikesAndSharingPanel>
-	),
-};
+export const settings = { render: LikesCheckbox };

extensions/blocks/likes/likes-checkbox.js

@@ -6,14 +6,21 @@ import { CheckboxControl } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import JetpackLikesAndSharingPanel from '../../shared/jetpack-likes-and-sharing-panel';
+
 const LikesCheckbox = ( { areLikesEnabled, editPost } ) => (
-	<CheckboxControl
-		label={ __( 'Show likes.', 'jetpack' ) }
-		checked={ areLikesEnabled }
-		onChange={ value => {
-			editPost( { jetpack_likes_enabled: value } );
-		} }
-	/>
+	<JetpackLikesAndSharingPanel>
+		<CheckboxControl
+			label={ __( 'Show likes.', 'jetpack' ) }
+			checked={ areLikesEnabled }
+			onChange={ value => {
+				editPost( { jetpack_likes_enabled: value } );
+			} }
+		/>
+	</JetpackLikesAndSharingPanel>
 );
 
 // Fetch the post meta.

extensions/blocks/sharing/index.js

@@ -1,15 +1,8 @@
 /**
  * Internal dependencies
  */
-import JetpackLikesAndSharingPanel from '../../shared/jetpack-likes-and-sharing-panel';
 import SharingCheckbox from './sharing-checkbox';
 
 export const name = 'sharing';
 
-export const settings = {
-	render: ( { props } ) => (
-		<JetpackLikesAndSharingPanel>
-			<SharingCheckbox props={ props } />
-		</JetpackLikesAndSharingPanel>
-	),
-};
+export const settings = { render: SharingCheckbox };

extensions/blocks/sharing/sharing-checkbox.js

@@ -6,14 +6,21 @@ import { CheckboxControl } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import JetpackLikesAndSharingPanel from '../../shared/jetpack-likes-and-sharing-panel';
+
 const SharingCheckbox = ( { isSharingEnabled, editPost } ) => (
-	<CheckboxControl
-		label={ __( 'Show sharing buttons.', 'jetpack' ) }
-		checked={ isSharingEnabled }
-		onChange={ value => {
-			editPost( { jetpack_sharing_enabled: value } );
-		} }
-	/>
+	<JetpackLikesAndSharingPanel>
+		<CheckboxControl
+			label={ __( 'Show sharing buttons.', 'jetpack' ) }
+			checked={ isSharingEnabled }
+			onChange={ value => {
+				editPost( { jetpack_sharing_enabled: value } );
+			} }
+		/>
+	</JetpackLikesAndSharingPanel>
 );
 
 // Fetch the post meta.

extensions/shared/jetpack-likes-and-sharing-panel.js

@@ -3,21 +3,33 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createSlotFill, PanelBody } from '@wordpress/components';
+import { registerPlugin } from '@wordpress/plugins';
 
-const { Fill, Slot } = createSlotFill( 'JetpackLikesAndSharingPanel' );
+/**
+ * Internal dependencies
+ */
+import JetpackPluginSidebar from './jetpack-plugin-sidebar';
 
-const JetpackLikesAndSharingPanel = ( { children } ) => <Fill>{ children }</Fill>;
+const { Fill, Slot } = createSlotFill( 'JetpackLikesAndSharingPanel' );
 
-JetpackLikesAndSharingPanel.Slot = () => (
-	<Slot>
-		{ fills => {
-			if ( ! fills.length ) {
-				return null;
-			}
+export { Fill as default };
 
-			return <PanelBody title={ __( 'Likes and Sharing', 'jetpack' ) }>{ fills }</PanelBody>;
-		} }
-	</Slot>
-);
+registerPlugin( 'jetpack-likes-and-sharing-panel', {
+	render() {
+		return (
+			<Slot>
+				{ fills => {
+					if ( ! fills.length ) {
+						return null;
+					}
 
-export default JetpackLikesAndSharingPanel;
+					return (
+						<JetpackPluginSidebar>
+							<PanelBody title={ __( 'Likes and Sharing', 'jetpack' ) }>{ fills }</PanelBody>
+						</JetpackPluginSidebar>
+					);
+				} }
+			</Slot>
+		);
+	},
+} );

extensions/shared/jetpack-plugin-sidebar.js

@@ -11,36 +11,30 @@ import { registerPlugin } from '@wordpress/plugins';
  */
 import './jetpack-plugin-sidebar.scss';
 import JetpackLogo from './jetpack-logo';
-import JetpackLikesAndSharingPanel from './jetpack-likes-and-sharing-panel';
 
 const { Fill, Slot } = createSlotFill( 'JetpackPluginSidebar' );
 
-const JetpackPluginSidebar = ( { children } ) => <Fill>{ children }</Fill>;
-
-JetpackPluginSidebar.Slot = () => (
-	<Slot>
-		{ fills => {
-			if ( ! fills.length ) {
-				return null;
-			}
-
-			return (
-				<Fragment>
-					<PluginSidebarMoreMenuItem target="jetpack" icon={ <JetpackLogo /> }>
-						Jetpack
-					</PluginSidebarMoreMenuItem>
-					<PluginSidebar name="jetpack" title="Jetpack" icon={ <JetpackLogo /> }>
-						{ fills }
-						<JetpackLikesAndSharingPanel.Slot />
-					</PluginSidebar>
-				</Fragment>
-			);
-		} }
-	</Slot>
-);
+export { Fill as default };
 
 registerPlugin( 'jetpack-sidebar', {
-	render: () => <JetpackPluginSidebar.Slot />,
-} );
+	render: () => (
+		<Slot>
+			{ fills => {
+				if ( ! fills.length ) {
+					return null;
+				}
 
-export default JetpackPluginSidebar;
+				return (
+					<Fragment>
+						<PluginSidebarMoreMenuItem target="jetpack" icon={ <JetpackLogo /> }>
+							Jetpack
+						</PluginSidebarMoreMenuItem>
+						<PluginSidebar name="jetpack" title="Jetpack" icon={ <JetpackLogo /> }>
+							{ fills }
+						</PluginSidebar>
+					</Fragment>
+				);
+			} }
+		</Slot>
+	),
+} );