Add better support for the block editor's fullscreen mode

assets/css/admin-distributed-post.css

@@ -12,15 +12,3 @@
 .open-distributor-help {
 	cursor: pointer;
 }
-
-#distributed-to:before {
-	content: ' ';
-	display: inline-block;
-	top: 5px;
-	padding-right: 25px;
-	width: 20px;
-	height: 20px;
-	background: url(../../assets/img/icon.svg) no-repeat top left;
-	background-size: contain;
-	position: relative;
-}

assets/css/admin.css

@@ -11,3 +11,22 @@
 	font-weight: bold;
 	font-size: 14px;
 }
+
+@media (min-width: 783px) {
+	body.is-showing-distributor.is-fullscreen-mode #wpadminbar {
+		display: block;
+	}
+
+	body.is-showing-distributor.is-fullscreen-mode .interface-interface-skeleton {
+		top: 32px;
+	}
+}
+
+.distributor-panel .components-panel__body-title svg {
+	height: 20px;
+	width: 20px;
+}
+
+.distributor-toggle {
+	margin-bottom: 8px;
+}

assets/css/gutenberg-syndicated-post.css

@@ -59,15 +59,3 @@ body.dt-linked-post {
 #distributed-from a {
 	vertical-align: top;
 }
-
-#distributed-from:before {
-	content: ' ';
-	display: inline-block;
-	top: -1px;
-	padding-right: 2px;
-	width: 20px;
-	height: 20px;
-	background: url(../../assets/img/icon.svg) no-repeat top left;
-	background-size: contain;
-	position: relative;
-}

assets/css/push.css

@@ -9,6 +9,7 @@
 
 @custom-media --small-screen (min-width: 480px);
 @custom-media --medium-screen (min-width: 768px);
+@custom-media --gutenberg-small-screen (max-width: 782px);
 
 #distributor-push-wrapper,
 #wpadminbar #wp-admin-bar-distributor-placeholder > .ab-item {
@@ -47,17 +48,20 @@
 	display: block;
 }
 
-#wp-admin-bar-distributor.hover::before,
-#wp-admin-bar-distributor.syncing::before {
+#distributor-overlay {
+	display: none;
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: rgba(0,0,0,0.6);
-	z-index: -1;
-	content: '';
-	pointer-events: none;
+	background: rgba(0, 0, 0, 0.6);
+	z-index: 10000;
+
+	&.show,
+	&.syncing {
+		display: block;
+	}
 }
 
 #wpadminbar #distributor-push-wrapper .inner {
@@ -432,6 +436,12 @@
 	}
 }
 
+.distributor-panel {
+	@media (--gutenberg-small-screen) {
+		display: none;
+	}
+}
+
 #distributor-push-wrapper .loader-item,
 #distributor-push-wrapper .loader-item *,
 #distributor-push-wrapper .loader-item ::after,

assets/js/gutenberg-plugin.js

