diff --git a/packages/base-styles/_colors.native.scss b/packages/base-styles/_colors.native.scss
index ef4443c38c0e22..644562a1876707 100644
--- a/packages/base-styles/_colors.native.scss
+++ b/packages/base-styles/_colors.native.scss
@@ -31,9 +31,11 @@ $red-50: #d63638;
// Primary Accent (Blues)
$blue-wordpress: #0087be;
$blue-medium: #00aadc;
+$blue-60: #055d9c;
$blue-500: #016087;
// Primary tint color (light)
$blue-50: #2271b1;
+$blue-40: #1689db;
// Primary tint color (dark)
$blue-30: #5198d9;
@@ -97,6 +99,7 @@ $dark-secondary: #fff9; //rgba(255, 255, 255, 0.6);
$dark-tertiary: #ffffff6d; //rgba(255, 255, 255, 0.43);
$dark-quaternary: #ffffff3f; //rgba(255, 255, 255, 0.25);
$dark-ultra-dim: #ffffff14; //rgba(255, 255, 255, 0.08);
+$dark-dim: #ffffff1f; //rgba(255, 255, 255, 0.12)
// Design Token colors
$app-background: $white;
diff --git a/packages/block-editor/src/components/block-list/block-outline.native.js b/packages/block-editor/src/components/block-list/block-outline.native.js
new file mode 100644
index 00000000000000..8f0c0015fa35cf
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/block-outline.native.js
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block.scss';
+
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
+
+function BlockOutline( {
+ blockCategory,
+ hasInnerBlocks,
+ isRootList,
+ isSelected,
+ name,
+} ) {
+ const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
+ const hasBlockTextCategory =
+ blockCategory === 'text' && ! textBlockWithOutline;
+ const hasBlockMediaCategory =
+ blockCategory === 'media' ||
+ blockCategory === 'embed' ||
+ ! blockCategory;
+ const shouldShowCompactOutline =
+ ( hasBlockMediaCategory && ! hasInnerBlocks ) || textBlockWithOutline;
+
+ const styleSolidBorder = [
+ styles.solidBorder,
+ usePreferredColorSchemeStyle(
+ styles.solidBorderColor,
+ styles.solidBorderColorDark
+ ),
+ shouldShowCompactOutline && styles.solidBorderCompact,
+ hasBlockTextCategory && styles.solidBorderTextContent,
+ ];
+
+ const shoudlShowOutline =
+ isSelected &&
+ ( ( hasBlockTextCategory && hasInnerBlocks ) ||
+ ( ! hasBlockTextCategory && hasInnerBlocks ) ||
+ ( ! hasBlockTextCategory && isRootList ) ||
+ textBlockWithOutline );
+
+ return (
+ shoudlShowOutline && (
+
+ )
+ );
+}
+
+export default BlockOutline;
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index 4f1e335f152717..405a883ed3b231 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -35,6 +35,7 @@ import { compose, ifCondition, pure } from '@wordpress/compose';
import BlockEdit from '../block-edit';
import BlockDraggable from '../block-draggable';
import BlockInvalidWarning from './block-invalid-warning';
+import BlockOutline from './block-outline';
import { store as blockEditorStore } from '../../store';
import { useLayout } from './layout';
import useSetting from '../use-setting';
@@ -59,15 +60,19 @@ function getWrapperProps( value, getWrapperPropsFunction ) {
function BlockWrapper( {
accessibilityLabel,
+ blockCategory,
children,
clientId,
draggingClientId,
draggingEnabled,
+ hasInnerBlocks,
isDescendentBlockSelected,
+ isRootList,
isSelected,
isTouchable,
marginHorizontal,
marginVertical,
+ name,
onFocus,
} ) {
const blockWrapperStyles = { flex: 1 };
@@ -89,6 +94,13 @@ function BlockWrapper( {
onPress={ onFocus }
style={ blockWrapperStyle }
>
+
0;
+ const blockHasInnerBlocks = getBlockCount( clientId ) > 0;
// For blocks with inner blocks, we only enable the dragging in the nested
// blocks if any of them are selected. This way we prevent the long-press
// gesture from being disabled for elements within the block UI.
const isDraggingEnabled =
- ! hasInnerBlocks || isSelected || ! descendentBlockSelected;
+ ! blockHasInnerBlocks ||
+ isSelected ||
+ ! descendentBlockSelected;
// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
// will be the top in the hierarchy.
const currentDraggingClientId =
@@ -179,9 +196,11 @@ function BlockListBlock( {
return {
baseGlobalStyles: globalStylesBaseStyles,
+ blockCategory: currentBlockCategory,
blockType: currentBlockType,
draggingClientId: currentDraggingClientId,
draggingEnabled: isDraggingEnabled,
+ hasInnerBlocks: blockHasInnerBlocks,
isDescendantOfParentSelected: descendantOfParentSelected,
isDescendentBlockSelected: descendentBlockSelected,
isParentSelected: parentSelected,
@@ -279,16 +298,20 @@ function BlockListBlock( {
return (
{ () =>
diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
index 654bc4861a5d1b..547a6129659a28 100644
--- a/packages/block-editor/src/components/block-list/block.native.scss
+++ b/packages/block-editor/src/components/block-list/block.native.scss
@@ -2,6 +2,14 @@
flex: 1 1 auto;
}
+.solidBorderColor {
+ border-color: $blue-40;
+}
+
+.solidBorderColorDark {
+ border-color: $blue-50;
+}
+
.dimmed {
opacity: $dimmed-opacity;
}
@@ -25,6 +33,30 @@
min-height: 50px;
}
+.solidBorder {
+ position: absolute;
+ top: -6px;
+ bottom: -6px;
+ left: -6px;
+ right: -6px;
+ border-width: 2px;
+ border-radius: 2px;
+ border-style: solid;
+ z-index: 1;
+}
+
+.solidBorderCompact {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.solidBorderTextContent {
+ left: 0;
+ right: 0;
+}
+
.fullWidthPadding {
padding: $block-selected-to-content;
}
diff --git a/packages/block-editor/src/components/button-block-appender/styles.native.scss b/packages/block-editor/src/components/button-block-appender/styles.native.scss
index 7faa8953a4ef03..7df30b74f8d31f 100644
--- a/packages/block-editor/src/components/button-block-appender/styles.native.scss
+++ b/packages/block-editor/src/components/button-block-appender/styles.native.scss
@@ -3,8 +3,8 @@
align-items: center;
justify-content: center;
padding: 9px;
- margin-left: 0;
- margin-right: 0;
+ margin-left: $grid-unit;
+ margin-right: $grid-unit;
border-radius: 4px;
}
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
index 25f6571fd80f3a..dd36feae1e4152 100644
--- a/packages/block-editor/src/components/media-placeholder/index.native.js
+++ b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { sentenceCase } from 'change-case';
/**
* WordPress dependencies
@@ -13,14 +14,15 @@ import {
MEDIA_TYPE_VIDEO,
MEDIA_TYPE_AUDIO,
} from '@wordpress/block-editor';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { useRef } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { cloneElement, useCallback, useRef } from '@wordpress/element';
import { Icon, plusCircleFilled } from '@wordpress/icons';
/**
* Internal dependencies
*/
import styles from './styles.scss';
+import { useBlockEditContext } from '../block-edit/context';
const isMediaEqual = ( media1, media2 ) =>
media1.id === media2.id || media1.url === media2.url;
@@ -35,10 +37,13 @@ const dedupMedia = ( media ) =>
[]
);
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+
function MediaPlaceholder( props ) {
const {
addToGallery,
allowedTypes = [],
+ className = '',
labels = {},
icon,
onSelect,
@@ -46,7 +51,6 @@ function MediaPlaceholder( props ) {
__experimentalOnlyMediaLibrary,
isAppender,
disableMediaButtons,
- getStylesFromColorScheme,
multiple,
value = [],
children,
@@ -61,6 +65,16 @@ function MediaPlaceholder( props ) {
const mediaRef = useRef( value );
mediaRef.current = value;
+ const blockEditContext = useBlockEditContext();
+
+ const onButtonPress = useCallback(
+ ( open ) => ( event ) => {
+ onFocus?.( event );
+ open();
+ },
+ [ onFocus ]
+ );
+
// Append and deduplicate media array for gallery use case.
const setMedia =
multiple && addToGallery
@@ -109,55 +123,104 @@ function MediaPlaceholder( props ) {
accessibilityHint = __( 'Double tap to select an audio file' );
}
- const emptyStateTitleStyle = getStylesFromColorScheme(
- styles.emptyStateTitle,
- styles.emptyStateTitleDark
+ const titleStyles = usePreferredColorSchemeStyle(
+ styles[ 'media-placeholder__header-title' ],
+ styles[ 'media-placeholder__header-title--dark' ]
);
- const addMediaButtonStyle = getStylesFromColorScheme(
+ const addMediaButtonStyle = usePreferredColorSchemeStyle(
styles.addMediaButton,
styles.addMediaButtonDark
);
+ const buttonStyles = usePreferredColorSchemeStyle(
+ styles[ 'media-placeholder__button' ],
+ styles[ 'media-placeholder__button--dark' ]
+ );
+ const emptyStateDescriptionStyles = usePreferredColorSchemeStyle(
+ styles.emptyStateDescription,
+ styles.emptyStateDescriptionDark
+ );
+ const iconStyles = usePreferredColorSchemeStyle(
+ styles[ 'media-placeholder__header-icon' ],
+ styles[ 'media-placeholder__header-icon--dark' ]
+ );
+ const placeholderIcon = cloneElement( icon, {
+ fill: iconStyles.fill,
+ } );
+ const accessibilityLabel = sprintf(
+ /* translators: accessibility text for the media block empty state. %s: media type */
+ __( '%s block. Empty' ),
+ placeholderTitle
+ );
- const renderContent = () => {
+ const renderContent = ( open ) => {
if ( isAppender === undefined || ! isAppender ) {
return (
<>
- { icon }
-
- { placeholderTitle }
-
+
+ { placeholderIcon }
+ { placeholderTitle }
+
{ children }
-
- { instructions }
-
+
+
+ { sentenceCase( instructions ) }
+
+
);
} else if ( isAppender && ! disableMediaButtons ) {
return (
-
-
-
+
+
+
+
+
);
}
};
- if ( isAppender && disableMediaButtons ) {
- return null;
- }
-
- const appenderStyle = getStylesFromColorScheme(
+ const appenderStyle = usePreferredColorSchemeStyle(
styles.appender,
styles.appenderDark
);
- const emptyStateContainerStyle = getStylesFromColorScheme(
- styles.emptyStateContainer,
- styles.emptyStateContainerDark
+ const containerSelectedStyle = usePreferredColorSchemeStyle(
+ styles[ 'media-placeholder__container-selected' ],
+ styles[ 'media-placeholder__container-selected--dark' ]
);
+ const containerStyle = [
+ usePreferredColorSchemeStyle(
+ styles[ 'media-placeholder__container' ],
+ styles[ 'media-placeholder__container--dark' ]
+ ),
+ blockEditContext?.isSelected &&
+ ! className.includes( 'no-block-outline' ) &&
+ containerSelectedStyle,
+ ];
+
+ if ( isAppender && disableMediaButtons ) {
+ return null;
+ }
return (
@@ -173,33 +236,19 @@ function MediaPlaceholder( props ) {
autoOpen={ autoOpenMediaUpload }
render={ ( { open, getMediaOptions } ) => {
return (
- {
- onFocus?.( event );
- open();
- } }
+
-
- { getMediaOptions() }
- { ! hideContent && renderContent() }
-
-
+ { getMediaOptions() }
+ { ! hideContent && renderContent( open ) }
+
);
} }
/>
@@ -207,4 +256,4 @@ function MediaPlaceholder( props ) {
);
}
-export default withPreferredColorScheme( MediaPlaceholder );
+export default MediaPlaceholder;
diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
index 708c2f07755e38..93b4dd945e044e 100644
--- a/packages/block-editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -1,50 +1,63 @@
-.emptyStateContainer {
+.media-placeholder__container {
flex: 1;
height: 142;
flex-direction: column;
align-items: center;
justify-content: center;
- background-color: $gray-lighten-30;
+ background-color: #e0e0e0; // $light-dim
padding-left: 12;
padding-right: 12;
padding-top: 12;
padding-bottom: 12;
- border-top-left-radius: 4;
- border-top-right-radius: 4;
- border-bottom-left-radius: 4;
- border-bottom-right-radius: 4;
+ border-top-left-radius: 2;
+ border-top-right-radius: 2;
+ border-bottom-left-radius: 2;
+ border-bottom-right-radius: 2;
}
-.emptyStateContainerDark {
- background-color: $background-dark-secondary;
+.media-placeholder__container--dark {
+ background-color: #1f1f1f; // $dark-dim
}
-.emptyStateTitle {
- text-align: center;
- margin-top: 4;
- margin-bottom: 16;
- font-size: 14;
- color: #2e4453;
+.media-placeholder__container-selected {
+ border-width: 2px;
+ border-color: $blue-40;
}
-.emptyStateTitleDark {
- color: $white;
+.media-placeholder__container-selected--dark {
+ border-color: $blue-50;
}
.emptyStateDescription {
- width: 100%;
text-align: center;
- color: $blue-wordpress;
- font-size: 14;
- font-weight: 500;
+ color: $white;
+ font-size: 16;
+ font-weight: 400;
+}
+
+.emptyStateDescriptionDark {
+ color: $black;
}
-.modalIcon {
+.media-placeholder__header-icon {
width: 24px;
height: 24px;
- justify-content: center;
- align-items: center;
- fill: $gray-dark;
+ margin-right: $grid-unit;
+ fill: $light-secondary;
+}
+
+.media-placeholder__header-icon--dark {
+ fill: $dark-tertiary;
+}
+
+.media-placeholder__header-title {
+ text-align: center;
+ font-size: 16;
+ color: $light-secondary;
+}
+
+.media-placeholder__header-title--dark {
+ color: $dark-tertiary;
}
.appender {
@@ -71,3 +84,25 @@
color: $background-dark-secondary;
background-color: $gray-20;
}
+
+.media-placeholder__button {
+ background-color: $light-primary;
+ border-radius: 3px;
+ padding: $grid-unit $grid-unit-20;
+}
+
+.media-placeholder__button--dark {
+ background-color: $dark-primary;
+}
+
+.media-placeholder__header {
+ flex-direction: row;
+ align-items: center;
+ margin-top: 4;
+ margin-bottom: 16;
+}
+
+.media-placeholder__appender {
+ width: 100%;
+ align-items: center;
+}
diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
index 22c927a4a657e0..54131121d798d1 100644
--- a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -395,22 +395,13 @@ exports[`Audio block renders placeholder without crashing 1`] = `
}
>
+
+
+
+
+
+
+
+ Audio
+
+
-
-
-
+
+ Add audio
+
-
- Audio
-
-
- ADD AUDIO
-
diff --git a/packages/block-library/src/block/editor.native.scss b/packages/block-library/src/block/editor.native.scss
index 3aa23e0ddd20ea..b56a50f676600d 100644
--- a/packages/block-library/src/block/editor.native.scss
+++ b/packages/block-library/src/block/editor.native.scss
@@ -19,8 +19,8 @@
background-color: $light-gray-400;
height: 1px;
position: absolute;
- left: -$block-selected-to-content + $block-selected-border-width;
- right: -$block-selected-to-content + $block-selected-border-width;
+ left: -$grid-unit-05;
+ right: -$grid-unit-05;
bottom: 16;
}
diff --git a/packages/block-library/src/embed/embed-placeholder.native.js b/packages/block-library/src/embed/embed-placeholder.native.js
index 966b96c939217c..35b71b3ab988e1 100644
--- a/packages/block-library/src/embed/embed-placeholder.native.js
+++ b/packages/block-library/src/embed/embed-placeholder.native.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
/**
* WordPress dependencies
@@ -18,6 +18,8 @@ import { useRef } from '@wordpress/element';
import styles from './styles.scss';
import { noticeOutline } from '../../../components/src/mobile/gridicons';
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+
const EmbedPlaceholder = ( {
icon,
isSelected,
@@ -28,10 +30,17 @@ const EmbedPlaceholder = ( {
tryAgain,
openEmbedLinkSettings,
} ) => {
- const containerStyle = usePreferredColorSchemeStyle(
- styles.embed__container,
- styles[ 'embed__container--dark' ]
+ const containerSelectedStyle = usePreferredColorSchemeStyle(
+ styles[ 'embed__container-selected' ],
+ styles[ 'embed__container-selected--dark' ]
);
+ const containerStyle = [
+ usePreferredColorSchemeStyle(
+ styles.embed__container,
+ styles[ 'embed__container--dark' ]
+ ),
+ isSelected && containerSelectedStyle,
+ ];
const labelStyle = usePreferredColorSchemeStyle(
styles.embed__label,
styles[ 'embed__label--dark' ]
@@ -44,6 +53,15 @@ const EmbedPlaceholder = ( {
);
const embedIconErrorStyle = styles[ 'embed__icon--error' ];
+ const buttonStyles = usePreferredColorSchemeStyle(
+ styles.embed__button,
+ styles[ 'embed__button--dark' ]
+ );
+ const iconStyles = usePreferredColorSchemeStyle(
+ styles.embed__icon,
+ styles[ 'embed__icon--dark' ]
+ );
+
const cannotEmbedMenuPickerRef = useRef();
const errorPickerOptions = {
@@ -89,55 +107,70 @@ const EmbedPlaceholder = ( {
return (
<>
-
-
- { cannotEmbed ? (
- <>
-
-
- { __( 'Unable to embed media' ) }
-
+
+ { cannotEmbed ? (
+ <>
+
+
+ { __( 'Unable to embed media' ) }
+
+
{ __( 'More options' ) }
-
-
- ) : (
- <>
-
+
+
+
+ ) : (
+ <>
+
+
{ label }
+
+
- { __( 'ADD LINK' ) }
+ { __( 'Add link' ) }
-
- ) }
-
-
+
+
+ ) }
+
);
};
diff --git a/packages/block-library/src/embed/styles.native.scss b/packages/block-library/src/embed/styles.native.scss
index fade4204a975bf..d7f07bc259361f 100644
--- a/packages/block-library/src/embed/styles.native.scss
+++ b/packages/block-library/src/embed/styles.native.scss
@@ -4,19 +4,28 @@
flex-direction: column;
align-items: center;
justify-content: center;
- background-color: $gray-lighten-30;
+ background-color: #e0e0e0; // $light-dim
padding-left: 12;
padding-right: 12;
padding-top: 12;
padding-bottom: 12;
- border-top-left-radius: 4;
- border-top-right-radius: 4;
- border-bottom-left-radius: 4;
- border-bottom-right-radius: 4;
+ border-top-left-radius: 2;
+ border-top-right-radius: 2;
+ border-bottom-left-radius: 2;
+ border-bottom-right-radius: 2;
}
.embed__container--dark {
- background-color: $background-dark-secondary;
+ background-color: #1f1f1f; // $dark-dim
+}
+
+.embed__container-selected {
+ border-width: 2px;
+ border-color: $blue-40;
+}
+
+.embed__container-selected--dark {
+ border-color: $blue-50;
}
.embed__icon--error {
@@ -24,23 +33,38 @@
fill: $alert-red;
}
+.embed__placeholder-header {
+ flex-direction: row;
+ align-items: center;
+ margin-top: 4;
+ margin-bottom: 16;
+}
+
+.embed__icon {
+ fill: $light-secondary;
+}
+
+.embed__icon--dark {
+ fill: $dark-tertiary;
+}
+
.embed__label {
text-align: center;
- margin-top: 4;
- margin-bottom: 4;
- font-size: 14;
- font-weight: 500;
- color: $gray-90;
+ margin-left: $grid-unit;
+ font-size: 16;
+ font-weight: 400;
+ color: $light-secondary;
}
.embed__label--dark {
- color: $gray-10;
+ color: $dark-tertiary;
}
.embed__description {
font-size: $default-font-size;
text-align: center;
- margin-bottom: 4;
+ margin-top: 4;
+ margin-bottom: 16;
color: $light-secondary;
}
@@ -53,12 +77,14 @@
}
.embed__action {
- width: 100%;
text-align: center;
- color: $blue-wordpress;
- font-size: 14;
- font-weight: 500;
- margin-top: 4;
+ color: $white;
+ font-size: 16;
+ font-weight: 400;
+}
+
+.embed__action--dark {
+ color: $black;
}
.embed-preview__loading {
@@ -158,3 +184,13 @@
.embed-no-preview__sheet-button--dark {
color: $blue-30;
}
+
+.embed__button {
+ background-color: $light-primary;
+ border-radius: 3px;
+ padding: $grid-unit $grid-unit-20;
+}
+
+.embed__button--dark {
+ background-color: $dark-primary;
+}
diff --git a/packages/block-library/src/embed/test/index.native.js b/packages/block-library/src/embed/test/index.native.js
index 6abdd2509f863b..9a3bad5e6a7340 100644
--- a/packages/block-library/src/embed/test/index.native.js
+++ b/packages/block-library/src/embed/test/index.native.js
@@ -330,7 +330,7 @@ describe( 'Embed block', () => {
const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
// Edit URL.
- fireEvent.press( await editor.findByText( 'ADD LINK' ) );
+ fireEvent.press( await editor.findByText( 'Add link' ) );
// Wait for edit URL modal to be visible.
const embedEditURLModal = editor.getByTestId(
@@ -351,7 +351,7 @@ describe( 'Embed block', () => {
const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
// Edit URL.
- fireEvent.press( editor.getByText( 'ADD LINK' ) );
+ fireEvent.press( editor.getByText( 'Add link' ) );
// Wait for edit URL modal to be visible.
const embedEditURLModal = editor.getByTestId(
@@ -392,7 +392,7 @@ describe( 'Embed block', () => {
const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
// Edit URL.
- fireEvent.press( editor.getByText( 'ADD LINK' ) );
+ fireEvent.press( editor.getByText( 'Add link' ) );
// Wait for edit URL modal to be visible.
const embedEditURLModal = editor.getByTestId(
@@ -592,7 +592,7 @@ describe( 'Embed block', () => {
fireEvent.press( editor.block );
// Edit URL.
- fireEvent.press( editor.getByText( 'ADD LINK' ) );
+ fireEvent.press( editor.getByText( 'Add link' ) );
// Wait for edit URL modal to be visible.
await waitForModalVisible( embedEditURLModal );
@@ -602,7 +602,7 @@ describe( 'Embed block', () => {
fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
// Edit URL.
- fireEvent.press( editor.getByText( 'ADD LINK' ) );
+ fireEvent.press( editor.getByText( 'Add link' ) );
// Wait for edit URL modal to be visible.
await waitForModalVisible( embedEditURLModal );
diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
index 34750c8559bd08..83a5fe5bce2e68 100644
--- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -441,22 +441,13 @@ exports[`File block renders placeholder without crashing 1`] = `
}
>
+
+
+
+
+
+
+
+ File
+
+
-
-
-
+
+ Choose a file
+
-
- File
-
-
- CHOOSE A FILE
-
`;
diff --git a/packages/block-library/src/gallery/shared-icon.native.js b/packages/block-library/src/gallery/shared-icon.native.js
deleted file mode 100644
index 16e89f5a95ac43..00000000000000
--- a/packages/block-library/src/gallery/shared-icon.native.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { gallery as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-const IconWithColorScheme = withPreferredColorScheme(
- ( { getStylesFromColorScheme } ) => {
- const colorSchemeStyles = getStylesFromColorScheme(
- styles.icon,
- styles.iconDark
- );
- return ;
- }
-);
-
-export const sharedIcon = ;
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
index ef4f445db337bc..fad641d61b7a97 100644
--- a/packages/block-library/src/gallery/test/index.native.js
+++ b/packages/block-library/src/gallery/test/index.native.js
@@ -134,7 +134,7 @@ describe( 'Gallery block', () => {
// Tap on Gallery block
const block = await getBlock( screen, 'Gallery' );
fireEvent.press( block );
- fireEvent.press( within( block ).getByText( 'ADD MEDIA' ) );
+ fireEvent.press( within( block ).getByText( 'Add media' ) );
// Observe that media options picker is displayed
/* eslint-disable jest/no-conditional-expect */
@@ -169,7 +169,7 @@ describe( 'Gallery block', () => {
} );
// Tap on Gallery block
- fireEvent.press( getByText( 'ADD MEDIA' ) );
+ fireEvent.press( getByText( 'Add media' ) );
// Observe that media options picker is displayed
expect( getByText( 'Choose images' ) ).toBeVisible();
@@ -283,7 +283,7 @@ describe( 'Gallery block', () => {
const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
// Upload images from device
- fireEvent.press( getByText( 'ADD MEDIA' ) );
+ fireEvent.press( getByText( 'Add media' ) );
selectOption( 'Choose from device' );
expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
@@ -321,7 +321,7 @@ describe( 'Gallery block', () => {
const { galleryBlock, getByText } = await initializeWithGalleryBlock();
// Upload images from device
- fireEvent.press( getByText( 'ADD MEDIA' ) );
+ fireEvent.press( getByText( 'Add media' ) );
fireEvent.press( getByText( 'Choose from device' ) );
expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
@@ -375,7 +375,7 @@ describe( 'Gallery block', () => {
const { galleryBlock, getByText } = await initializeWithGalleryBlock();
// Take a photo
- fireEvent.press( getByText( 'ADD MEDIA' ) );
+ fireEvent.press( getByText( 'Add media' ) );
fireEvent.press( getByText( 'Take a Photo' ) );
expectMediaPickerCall( 'DEVICE_CAMERA', [ 'image' ], true );
@@ -429,7 +429,7 @@ describe( 'Gallery block', () => {
);
// Upload images from free photo library
- fireEvent.press( getByText( 'ADD MEDIA' ) );
+ fireEvent.press( getByText( 'Add media' ) );
fireEvent.press( getByText( 'Free Photo Library' ) );
expectMediaPickerCall( 'stock-photo-library', [ 'image' ], true );
@@ -469,7 +469,7 @@ describe( 'Gallery block', () => {
const { galleryBlock, getByText } = await initializeWithGalleryBlock();
// Upload images from device
- fireEvent.press( getByText( 'ADD MEDIA' ) );
+ fireEvent.press( getByText( 'Add media' ) );
fireEvent.press( getByText( 'Choose from device' ) );
expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
@@ -569,7 +569,7 @@ describe( 'Gallery block', () => {
);
// Upload images from other apps
- fireEvent.press( getByText( 'ADD MEDIA' ) );
+ fireEvent.press( getByText( 'Add media' ) );
fireEvent.press( getByText( 'Other Apps' ) );
expectMediaPickerCall( 'other-files', [ 'image' ], true );
diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js
index 2e8bc4bf4a49bd..7d614e664c7fec 100644
--- a/packages/block-library/src/image/test/edit.native.js
+++ b/packages/block-library/src/image/test/edit.native.js
@@ -442,7 +442,7 @@ describe( 'Image Block', () => {
`;
const screen = await initializeEditor( { initialHtml } );
- fireEvent.press( screen.getByText( 'ADD IMAGE' ) );
+ fireEvent.press( screen.getByText( 'Add image' ) );
fireEvent.press( screen.getByText( 'WordPress Media Library' ) );
const expectedHtml = `
diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
index 2057486b73ac9c..dbc30dcf23e7aa 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -316,6 +316,7 @@ class MediaContainer extends Component {
onSelect={ this.onSelectMediaUploadOption }
allowedTypes={ ALLOWED_MEDIA_TYPES }
onFocus={ this.props.onFocus }
+ className={ 'no-block-outline' }
/>
);
}
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
index 8c93e1f604620a..e8576914065723 100644
--- a/packages/block-library/src/missing/edit.native.js
+++ b/packages/block-library/src/missing/edit.native.js
@@ -5,7 +5,7 @@ import {
View,
Text,
TouchableWithoutFeedback,
- TouchableHighlight,
+ TouchableOpacity,
} from 'react-native';
/**
@@ -83,7 +83,7 @@ export class UnsupportedBlockEdit extends Component {
);
return (
-
-
+
);
}
@@ -282,12 +282,14 @@ export class UnsupportedBlockEdit extends Component {
) }
>
{ this.renderHelpIcon() }
-
- { title }
+
+
+ { title }
+
{ subtitle }
{ this.renderSheet( title, originalName ) }
diff --git a/packages/block-library/src/missing/style.native.scss b/packages/block-library/src/missing/style.native.scss
index 6718713f320198..9a56f82f7e3f0d 100644
--- a/packages/block-library/src/missing/style.native.scss
+++ b/packages/block-library/src/missing/style.native.scss
@@ -31,11 +31,11 @@
height: 36;
padding-top: 8;
padding-bottom: 8;
- color: $gray-darken-20;
+ color: $light-secondary;
}
.infoIconDark {
- color: $gray-20;
+ color: $dark-tertiary;
}
.infoSheetIcon {
@@ -82,7 +82,8 @@
}
.unsupportedBlock {
- background-color: $gray-lighten-30;
+ height: 142;
+ background-color: #e0e0e0; // $light-dim
padding-top: 24;
padding-bottom: 24;
padding-left: 8;
@@ -96,31 +97,37 @@
}
.unsupportedBlockDark {
- background-color: $background-dark-secondary;
+ background-color: #1f1f1f; // $dark-dim
+}
+
+.unsupportedBlockHeader {
+ flex-direction: row;
+ align-items: center;
+ margin-top: 4;
+ margin-bottom: 8;
}
.unsupportedBlockIcon {
- color: $gray-dark;
+ color: $light-secondary;
}
.unsupportedBlockIconDark {
- color: $white;
+ color: $dark-tertiary;
}
.unsupportedBlockMessage {
- margin-top: 4;
text-align: center;
- color: $gray-dark;
- font-size: 14;
- font-weight: 600;
+ color: $light-secondary;
+ font-size: 16;
+ font-weight: 400;
+ margin-left: 6;
}
.unsupportedBlockMessageDark {
- color: $white;
+ color: $dark-tertiary;
}
.unsupportedBlockSubtitle {
- margin-top: 2;
text-align: center;
color: $gray-darken-20;
font-size: 12;
diff --git a/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
index f0f0db7010b54c..b287f58524c6f7 100644
--- a/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
@@ -25,6 +25,7 @@ exports[`Missing block renders without crashing 1`] = `
accessibilityLabel="Help button"
accessibilityRole="button"
accessible={true}
+ collapsable={false}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
@@ -33,6 +34,11 @@ exports[`Missing block renders without crashing 1`] = `
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
+ style={
+ {
+ "opacity": 1,
+ }
+ }
>