From a58272e2ee19358321c01dbce7263fa5e27ad6a0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 30 Sep 2020 07:46:17 +0100 Subject: [PATCH 01/60] Mark the color support flag as stable (#25694) --- lib/block-supports/colors.php | 6 ++--- lib/global-styles.php | 12 +++++----- packages/block-editor/src/hooks/color.js | 6 ++--- .../block-library/src/button/deprecated.js | 2 +- packages/block-library/src/columns/block.json | 4 ++-- packages/block-library/src/group/block.json | 4 ++-- packages/block-library/src/heading/block.json | 4 ++-- packages/block-library/src/list/block.json | 2 +- .../block-library/src/media-text/block.json | 4 ++-- .../block-library/src/navigation/block.json | 2 +- .../block-library/src/paragraph/block.json | 4 ++-- .../block-library/src/post-author/block.json | 4 ++-- .../src/post-comments-count/block.json | 2 +- .../src/post-comments-form/block.json | 4 ++-- .../src/post-comments/block.json | 4 ++-- .../block-library/src/post-date/block.json | 2 +- .../block-library/src/post-excerpt/block.json | 4 ++-- .../src/post-hierarchical-terms/block.json | 4 ++-- .../block-library/src/post-tags/block.json | 4 ++-- .../block-library/src/post-title/block.json | 2 +- .../block-library/src/site-tagline/block.json | 2 +- .../block-library/src/site-title/block.json | 2 +- .../src/template-part/block.json | 4 ++-- packages/edit-navigation/src/index.js | 2 +- phpunit/class-block-supported-styles-test.php | 24 +++++++++---------- 25 files changed, 57 insertions(+), 57 deletions(-) diff --git a/lib/block-supports/colors.php b/lib/block-supports/colors.php index 8649b14d6d6095..b0bb4e1e22ada9 100644 --- a/lib/block-supports/colors.php +++ b/lib/block-supports/colors.php @@ -13,7 +13,7 @@ function gutenberg_register_colors_support( $block_type ) { $color_support = false; if ( property_exists( $block_type, 'supports' ) ) { - $color_support = gutenberg_experimental_get( $block_type->supports, array( '__experimentalColor' ), false ); + $color_support = gutenberg_experimental_get( $block_type->supports, array( 'color' ), false ); } $has_text_colors_support = true === $color_support || ( is_array( $color_support ) && gutenberg_experimental_get( $color_support, array( 'text' ), true ) ); $has_background_colors_support = true === $color_support || ( is_array( $color_support ) && gutenberg_experimental_get( $color_support, array( 'background' ), true ) ); @@ -60,10 +60,10 @@ function gutenberg_register_colors_support( $block_type ) { * @return array Colors CSS classes and inline styles. */ function gutenberg_apply_colors_support( $attributes, $block_attributes, $block_type ) { - $color_support = gutenberg_experimental_get( $block_type->supports, array( '__experimentalColor' ), false ); + $color_support = gutenberg_experimental_get( $block_type->supports, array( 'color' ), false ); $has_text_colors_support = true === $color_support || ( is_array( $color_support ) && gutenberg_experimental_get( $color_support, array( 'text' ), true ) ); $has_background_colors_support = true === $color_support || ( is_array( $color_support ) && gutenberg_experimental_get( $color_support, array( 'background' ), true ) ); - $has_link_colors_support = gutenberg_experimental_get( $color_support, array( 'linkColor' ), false ); + $has_link_colors_support = gutenberg_experimental_get( $color_support, array( 'link' ), false ); $has_gradients_support = gutenberg_experimental_get( $color_support, array( 'gradients' ), false ); // Text Colors. diff --git a/lib/global-styles.php b/lib/global-styles.php index 1fbdf36f00d95c..52c7b3e5d7a533 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -417,10 +417,10 @@ function gutenberg_experimental_global_styles_get_style_property() { */ function gutenberg_experimental_global_styles_get_support_keys() { return array( - '--wp--style--color--link' => array( '__experimentalColor', 'linkColor' ), - 'background' => array( '__experimentalColor', 'gradients' ), - 'backgroundColor' => array( '__experimentalColor' ), - 'color' => array( '__experimentalColor' ), + '--wp--style--color--link' => array( 'color', 'link' ), + 'background' => array( 'color', 'gradients' ), + 'backgroundColor' => array( 'color' ), + 'color' => array( 'color' ), 'fontSize' => array( '__experimentalFontSize' ), 'lineHeight' => array( '__experimentalLineHeight' ), ); @@ -485,8 +485,8 @@ function gutenberg_experimental_global_styles_get_block_data() { 'supports' => array( '__experimentalSelector' => ':root', '__experimentalFontSize' => true, - '__experimentalColor' => array( - 'linkColor' => true, + 'color' => array( + 'link' => true, 'gradients' => true, ), ), diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index d1962e7011cb2f..2f083d9af2f942 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -30,7 +30,7 @@ import { cleanEmptyObject } from './utils'; import ColorPanel from './color-panel'; import useEditorFeature from '../components/use-editor-feature'; -export const COLOR_SUPPORT_KEY = '__experimentalColor'; +export const COLOR_SUPPORT_KEY = 'color'; const EMPTY_ARRAY = []; const hasColorSupport = ( blockType ) => { @@ -40,7 +40,7 @@ const hasColorSupport = ( blockType ) => { const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY ); return ( colorSupport && - ( colorSupport.linkColor === true || + ( colorSupport.link === true || colorSupport.gradient === true || colorSupport.background !== false || colorSupport.text !== false ) @@ -54,7 +54,7 @@ const hasLinkColorSupport = ( blockType ) => { const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY ); - return isObject( colorSupport ) && !! colorSupport.linkColor; + return isObject( colorSupport ) && !! colorSupport.link; }; const hasGradientSupport = ( blockType ) => { diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 5316e590bd50fb..110807907fc3c3 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -85,7 +85,7 @@ const deprecated = [ supports: { align: true, alignWide: false, - __experimentalColor: { gradients: true }, + color: { gradients: true }, }, attributes: { ...blockAttributes, diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 0a84a4a35d7812..a7cdf327d5ae51 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -14,9 +14,9 @@ ], "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true } } } diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index a2d0cc083a9f6d..28f40ed5094faa 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -15,9 +15,9 @@ "anchor": true, "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true }, "__experimentalPadding": true } diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index fd03a4487ee5aa..ce65c1ab21dece 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -23,8 +23,8 @@ "anchor": true, "className": false, "lightBlockWrapper": true, - "__experimentalColor": { - "linkColor": true + "color": { + "link": true }, "__experimentalFontSize": true, "__experimentalLineHeight": true, diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json index 3fa10c51a1f859..ccc47db5ec06bc 100644 --- a/packages/block-library/src/list/block.json +++ b/packages/block-library/src/list/block.json @@ -27,7 +27,7 @@ "supports": { "anchor": true, "className": false, - "__experimentalColor": { + "color": { "gradients": true }, "__unstablePasteTextInline": true, diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index 9911c4d35edc1b..978ebabef59185 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -85,9 +85,9 @@ "align": [ "wide", "full" ], "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true } } } diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index d12d267cf26a1b..aa6e3772b51f0d 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -50,7 +50,7 @@ "inserter": true, "lightBlockWrapper": true, "__experimentalFontSize": true, - "__experimentalColor": { + "color": { "textColor": true, "backgroundColor": true } diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 91d8ad357f7ebf..851e1d609d2477 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -30,8 +30,8 @@ "anchor": true, "className": false, "lightBlockWrapper": true, - "__experimentalColor": { - "linkColor": true + "color": { + "link": true }, "__experimentalFontSize": true, "__experimentalLineHeight": true, diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 3e788777dec81d..2e93b12efc59f0 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -28,9 +28,9 @@ "html": false, "lightBlockWrapper": true, "__experimentalFontSize": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true }, "__experimentalLineHeight": true } diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json index 5908f13b721c76..b3a1ad83ef9d3b 100644 --- a/packages/block-library/src/post-comments-count/block.json +++ b/packages/block-library/src/post-comments-count/block.json @@ -12,7 +12,7 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true }, "__experimentalFontSize": true, diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json index c0e131b83b231b..3f86d699afcc9c 100644 --- a/packages/block-library/src/post-comments-form/block.json +++ b/packages/block-library/src/post-comments-form/block.json @@ -13,9 +13,9 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true }, "__experimentalFontSize": true, "__experimentalLineHeight": true diff --git a/packages/block-library/src/post-comments/block.json b/packages/block-library/src/post-comments/block.json index 51dbb5c22dcbcc..89ffe296363773 100644 --- a/packages/block-library/src/post-comments/block.json +++ b/packages/block-library/src/post-comments/block.json @@ -18,9 +18,9 @@ "full" ], "__experimentalFontSize": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true }, "__experimentalLineHeight": true } diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json index 872bf705c01162..6ac5c23e52f82d 100644 --- a/packages/block-library/src/post-date/block.json +++ b/packages/block-library/src/post-date/block.json @@ -16,7 +16,7 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true }, "__experimentalFontSize": true, diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index 28952d268ff922..41c98a86ba1566 100644 --- a/packages/block-library/src/post-excerpt/block.json +++ b/packages/block-library/src/post-excerpt/block.json @@ -25,9 +25,9 @@ "html": false, "lightBlockWrapper": true, "__experimentalFontSize": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true }, "__experimentalLineHeight": true } diff --git a/packages/block-library/src/post-hierarchical-terms/block.json b/packages/block-library/src/post-hierarchical-terms/block.json index 0afec0b02857af..b03942e8a96aef 100644 --- a/packages/block-library/src/post-hierarchical-terms/block.json +++ b/packages/block-library/src/post-hierarchical-terms/block.json @@ -17,9 +17,9 @@ "html": false, "lightBlockWrapper": true, "__experimentalFontSize": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true }, "__experimentalLineHeight": true } diff --git a/packages/block-library/src/post-tags/block.json b/packages/block-library/src/post-tags/block.json index 4b4c95c0b351dc..c56df18a7ce608 100644 --- a/packages/block-library/src/post-tags/block.json +++ b/packages/block-library/src/post-tags/block.json @@ -11,9 +11,9 @@ "html": false, "lightBlockWrapper": true, "__experimentalFontSize": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true }, "__experimentalLineHeight": true } diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index 70cfbdec753be3..106f1e58638dc2 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -30,7 +30,7 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true }, "__experimentalFontSize": true, diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json index b0b4d5ab95b0b0..2b867dece0c442 100644 --- a/packages/block-library/src/site-tagline/block.json +++ b/packages/block-library/src/site-tagline/block.json @@ -9,7 +9,7 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true }, "__experimentalFontSize": true, diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index 4817093296629a..460944a9455698 100644 --- a/packages/block-library/src/site-title/block.json +++ b/packages/block-library/src/site-title/block.json @@ -13,7 +13,7 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true }, "__experimentalFontSize": true, diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json index 839fe03f0759c7..e79c8f92e991a4 100644 --- a/packages/block-library/src/template-part/block.json +++ b/packages/block-library/src/template-part/block.json @@ -20,9 +20,9 @@ "align": true, "html": false, "lightBlockWrapper": true, - "__experimentalColor": { + "color": { "gradients": true, - "linkColor": true + "link": true } } } diff --git a/packages/edit-navigation/src/index.js b/packages/edit-navigation/src/index.js index db23acc1945f9c..cca55f8bb797eb 100644 --- a/packages/edit-navigation/src/index.js +++ b/packages/edit-navigation/src/index.js @@ -43,7 +43,7 @@ function removeNavigationBlockSettingsUnsupportedFeatures( settings, name ) { ...omit( settings.supports, [ 'anchor', 'customClassName', - '__experimentalColor', + 'color', '__experimentalFontSize', ] ), customClassName: false, diff --git a/phpunit/class-block-supported-styles-test.php b/phpunit/class-block-supported-styles-test.php index fef5e2bf45d1a8..44c29e68253769 100644 --- a/phpunit/class-block-supported-styles-test.php +++ b/phpunit/class-block-supported-styles-test.php @@ -143,7 +143,7 @@ function test_named_color_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => true, + 'color' => true, ), 'render_callback' => true, ); @@ -175,7 +175,7 @@ function test_custom_color_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => true, + 'color' => true, ), 'render_callback' => true, ); @@ -212,8 +212,8 @@ function test_named_link_color_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( - 'linkColor' => true, + 'color' => array( + 'link' => true, ), ), 'render_callback' => true, @@ -243,8 +243,8 @@ function test_custom_link_color_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( - 'linkColor' => true, + 'color' => array( + 'link' => true, ), ), 'render_callback' => true, @@ -274,7 +274,7 @@ function test_named_gradient_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( + 'color' => array( 'gradients' => true, ), ), @@ -305,7 +305,7 @@ function test_custom_gradient_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( + 'color' => array( 'gradients' => true, ), ), @@ -570,9 +570,9 @@ function test_all_supported() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( + 'color' => array( 'gradients' => true, - 'linkColor' => true, + 'link' => true, ), '__experimentalFontSize' => true, '__experimentalLineHeight' => true, @@ -660,9 +660,9 @@ function test_render_callback_required() { 'attributes' => array(), 'supports' => array( 'align' => true, - '__experimentalColor' => array( + 'color' => array( 'gradients' => true, - 'linkColor' => true, + 'link' => true, ), '__experimentalFontSize' => true, '__experimentalLineHeight' => true, From 2159e2d8461881b4a0cbabd39471eb3c12c4fab2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 30 Sep 2020 10:40:02 +0300 Subject: [PATCH 02/60] Block: set new block node if it changes (#25698) --- .../src/components/block-list/block-wrapper.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js index 4aef321a0bf20b..34e8e0b7eb35f6 100644 --- a/packages/block-editor/src/components/block-list/block-wrapper.js +++ b/packages/block-editor/src/components/block-list/block-wrapper.js @@ -111,6 +111,20 @@ export function useBlockWrapperProps( props = {}, { __unstableIsHtml } = {} ) { } }, [ isSelected, isFirstMultiSelected, isLastMultiSelected ] ); + // Set new block node if it changes. + // This effect should happen on every render, so no dependencies should be + // added. + useEffect( () => { + const node = ref.current; + setBlockNodes( ( nodes ) => { + if ( ! nodes[ clientId ] || nodes[ clientId ] === node ) { + return nodes; + } + + return { ...nodes, [ clientId ]: node }; + } ); + } ); + // translators: %s: Type of block (i.e. Text, Image etc) const blockLabel = sprintf( __( 'Block: %s' ), blockTitle ); From c4c5507f63a7fed17429c79a67069c41f1d4e348 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 30 Sep 2020 10:46:19 +0300 Subject: [PATCH 03/60] Adds editorMode initial property with values 'editor'(default) and 'preview' (#25661) --- .../org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt index c7d4172319696a..6052b72b244b54 100644 --- a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt +++ b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt @@ -12,6 +12,7 @@ data class GutenbergProps @JvmOverloads constructor( val translations: Bundle, val isDarkMode: Boolean, val htmlModeEnabled: Boolean, + val isPreview: Boolean = false, val isModalLayoutPickerEnabled: Boolean = false ) { @@ -23,6 +24,9 @@ data class GutenbergProps @JvmOverloads constructor( putBundle(PROP_TRANSLATIONS, translations) putBoolean(PROP_INITIAL_HTML_MODE_ENABLED, htmlModeEnabled) + val editorMode = if (isPreview) PROP_EDITOR_MODE_PREVIEW else PROP_EDITOR_MODE_EDITOR + putString(PROP_EDITOR_MODE, editorMode) + putBundle(PROP_CAPABILITIES, getUpdatedCapabilitiesProps()) editorTheme?.also { theme -> @@ -55,6 +59,10 @@ data class GutenbergProps @JvmOverloads constructor( private const val PROP_COLORS = "colors" private const val PROP_GRADIENTS = "gradients" + private const val PROP_EDITOR_MODE = "editorMode" + private const val PROP_EDITOR_MODE_PREVIEW = "preview" + private const val PROP_EDITOR_MODE_EDITOR = "editor" + const val PROP_CAPABILITIES = "capabilities" const val PROP_CAPABILITIES_MENTIONS = "mentions" const val PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR = "unsupportedBlockEditor" From 25be2e6e1397ab219a45f327a57c294127055fa0 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 30 Sep 2020 04:32:30 -0400 Subject: [PATCH 04/60] Define text color for warning message component (#25713) --- packages/block-editor/src/components/warning/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/warning/style.scss b/packages/block-editor/src/components/warning/style.scss index 1fdb061d2af34b..cc082b0ea4e69c 100644 --- a/packages/block-editor/src/components/warning/style.scss +++ b/packages/block-editor/src/components/warning/style.scss @@ -14,6 +14,7 @@ line-height: $default-line-height; font-family: $default-font; font-size: $default-font-size; + color: $gray-900; margin: 0 0 1em; } From 071f88d6e1ab02758cb718a0101ce8b6e2c54d4a Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Wed, 30 Sep 2020 10:38:40 +0200 Subject: [PATCH 05/60] Remove animation from mover buttons. (#25728) The animation was intended to better convey direction, and were added as an experiment. It doesn't seem successful, so let's remove it again. --- .../src/components/block-list/style.scss | 45 +------------------ 1 file changed, 1 insertion(+), 44 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 83b63b4ee31dcf..ad60dd086b12ca 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -538,63 +538,20 @@ .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { min-width: $block-toolbar-height/2; width: $block-toolbar-height/2; - - // Animate buttons on hover. - &.is-up-button { - svg { - transition: ease-in-out transform 0.1s; - @include reduce-motion("transition"); - } - &:focus, - &:hover { - svg { - transform: translateX(-2px); - } - } - } - - &.is-down-button { - svg { - transition: ease-in-out transform 0.1s; - @include reduce-motion("transition"); - } - &:focus, - &:hover { - svg { - transform: translateX(2px); - } - } - } } .block-editor-block-mover:not(.is-horizontal) { - // Position SVGs. Animate buttons on hover. + // Position SVGs. .block-editor-block-mover-button { &.is-up-button { svg { margin-top: 2px; - transition: ease-in-out transform 0.1s; - @include reduce-motion("transition"); - } - &:focus, - &:hover { - svg { - transform: translateY(-2px); - } } } &.is-down-button { svg { margin-bottom: 3px; - transition: ease-in-out transform 0.1s; - @include reduce-motion("transition"); - } - &:focus, - &:hover { - svg { - transform: translateY(2px); - } } } From 398d206912952f615ad6dd12a27c3e232ceecc9a Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 30 Sep 2020 12:53:17 +0300 Subject: [PATCH 06/60] Add option to make Post Featured Image a link (#25714) * Add option to link Post Featured Image * make default to open in same tabs * show chip in both cases for placeholder * address review feedback * fix whitespace --- .../src/post-featured-image/block.json | 6 ++ .../src/post-featured-image/edit.js | 60 +++++++++++++------ .../src/post-featured-image/editor.scss | 5 ++ .../src/post-featured-image/index.php | 9 ++- .../src/post-featured-image/style.scss | 5 ++ .../block-library/src/post-title/block.json | 2 +- packages/block-library/src/style.scss | 1 + .../src/responsive-wrapper/style.scss | 4 -- .../blocks/core__post-featured-image.json | 18 +++--- .../fixtures/blocks/core__post-title.json | 2 +- 10 files changed, 78 insertions(+), 34 deletions(-) create mode 100644 packages/block-library/src/post-featured-image/style.scss diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index 15506f7ce33c40..80c64d40a21382 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -1,6 +1,12 @@ { "name": "core/post-featured-image", "category": "design", + "attributes": { + "isLink": { + "type": "boolean", + "default": false + } + }, "usesContext": [ "postId", "postType" diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 5ae60aa2999850..5a010d5adc5dc9 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -3,11 +3,23 @@ */ import { useEntityProp } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { ResponsiveWrapper, Icon } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { Icon, ToggleControl, PanelBody } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; import { postFeaturedImage as icon } from '@wordpress/icons'; +import { InspectorControls } from '@wordpress/block-editor'; -function PostFeaturedImageDisplay( { context: { postId, postType } } ) { +const placeholderChip = ( +
+ +

{ __( 'Featured Image' ) }

+
+); + +function PostFeaturedImageDisplay( { + attributes: { isLink }, + setAttributes, + context: { postId, postType }, +} ) { const [ featuredImage ] = useEntityProp( 'postType', postType, @@ -19,28 +31,38 @@ function PostFeaturedImageDisplay( { context: { postId, postType } } ) { featuredImage && select( 'core' ).getMedia( featuredImage ), [ featuredImage ] ); - if ( ! media ) { - return ( -
- -

{ __( 'Featured Image' ) }

-
- ); - } - const alt = media.alt_text || __( 'No alternative text set' ); + const image = ! media ? ( + placeholderChip + ) : ( + { + ); + return ( - - { - + <> + + + setAttributes( { isLink: ! isLink } ) } + checked={ isLink } + /> + + + { image } + ); } export default function PostFeaturedImageEdit( props ) { if ( ! props.context?.postId ) { - return __( 'Featured Image' ); + return placeholderChip; } return ; } diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss index 99bc213a4170a2..35faa55448736c 100644 --- a/packages/block-library/src/post-featured-image/editor.scss +++ b/packages/block-library/src/post-featured-image/editor.scss @@ -16,4 +16,9 @@ div[data-type="core/post-featured-image"] { margin: 0; } } + img { + max-width: 100%; + height: auto; + display: block; + } } diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index ed1c5609be8995..0df5c9062178f9 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -17,8 +17,15 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) if ( ! isset( $block->context['postId'] ) ) { return ''; } + $post_ID = $block->context['postId']; - return '