@@ -0,0 +1,163 @@
+import { wp, dtGutenberg } from 'window';
+import PluginIcon from '../img/icon.svg'; // eslint-disable-line no-unused-vars
+
+const { Icon } = wp.components; // eslint-disable-line no-unused-vars
+const { select, useSelect } = wp.data;
+const { PluginDocumentSettingPanel } = wp.editPost; // eslint-disable-line no-unused-vars
+const { __, sprintf } = wp.i18n;
+const { registerPlugin } = wp.plugins;
+
+/**
+ * Add ability to show the admin bar, if needed
+ */
+const RenderShowAdminBar = () => { // eslint-disable-line no-unused-vars
+	const bodyClasses = document.body.classList;
+	const isFullScreenMode = select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );
+	const distributorTopMenu = document.querySelector( '#wp-admin-bar-distributor' );
+	const distributorAdminItem = document.querySelector( '#wp-admin-bar-distributor > a' );
+
+	// Don't show anything if this is a distributed item
+	if ( 0 !== parseInt( dtGutenberg.syndicationTime ) ) {
+		return null;
+	}
+
+	if ( ! distributorTopMenu || ! distributorAdminItem ) {
+		return (
+			<div className="distributor-toggle">
+				<span>{ __( 'Refresh page to see distribution options', 'distributor' ) }</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className="distributor-toggle">
+			<button
+				className="components-button is-secondary"
+				type="button"
+				onClick={ () => {
+					const mouseEvent = new MouseEvent( 'mouseenter' );
+
+					if ( isFullScreenMode ) {
+						bodyClasses.add( 'is-showing-distributor' );
+					} else {
+						bodyClasses.remove( 'is-showing-distributor' );
+					}
+
+					distributorTopMenu.classList.toggle( 'hover' );
+					distributorAdminItem.dispatchEvent( mouseEvent );
+				} }
+			>
+				{ sprintf( __( 'Distribute %1$s', 'distributor' ), dtGutenberg.postTypeSingular || 'Content' ) }
+			</button>
+		</div>
+	);
+};
+
+/**
+ * Render the draft message
+ */
+const RenderDraftMessage = () => { // eslint-disable-line no-unused-vars
+	if ( 0 !== parseInt( dtGutenberg.syndicationTime ) ) {
+		return null;
+	}
+
+	return (
+		<p>
+			{ __( 'Distribution options available once published', 'distributor' ) }
+		</p>
+	);
+};
+
+/**
+ * Render the distribution information, if needed
+ */
+const RenderDistributionInfo = () => { // eslint-disable-line no-unused-vars
+	if ( 0 < parseInt( dtGutenberg.syndicationCount ) ) {
+		return <RenderDistributedTo />;
+	} else if ( 0 !== parseInt( dtGutenberg.syndicationTime ) ) {
+		return <RenderDistributedFrom />;
+	}
+
+	return null;
+};
+
+/**
+ * Render the distributed to component
+ */
+const RenderDistributedTo = () => { // eslint-disable-line no-unused-vars
+	return(
+		<span id='distributed-to'>
+			{ sprintf( __( 'Distributed to %1$s connection%2$s.', 'distributor' ),
+				dtGutenberg.syndicationCount,
+				'1' === dtGutenberg.syndicationCount ? '' : 's' ) }
+		</span>
+	);
+};
+
+/**
+ * Render the distributed from component
+ */
+const RenderDistributedFrom = () => { // eslint-disable-line no-unused-vars
+	return(
+		<span id='distributed-from'>
+			{ __( 'Distributed on: ', 'distributor' ) }
+			<strong> { dtGutenberg.syndicationTime } </strong>
+		</span>
+	);
+};
+
+/**
+ * Create the Distributor icon
+ */
+const DistributorIcon = () => (
+	<Icon
+		className="components-panel__icon"
+		icon={ <PluginIcon /> }
+		size={ 20 }
+	/>
+);
+
+/**
+ * Add the Distributor panel to Gutenberg
+ */
+const DistributorPlugin = () => {
+	// Ensure the user has proper permissions
+	if ( dtGutenberg.noPermissions && 1 === parseInt( dtGutenberg.noPermissions ) ) {
+		return null;
+	}
+
+	const postType = useSelect( select => select( 'core/editor' ).getCurrentPostType() );
+	const postStatus = useSelect( select => select( 'core/editor' ).getCurrentPostAttribute( 'status' ) );
+
+	// Ensure we are on a supported post type
+	if ( dtGutenberg.supportedPostTypes && dtGutenberg.supportedPostTypes[ postType ] === undefined ) {
+		return null;
+	}
+
+	// If we are on a non-supported post status, change what we show
+	if ( dtGutenberg.supportedPostStati && ! dtGutenberg.supportedPostStati.includes( postStatus ) ) {
+		return (
+			<PluginDocumentSettingPanel
+				title={ __( 'Distributor', 'distributor' ) }
+				icon={ DistributorIcon }
+				className="distributor-panel"
+			>
+				<RenderDraftMessage />
+				<RenderDistributionInfo />
+			</PluginDocumentSettingPanel>
+		);
+	}
+
+	return (
+		<PluginDocumentSettingPanel
+			title={ __( 'Distributor', 'distributor' ) }
+			icon={ DistributorIcon }
+			className="distributor-panel"
+		>
+			<RenderShowAdminBar />
+			<RenderDistributionInfo />
+		</PluginDocumentSettingPanel>
+	);
+};
+
+registerPlugin( 'distributor-plugin', { render: DistributorPlugin } );