fix: editor colors

Automattic · Dec 15, 2020 · 69472f3 · 69472f3
1 parent ce7aa98
commit 69472f3
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 129 deletions.
diff --git a/src/editor/ColorsSidebar.js b/src/editor/ColorsSidebar.js
@@ -6,52 +6,40 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment, useEffect } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
 import { RangeControl } from '@wordpress/components';
 import { ColorPaletteControl } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import { updateEditorColors } from './utils';
-
 const ColorsSidebar = ( {
 	background_color,
 	onMetaFieldChange,
 	overlay_opacity,
 	overlay_color,
 	isOverlay,
-} ) => {
-	// On component mount.
-	useEffect(() => {
-		updateEditorColors( background_color );
-	}, [ background_color ]);
-
-	return (
-		<Fragment>
-			<ColorPaletteControl
-				value={ background_color }
-				onChange={ value => onMetaFieldChange( 'background_color', value || '#FFFFFF' ) }
-				label={ __( 'Background Color' ) }
-			/>
-			{ isOverlay && (
-				<Fragment>
-					<ColorPaletteControl
-						value={ overlay_color }
-						onChange={ value => onMetaFieldChange( 'overlay_color', value || '#000000' ) }
-						label={ __( 'Overlay Color' ) }
-					/>
-					<RangeControl
-						label={ __( 'Overlay opacity' ) }
-						value={ overlay_opacity }
-						onChange={ value => onMetaFieldChange( 'overlay_opacity', value ) }
-						min={ 0 }
-						max={ 100 }
-					/>
-				</Fragment>
-			) }
-		</Fragment>
-	);
-};
+} ) => (
+	<Fragment>
+		<ColorPaletteControl
+			value={ background_color }
+			onChange={ value => onMetaFieldChange( 'background_color', value || '#FFFFFF' ) }
+			label={ __( 'Background Color' ) }
+		/>
+		{ isOverlay && (
+			<Fragment>
+				<ColorPaletteControl
+					value={ overlay_color }
+					onChange={ value => onMetaFieldChange( 'overlay_color', value || '#000000' ) }
+					label={ __( 'Overlay Color' ) }
+				/>
+				<RangeControl
+					label={ __( 'Overlay opacity' ) }
+					value={ overlay_opacity }
+					onChange={ value => onMetaFieldChange( 'overlay_opacity', value ) }
+					min={ 0 }
+					max={ 100 }
+				/>
+			</Fragment>
+		) }
+	</Fragment>
+);
 
 export default ColorsSidebar;
