From edc0f7a669ef4ffa6cfb5ac57e61df38fefc2e2c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 17 Sep 2024 09:50:22 +0100 Subject: [PATCH 1/9] Add prompt to separator --- packages/block-editor/src/components/block-list/content.scss | 4 ++++ .../src/components/block-list/zoom-out-separator.js | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 3e3865e689beac..57b342e248df70 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -411,6 +411,10 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b margin-left: -1px; margin-right: -1px; transition: background-color 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5em; &.is-dragged-over { background: $gray-400; diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index be5af549630607..6ebd991de27ef9 100644 --- a/packages/block-editor/src/components/block-list/zoom-out-separator.js +++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js @@ -13,6 +13,7 @@ import { import { useReducedMotion } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -103,7 +104,9 @@ export function ZoomOutSeparator( { data-is-insertion-point="true" onDragOver={ () => setIsDraggedOver( true ) } onDragLeave={ () => setIsDraggedOver( false ) } - > + > + { __( 'Drag and drop a pattern.' ) } + ) } ); From ddd9e71da81660c5b0b17b8093ec6779e835a22f Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 23 Sep 2024 17:40:58 +0300 Subject: [PATCH 2/9] updated the text to be animated too and to have contextual messageing - drop or insert --- .../components/block-list/zoom-out-separator.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index 6ebd991de27ef9..2c8c9cd7acb2c5 100644 --- a/packages/block-editor/src/components/block-list/zoom-out-separator.js +++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js @@ -105,7 +105,19 @@ export function ZoomOutSeparator( { onDragOver={ () => setIsDraggedOver( true ) } onDragLeave={ () => setIsDraggedOver( false ) } > - { __( 'Drag and drop a pattern.' ) } + + { isDraggedOver + ? __( 'Drop pattern.' ) + : __( 'Insert a pattern here.' ) } + ) } From bf995e52ca0722a7f6b95b2d17f952466dfa2531 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 24 Sep 2024 15:53:03 +0100 Subject: [PATCH 3/9] Fix font size --- packages/block-editor/src/components/block-list/content.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 57b342e248df70..c05a77e137cbf2 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -414,7 +414,8 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b display: flex; align-items: center; justify-content: center; - font-size: 1.5em; + font-size: $default-font-size; + font-family: $default-font; &.is-dragged-over { background: $gray-400; From 88983d3d1e6d8085fe75612a6ba982e582c3e6ec Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 24 Sep 2024 16:06:52 +0100 Subject: [PATCH 4/9] Scale font size based on zoom scale --- packages/block-editor/src/components/block-list/content.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index c05a77e137cbf2..2b65bf8de671b8 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -417,6 +417,11 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b font-size: $default-font-size; font-family: $default-font; + .is-zoomed-out & { + // Scale the font size based on the zoom level. + font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) )); + } + &.is-dragged-over { background: $gray-400; } From 1d35d215bffe3955b671a183689fc8bd5e7f396c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 26 Sep 2024 09:38:41 +0100 Subject: [PATCH 5/9] Force font weight reset --- packages/block-editor/src/components/block-list/content.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 2b65bf8de671b8..2b85e0e19ed8dc 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -416,6 +416,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b justify-content: center; font-size: $default-font-size; font-family: $default-font; + font-weight: normal; .is-zoomed-out & { // Scale the font size based on the zoom level. From 17341bfefc22ca36cfcffcacfef0588e257811d0 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 26 Sep 2024 09:43:58 +0100 Subject: [PATCH 6/9] Remove dynamic text --- .../src/components/block-list/zoom-out-separator.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index 2c8c9cd7acb2c5..8d53c51f4dd52f 100644 --- a/packages/block-editor/src/components/block-list/zoom-out-separator.js +++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js @@ -114,9 +114,7 @@ export function ZoomOutSeparator( { duration: 0.1, } } > - { isDraggedOver - ? __( 'Drop pattern.' ) - : __( 'Insert a pattern here.' ) } + { __( 'Drop pattern.' ) } ) } From 9b2eb52908685fdedc984e51560c07d65257e4ca Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 26 Sep 2024 16:52:59 +0300 Subject: [PATCH 7/9] adds a color to the test which somehow gets the same color as the babacground after rebase on trunk --- packages/block-editor/src/components/block-list/content.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 2b85e0e19ed8dc..c5fda109d8b67d 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -416,6 +416,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b justify-content: center; font-size: $default-font-size; font-family: $default-font; + color: $black; font-weight: normal; .is-zoomed-out & { From 778e0369bc738e6025edcb1d2e5bde2a7a9a5096 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 27 Sep 2024 15:03:55 +0300 Subject: [PATCH 8/9] bogus change for our pipeline --- readme.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.txt b/readme.txt index c5ef1231b183ee..3a5ad6526e0ab2 100644 --- a/readme.txt +++ b/readme.txt @@ -13,7 +13,7 @@ The Gutenberg plugin adds editing, customization, and site building to WordPress Following the introduction of post block editing in December 2018, Gutenberg later introduced full site editing (FSE) in 2021, which shipped with WordPress 5.9 in early 2022. -### What Does Gutenberg Do? +### What Does Gutenberg Do ? Gutenberg is WordPress's “block editor”, and introduces a modular approach to modifying your entire site. Edit individual content blocks on posts or pages. Add and adjust widgets. Even design your site headers, footers, and navigation with full site editing support. From a1e172fd0b5a2afc886b1b89c26f4c7e896e59b0 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 27 Sep 2024 15:04:17 +0300 Subject: [PATCH 9/9] revert bogus change for our pipeline to restart --- readme.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.txt b/readme.txt index 3a5ad6526e0ab2..c5ef1231b183ee 100644 --- a/readme.txt +++ b/readme.txt @@ -13,7 +13,7 @@ The Gutenberg plugin adds editing, customization, and site building to WordPress Following the introduction of post block editing in December 2018, Gutenberg later introduced full site editing (FSE) in 2021, which shipped with WordPress 5.9 in early 2022. -### What Does Gutenberg Do ? +### What Does Gutenberg Do? Gutenberg is WordPress's “block editor”, and introduces a modular approach to modifying your entire site. Edit individual content blocks on posts or pages. Add and adjust widgets. Even design your site headers, footers, and navigation with full site editing support.