[Mobile] Gallery - Media editing (#24088)

* Mobile - Gallery - Media editing

* Mobile - Update changelog

* Mobile - Gallery - Remove extra separator

* Mobile - Media Editing - Allow disabling the replace option

* Mobile - Gallery block - Disable replace option for media editing and fix caption styles and scrolling

* Mobile - Gallery block - Caption styles improvements

* Mobile - Gallery - Styles improvements for caption

* Mobile - Gallery - Remove option to replace image

* Mobile - Gallery - Update styles to use border variable

* Mobile - Gallery - Use grid unit for styles and code improvements

packages/block-library/src/gallery/gallery-image-style.native.scss

@@ -1,11 +1,11 @@
 $gallery-image-container-height: 150px;
-$overlay-border-width: 3px;
+$overlay-border-width: 2px;
 $caption-background-color: rgba(0, 0, 0, 0.4);
-$caption-padding-vertical: 8px;
 
 .galleryImageContainer {
 	flex: 1;
 	height: $gallery-image-container-height;
+	overflow: hidden;
 	background-color: $gray-lighten-30;
 }
 
@@ -14,30 +14,7 @@ $caption-padding-vertical: 8px;
 }
 
 .image {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	opacity: 1;
-}
-
-.imageUploading {
-	opacity: 0.3;
-}
-
-.overlay {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	border-width: $overlay-border-width;
-	border-color: #0000;
-}
-
-.overlaySelected {
-	border-color: $blue-wordpress;
+	height: 100%;
 }
 
 .button {
@@ -67,14 +44,12 @@ $caption-padding-vertical: 8px;
 
 .separator {
 	border-right-color: $gray-30;
-	// border-right-width: StyleSheet.hairlineWidth;
 	border-right-width: 1px;
 	height: 20px;
 }
 
-.removeButton {
-	width: 30px;
-	border-radius: 30px;
+.toolbarContainer {
+	position: absolute;
 }
 
 .toolbar {
@@ -115,6 +90,11 @@ $caption-padding-vertical: 8px;
 	flex: 1;
 	flex-direction: row;
 	align-items: flex-end;
+	position: absolute;
+	bottom: $overlay-border-width;
+	left: $overlay-border-width;
+	right: $overlay-border-width;
+	top: 45;
 }
 
 @mixin caption-shared {
@@ -128,30 +108,24 @@ $caption-padding-vertical: 8px;
 .caption {
 	@include caption-shared;
 	background-color: $caption-background-color;
-	padding-top: $caption-padding-vertical;
-	padding-bottom: $caption-padding-vertical;
+	padding-top: $grid-unit;
+	padding-bottom: $grid-unit;
 }
 
 .captionPlaceholder {
 	color: #ccc;
 }
 
-/*
-.captionDark {
-	background-color: #0007;
-}
-*/
-
 // expand caption container to compensate for overlay border
 .captionExpandedContainer {
 	// constrain height to gallery image height for caption scroll
 	max-height: $gallery-image-container-height;
 	position: absolute;
-	bottom: - $overlay-border-width;
-	left: - $overlay-border-width;
-	right: - $overlay-border-width;
-	padding-top: $caption-padding-vertical;
-	padding-bottom: $overlay-border-width + $caption-padding-vertical;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding-top: $grid-unit;
+	padding-bottom: $overlay-border-width + $grid-unit;
 	padding-left: $overlay-border-width;
 	padding-right: $overlay-border-width;
 	// use caption background color on container when expanded