diff --git a/src/editor/EditorAdditions.js b/src/editor/EditorAdditions.js
@@ -0,0 +1,57 @@
+/**
+ * Popup-related editor changes.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { updateEditorColors } from './utils';
+
+const EditorAdditions = () => {
+	const meta = useSelect( select => select( 'core/editor' ).getEditedPostAttribute( 'meta' ) );
+	const { dismiss_text, dismiss_text_alignment, background_color } = meta;
+
+	// Update editor colors to match popup colors.
+	useEffect(() => {
+		updateEditorColors( background_color );
+	}, [ background_color ]);
+
+	// Render a preview of the dismiss button at the end of the block content area.
+	useEffect(() => {
+		if ( ! dismiss_text ) {
+			return;
+		}
+
+		const alignClass = 'has-text-align-' + ( dismiss_text_alignment || 'center' );
+
+		let dismissButtonPreview = document.querySelector(
+			'.newspack-popups__not-interested-button-preview'
+		);
+
+		if ( ! dismissButtonPreview ) {
+			const rootContainer = document.querySelector(
+				'.block-editor-block-list__layout.is-root-container'
+			);
+
+			if ( rootContainer ) {
+				dismissButtonPreview = document.createElement( 'div' );
+				rootContainer.appendChild( dismissButtonPreview );
+			}
+		}
+
+		if ( dismissButtonPreview ) {
+			dismissButtonPreview.className =
+				'newspack-popups__not-interested-button-preview wp-block ' + alignClass;
+			dismissButtonPreview.textContent = dismiss_text;
+		}
+	}, [ dismiss_text, dismiss_text_alignment ]);
+	return null;
+};
+
+export default EditorAdditions;
diff --git a/src/editor/index.js b/src/editor/index.js
@@ -22,7 +22,7 @@ import SegmentationSidebar from './SegmentationSidebar';
 import DismissSidebar from './DismissSidebar';
 import ColorsSidebar from './ColorsSidebar';
 import Preview from './Preview';
-import withDismissButtonPreview from './withDismissButtonPreview';
+import EditorAdditions from './EditorAdditions';
 import './style.scss';
 
 // Action dispatchers for the sidebar components.
@@ -40,36 +40,18 @@ const mapDispatchToProps = dispatch => {
 	};
 };
 
-// Connect data to components.
-const StatusSidebarWithData = compose( [
-	withSelect( optionsFieldsSelector ),
-	withDispatch( mapDispatchToProps ),
-] )( StatusSidebar );
-
-const SidebarWithData = compose( [
+const connectData = compose( [
 	withSelect( optionsFieldsSelector ),
 	withDispatch( mapDispatchToProps ),
-] )( Sidebar );
+] );
 
-const FrequencySidebarWithData = compose( [
-	withSelect( optionsFieldsSelector ),
-	withDispatch( mapDispatchToProps ),
-] )( FrequencySidebar );
-
-const SegmentationSidebarWithData = compose( [
-	withSelect( optionsFieldsSelector ),
-	withDispatch( mapDispatchToProps ),
-] )( SegmentationSidebar );
-
-const DismissSidebarWithData = compose( [
-	withSelect( optionsFieldsSelector ),
-	withDispatch( mapDispatchToProps ),
-] )( DismissSidebar );
-
-const ColorsSidebarWithData = compose( [
-	withSelect( optionsFieldsSelector ),
-	withDispatch( mapDispatchToProps ),
-] )( ColorsSidebar );
+// Connect data to components.
+const StatusSidebarWithData = connectData( StatusSidebar );
+const SidebarWithData = connectData( Sidebar );
+const FrequencySidebarWithData = connectData( FrequencySidebar );
+const SegmentationSidebarWithData = connectData( SegmentationSidebar );
+const DismissSidebarWithData = connectData( DismissSidebar );
+const ColorsSidebarWithData = connectData( ColorsSidebar );
 
 // Register components.
 registerPlugin( 'newspack-popups-status', { render: StatusSidebarWithData } );
@@ -111,14 +93,14 @@ registerPlugin( 'newspack-popups-segmentation', {
 } );
 
 registerPlugin( 'newspack-popups-dismiss', {
-	render: withDismissButtonPreview( () => (
+	render: () => (
 		<PluginDocumentSettingPanel
 			name="popup-dismiss-panel"
 			title={ __( 'Dismiss Button Settings', 'newspack-popups' ) }
 		>
 			<DismissSidebarWithData />
 		</PluginDocumentSettingPanel>
-	) ),
+	),
 	icon: null,
 } );
 
@@ -134,6 +116,11 @@ registerPlugin( 'newspack-popups-colors', {
 	icon: null,
 } );
 
+registerPlugin( 'newspack-popups-editor', {
+	render: EditorAdditions,
+	icon: null,
+} );
+
 // Add a button in post status section
 const PluginPostStatusInfoTest = () => (
 	<PluginPostStatusInfo>

diff --git a/src/editor/style.scss b/src/editor/style.scss
@@ -3,6 +3,10 @@
 	display: none;
 }
 
+.editor-post-title__input::placeholder {
+	color: var( --newspack-popups-editor-placeholder-color, #7d7d7d ) !important;
+}
+
 .newspack-popups {
 	&__status-options {
 		margin: 1rem 0;

diff --git a/src/editor/utils.js b/src/editor/utils.js
@@ -71,8 +71,8 @@ export const updateEditorColors = backgroundColor => {
 	if ( ! backgroundColor ) {
 		return;
 	}
-	const blackColor = '#000';
-	const whiteColor = '#fff';
+	const blackColor = '#000000';
+	const whiteColor = '#ffffff';
 
 	const backgroundColorRGB = hexToRGB( backgroundColor );
 	const blackRGB = hexToRGB( blackColor );
@@ -91,22 +91,19 @@ export const updateEditorColors = backgroundColor => {
 
 	const foregroundColor = contrastRatio > 5 ? blackColor : whiteColor;
 
-	const editorStylesEl = document.querySelector( '.edit-post-visual-editor.editor-styles-wrapper' );
+	const editorStylesEl = document.querySelector( '.editor-styles-wrapper' );
 	const editorPostTitleEl = document.querySelector(
 		'.wp-block.editor-post-title__block .editor-post-title__input'
 	);
-	const editorPostTitlePlaceholderEl = document.querySelector(
-		'.wp-block.editor-post-title__block .editor-post-title__input::placeholder'
-	);
-
 	if ( editorStylesEl ) {
 		editorStylesEl.style.backgroundColor = backgroundColor;
 		editorStylesEl.style.color = foregroundColor;
 	}
 	if ( editorPostTitleEl ) {
 		editorPostTitleEl.style.color = foregroundColor;
-	}
-	if ( editorPostTitlePlaceholderEl ) {
-		editorPostTitlePlaceholderEl.style.color = foregroundColor;
+		editorPostTitleEl.style.setProperty(
+			'--newspack-popups-editor-placeholder-color',
+			`${ foregroundColor }80`
+		);
 	}
 };
diff --git a/src/editor/withDismissButtonPreview.js b/src/editor/withDismissButtonPreview.js