' . get_the_post_thumbnail( $block->context['postId'] ) . '

'; + $featured_image = get_the_post_thumbnail( $post_ID ); + + if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) { + $featured_image = sprintf( '%2s', get_the_permalink( $post_ID ), $featured_image ); + } + + return '

' . $featured_image . '

'; } /** diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss new file mode 100644 index 00000000000000..eaa2b5f4137330 --- /dev/null +++ b/packages/block-library/src/post-featured-image/style.scss @@ -0,0 +1,5 @@ +.wp-block-post-featured-image { + a { + display: inline-block; + } +} diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index 106f1e58638dc2..34a52e73f4ac75 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -24,7 +24,7 @@ }, "linkTarget": { "type": "string", - "default": "_blank" + "default": "_self" } }, "supports": { diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 653393dc488a91..f4cfe22788b872 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -36,6 +36,7 @@ @import "./table/style.scss"; @import "./text-columns/style.scss"; @import "./video/style.scss"; +@import "./post-featured-image/style.scss"; // The following selectors have increased specificity (using the :root prefix) // to assure colors take effect over another base class color, mainly to let diff --git a/packages/components/src/responsive-wrapper/style.scss b/packages/components/src/responsive-wrapper/style.scss index 35b65c8637d597..b6a556bf3425d0 100644 --- a/packages/components/src/responsive-wrapper/style.scss +++ b/packages/components/src/responsive-wrapper/style.scss @@ -5,10 +5,6 @@ & > span { display: block; } - &, - & > img { - width: auto; - } } .components-responsive-wrapper__content { diff --git a/packages/e2e-tests/fixtures/blocks/core__post-featured-image.json b/packages/e2e-tests/fixtures/blocks/core__post-featured-image.json index 9f6893273e352b..5ff35f8591ad0a 100644 --- a/packages/e2e-tests/fixtures/blocks/core__post-featured-image.json +++ b/packages/e2e-tests/fixtures/blocks/core__post-featured-image.json @@ -1,10 +1,12 @@ [ - { - "clientId": "_clientId_0", - "name": "core/post-featured-image", - "isValid": true, - "attributes": {}, - "innerBlocks": [], - "originalContent": "" - } + { + "clientId": "_clientId_0", + "name": "core/post-featured-image", + "isValid": true, + "attributes": { + "isLink": false + }, + "innerBlocks": [], + "originalContent": "" + } ] diff --git a/packages/e2e-tests/fixtures/blocks/core__post-title.json b/packages/e2e-tests/fixtures/blocks/core__post-title.json index 27d12ff30da35a..20aac7e0a3ad94 100644 --- a/packages/e2e-tests/fixtures/blocks/core__post-title.json +++ b/packages/e2e-tests/fixtures/blocks/core__post-title.json @@ -6,7 +6,7 @@ "attributes": { "level": 2, "isLink": false, - "linkTarget": "_blank", + "linkTarget": "_self", "rel": "" }, "innerBlocks": [], From ba026ff87ba087d58997c5d493fd39d9c1aabf52 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 30 Sep 2020 18:13:15 +0800 Subject: [PATCH 07/60] [Widgets Editor] Fix widget-area accessibility (#25732) * Fix the state of the panel body and use function children * Update README * Add test for panel body --- package-lock.json | 1 + packages/components/src/panel/README.md | 7 +++ packages/components/src/panel/body.js | 4 +- packages/components/src/panel/test/body.js | 22 +++++++++ packages/edit-widgets/package.json | 1 + .../src/blocks/widget-area/edit/index.js | 45 ++++++++----------- .../src/blocks/widget-area/editor.scss | 13 +----- 7 files changed, 55 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index cd429d019d8838..beed5d9511565c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17469,6 +17469,7 @@ "@wordpress/url": "file:packages/url", "classnames": "^2.2.5", "lodash": "^4.17.19", + "reakit": "^1.1.0", "rememo": "^3.0.0" }, "dependencies": { diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md index 8573230f14d35f..d01bbdf01b1120 100644 --- a/packages/components/src/panel/README.md +++ b/packages/components/src/panel/README.md @@ -142,6 +142,13 @@ Whether or not the panel will start open. - Required: No - Default: true +###### children + +The rendered children. If the children is a `Function`, it will be called with an object with the `opened` property and return its value. + +- Type: `React.ReactNode | Function` +- Required: No + --- #### PanelRow diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js index 2c297223a604a5..d781df4bf404eb 100644 --- a/packages/components/src/panel/body.js +++ b/packages/components/src/panel/body.js @@ -69,7 +69,9 @@ export function PanelBody( onClick={ handleOnToggle } title={ title } /> - { isOpened && children } + { typeof children === 'function' + ? children( { opened: isOpened } ) + : isOpened && children } ); } diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js index bf3f2860ec6ceb..cf1a570908c44b 100644 --- a/packages/components/src/panel/test/body.js +++ b/packages/components/src/panel/test/body.js @@ -57,6 +57,28 @@ describe( 'PanelBody', () => { expect( panelContent ).toBeTruthy(); } ); + + it( 'should call the children function, if specified', () => { + const { container, rerender } = render( + + { ( { opened } ) => } + + ); + let panelContent = getPanelBodyContent( container ); + + expect( panelContent ).toBeTruthy(); + expect( panelContent.getAttribute( 'hidden' ) ).toBe( '' ); + + rerender( + + { ( { opened } ) => } + + ); + panelContent = getPanelBodyContent( container ); + + expect( panelContent ).toBeTruthy(); + expect( panelContent.getAttribute( 'hidden' ) ).toBeNull(); + } ); } ); describe( 'toggling', () => { diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json index b81a316a335b46..9fe53c23f85163 100644 --- a/packages/edit-widgets/package.json +++ b/packages/edit-widgets/package.json @@ -52,6 +52,7 @@ "@wordpress/url": "file:../url", "classnames": "^2.2.5", "lodash": "^4.17.19", + "reakit": "^1.1.0", "rememo": "^3.0.0" }, "publishConfig": { diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/index.js b/packages/edit-widgets/src/blocks/widget-area/edit/index.js index 1c759d4c660d34..55961aec0f52cf 100644 --- a/packages/edit-widgets/src/blocks/widget-area/edit/index.js +++ b/packages/edit-widgets/src/blocks/widget-area/edit/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { DisclosureContent } from 'reakit/Disclosure'; + /** * WordPress dependencies */ @@ -26,37 +31,25 @@ export default function WidgetAreaEdit( { { setIsWidgetAreaOpen( clientId, ! isOpen ); } } - className={ isOpen ? 'widget-area-is-opened' : '' } > - - - + { ( { opened } ) => ( + // This is required to ensure LegacyWidget blocks are not unmounted when the panel is collapsed. + // Unmounting legacy widgets may have unintended consequences (e.g. TinyMCE not being properly reinitialized) + + + + + + ) } ); } - -function InnerBlocksContainer( { isOpen } ) { - const props = isOpen - ? {} - : { - hidden: true, - 'aria-hidden': true, - style: { display: 'none' }, - }; - return ( -
- -
- ); -} diff --git a/packages/edit-widgets/src/blocks/widget-area/editor.scss b/packages/edit-widgets/src/blocks/widget-area/editor.scss index 591625d7b0e83e..7570743c4b3d35 100644 --- a/packages/edit-widgets/src/blocks/widget-area/editor.scss +++ b/packages/edit-widgets/src/blocks/widget-area/editor.scss @@ -2,15 +2,6 @@ max-width: $widget-area-width; } -.wp-block-widget-area > .components-panel__body { - &.is-opened:not(.widget-area-is-opened) { - padding: 0; - > .components-panel__body-title { - padding: 0; - margin: 0; - } - } - > .block-editor-inner-blocks { - padding-top: $grid-unit-30; - } +.wp-block-widget-area > .components-panel__body > .block-editor-inner-blocks { + padding-top: $grid-unit-30; } From 2acb853a920e84662e2ea7a3b55ab0f595d5b578 Mon Sep 17 00:00:00 2001 From: Adam Zielinski Date: Wed, 30 Sep 2020 12:21:03 +0200 Subject: [PATCH 08/60] Add EditorStyles CSS to the widgets editor (#25699) * Add EditorStyles CSS to the widgets editor * Use gutenberg_extend_block_editor_styles instead of all block_editor_settings --- lib/widgets-page.php | 4 ++++ packages/edit-widgets/src/blocks/legacy-widget/editor.scss | 1 + .../components/widget-areas-block-editor-provider/index.js | 2 ++ 3 files changed, 7 insertions(+) diff --git a/lib/widgets-page.php b/lib/widgets-page.php index f69451a22a6c84..0b8a4b0225bef4 100644 --- a/lib/widgets-page.php +++ b/lib/widgets-page.php @@ -77,7 +77,11 @@ function gutenberg_widgets_init( $hook ) { gutenberg_get_legacy_widget_settings() ); + // This purposefully does not rely on apply_filters( 'block_editor_settings', $settings, null ); + // Applying that filter would bring over multitude of features from the post editor, some of which + // may be undesirable. Instead of using that filter, we simply pick just the settings that are needed. $settings = gutenberg_experimental_global_styles_settings( $settings ); + $settings = gutenberg_extend_block_editor_styles( $settings ); wp_add_inline_script( 'wp-edit-widgets', diff --git a/packages/edit-widgets/src/blocks/legacy-widget/editor.scss b/packages/edit-widgets/src/blocks/legacy-widget/editor.scss index 9cc33d6ddf8e45..0dac03bfe81c99 100644 --- a/packages/edit-widgets/src/blocks/legacy-widget/editor.scss +++ b/packages/edit-widgets/src/blocks/legacy-widget/editor.scss @@ -3,6 +3,7 @@ border: none; display: block; box-shadow: none; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } // Reset z-index set on https://github.com/WordPress/wordpress-develop/commit/f26d4d37351a55fd1fc5dad0f5fef8f0f964908c. .widget.open { diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js index 6815470efe242f..40e426cbad5cd1 100644 --- a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js +++ b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js @@ -17,6 +17,7 @@ import { useMemo } from '@wordpress/element'; import { BlockEditorProvider, BlockEditorKeyboardShortcuts, + __unstableEditorStyles as EditorStyles, } from '@wordpress/block-editor'; /** @@ -64,6 +65,7 @@ export default function WidgetAreasBlockEditorProvider( { return ( <> + From 7c1476f9d883be720ae98b770f872b29b1360e8a Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 30 Sep 2020 21:39:45 +1000 Subject: [PATCH 09/60] Widgets editor: Preload request to /sidebars (#25726) - Improve performance of initial page load by prefetching the REST API request to /sidebars. - Make it so that the widgetIdToClientId mapping is available by the time core/legacy-widget blocks do their initial render. This means that a pre-rendered form is available to the block which it can use instead of performing an additional XHR request. --- lib/widgets-page.php | 18 ++++++++++++++++++ packages/edit-widgets/src/store/resolvers.js | 4 ++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/lib/widgets-page.php b/lib/widgets-page.php index 0b8a4b0225bef4..f620d27865b68a 100644 --- a/lib/widgets-page.php +++ b/lib/widgets-page.php @@ -83,6 +83,24 @@ function gutenberg_widgets_init( $hook ) { $settings = gutenberg_experimental_global_styles_settings( $settings ); $settings = gutenberg_extend_block_editor_styles( $settings ); + $preload_paths = array( + array( '/wp/v2/media', 'OPTIONS' ), + '/__experimental/sidebars?context=edit', + ); + $preload_data = array_reduce( + $preload_paths, + 'rest_preload_api_request', + array() + ); + wp_add_inline_script( + 'wp-api-fetch', + sprintf( + 'wp.apiFetch.use( wp.apiFetch.createPreloadingMiddleware( %s ) );', + wp_json_encode( $preload_data ) + ), + 'after' + ); + wp_add_inline_script( 'wp-edit-widgets', sprintf( diff --git a/packages/edit-widgets/src/store/resolvers.js b/packages/edit-widgets/src/store/resolvers.js index e8af992ab9be1d..d30275d7279bc0 100644 --- a/packages/edit-widgets/src/store/resolvers.js +++ b/packages/edit-widgets/src/store/resolvers.js @@ -69,12 +69,12 @@ export function* getWidgetAreas() { } ); yield setWidgetAreasOpenState( widgetAreasOpenState ); - yield persistStubPost( buildWidgetAreasPostId(), widgetAreaBlocks ); - yield { type: 'SET_WIDGET_TO_CLIENT_ID_MAPPING', mapping: widgetIdToClientId, }; + + yield persistStubPost( buildWidgetAreasPostId(), widgetAreaBlocks ); } const persistStubPost = function* ( id, blocks ) { From 48cfd5fc446b49c2415164f1ca121f15020863dc Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 30 Sep 2020 07:48:35 -0400 Subject: [PATCH 10/60] Update block-based-themes.md (#25710) --- .../developers/themes/block-based-themes.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/designers-developers/developers/themes/block-based-themes.md b/docs/designers-developers/developers/themes/block-based-themes.md index 4889a36580bd48..03f4f278b9a256 100644 --- a/docs/designers-developers/developers/themes/block-based-themes.md +++ b/docs/designers-developers/developers/themes/block-based-themes.md @@ -17,6 +17,7 @@ A very simple block-based theme is structured like so: ``` theme |__ style.css +|__ experimental-theme.json |__ functions.php |__ block-templates |__ index.html @@ -30,7 +31,7 @@ theme |__ ... ``` -The difference with existing WordPress themes is that the different templates in the template hierarchy, and template parts, are block templates instead of php files. +The difference with existing WordPress themes is that the different templates in the template hierarchy, and template parts, are block templates instead of php files. In addition, this example includes an [`experimental-theme.json`](/docs/designers-developers/developers/themes/theme-json.md) file for some styles. ## What is a block template? @@ -111,17 +112,21 @@ As we're still early in the process, the number of blocks specifically dedicated - Post Title - Post Content - Post Author +- Post Comment +- Post Comment Author +- Post Comment Date - Post Comments -- Post CommentsCount -- Post CommentsForm +- Post Comments Count +- Post Comments Form - Post Date - Post Excerpt - Post Featured Image +- Post Hierarchical Terms - Post Tags ## Styling -One of the most important aspects of themes (if not the most important) is the styling. While initially you'll be able to provide styles and enqueue them using the same hooks themes have always used, this is an area that is still [being explored](https://github.com/WordPress/gutenberg/issues/9534). +One of the most important aspects of themes (if not the most important) is the styling. While initially you'll be able to provide styles and enqueue them using the same hooks themes have always used, the [Global Styles](/docs/designers-developers/developers/themes/theme-json.md) effort will provide a scaffolding for adding many theme styles in the future. ## Resources From 72f688528b60fad0549645741ef309cbc2f6610f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 30 Sep 2020 15:16:17 +0300 Subject: [PATCH 11/60] Classic block: use hooks (#25737) --- packages/block-library/src/classic/edit.js | 336 ++++++++++----------- 1 file changed, 165 insertions(+), 171 deletions(-) diff --git a/packages/block-library/src/classic/edit.js b/packages/block-library/src/classic/edit.js index 1f8c675c0effe7..70ccedc0d71e32 100644 --- a/packages/block-library/src/classic/edit.js +++ b/packages/block-library/src/classic/edit.js @@ -8,7 +8,7 @@ import { debounce } from 'lodash'; */ import { BlockControls } from '@wordpress/block-editor'; import { ToolbarGroup } from '@wordpress/components'; -import { Component } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes'; @@ -35,211 +35,205 @@ function isTmceEmpty( editor ) { return /^\n?$/.test( body.innerText || body.textContent ); } -export default class ClassicEdit extends Component { - constructor( props ) { - super( props ); - this.initialize = this.initialize.bind( this ); - this.onSetup = this.onSetup.bind( this ); - this.focus = this.focus.bind( this ); - } +export default function ClassicEdit( { + clientId, + attributes: { content }, + setAttributes, + onReplace, +} ) { + const didMount = useRef( false ); + + useEffect( () => { + if ( ! didMount.current ) { + return; + } + + const editor = window.tinymce.get( `editor-${ clientId }` ); + const currentContent = editor?.getContent(); + + if ( currentContent !== content ) { + editor.setContent( content || '' ); + } + }, [ content ] ); - componentDidMount() { + useEffect( () => { const { baseURL, suffix } = window.wpEditorL10n.tinymce; + didMount.current = true; + window.tinymce.EditorManager.overrideDefaults( { base_url: baseURL, suffix, } ); - if ( document.readyState === 'complete' ) { - this.initialize(); - } else { - document.addEventListener( 'readystatechange', () => { - if ( document.readyState === 'complete' ) { - this.initialize(); - } - } ); - } - } - - componentWillUnmount() { - window.addEventListener( 'DOMContentLoaded', this.initialize ); - wp.oldEditor.remove( `editor-${ this.props.clientId }` ); - } + function onSetup( editor ) { + let bookmark; - componentDidUpdate( prevProps ) { - const { - clientId, - attributes: { content }, - } = this.props; + if ( content ) { + editor.on( 'loadContent', () => editor.setContent( content ) ); + } - const editor = window.tinymce.get( `editor-${ clientId }` ); - const currentContent = editor?.getContent(); + editor.on( 'blur', () => { + bookmark = editor.selection.getBookmark( 2, true ); + // There is an issue with Chrome and the editor.focus call in core at https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/lib/link.js#L451. + // This causes a scroll to the top of editor content on return from some content updating dialogs so tracking + // scroll position until this is fixed in core. + const scrollContainer = document.querySelector( + '.interface-interface-skeleton__content' + ); + const scrollPosition = scrollContainer.scrollTop; - if ( - prevProps.attributes.content !== content && - currentContent !== content - ) { - editor.setContent( content || '' ); - } - } + setAttributes( { + content: editor.getContent(), + } ); - initialize() { - const { clientId } = this.props; - const { settings } = window.wpEditorL10n.tinymce; - wp.oldEditor.initialize( `editor-${ clientId }`, { - tinymce: { - ...settings, - inline: true, - content_css: false, - fixed_toolbar_container: `#toolbar-${ clientId }`, - setup: this.onSetup, - }, - } ); - } + editor.once( 'focus', () => { + if ( bookmark ) { + editor.selection.moveToBookmark( bookmark ); + if ( scrollContainer.scrollTop !== scrollPosition ) { + scrollContainer.scrollTop = scrollPosition; + } + } + } ); - onSetup( editor ) { - const { - attributes: { content }, - setAttributes, - } = this.props; - let bookmark; + return false; + } ); - this.editor = editor; + editor.on( 'mousedown touchstart', () => { + bookmark = null; + } ); - if ( content ) { - editor.on( 'loadContent', () => editor.setContent( content ) ); - } + const debouncedOnChange = debounce( () => { + const value = editor.getContent(); - editor.on( 'blur', () => { - bookmark = editor.selection.getBookmark( 2, true ); - // There is an issue with Chrome and the editor.focus call in core at https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/lib/link.js#L451. - // This causes a scroll to the top of editor content on return from some content updating dialogs so tracking - // scroll position until this is fixed in core. - const scrollContainer = document.querySelector( - '.interface-interface-skeleton__content' - ); - const scrollPosition = scrollContainer.scrollTop; + if ( value !== editor._lastChange ) { + editor._lastChange = value; + setAttributes( { + content: value, + } ); + } + }, 250 ); + editor.on( 'Paste Change input Undo Redo', debouncedOnChange ); + + // We need to cancel the debounce call because when we remove + // the editor (onUnmount) this callback is executed in + // another tick. This results in setting the content to empty. + editor.on( 'remove', debouncedOnChange.cancel ); + + editor.on( 'keydown', ( event ) => { + if ( isKeyboardEvent.primary( event, 'z' ) ) { + // Prevent the gutenberg undo kicking in so TinyMCE undo stack works as expected + event.stopPropagation(); + } - setAttributes( { - content: editor.getContent(), - } ); + if ( + ( event.keyCode === BACKSPACE || + event.keyCode === DELETE ) && + isTmceEmpty( editor ) + ) { + // delete the block + onReplace( [] ); + event.preventDefault(); + event.stopImmediatePropagation(); + } - editor.once( 'focus', () => { - if ( bookmark ) { - editor.selection.moveToBookmark( bookmark ); - if ( scrollContainer.scrollTop !== scrollPosition ) { - scrollContainer.scrollTop = scrollPosition; - } + const { altKey } = event; + /* + * Prevent Mousetrap from kicking in: TinyMCE already uses its own + * `alt+f10` shortcut to focus its toolbar. + */ + if ( altKey && event.keyCode === F10 ) { + event.stopPropagation(); } } ); - return false; - } ); - - editor.on( 'mousedown touchstart', () => { - bookmark = null; - } ); - - const debouncedOnChange = debounce( () => { - const value = editor.getContent(); + editor.on( 'init', () => { + const rootNode = editor.getBody(); - if ( value !== editor._lastChange ) { - editor._lastChange = value; - setAttributes( { - content: value, - } ); - } - }, 250 ); - editor.on( 'Paste Change input Undo Redo', debouncedOnChange ); - - // We need to cancel the debounce call because when we remove - // the editor (onUnmount) this callback is executed in - // another tick. This results in setting the content to empty. - editor.on( 'remove', debouncedOnChange.cancel ); - - editor.on( 'keydown', ( event ) => { - if ( isKeyboardEvent.primary( event, 'z' ) ) { - // Prevent the gutenberg undo kicking in so TinyMCE undo stack works as expected - event.stopPropagation(); - } + // Create the toolbar by refocussing the editor. + if ( rootNode.ownerDocument.activeElement === rootNode ) { + rootNode.blur(); + editor.focus(); + } + } ); + } - if ( - ( event.keyCode === BACKSPACE || event.keyCode === DELETE ) && - isTmceEmpty( editor ) - ) { - // delete the block - this.props.onReplace( [] ); - event.preventDefault(); - event.stopImmediatePropagation(); - } + function initialize() { + const { settings } = window.wpEditorL10n.tinymce; + wp.oldEditor.initialize( `editor-${ clientId }`, { + tinymce: { + ...settings, + inline: true, + content_css: false, + fixed_toolbar_container: `#toolbar-${ clientId }`, + setup: onSetup, + }, + } ); + } - const { altKey } = event; - /* - * Prevent Mousetrap from kicking in: TinyMCE already uses its own - * `alt+f10` shortcut to focus its toolbar. - */ - if ( altKey && event.keyCode === F10 ) { - event.stopPropagation(); + function onReadyStateChange() { + if ( document.readyState === 'complete' ) { + initialize(); } - } ); + } - editor.on( 'init', () => { - const rootNode = this.editor.getBody(); + if ( document.readyState === 'complete' ) { + initialize(); + } else { + document.addEventListener( 'readystatechange', onReadyStateChange ); + } - // Create the toolbar by refocussing the editor. - if ( rootNode.ownerDocument.activeElement === rootNode ) { - rootNode.blur(); - this.editor.focus(); - } - } ); - } + return () => { + document.removeEventListener( + 'readystatechange', + onReadyStateChange + ); + wp.oldEditor.remove( `editor-${ clientId }` ); + }; + }, [] ); - focus() { - if ( this.editor ) { - this.editor.focus(); + function focus() { + const editor = window.tinymce.get( `editor-${ clientId }` ); + if ( editor ) { + editor.focus(); } } - onToolbarKeyDown( event ) { + function onToolbarKeyDown( event ) { // Prevent WritingFlow from kicking in and allow arrows navigation on the toolbar. event.stopPropagation(); // Prevent Mousetrap from moving focus to the top toolbar when pressing `alt+f10` on this block toolbar. event.nativeEvent.stopImmediatePropagation(); } - render() { - const { clientId } = this.props; - - // Disable reasons: - // - // jsx-a11y/no-static-element-interactions - // - the toolbar itself is non-interactive, but must capture events - // from the KeyboardShortcuts component to stop their propagation. - - /* eslint-disable jsx-a11y/no-static-element-interactions */ - return ( - <> - - - - - -
-
- - ); - /* eslint-enable jsx-a11y/no-static-element-interactions */ - } + // Disable reasons: + // + // jsx-a11y/no-static-element-interactions + // - the toolbar itself is non-interactive, but must capture events + // from the KeyboardShortcuts component to stop their propagation. + + /* eslint-disable jsx-a11y/no-static-element-interactions */ + return ( + <> + + + + + +
+
+ + ); + /* eslint-enable jsx-a11y/no-static-element-interactions */ } From 66048316d9fb7ab897d9812ded51434e9bf0a5fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 30 Sep 2020 15:22:04 +0300 Subject: [PATCH 12/60] Block API: light block edit/save symmetry (#25644) * Block API: light block edit/save symmetry * Pass block context differently * Export through useBlockWrapperProps * Mark getBlockProps unstable --- .../components/block-list/block-wrapper.js | 8 +++++++ .../block-list/block-wrapper.native.js | 7 ++++++ packages/block-library/src/audio/save.js | 7 ++++-- packages/block-library/src/button/save.js | 7 ++++-- packages/block-library/src/buttons/save.js | 7 ++++-- packages/block-library/src/code/save.js | 7 ++++-- packages/block-library/src/column/save.js | 12 ++++++++-- packages/block-library/src/columns/save.js | 7 ++++-- packages/block-library/src/cover/save.js | 3 ++- packages/block-library/src/group/save.js | 7 ++++-- packages/block-library/src/heading/save.js | 15 ++++++------ packages/block-library/src/image/save.js | 13 +++++++--- packages/block-library/src/list/save.js | 18 +++++++------- packages/block-library/src/media-text/save.js | 7 ++++-- packages/block-library/src/paragraph/save.js | 15 ++++++------ .../block-library/src/preformatted/save.js | 11 +++++++-- packages/block-library/src/quote/save.js | 7 ++++-- .../block-library/src/social-links/save.js | 9 ++++--- packages/block-library/src/verse/save.js | 13 +++++----- packages/block-library/src/video/save.js | 7 ++++-- packages/blocks/src/api/index.js | 1 + packages/blocks/src/api/serializer.js | 24 ++++++++++++++++++- 22 files changed, 151 insertions(+), 61 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js index 34e8e0b7eb35f6..f943b50b7c6f1d 100644 --- a/packages/block-editor/src/components/block-list/block-wrapper.js +++ b/packages/block-editor/src/components/block-list/block-wrapper.js @@ -19,6 +19,7 @@ import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes'; import { __, sprintf } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; +import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks'; /** * Internal dependencies @@ -300,6 +301,13 @@ export function useBlockWrapperProps( props = {}, { __unstableIsHtml } = {} ) { }; } +/** + * Call within a save function to get the props for the block wrapper. + * + * @param {Object} props Optional. Props to pass to the element. + */ +useBlockWrapperProps.save = getBlockProps; + const BlockComponent = forwardRef( ( { children, tagName: TagName = 'div', ...props }, ref ) => { deprecated( 'wp.blockEditor.__experimentalBlock', { diff --git a/packages/block-editor/src/components/block-list/block-wrapper.native.js b/packages/block-editor/src/components/block-list/block-wrapper.native.js index 10aea4bb9edd71..55c3bff51f66bd 100644 --- a/packages/block-editor/src/components/block-list/block-wrapper.native.js +++ b/packages/block-editor/src/components/block-list/block-wrapper.native.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks'; + /** * Internal dependencies */ @@ -7,6 +12,8 @@ export function useBlockWrapperProps( props = {} ) { return props; } +useBlockWrapperProps.save = getBlockProps; + const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => { acc[ element ] = element; return acc; diff --git a/packages/block-library/src/audio/save.js b/packages/block-library/src/audio/save.js index f88eb0bba52e0c..15faa71d8536ba 100644 --- a/packages/block-library/src/audio/save.js +++ b/packages/block-library/src/audio/save.js @@ -1,14 +1,17 @@ /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; +import { + RichText, + __experimentalUseBlockWrapperProps as useBlockWrapperProps, +} from '@wordpress/block-editor'; export default function save( { attributes } ) { const { autoplay, caption, loop, preload, src } = attributes; return ( src && ( -
+