Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove experimental zoom out control #61509

Merged
merged 3 commits into from
May 9, 2024
+9 −106
Merged

Remove experimental zoom out control #61509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b67cef
remove zoom out experiment, control and enable closing inspector on p…
draganescu May 9, 2024
f56517e
remove the zoom out test because we have no button to test
draganescu May 9, 2024
2771fa0
fixed test to not use the experiment
MaggieCabrera May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions lib/experimental/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ function gutenberg_enable_experiments() {
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-sync-collaboration', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSync = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-view', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutView = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-custom-dataviews', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalCustomViews = true', 'before' );
}
Expand Down
12 changes: 0 additions & 12 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,6 @@ function gutenberg_initialize_experiments_settings() {
)
);

add_settings_field(
'gutenberg-zoomed-out-view',
__( 'Zoomed out view ', 'gutenberg' ),
'gutenberg_display_experiment_field',
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => __( 'Test a new zoomed out view on the site editor (Warning: The new feature is not ready. You may experience UX issues that are being addressed)', 'gutenberg' ),
'id' => 'gutenberg-zoomed-out-view',
)
);

add_settings_field(
'gutenberg-custom-dataviews',
__( 'Custom dataviews', 'gutenberg' ),
Expand Down
12 changes: 2 additions & 10 deletions packages/block-editor/src/components/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,21 +111,13 @@ function InserterMenu(
[ onToggleInsertionPoint ]
);

const isZoomedOutViewExperimentEnabled =
window?.__experimentalEnableZoomedOutView;
const onClickPatternCategory = useCallback(
( patternCategory, filter ) => {
setSelectedPatternCategory( patternCategory );
setPatternFilter( filter );
if ( isZoomedOutViewExperimentEnabled ) {
__experimentalOnPatternCategorySelection();
}
__experimentalOnPatternCategorySelection();
},
[
setSelectedPatternCategory,
__experimentalOnPatternCategorySelection,
isZoomedOutViewExperimentEnabled,
]
[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
);

const showPatternPanel =
Expand Down
31 changes: 2 additions & 29 deletions packages/editor/src/components/document-tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { Button, ToolbarItem } from '@wordpress/components';
import { listView, plus, chevronUpDown } from '@wordpress/icons';
import { listView, plus } from '@wordpress/icons';
import { useRef, useCallback } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { store as preferencesStore } from '@wordpress/preferences';
Expand All @@ -39,9 +39,8 @@ function DocumentTools( {
listViewLabel = __( 'Document Overview' ),
} ) {
const inserterButton = useRef();
const { setIsInserterOpened, setIsListViewOpened, setDeviceType } =
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editorStore );
const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
const {
isDistractionFree,
isInserterOpened,
Expand All @@ -50,8 +49,6 @@ function DocumentTools( {
listViewToggleRef,
hasFixedToolbar,
showIconLabels,
isVisualMode,
isZoomedOutView,
} = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
const { get } = select( preferencesStore );
Expand All @@ -77,8 +74,6 @@ function DocumentTools( {

const isLargeViewport = useViewportMatch( 'medium' );
const isWideViewport = useViewportMatch( 'wide' );
const isZoomedOutViewExperimentEnabled =
window?.__experimentalEnableZoomedOutView && isVisualMode;

/* translators: accessibility text for the editor toolbar */
const toolbarAriaLabel = __( 'Document tools' );
Expand Down Expand Up @@ -185,28 +180,6 @@ function DocumentTools( {
) }
</>
) }

{ isZoomedOutViewExperimentEnabled &&
isLargeViewport &&
! isDistractionFree &&
! hasFixedToolbar && (
<ToolbarItem
as={ Button }
className="edit-site-header-edit-mode__zoom-out-view-toggle"
icon={ chevronUpDown }
isPressed={ isZoomedOutView }
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'Zoom-out View' ) }
onClick={ () => {
setDeviceType( 'Desktop' );
__unstableSetEditorMode(
isZoomedOutView ? 'edit' : 'zoom-out'
);
} }
size="compact"
disabled={ disableBlockTools }
/>
) }
</div>
</NavigableToolbar>
);
Expand Down
57 changes: 5 additions & 52 deletions test/e2e/specs/site-editor/zoom-out.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,69 +8,22 @@ test.describe( 'Zoom Out', () => {
await requestUtils.activateTheme( 'emptytheme' );
} );

test.beforeEach( async ( { admin, page, editor } ) => {
await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );

const zoomedOutCheckbox = page.getByLabel(
'Test a new zoomed out view on'
);

await zoomedOutCheckbox.setChecked( true );
await expect( zoomedOutCheckbox ).toBeChecked();
await page.getByRole( 'button', { name: 'Save Changes' } ).click();

// Select a template part with a few blocks.
await admin.visitSiteEditor( {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
test.beforeEach( async ( { admin, editor } ) => {
await admin.visitSiteEditor();
await editor.canvas.locator( 'body' ).click();
} );

test.afterEach( async ( { admin, page } ) => {
await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
const zoomedOutCheckbox = page.getByLabel(
'Test a new zoomed out view on'
);
await zoomedOutCheckbox.setChecked( false );
await expect( zoomedOutCheckbox ).not.toBeChecked();
await page.getByRole( 'button', { name: 'Save Changes' } ).click();
} );

test.afterAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'twentytwentyone' );
} );

test( 'Zoom-out button should not steal focus when a block is focused', async ( {
page,
editor,
} ) => {
const zoomOutButton = page.getByRole( 'button', {
name: 'Zoom-out View',
exact: true,
} );

// Select a block for this test to surface the potential focus-stealing behavior
await editor.canvas.getByLabel( 'Site title text' ).click();

await zoomOutButton.click();

await expect( zoomOutButton ).toBeFocused();

await page.keyboard.press( 'Enter' );

await expect( zoomOutButton ).toBeFocused();
} );

test( 'Clicking on inserter while on zoom-out should open the patterns tab on the inserter', async ( {
page,
} ) => {
const zoomOutButton = page.getByRole( 'button', {
name: 'Zoom-out View',
exact: true,
} );
// Trigger zoom out on Global Styles because there the inserter is not open.
await page.getByRole( 'button', { name: 'Styles' } ).click();
await page.getByRole( 'button', { name: 'Browse styles' } ).click();

await zoomOutButton.click();
await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 );
await page.getByLabel( 'Add pattern' ).first().click();
await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 );
Expand Down
Loading