%2$s
';
+ $wrapper_markup = '%2$s
';
$items_markup = wp_dropdown_categories( $args );
$type = 'dropdown';
From fa3bfd5e960fb6d9901edc05530a27454ecb912a Mon Sep 17 00:00:00 2001
From: Antonis Lilis Another FSE Post
Another FSE Post
From 8a138c45b2fa21bf92d032ff011a5977fc72b47a Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Tue, 29 Jun 2021 11:30:37 +0200
Subject: [PATCH 11/30] Focus style followup. (#33022)
---
packages/block-editor/src/components/block-list/style.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index a0cd8651776ba4..2e150322c17623 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -172,6 +172,7 @@
// 2px outside.
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+ outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
// Show a light color for dark themes.
.is-dark-theme & {
From 8adb5be4e51673763921463b0c4663e6987e4623 Mon Sep 17 00:00:00 2001
From: Hug0-Drelon <69580439+Hug0-Drelon@users.noreply.github.com>
Date: Tue, 29 Jun 2021 11:59:24 +0200
Subject: [PATCH 12/30] add a label for screen reader in categories block
(#33060)
---
packages/block-library/src/categories/index.php | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/block-library/src/categories/index.php b/packages/block-library/src/categories/index.php
index c820b7bd76b578..3cffff955183c8 100644
--- a/packages/block-library/src/categories/index.php
+++ b/packages/block-library/src/categories/index.php
@@ -28,7 +28,7 @@ function render_block_core_categories( $attributes ) {
$id = 'wp-block-categories-' . $block_id;
$args['id'] = $id;
$args['show_option_none'] = __( 'Select Category' );
- $wrapper_markup = '
Date: Tue, 29 Jun 2021 13:47:27 +0300
Subject: [PATCH 13/30] [RN Mobile][Global Styles] Adds new Prop for Global
Styles Settings (#30544)
* Adds new Prop for Global Styles Settings
* Rename updateTheme to be more generic for update settings include GSS (#31566)
* Fix wrong naming of subscribeUpdateEditorSettings
* Update Gutenberg demo
* Updates new props to rawStyles and rawFeatures
* Update iOS Bridge for new values
* Mobile - Global styles: Pass settings and set color palette and gradients (#30684)
* Mobile - Read global styles and set color palette and gradients
* Parse all color variables
* Fix gradients
* Update global styles mocked data
* Move color settings
* Removed added spaces
* Add tests
* Update experimental features path and prepare for rawGlobalStylesBaseStyles
* Remove mock data and update code to use latest API changes
* Removes Android rawFeatures prop
* Mobile - Remove usage of rawFeatures
* Remove rawFeatures
* Adds raw Styles in React Native Bridge
* Mobile - Pass rawStyles on initial props and fix colors and gradients
* Add Raw Features back
* Revert "Removes Android rawFeatures prop"
This reverts commit 32a2b3aff85ed83d2a3c953f94d4f37685b4f2ca.
* Add rawFeatures in the mobile editor
* Mobile - Global styles: Set theme's background and text color (#30810)
* Mobile - Read global styles and set color palette and gradients
* Mobile - Enable colors for blocks that support it
* Parse all color variables
* Mobile - Set background, title, text and link colors
* Fix gradients
* Add placeholder color
* Update global styles mocked data
* Move color settings
* Removed added spaces
* Add tests
* Update experimental features path and prepare for rawGlobalStylesBaseStyles
* Add missing provider
* Get the right color attribute
* Remove mock data
* Mobile - Fix base global colors
Co-authored-by: Chip
Co-authored-by: Gerardo Pacheco
---
.../src/components/block-list/block.native.js | 7 +
.../block-settings/container.native.js | 9 +-
.../src/components/provider/index.native.js | 3 +-
packages/block-editor/src/hooks/color.js | 2 +-
.../src/paragraph/edit.native.js | 5 +
packages/components/src/index.native.js | 1 +
.../global-styles-context/index.native.js | 5 +
.../test/utils.native.js | 189 +++++++++++++++++-
.../global-styles-context/utils.native.js | 40 ++++
.../src/components/layout/index.native.js | 30 ++-
.../src/components/post-title/index.native.js | 30 ++-
.../src/components/provider/index.native.js | 43 ++--
.../RNReactNativeGutenbergBridgeModule.java | 10 +-
.../mobile/WPAndroidGlue/GutenbergProps.kt | 6 +
packages/react-native-bridge/index.js | 7 +-
.../react-native-bridge/ios/Gutenberg.swift | 38 ++--
.../ios/GutenbergBridgeDataSource.swift | 7 +-
.../ios/RNReactNativeGutenbergBridge.swift | 2 +-
.../GutenbergViewController.swift | 2 +-
packages/react-native-editor/src/index.js | 4 +
.../rich-text/src/component/index.native.js | 15 +-
test/native/setup.js | 2 +-
22 files changed, 384 insertions(+), 73 deletions(-)
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 018cf4760a07eb..c81a2d5469ecc1 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -48,11 +48,13 @@ function BlockForType( {
parentWidth,
wrapperProps,
blockWidth,
+ baseGlobalStyles,
} ) {
const defaultColors = useSetting( 'color.palette' ) || emptyArray;
const globalStyle = useGlobalStyles();
const mergedStyle = useMemo( () => {
return getMergedGlobalStyles(
+ baseGlobalStyles,
globalStyle,
wrapperProps.style,
attributes,
@@ -300,6 +302,7 @@ export default compose( [
withSelect( ( select, { clientId, rootClientId } ) => {
const {
getBlockIndex,
+ getSettings,
isBlockSelected,
__unstableGetBlockWithoutInnerBlocks,
getSelectedBlockClientId,
@@ -347,6 +350,9 @@ export default compose( [
isDescendantOfParentSelected ||
isParentSelected ||
parentId === '';
+ const baseGlobalStyles = getSettings()
+ ?.__experimentalGlobalStylesBaseStyles;
+
return {
icon,
name: name || 'core/missing',
@@ -360,6 +366,7 @@ export default compose( [
isParentSelected,
firstToSelectId,
isTouchable,
+ baseGlobalStyles,
wrapperProps: getWrapperProps(
attributes,
blockType.getEditWrapperProps
diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
index e9f16b185a5564..7f9d8a9073d398 100644
--- a/packages/block-editor/src/components/block-settings/container.native.js
+++ b/packages/block-editor/src/components/block-settings/container.native.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
import {
BottomSheet,
ColorSettings,
@@ -29,6 +29,11 @@ function BottomSheetSettings( {
settings,
...props
} ) {
+ const colorSettings = {
+ colors: useSetting( 'color.palette' ) || settings.colors,
+ gradients: useSetting( 'color.gradients' ) || settings.gradients,
+ };
+
return (
- { children };
}
export default withRegistryProvider( BlockEditorProvider );
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 554781d057b5fd..2da9875c07584f 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -234,7 +234,7 @@ export function ColorEdit( props ) {
localAttributes.current = attributes;
}, [ attributes ] );
- if ( ! hasColorSupport( blockName ) || Platform.OS !== 'web' ) {
+ if ( ! hasColorSupport( blockName ) ) {
return null;
}
diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
index a51a708a222767..1cd75758543006 100644
--- a/packages/block-library/src/paragraph/edit.native.js
+++ b/packages/block-library/src/paragraph/edit.native.js
@@ -30,6 +30,11 @@ function ParagraphBlock( {
const { align, content, placeholder } = attributes;
const styles = {
+ ...( mergedStyle?.baseColors && {
+ color: mergedStyle.baseColors?.color?.text,
+ placeholderColor: mergedStyle.baseColors?.color?.text,
+ linkColor: mergedStyle.baseColors?.elements?.link?.color?.text,
+ } ),
...mergedStyle,
...style,
};
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index ac8f5b0a237f22..e7e1deea5f7523 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -124,3 +124,4 @@ export {
withGlobalStyles,
getMergedGlobalStyles,
} from './mobile/global-styles-context';
+export { getGlobalStyles } from './mobile/global-styles-context/utils';
diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
index 81a60ccc8eb56e..1d4d0d45be6761 100644
--- a/packages/components/src/mobile/global-styles-context/index.native.js
+++ b/packages/components/src/mobile/global-styles-context/index.native.js
@@ -22,16 +22,21 @@ const GlobalStylesContext = createContext( { style: {} } );
GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
export const getMergedGlobalStyles = (
+ baseGlobalStyles,
globalStyle,
wrapperPropsStyle,
blockAttributes,
defaultColors
) => {
+ const baseGlobalColors = {
+ baseColors: baseGlobalStyles || {},
+ };
const blockStyleAttributes = pick(
blockAttributes,
BLOCK_STYLE_ATTRIBUTES
);
const mergedStyle = {
+ ...baseGlobalColors,
...globalStyle,
...wrapperPropsStyle,
};
diff --git a/packages/components/src/mobile/global-styles-context/test/utils.native.js b/packages/components/src/mobile/global-styles-context/test/utils.native.js
index 396dee85b215f6..e29dc8bbed7fa8 100644
--- a/packages/components/src/mobile/global-styles-context/test/utils.native.js
+++ b/packages/components/src/mobile/global-styles-context/test/utils.native.js
@@ -1,7 +1,12 @@
/**
* Internal dependencies
*/
-import { getBlockPaddings, getBlockColors } from '../utils';
+import {
+ getBlockPaddings,
+ getBlockColors,
+ parseColorVariables,
+ getGlobalStyles,
+} from '../utils';
const DEFAULT_COLORS = [
{ color: '#cd2653', name: 'Accent Color', slug: 'accent' },
@@ -9,6 +14,142 @@ const DEFAULT_COLORS = [
{ color: '#6d6d6d', name: 'Secondary', slug: 'secondary' },
];
+const GLOBAL_STYLES_PALETTE = [
+ {
+ slug: 'green',
+ color: '#D1E4DD',
+ name: 'Green',
+ },
+ {
+ slug: 'blue',
+ color: '#D1DFE4',
+ name: 'Blue',
+ },
+ {
+ slug: 'purple',
+ color: '#D1D1E4',
+ name: 'Purple',
+ },
+];
+
+const GLOBAL_STYLES_GRADIENTS = [
+ {
+ slug: 'purple-to-blue',
+ gradient:
+ 'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--blue))',
+ name: 'Purple to Blue',
+ },
+ {
+ slug: 'green-to-purple',
+ gradient:
+ 'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--purple))',
+ name: 'Green to Purple',
+ },
+];
+
+const DEFAULT_GLOBAL_STYLES = {
+ styles: {
+ color: {
+ background: 'var(--wp--preset--color--green)',
+ text: 'var(--wp--preset--color--blue)',
+ },
+ elements: {
+ link: {
+ color: {
+ text: 'var(--wp--preset--color--purple)',
+ },
+ },
+ },
+ },
+};
+
+const PARSED_GLOBAL_STYLES = {
+ styles: {
+ color: {
+ background: '#D1E4DD',
+ text: '#D1DFE4',
+ },
+ elements: {
+ link: {
+ color: {
+ text: '#D1D1E4',
+ },
+ },
+ },
+ },
+};
+
+const RAW_FEATURES = {
+ color: {
+ palette: {
+ core: [
+ {
+ name: 'Black',
+ slug: 'black',
+ color: '#000000',
+ },
+ {
+ name: 'Cyan bluish gray',
+ slug: 'cyan-bluish-gray',
+ color: '#abb8c3',
+ },
+ {
+ name: 'White',
+ slug: 'white',
+ color: '#ffffff',
+ },
+ ],
+ theme: [
+ {
+ slug: 'green',
+ color: '#D1E4DD',
+ name: 'Green',
+ },
+ {
+ slug: 'blue',
+ color: '#D1DFE4',
+ name: 'Blue',
+ },
+ {
+ slug: 'purple',
+ color: '#D1D1E4',
+ name: 'Purple',
+ },
+ ],
+ },
+ gradients: {
+ core: [
+ {
+ name: 'Vivid cyan blue to vivid purple',
+ gradient:
+ 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+ slug: 'vivid-cyan-blue-to-vivid-purple',
+ },
+ {
+ name: 'Light green cyan to vivid green cyan',
+ gradient:
+ 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+ slug: 'light-green-cyan-to-vivid-green-cyan',
+ },
+ ],
+ theme: [
+ {
+ slug: 'purple-to-blue',
+ gradient:
+ 'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--blue))',
+ name: 'Purple to Blue',
+ },
+ {
+ slug: 'green-to-purple',
+ gradient:
+ 'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--purple))',
+ name: 'Green to Purple',
+ },
+ ],
+ },
+ },
+};
+
describe( 'getBlockPaddings', () => {
const PADDING = 12;
@@ -84,3 +225,49 @@ describe( 'getBlockColors', () => {
);
} );
} );
+
+describe( 'parseColorVariables', () => {
+ it( 'returns the parsed colors values correctly', () => {
+ const blockColors = parseColorVariables(
+ JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+ GLOBAL_STYLES_PALETTE
+ );
+ expect( blockColors ).toEqual(
+ expect.objectContaining( PARSED_GLOBAL_STYLES )
+ );
+ } );
+} );
+
+describe( 'getGlobalStyles', () => {
+ it( 'returns the global styles data correctly', () => {
+ const rawFeatures = JSON.stringify( RAW_FEATURES );
+ const globalStyles = getGlobalStyles(
+ JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+ rawFeatures,
+ GLOBAL_STYLES_PALETTE,
+ GLOBAL_STYLES_GRADIENTS
+ );
+ const gradients = parseColorVariables(
+ JSON.stringify( GLOBAL_STYLES_GRADIENTS ),
+ GLOBAL_STYLES_PALETTE
+ );
+ const parsedExperimentalFeatures = parseColorVariables(
+ rawFeatures,
+ GLOBAL_STYLES_PALETTE
+ );
+
+ expect( globalStyles ).toEqual(
+ expect.objectContaining( {
+ colors: GLOBAL_STYLES_PALETTE,
+ gradients,
+ __experimentalFeatures: {
+ color: {
+ palette: parsedExperimentalFeatures?.color?.palette,
+ gradients: parsedExperimentalFeatures?.color?.gradients,
+ },
+ },
+ __experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
+ } )
+ );
+ } );
+} );
diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js
index c8e2bce0c91f8a..0cf5bee75c4c75 100644
--- a/packages/components/src/mobile/global-styles-context/utils.native.js
+++ b/packages/components/src/mobile/global-styles-context/utils.native.js
@@ -66,3 +66,43 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) {
return blockStyles;
}
+
+export function parseColorVariables( styles, colorPalette ) {
+ const stylesBase = styles;
+ const colorPrefixRegex = /var\(--wp--preset--color--(.*?)\)/g;
+
+ return stylesBase
+ ? JSON.parse(
+ stylesBase?.replace( colorPrefixRegex, ( _$1, $2 ) => {
+ const mappedColor = find( colorPalette, {
+ slug: $2,
+ } );
+ return mappedColor?.color;
+ } )
+ )
+ : styles;
+}
+
+export function getGlobalStyles( rawStyles, rawFeatures, colors, gradients ) {
+ const parsedGradients = parseColorVariables(
+ JSON.stringify( gradients ),
+ colors
+ );
+ const globalStyles = parseColorVariables( rawStyles, colors );
+ const parsedExperimentalFeatures = parseColorVariables(
+ rawFeatures,
+ colors
+ );
+
+ return {
+ colors,
+ gradients: parsedGradients,
+ __experimentalFeatures: {
+ color: {
+ palette: parsedExperimentalFeatures?.color?.palette,
+ gradients: parsedExperimentalFeatures?.color?.gradients,
+ },
+ },
+ __experimentalGlobalStylesBaseStyles: globalStyles,
+ };
+}
diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
index f0abe54cfc9e97..d98bae6739ef59 100644
--- a/packages/edit-post/src/components/layout/index.native.js
+++ b/packages/edit-post/src/components/layout/index.native.js
@@ -9,7 +9,11 @@ import SafeArea from 'react-native-safe-area';
*/
import { Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
-import { BottomSheetSettings, FloatingToolbar } from '@wordpress/block-editor';
+import {
+ BottomSheetSettings,
+ FloatingToolbar,
+ store as blockEditorStore,
+} from '@wordpress/block-editor';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import {
HTMLTextInput,
@@ -101,7 +105,7 @@ class Layout extends Component {
}
render() {
- const { getStylesFromColorScheme, mode } = this.props;
+ const { getStylesFromColorScheme, mode, globalStyles } = this.props;
const isHtmlView = mode === 'text';
@@ -118,6 +122,16 @@ class Layout extends Component {
bottom: this.state.safeAreaInsets.bottom,
};
+ const editorStyles = [
+ getStylesFromColorScheme(
+ styles.background,
+ styles.backgroundDark
+ ),
+ globalStyles?.background && {
+ backgroundColor: globalStyles.background,
+ },
+ ];
+
return (
+
{ isHtmlView ? this.renderHTML() : this.renderVisual() }
{ ! isHtmlView && Platform.OS === 'android' && (
{
const { isPostTitleSelected, getEditedPostAttribute } = select(
- 'core/editor'
- );
-
- const { getSelectedBlockClientId, getBlockRootClientId } = select(
- 'core/block-editor'
+ editorStore
);
+ const {
+ getSelectedBlockClientId,
+ getBlockRootClientId,
+ getSettings,
+ } = select( blockEditorStore );
const selectedId = getSelectedBlockClientId();
const selectionIsNested = !! getBlockRootClientId( selectedId );
+ const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
+ ?.color;
return {
postType: getEditedPostAttribute( 'type' ),
isAnyBlockSelected: !! selectedId,
isSelected: isPostTitleSelected(),
isDimmed: selectionIsNested,
+ globalStyles,
};
} ),
withDispatch( ( dispatch ) => {
const { undo, redo, togglePostTitleSelection } = dispatch(
- 'core/editor'
+ editorStore
);
const { clearSelectedBlock, insertDefaultBlock } = dispatch(
- 'core/block-editor'
+ blockEditorStore
);
return {
diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js
index df425e279fc05c..8440c998856622 100644
--- a/packages/editor/src/components/provider/index.native.js
+++ b/packages/editor/src/components/provider/index.native.js
@@ -13,14 +13,10 @@ import RNReactNativeGutenbergBridge, {
subscribeSetTitle,
subscribeMediaAppend,
subscribeReplaceBlock,
- subscribeUpdateTheme,
+ subscribeUpdateEditorSettings,
subscribeUpdateCapabilities,
subscribeShowNotice,
} from '@wordpress/react-native-bridge';
-
-/**
- * WordPress dependencies
- */
import { Component } from '@wordpress/element';
import { count as wordCount } from '@wordpress/wordcount';
import {
@@ -37,6 +33,7 @@ import {
validateThemeGradients,
store as blockEditorStore,
} from '@wordpress/block-editor';
+import { getGlobalStyles } from '@wordpress/components';
const postTypeEntities = [
{ name: 'post', baseURL: '/wp/v2/posts' },
@@ -84,13 +81,11 @@ class NativeEditorProvider extends Component {
}
componentDidMount() {
- const { capabilities, colors, gradients } = this.props;
+ const { capabilities, updateSettings } = this.props;
- this.props.updateSettings( {
+ updateSettings( {
...capabilities,
- // Set theme colors for the editor
- ...( colors ? { colors } : {} ),
- ...( gradients ? { gradients } : {} ),
+ ...this.getThemeColors( this.props ),
} );
this.subscriptionParentGetHtml = subscribeParentGetHtml( () => {
@@ -137,15 +132,10 @@ class NativeEditorProvider extends Component {
}
);
- this.subscriptionParentUpdateTheme = subscribeUpdateTheme(
- ( theme ) => {
- // Reset the colors and gradients in case one theme was set with custom items and then updated to a theme without custom elements.
-
- theme.colors = validateThemeColors( theme.colors );
-
- theme.gradients = validateThemeGradients( theme.gradients );
-
- this.props.updateSettings( theme );
+ this.subscriptionParentUpdateEditorSettings = subscribeUpdateEditorSettings(
+ ( editorSettings ) => {
+ const themeColors = this.getThemeColors( editorSettings );
+ updateSettings( themeColors );
}
);
@@ -187,8 +177,8 @@ class NativeEditorProvider extends Component {
this.subscriptionParentMediaAppend.remove();
}
- if ( this.subscriptionParentUpdateTheme ) {
- this.subscriptionParentUpdateTheme.remove();
+ if ( this.subscriptionParentUpdateEditorSettings ) {
+ this.subscriptionParentUpdateEditorSettings.remove();
}
if ( this.subscriptionParentUpdateCapabilities ) {
@@ -200,6 +190,17 @@ class NativeEditorProvider extends Component {
}
}
+ getThemeColors( { colors, gradients, rawStyles, rawFeatures } ) {
+ return {
+ ...( rawStyles
+ ? getGlobalStyles( rawStyles, rawFeatures, colors, gradients )
+ : {
+ colors: validateThemeColors( colors ),
+ gradients: validateThemeGradients( gradients ),
+ } ),
+ };
+ }
+
componentDidUpdate( prevProps ) {
if ( ! prevProps.isReady && this.props.isReady ) {
const blocks = this.props.blocks;
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
index 4f7c04bd8b3ca0..896748b541559e 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -44,7 +44,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
private static final String EVENT_NAME_NOTIFY_MODAL_CLOSED = "notifyModalClosed";
private static final String EVENT_NAME_PREFERRED_COLOR_SCHEME = "preferredColorScheme";
private static final String EVENT_NAME_MEDIA_REPLACE_BLOCK = "replaceBlock";
- private static final String EVENT_NAME_UPDATE_THEME = "updateTheme";
+ private static final String EVENT_NAME_UPDATE_EDITOR_SETTINGS = "updateEditorSettings";
private static final String EVENT_NAME_SHOW_NOTICE = "showNotice";
private static final String MAP_KEY_UPDATE_HTML = "html";
@@ -57,6 +57,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
public static final String MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_TYPE = "mediaType";
private static final String MAP_KEY_THEME_UPDATE_COLORS = "colors";
private static final String MAP_KEY_THEME_UPDATE_GRADIENTS = "gradients";
+ private static final String MAP_KEY_THEME_UPDATE_RAW_STYLES = "rawStyles";
public static final String MAP_KEY_MEDIA_FINAL_SAVE_RESULT_SUCCESS_VALUE = "success";
private static final String MAP_KEY_IS_PREFERRED_COLOR_SCHEME_DARK = "isPreferredColorSchemeDark";
@@ -144,6 +145,7 @@ public void updateTheme(@Nullable Bundle editorTheme) {
WritableMap writableMap = new WritableNativeMap();
Serializable colors = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_COLORS);
Serializable gradients = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_GRADIENTS);
+ Serializable rawStyles = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_RAW_STYLES);
if (colors != null) {
writableMap.putArray(MAP_KEY_THEME_UPDATE_COLORS, Arguments.fromList((ArrayList)colors));
@@ -153,7 +155,11 @@ public void updateTheme(@Nullable Bundle editorTheme) {
writableMap.putArray(MAP_KEY_THEME_UPDATE_GRADIENTS, Arguments.fromList((ArrayList)gradients));
}
- emitToJS(EVENT_NAME_UPDATE_THEME, writableMap);
+ if (rawStyles != null) {
+ writableMap.putString(MAP_KEY_THEME_UPDATE_RAW_STYLES, rawStyles.toString());
+ }
+
+ emitToJS(EVENT_NAME_UPDATE_EDITOR_SETTINGS, writableMap);
}
@ReactMethod
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
index 4425769cfe8b87..aa49f177f3c235 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
@@ -36,6 +36,10 @@ data class GutenbergProps @JvmOverloads constructor(
editorTheme?.also { theme ->
theme.getSerializable(PROP_COLORS)?.let { putSerializable(PROP_COLORS, it) }
theme.getSerializable(PROP_GRADIENTS)?.let { putSerializable(PROP_GRADIENTS, it) }
+ theme.getSerializable(PROP_STYLES)
+ ?.let { putSerializable(PROP_STYLES, it) }
+ theme.getSerializable(PROP_FEATURES)
+ ?.let { putSerializable(PROP_FEATURES, it) }
}
}
@@ -69,6 +73,8 @@ data class GutenbergProps @JvmOverloads constructor(
private const val PROP_TRANSLATIONS = "translations"
private const val PROP_COLORS = "colors"
private const val PROP_GRADIENTS = "gradients"
+ private const val PROP_STYLES = "rawStyles"
+ private const val PROP_FEATURES = "rawFeatures"
const val PROP_CAPABILITIES = "capabilities"
const val PROP_CAPABILITIES_CONTACT_INFO_BLOCK = "contactInfoBlock"
diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js
index fde2f098563465..7d781095749b0d 100644
--- a/packages/react-native-bridge/index.js
+++ b/packages/react-native-bridge/index.js
@@ -125,8 +125,11 @@ export function subscribeAndroidModalClosed( callback ) {
: undefined;
}
-export function subscribeUpdateTheme( callback ) {
- return gutenbergBridgeEvents.addListener( 'updateTheme', callback );
+export function subscribeUpdateEditorSettings( callback ) {
+ return gutenbergBridgeEvents.addListener(
+ 'updateEditorSettings',
+ callback
+ );
}
export function subscribePreferredColorScheme( callback ) {
diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift
index d6cc7605385125..cd143ae0d831f4 100644
--- a/packages/react-native-bridge/ios/Gutenberg.swift
+++ b/packages/react-native-bridge/ios/Gutenberg.swift
@@ -79,13 +79,10 @@ public class Gutenberg: NSObject {
initialProps["capabilities"] = capabilities.toJSPayload()
}
- let editorTheme = dataSource.gutenbergEditorTheme()
- if let colors = editorTheme?.colors {
- initialProps["colors"] = colors
- }
-
- if let gradients = editorTheme?.gradients {
- initialProps["gradients"] = gradients
+ let editorSettings = dataSource.gutenbergEditorSettings()
+ let settingsUpdates = properties(from: editorSettings)
+ initialProps.merge(settingsUpdates) { (intialProp, settingsUpdates) -> Any in
+ settingsUpdates
}
return initialProps
@@ -184,19 +181,32 @@ public class Gutenberg: NSObject {
bridgeModule.sendEventIfNeeded(.setFocusOnTitle, body: nil)
}
- public func updateTheme(_ editorTheme: GutenbergEditorTheme?) {
+ public func updateEditorSettings(_ editorSettings: GutenbergEditorSettings?) {
+ let settingsUpdates = properties(from: editorSettings)
+ sendEvent(.updateEditorSettings, body: settingsUpdates)
+ }
+
+ private func properties(from editorSettings: GutenbergEditorSettings?) -> [String : Any] {
+ var settingsUpdates = [String : Any]()
+ settingsUpdates["isFSETheme"] = editorSettings?.isFSETheme ?? false
- var themeUpdates = [String : Any]()
+ if let rawStyles = editorSettings?.rawStyles {
+ settingsUpdates["rawStyles"] = rawStyles
+ }
+
+ if let rawFeatures = editorSettings?.rawFeatures {
+ settingsUpdates["rawFeatures"] = rawFeatures
+ }
- if let colors = editorTheme?.colors {
- themeUpdates["colors"] = colors
+ if let colors = editorSettings?.colors {
+ settingsUpdates["colors"] = colors
}
- if let gradients = editorTheme?.gradients {
- themeUpdates["gradients"] = gradients
+ if let gradients = editorSettings?.gradients {
+ settingsUpdates["gradients"] = gradients
}
- sendEvent(.updateTheme, body:themeUpdates)
+ return settingsUpdates
}
public func showNotice(_ message: String) {
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
index d6023f4d1508d7..b082cbd60682df 100644
--- a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
+++ b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
@@ -46,7 +46,7 @@ public protocol GutenbergBridgeDataSource: class {
func gutenbergCapabilities() -> [Capabilities: Bool]
/// Asks the data source for a list of theme colors.
- func gutenbergEditorTheme() -> GutenbergEditorTheme?
+ func gutenbergEditorSettings() -> GutenbergEditorSettings?
/// Asks the data source for a view to show while the Editor is loading.
var loadingView: UIView? { get }
@@ -70,7 +70,10 @@ public extension GutenbergBridgeDataSource {
}
}
-public protocol GutenbergEditorTheme {
+public protocol GutenbergEditorSettings {
+ var isFSETheme: Bool { get }
+ var rawStyles: String? { get }
+ var rawFeatures: String? { get }
var colors: [[String: String]]? { get }
var gradients: [[String: String]]? { get }
}
diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
index 82f19d50a5a154..2b57384df96109 100644
--- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
+++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -369,7 +369,7 @@ extension RNReactNativeGutenbergBridge {
case mediaUpload
case setFocusOnTitle
case mediaAppend
- case updateTheme
+ case updateEditorSettings
case replaceBlock
case updateCapabilities
case showNotice
diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
index 4e24a4dc1f75d9..ae3cb177d7ccb0 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
+++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -296,7 +296,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
return ExampleAttachmentDelegate()
}
- func gutenbergEditorTheme() -> GutenbergEditorTheme? {
+ func gutenbergEditorSettings() -> GutenbergEditorSettings? {
return nil
}
diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
index 2d9cd3ed6c79ac..c8b8fd8b152ab2 100644
--- a/packages/react-native-editor/src/index.js
+++ b/packages/react-native-editor/src/index.js
@@ -81,6 +81,8 @@ const setupInitHooks = () => {
featuredImageId,
colors,
gradients,
+ rawStyles,
+ rawFeatures,
} = props;
if ( initialData === undefined && __DEV__ ) {
@@ -106,6 +108,8 @@ const setupInitHooks = () => {
capabilities,
colors,
gradients,
+ rawStyles,
+ rawFeatures,
};
}
);
diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
index 195de53e802fed..8f5afcc4857168 100644
--- a/packages/rich-text/src/component/index.native.js
+++ b/packages/rich-text/src/component/index.native.js
@@ -3,21 +3,18 @@
/**
* External dependencies
*/
+import { View, Platform } from 'react-native';
+import { get, pickBy, debounce, isString } from 'lodash';
+import memize from 'memize';
+
/**
* WordPress dependencies
*/
import RCTAztecView from '@wordpress/react-native-aztec';
-import { View, Platform } from 'react-native';
import {
showUserSuggestions,
showXpostSuggestions,
} from '@wordpress/react-native-bridge';
-import { get, pickBy, debounce, isString } from 'lodash';
-import memize from 'memize';
-
-/**
- * WordPress dependencies
- */
import { BlockFormatControls } from '@wordpress/block-editor';
import { Component } from '@wordpress/element';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -982,10 +979,12 @@ export class RichText extends Component {
text: html,
eventCount: this.lastEventCount,
selection,
- linkTextColor: defaultTextDecorationColor,
+ linkTextColor:
+ style?.linkColor || defaultTextDecorationColor,
} }
placeholder={ this.props.placeholder }
placeholderTextColor={
+ style?.placeholderColor ||
this.props.placeholderTextColor ||
defaultPlaceholderTextColor
}
diff --git a/test/native/setup.js b/test/native/setup.js
index 2df7fb1889b293..6fd0a13c873371 100644
--- a/test/native/setup.js
+++ b/test/native/setup.js
@@ -48,7 +48,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
subscribeFeaturedImageIdNativeUpdated: jest.fn(),
subscribeMediaAppend: jest.fn(),
subscribeAndroidModalClosed: jest.fn(),
- subscribeUpdateTheme: jest.fn(),
+ subscribeUpdateEditorSettings: jest.fn(),
subscribePreferredColorScheme: () => 'light',
subscribeUpdateCapabilities: jest.fn(),
subscribeShowNotice: jest.fn(),
From 8ed827d91d078bffd602755a0449ade569dd1d22 Mon Sep 17 00:00:00 2001
From: Bernie Reiter
Date: Tue, 29 Jun 2021 14:46:33 +0200
Subject: [PATCH 14/30] E2E Test Utils: Add getCurrentUser(), and use it for
user switching (#33050)
---
packages/e2e-test-utils/CHANGELOG.md | 1 +
packages/e2e-test-utils/src/get-current-user.js | 16 ++++++++++++++++
.../e2e-test-utils/src/switch-user-to-admin.js | 5 +++--
.../e2e-test-utils/src/switch-user-to-test.js | 5 +++--
4 files changed, 23 insertions(+), 4 deletions(-)
create mode 100644 packages/e2e-test-utils/src/get-current-user.js
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index 890f6040afa72b..4fea6127682e5e 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -5,6 +5,7 @@
### New Features
- Added `createUser` and `deleteUser` - Create and delete a user account, respectively.
+- Added `getCurrentUser` - Determine the currently logged in user. Changed `switchUserToAdmin` and `switchUserToTest` to use it.
## 5.3.0 (2021-05-31)
diff --git a/packages/e2e-test-utils/src/get-current-user.js b/packages/e2e-test-utils/src/get-current-user.js
new file mode 100644
index 00000000000000..d59ec0da2dd5da
--- /dev/null
+++ b/packages/e2e-test-utils/src/get-current-user.js
@@ -0,0 +1,16 @@
+/**
+ * Get the username of the user that's currently logged into WordPress (if any).
+ *
+ * @return {string?} username The user that's currently logged into WordPress (if any).
+ */
+export async function getCurrentUser() {
+ const cookies = await page.cookies();
+ const cookie = cookies.find(
+ ( c ) => !! c?.name?.startsWith( 'wordpress_logged_in_' )
+ );
+
+ if ( ! cookie?.value ) {
+ return;
+ }
+ return decodeURIComponent( cookie.value ).split( '|' )[ 0 ];
+}
diff --git a/packages/e2e-test-utils/src/switch-user-to-admin.js b/packages/e2e-test-utils/src/switch-user-to-admin.js
index f36cab835297bc..d1e51322149c0d 100644
--- a/packages/e2e-test-utils/src/switch-user-to-admin.js
+++ b/packages/e2e-test-utils/src/switch-user-to-admin.js
@@ -1,15 +1,16 @@
/**
* Internal dependencies
*/
+import { getCurrentUser } from './get-current-user';
import { loginUser } from './login-user';
-import { WP_USERNAME, WP_ADMIN_USER } from './shared/config';
+import { WP_ADMIN_USER } from './shared/config';
/**
* Switches the current user to the admin user (if the user
* running the test is not already the admin user).
*/
export async function switchUserToAdmin() {
- if ( WP_USERNAME === WP_ADMIN_USER.username ) {
+ if ( ( await getCurrentUser() ) === WP_ADMIN_USER.username ) {
return;
}
await loginUser( WP_ADMIN_USER.username, WP_ADMIN_USER.password );
diff --git a/packages/e2e-test-utils/src/switch-user-to-test.js b/packages/e2e-test-utils/src/switch-user-to-test.js
index c726de258fb577..b0a2d009cb0b0e 100644
--- a/packages/e2e-test-utils/src/switch-user-to-test.js
+++ b/packages/e2e-test-utils/src/switch-user-to-test.js
@@ -1,15 +1,16 @@
/**
* Internal dependencies
*/
+import { getCurrentUser } from './get-current-user';
import { loginUser } from './login-user';
-import { WP_USERNAME, WP_ADMIN_USER } from './shared/config';
+import { WP_USERNAME } from './shared/config';
/**
* Switches the current user to whichever user we should be
* running the tests as (if we're not already that user).
*/
export async function switchUserToTest() {
- if ( WP_USERNAME === WP_ADMIN_USER.username ) {
+ if ( ( await getCurrentUser() ) === WP_USERNAME ) {
return;
}
await loginUser();
From 24bf3628818e96d7f5def53351fa95383715471d Mon Sep 17 00:00:00 2001
From: Bernie Reiter
Date: Tue, 29 Jun 2021 15:29:58 +0200
Subject: [PATCH 15/30] Prepublish Panel: Disable the Publish and Cancel
buttons while saving (#32889)
Currently, when editing a post in such a way that a "multi-entity save" is required (i.e. updates to things that aren't just limited to the post content (and other post attributes), but e.g. site title and the like), the user is prompted with a panel to save those changes prior to publishing the post.
Once they're done saving, they're presented with the regular pre-publish panel, including the familiar 'Publish' and 'Cancel' buttons. Actually, those buttons are visible even before the rest of the pre-publish panel is: The panel might still show a spinner that indicates that entities are being saved, but the buttons are already present -- and clickable.
This has turned out to be a problem in e2e tests, where the headless browser is quick enough to press one of those buttons, even though entities haven't been saved yet. However, it's of course possible that a user might also be quick enough (e.g. if behind a slow network connection).
This commit changes the behavior to disable the buttons while entities are still being saved.
---
.../components/post-publish-button/index.js | 2 +-
.../post-publish-button/test/index.js | 30 +++++++++++++++++++
.../components/post-publish-panel/index.js | 6 +++-
.../test/__snapshots__/index.js.snap | 2 ++
4 files changed, 38 insertions(+), 2 deletions(-)
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 36b67b9756d455..58029c2789faae 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -147,7 +147,7 @@ export class PostPublishButton extends Component {
};
const buttonProps = {
- 'aria-disabled': isButtonDisabled && ! hasNonPostEntityChanges,
+ 'aria-disabled': isButtonDisabled,
className: 'editor-post-publish-button',
isBusy: ! isAutoSaving && isSaving && isPublished,
variant: 'primary',
diff --git a/packages/editor/src/components/post-publish-button/test/index.js b/packages/editor/src/components/post-publish-button/test/index.js
index 7dbcc34036c02a..b816b0477149fb 100644
--- a/packages/editor/src/components/post-publish-button/test/index.js
+++ b/packages/editor/src/components/post-publish-button/test/index.js
@@ -25,6 +25,22 @@ describe( 'PostPublishButton', () => {
);
} );
+ it( 'should be true if post is currently saving, even if there are non-post entity changes', () => {
+ // This normally means that we're still saving those changes.
+ const wrapper = shallow(
+
-
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 7bd560d187275c..e7507902cb5fea 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -135,6 +135,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
className="editor-post-publish-panel__header-cancel-button"
>
+
);
}
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index b1b6958dbe5f8c..3d5d5941bb7749 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -380,10 +380,23 @@ $preview-image-height: 140px;
padding: 10px;
}
-.block-editor-link-control__settings {
+.block-editor-link-control__tools {
+ display: flex;
+ align-items: center;
border-top: $border-width solid $gray-300;
margin: 0;
padding: $grid-unit-20 $grid-unit-30;
+}
+
+.block-editor-link-control__unlink {
+ padding-left: $grid-unit-20;
+ padding-right: $grid-unit-20;
+}
+
+.block-editor-link-control__settings {
+ flex: 1;
+ margin: 0;
+
:last-child {
margin-bottom: 0;
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 27e1665d869ff2..250e4656d3708d 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -227,6 +227,49 @@ describe( 'Basic rendering', () => {
expect( isEditing() ).toBe( false );
} );
} );
+
+ describe( 'Unlinking', () => {
+ it( 'should not show "Unlink" button if no onRemove handler is provided', () => {
+ act( () => {
+ render(
+ - - +
{ @@ -89,6 +89,12 @@ describe( 'Widgets screen', () => { ); expect( categoryHeaders.length > 0 ).toBe( true ); + const searchBox = await find( { + role: 'searchbox', + name: 'Search for blocks and patterns', + } ); + await searchBox.type( blockName ); + const addBlock = await find( { role: 'option', @@ -394,109 +400,123 @@ describe( 'Widgets screen', () => { ` ); } ); - async function addMarquee() { - // There will be 2 matches here. - // One is the in-between inserter, - // and the other one is the button block appender. - const [ inlineInserterButton ] = await findAll( { - role: 'combobox', - name: 'Add block', - } ); - await inlineInserterButton.click(); - - // TODO: Convert to find() API from puppeteer-testing-library. - const inserterSearchBox = await page.waitForSelector( - 'aria/Search for blocks and patterns[role="searchbox"]' - ); - await expect( inserterSearchBox ).toHaveFocus(); + describe( 'Function widgets', () => { + async function addMarquee( nbExpectedMarquees ) { + const marqueeBlock = await getBlockInGlobalInserter( + 'Marquee Greeting' + ); + await marqueeBlock.click(); + await page.waitForFunction( + ( expectedMarquees ) => { + return ( + document.querySelectorAll( + '[data-testid="marquee-greeting"]' + ).length === expectedMarquees + ); + }, + {}, + nbExpectedMarquees + ); + } - await page.keyboard.type( 'Marquee' ); + async function deleteExistingMarquees() { + const widgetAreasHoldingMarqueeWidgets = await page.$x( + '//input[@data-testid="marquee-greeting"]/ancestor::div[@aria-label="Block: Widget Area"]' + ); + for ( const widgetArea of widgetAreasHoldingMarqueeWidgets ) { + const closedPanelBody = await widgetArea.$( + '.components-panel__body:not(.is-opened)' + ); + if ( closedPanelBody ) { + await closedPanelBody.focus(); + await closedPanelBody.click(); + } - const inlineQuickInserter = await find( { - role: 'listbox', - name: 'Blocks', - } ); - const marqueeBlockOption = await find( - { - role: 'option', - }, - { - root: inlineQuickInserter, + const [ existingMarqueeWidgets ] = await widgetArea.$x( + '//input[@data-testid="marquee-greeting"]/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]' + ); + if ( existingMarqueeWidgets ) { + await existingMarqueeWidgets.focus(); + await pressKeyWithModifier( 'access', 'z' ); + } } - ); - await marqueeBlockOption.click(); - } - - it( 'Should add and save the marquee widget', async () => { - await activatePlugin( 'gutenberg-test-marquee-widget' ); - await visitAdminPage( 'widgets.php' ); + } - await addMarquee(); + beforeAll( async () => { + await activatePlugin( 'gutenberg-test-marquee-widget' ); + } ); - await find( { - selector: '[data-block][data-type="core/legacy-widget"]', + beforeEach( async () => { + await deleteExistingMarquees(); } ); - const greetingsInput = await find( { - selector: '#marquee-greeting', + afterAll( async () => { + await deactivatePlugin( 'gutenberg-test-marquee-widget' ); } ); - await greetingsInput.click(); - await page.keyboard.type( 'Howdy' ); - await saveWidgets(); + it( 'Should add and save the marquee widget', async () => { + await addMarquee( 1 ); - let editedSerializedWidgetAreas = await getSerializedWidgetAreas(); - await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` - Object { - "sidebar-1": "", - } - ` ); + const [ marqueeInput ] = await page.$x( + '//input[@data-testid="marquee-greeting"]' + ); + await marqueeInput.focus(); + await marqueeInput.type( 'Howdy' ); - await page.reload(); + // The first marquee is saved after clicking the form save button. + const [ marqueeSaveButton ] = await marqueeInput.$x( + '//input/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]//button[@type="submit"]' + ); + await marqueeSaveButton.click(); - editedSerializedWidgetAreas = await getSerializedWidgetAreas(); - await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` - Object { - "sidebar-1": "", - } - ` ); + await saveWidgets(); - // Add another marquee, it shouldn't be saved - await addMarquee(); + let editedSerializedWidgetAreas = await getSerializedWidgetAreas(); + await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` + Object { + "sidebar-1": "", + } + ` ); - // It takes a moment to load the form, let's wait for it. - await waitFor( async () => { - const marquees = await findAll( { - selector: '[id=marquee-greeting]', - } ); - if ( marquees.length === 1 ) { - throw new Error(); + await page.reload(); + + editedSerializedWidgetAreas = await getSerializedWidgetAreas(); + await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` + Object { + "sidebar-1": "", } - } ); + ` ); - const marquees = await findAll( { - selector: '[id=marquee-greeting]', - } ); + await addMarquee( 2 ); - expect( marquees ).toHaveLength( 2 ); - await marquees[ 1 ].click(); - await page.keyboard.type( 'Second howdy' ); + const marqueeInputs = await page.$$( + '[data-testid="marquee-greeting"]' + ); - await saveWidgets(); - editedSerializedWidgetAreas = await getSerializedWidgetAreas(); - await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` - Object { - "sidebar-1": "", - } - ` ); + expect( marqueeInputs ).toHaveLength( 2 ); + await marqueeInputs[ 0 ].focus(); + await marqueeInputs[ 0 ].type( 'first howdy' ); + + await marqueeInputs[ 1 ].focus(); + await marqueeInputs[ 1 ].type( 'Second howdy' ); + + // No marquee should be changed without clicking on their "save" button. + // The second marquee shouldn't be stored as a widget. + // See #32978 for more info. + await saveWidgets(); + editedSerializedWidgetAreas = await getSerializedWidgetAreas(); + await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` + Object { + "sidebar-1": "", + } + ` ); - await page.reload(); - const marqueesAfter = await findAll( { - selector: '[id=marquee-greeting]', + await page.reload(); + const marqueesAfter = await findAll( { + selector: '[data-testid="marquee-greeting"]', + } ); + expect( marqueesAfter ).toHaveLength( 1 ); } ); - expect( marqueesAfter ).toHaveLength( 1 ); - - await deactivatePlugin( 'gutenberg-test-marquee-widget' ); } ); // Disable reason: We temporary skip this test until we can figure out why it fails sometimes. @@ -528,7 +548,6 @@ describe( 'Widgets screen', () => { "sidebar-1": "", - "wp_inactive_widgets": "", } ` ); const initialWidgets = await getWidgetAreaWidgets(); @@ -599,7 +618,6 @@ describe( 'Widgets screen', () => { ", - "wp_inactive_widgets": "", } ` ); const editedWidgets = await getWidgetAreaWidgets(); From da5355f9c93c7f42794e94f018ef6bb4c2434c84 Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation