Block Editor: Remove store subscription in favor of modern CSS (#68276)

Co-authored-by: Mamaduka <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Dec 25, 2024 · 227fcd8 · 227fcd8 · github-actions · Dec 25, 2024
1 parent ead6fac
commit 227fcd8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -61,10 +56,7 @@ const MediaReplaceFlow = ( {
 	handleUpload = true,
 	popoverProps,
 } ) => {
-	const mediaUpload = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().mediaUpload;
-	}, [] );
-	const canUpload = !! mediaUpload;
+	const { getSettings } = useSelect( blockEditorStore );
 	const editMediaButtonRef = useRef();
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
@@ -107,7 +99,7 @@ const MediaReplaceFlow = ( {
 			return onSelect( files );
 		}
 		onFilesUpload( files );
-		mediaUpload( {
+		getSettings().mediaUpload( {
 			allowedTypes,
 			filesList: files,
 			onFileChange: ( [ media ] ) => {
@@ -219,15 +211,7 @@ const MediaReplaceFlow = ( {
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-						<form
-							className={ clsx(
-								'block-editor-media-flow__url-input',
-								{
-									'has-siblings':
-										canUpload || onToggleFeaturedImage,
-								}
-							) }
-						>
+						<form className="block-editor-media-flow__url-input">
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>

diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -9,17 +9,17 @@
 	margin-left: 4px;
 }
 
+.block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
+	border-top: $border-width solid $gray-900;
+	margin-top: $grid-unit-10;
+	padding-bottom: $grid-unit-10;
+}
+
 .block-editor-media-flow__url-input {
 	margin-right: -$grid-unit-10;
 	margin-left: -$grid-unit-10;
 	padding: $grid-unit-20;
 
-	&.has-siblings {
-		border-top: $border-width solid $gray-900;
-		margin-top: $grid-unit-10;
-		padding-bottom: $grid-unit-10;
-	}
-
 	.block-editor-media-replace-flow__image-url-label {
 		display: block;
 		top: $grid-unit-20;