Quick UX fixes

assets/src/stories-editor/blocks/amp-story-page/background-color-settings.js

@@ -23,9 +23,14 @@ import {
  * @param {Array} props.backgroundColors Current background colors.
  * @param {Function} props.setAttributes setAttributes callback.
  * @param {number} props.overlayOpacity Overlay opacity.
+ * @param {number} props.hasMedia Whether the page has a media item set.
  * @return {ReactElement} Component.
  */
-const BackgroundColorSettings = ( { backgroundColors, setAttributes, overlayOpacity } ) => {
+const BackgroundColorSettings = ( { backgroundColors, setAttributes, overlayOpacity, hasMedia } ) => {
+	const hasColors = backgroundColors
+		.map( ( color ) => color && Object.values( color ).filter( Boolean ).length )
+		.filter( Boolean ).length > 0;
+
 	const removeBackgroundColor = ( index ) => {
 		backgroundColors.splice( index, 1 );
 		setAttributes( { backgroundColors: JSON.stringify( backgroundColors ) } );
@@ -35,7 +40,11 @@ const BackgroundColorSettings = ( { backgroundColors, setAttributes, overlayOpac
 		backgroundColors[ index ] = {
 			color: value,
 		};
-		setAttributes( { backgroundColors: JSON.stringify( backgroundColors ) } );
+
+		setAttributes( {
+			backgroundColors: JSON.stringify( backgroundColors ),
+			overlayOpacity: ! hasColors && overlayOpacity === 100 && hasMedia ? 50 : overlayOpacity,
+		} );
 	};
 
 	const getOverlayColorSettings = () => {
@@ -46,7 +55,7 @@ const BackgroundColorSettings = ( { backgroundColors, setAttributes, overlayOpac
 					onChange: ( value ) => {
 						setBackgroundColors( value, 0 );
 					},
-					label: __( 'Color', 'amp' ),
+					label: __( 'Background Color', 'amp' ),
 				},
 			];
 		}
@@ -61,7 +70,7 @@ const BackgroundColorSettings = ( { backgroundColors, setAttributes, overlayOpac
 					setBackgroundColors( value, index );
 				},
 				/* translators: %s: color number */
-				label: useNumberedLabels ? sprintf( __( 'Color %s', 'amp' ), index + 1 ) : __( 'Color', 'amp' ),
+				label: useNumberedLabels ? sprintf( __( 'Color %s', 'amp' ), index + 1 ) : __( 'Background Color', 'amp' ),
 			};
 		} );
 
@@ -70,7 +79,7 @@ const BackgroundColorSettings = ( { backgroundColors, setAttributes, overlayOpac
 
 	return (
 		<PanelColorSettings
-			title={ __( 'Background Color', 'amp' ) }
+			title={ __( 'Color Settings', 'amp' ) }
 			colorSettings={ getOverlayColorSettings() }
 		>
 			<p>
@@ -90,6 +99,7 @@ const BackgroundColorSettings = ( { backgroundColors, setAttributes, overlayOpac
 				</Button>
 				}
 			</p>
+			{ hasColors &&
 			<RangeControl
 				label={ __( 'Opacity', 'amp' ) }
 				value={ overlayOpacity }
@@ -99,6 +109,7 @@ const BackgroundColorSettings = ( { backgroundColors, setAttributes, overlayOpac
 				step={ 5 }
 				required
 			/>
+			}
 		</PanelColorSettings>
 	);
 };
@@ -107,6 +118,7 @@ BackgroundColorSettings.propTypes = {
 	backgroundColors: PropTypes.array,
 	overlayOpacity: PropTypes.number,
 	setAttributes: PropTypes.func.isRequired,
+	hasMedia: PropTypes.bool.isRequired,
 };
 
 export default BackgroundColorSettings;

assets/src/stories-editor/blocks/amp-story-page/edit.js

@@ -218,6 +218,7 @@ const PageEdit = ( {
 					backgroundColors={ bgColors }
 					setAttributes={ setAttributes }
 					overlayOpacity={ overlayOpacity }
+					hasMedia={ Boolean( mediaUrl ) }
 				/>
 				<BackgroundMediaSettings
 					allowedBackgroundMediaTypes={ allowedBackgroundMediaTypes }

assets/src/stories-editor/components/higher-order/with-amp-story-settings.js

@@ -488,7 +488,6 @@ export default createHigherOrderComponent(
 						<InspectorControls>
 							<PanelColorSettings
 								title={ __( 'Color Settings', 'amp' ) }
-								initialOpen={ false }
 								colorSettings={ [
 									{
 										value: backgroundColor.color,
@@ -511,7 +510,7 @@ export default createHigherOrderComponent(
 										fontSize: fontSize.size,
 									} }
 								/>
-								{ ! excludeOpacity && (
+								{ ( ! excludeOpacity && backgroundColor.color ) && (
 									<RangeControl
 										label={ __( 'Opacity', 'amp' ) }
 										value={ opacity }

assets/src/stories-editor/components/index.js

@@ -30,7 +30,6 @@ export { default as withCroppedFeaturedImage } from './with-cropped-featured-ima
 export { default as withHasSelectedInnerBlock } from './higher-order/with-has-selected-inner-block';
 export { default as withPageNumber } from './higher-order/with-page-number';
 export { default as withContextMenu } from './higher-order/with-context-menu';
-export { default as withStoryFeaturedImageNotice } from './higher-order/with-story-featured-image-notice';
 export { default as withEditFeaturedImage } from './with-edit-featured-image';
 export { default as withCustomVideoBlockEdit } from './with-custom-video-block-edit';
 export { default as CustomVideoBlockEdit } from './custom-video-block-edit';

assets/src/stories-editor/index.js

@@ -32,7 +32,6 @@ import {
 	withPageNumber,
 	withEditFeaturedImage,
 	withCustomVideoBlockEdit,
-	withStoryFeaturedImageNotice,
 	withWrapperProps,
 	withActivePageState,
 	withStoryBlockDropZone,
@@ -307,7 +306,6 @@ addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/contextMenuHandler', withCo
 addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/addEditFeaturedImage', withEditFeaturedImage );
 addFilter( 'editor.BlockEdit', 'ampEditorBlocks/addVideoBlockPreview', withCustomVideoBlockEdit, 9 );
 addFilter( 'editor.BlockEdit', 'ampEditorBlocks/withSnapLines', withSnapLines );
-addFilter( 'editor.PostFeaturedImage', 'ampStoryEditorBlocks/addFeaturedImageNotice', withStoryFeaturedImageNotice );
 addFilter( 'editor.BlockListBlock', 'ampStoryEditorBlocks/withActivePageState', withActivePageState );
 addFilter( 'editor.BlockListBlock', 'ampStoryEditorBlocks/addWrapperProps', withWrapperProps );
 addFilter( 'editor.MediaUpload', 'ampStoryEditorBlocks/addEnforcedFileType', ( InitialMediaUpload ) => withEnforcedFileType( InitialMediaUpload ) );

tests/e2e/specs/stories-editor/page.js

@@ -113,15 +113,15 @@ describe( 'Story Page', () => {
 	} );
 
 	it( 'should allow adding opacity', async () => {
+		await clickButtonByLabel( 'Color: Vivid red' );
+
 		const opacitySelector = '.components-range-control__number[aria-label="Opacity"]';
 		await page.waitForSelector( opacitySelector );
 
 		// Set opacity to 15.
 		await clearInputValue( opacitySelector );
 		await page.type( opacitySelector, '15' );
 
-		await clickButtonByLabel( 'Color: Vivid red' );
-
 		await saveDraft();
 		await page.reload();