Skip to content

Commit

Permalink
Add latest bugfixes from 16.1 RC2 (#51951)
Browse files Browse the repository at this point in the history
* Site Editor: Disable the revision button if there is no clickable menu (#51851)

* Improve LinkControl Edit UI (#51712)

* Move text above link

* Change "URL" label to "Link"

* Style tweaks

* Add chevron based advanced settings button

* Adapt logic for rendering actions and settings

* Tweaks

* Add proper i18n

Co-authored-by: Ben Dwyer <ben@scruffian.com>

* Remove commented out style

Co-authored-by: Ben Dwyer <ben@scruffian.com>

* Use $button-size-next-default-40px

* Add showSettings, combine with new logic

* Add additional translation context to advanced

* Update toggle drawer name in tests

* Standardise query for settings toggle

* Update test to check for absence of cancel button during link creation

* Fix cancellation tests

* Ensure label is always “Link” but remains hidden when it’s the only visible control

* Update tests to look for “Link” instead of “URL” name for input

* Update empty value UI tests to only run for editing as opposed to creating links

* Fix e2e test tabbing order

* Use updated terms

* Select settings toggle by text not aria label

* Fix another tabbing order bug

* Fix one more tabbing issue in e2e tests

* Fix final tab ordering e2e test

* Decouple conditions for showing action buttons from settings

Settings may not be provided but action buttons are always needed

* Tweak styling to account for action buttons when there are no settings provided

* Fix test

* Fix e2e test

* Update name of the combobox

* Fix test expecting Submit button on creation

* Fix test by testing under edit rather than creation conditions

* Rename URL to Link and avoid triggering command centre

* move test earlier

---------

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>

* Update colors (#51856)

* Library: Fix misalignment of description in custom template parts (#51868)

* Backport adding the distraction free mode to the site editor (#51173) (#51932)

* Fix toolbar overlap in site editor (#51810)

* expand fixed toolbar to cover document title control

* adds the z-index code back

* Page Content Focus: Switch to Page panel when deselecting a block (#51881)

* Don't show 'Back to page' notification when navigating away from page (#51880)

* Add top margin to page details (#51858)

* Keep framer-motion from updating minor version (#51894)

* Keep framer-motion from updating minor version

* Revert unnecessary package-lock changes

* useBlockSync(): Reset inner blocks when component unmounts (#51783)

* BlockLockModal: restore focus on fallback toolbar button when original button is not rendered (#51666)

* useFocusReturn: pass focus restoration default target to the onFocusReturn callback

* Modal: pass onFocusReturn callback

* BlockLockModal: restore focus to first focusable item when unlocking block from toolbar button

* Add comments

* Revert changes to `useFocusReturn` and `Modal` component, just add logic to the BlockLockToolbar instead

* Comment

* Fix missing MenuGroup in header more menu (#51860)

* Add `manage all custom patterns` command (#51845)

* Add manage all custom patterns command

* reorganise with useAdminNavigationCommands

* Command center: Add another batch of commands to the site editor (#51832)

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

* Fix delete shortcut incorrectly bound to non-user patterns (#51830)

* `ConfirmDialog`: Fix affirmative action being triggered an extra time when selecting a button via keyboard (#51730)

* Ensure the confirm dialog cannnot be submitted using enter when the cancel button is focused

* Add test case

* Add CHANGELOG entry

* Add PR number to changelog

* Also prevent double submission of Confirm button

* Use actions in storybook example rather than outputting to a heading

* Ensure there is always a Navigation available in the browse mode sidebar via fallback algorithm (#50321)

* Normalize menu used in sidebar with fallback algorithm

* Make fallback retrieval invalidate query cache for Navigation entities

* Conditionally trigger fallback creation if no menus are found

* Make code self documenting

* Add image block aspect ratio control (#51545)

* Simplify ImageSizeControl by using Auto as a placeholder

* Rename imageWidth and imageHeight props to naturalWidth and naturalHeight

* Convert NumberControl onChange values to Numbers

* Simplify LatestPostsEdit to use updated ImageSizeControl

* Add JSDoc types for debugging

* Remove unnecessary noop

* Fix possible undefined values in NumberControl onChange

* Fix onChangeImage param type which may be undefined

* Rename OnChange callback prop

* Inline JSDoc props instead of new object

* Simplify handing undefined and NaN in onChange

* Revert prop name change since this isn't a private API

* Add a privateApis export for experimental ImageSizeControl

* Use the privateApis version of ImageSizeControl

* Add deprecation notice to the original component

* Revert image-size-control and create image-dimensions-control instead

* Re-add deprecation notice to image-size-control

* Try making a whole new component

* Revert changes to image, latest-posts, and media-text blocks

* Organize and update the dimensions tool panel item

* Reword size help text

* Reorganize into reusable components

* Add stories for other individual tools

* Update stories path

* Remove SelectControl __next prop

* Pass through isShownByDefault to ResolutionTool

* Remove unused scss

* Deprecate experimental ImageSizeControl

* Simplify ScaleTool onChange

* Add better defaults for value and onChange

* Fix circular dependency

* Update comment about auto and custom aspect ratios

* Add JSDoc types for ScaleTool

* Add JSDoc types for WidthHeightTool

* Add default value and onChange for WidthHeightTool

* Remove unused import

* Add aspectRatio to image block attributes

* Add scale to image block attributes

* Update JSDoc comment

* Add dimensions tool to image block

* Rename naturalAspectRatio for clarity

* Fix aspect-ratio-tool lint

* Fix scale-tool lint

* Fix width-height-tool lint

* Fix dimensions-tool lint

* Fix resolution-tool lint

* Add @emption/styled to block-editor

* Fix image block lint

* Update components changelog

* Fix AspectRatioTool reference

* Support 'auto' in width-height-tool

* Make null/undefined values mean 'auto' instead of defaultValue in aspectRatioTool

* Add deprecation for image block

* Fix ResizableBox interactions

* Add comments for default values

* Fix ResizableBox with auto w/h

* Clear aspect-ratio on resize

* Add TODO comment for ResolutionTool defaultValue

* Move the scale hide/show into dimensions controls

* Add first test

* Fix scale being set after it was deleted

* WIP writing tests

* Update test

* UI tweaks

* Move alt text as ToolsPanelItem

* Tweak default scale option help text

* Only use contain and cover for image scale options

* Update test

* Test the remaining callback values

* Add comment about toStrictEqual

* Add test for setting custom aspect ratio and then resetting

* Move custom scaleOptions to the image block

* Remember last aspect ratio so it can be restored when with/height are unset then set

* Remove unused import

* Format code

* Remove image w/h reset when a new image is added

* Use UnitControl's default units instead of spacing.units

* Provide the complete set of object-fit options by default

* Update TODO that will be committed

* Clean up evalAspectRatio and add docs

* Someone can file a bug report if offsetWidth/offsetHeight causes issues

* I couldn't figure out why height depended on having a custom border, but things seem to work without that

* Update docs for image block

* Update comment about default value

* Fix redundant wording

* I think the img width and height attributes can be removed if they're specified in the style attribute

* Update package-lock.json with @emotion/styled dependency

* Update mock calls for test example

* Simplify test values

* Consolidate mock calls expect

* Require defaultScale and defaultAspectRatio for DimensionsTool

* Add DimensionsTool tests for all custom transitions

* Remove comment about matching aspect ratio options

* Remove redundant check in tests

* Add comments to defaultAspectRatio and defaultScale

* Organize tests by which field is being updated

* Fix type conversion

* Add state diagram for last two tests

* Refactor and fix some tests

* Fix and simplify WidthHeightTool onChange

* Remove default scale option in image block.json

* Simplify DimensionsTool onChange logic

* Update block deprecations with width and height

* Revert image block width and height attributes to numbers since we only support px units for now

* Revert "Update block deprecations with width and height"

This reverts commit 941a81149ed4bc344ac2c0e183624069e33d75ad.

* Prevent NaN width/height

* Fix DimensionTool width/height units

* Fix JSDoc Dimenstions width/height types

* No default needed for ResolutionTool

* Fix drag handle aspect ratio reset

* Simplify null checks

* Stop using pxWidth and pxHeight

* Remove e2e tests that reference the scale button that was removed

* Fix image scaling for small images

* Try fixing aspectRatio only images

* Update test to respect the new aspect ratio behavior

---------

Co-authored-by: Alex Lende <alex@lende.xyz>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>

* Site Editor: Make string to add Template parts & Patterns consistent and translatable (#51743)

* Site Editor: Make Template Parts & Patterns Management dropdown translatable

* Make strings consistent

* Site Editor Sidebar: improvements to buttons (#51762)

* Do not show tooltip from all "back" buttons

* Avoid double button rendering in the patterns screen

* Use as prop instead of classname

* Add translation to strings

* Fix more icons for high resolution devices (#51768)

* Site tagline icon

* Update align-none.js

* Update position-left.js

* Update position-right.js

* Update position-center.js

* Update button.js

* Update buttons.js

* Update media-and-text.js

* Update spacer block icon

* Update separator.js

* Update stretch-full-width.js

* Update stretch-wide.js

* Update resize-corner-n-e.js

* Update justify-center.js

* Update align-left.js

* Update align-center.js

* Update align-right.js

* Update snapshots

* Hide block toolbar using CSS when it is empty (#51779)

* Update the add template modal design (#51806)

* Add icons

* alignment

* Custom descriptions

* justify content

* Style custom template button

* Remove min-height

* Don't display description when there isn't one

* Reduce space between template + description

* Style icon

* Style custom template

* increase button size

* Add prompt

* Update template icons

* Make year dynamic

* Remove short descriptions

* Revert "Remove short descriptions"

This reverts commit 7eb06e8ab845b9cda3975989456614df5b221c29.

* re-instate descriptions but only show as a tooltip

* simplify a bit

---------

Co-authored-by: ntsekouras <ntsekouras@outlook.com>

* Buttons Block: Fix for orientation-based block movers (#51831)

* Button: Introduce `size` prop (#51842)

* Revert "Button: Add opt-in prop for larger `isSmall` size (#51012)"

This reverts commit 19bcabf.

# Conflicts:
#	packages/components/CHANGELOG.md

* Add docs for `size` prop

Also fixes type duplicate prop name issues in NumberControl and FontSizePicker

* Add CSS

* Fixup

* Add TODO for deprecation

* Add test for back compat

* Fixup

* Add changelog

* Tweak description for "compact"

* Note that the `size` prop takes precedence

* Add test for prop priority

* Stop leaking `spinButtonSize` prop for styling

* Color (#51847)

* Only show Page Content Focus commands when in edit mode (#51888)

* Add UI commands to the post editor (#51900)

Co-authored-by: ntsekouras <ntsekouras@outlook.com>

* ZStack: fix component bounding box to match children (#51836)

* ZStack: rewrite using CSS grid

* Use first-of-type instead of fist-child

* CHANGELOG

* Improve comment

* Apply styles once in the parent wrapper

* Avoid each child view from expanding to all available space

* Remove unnecessary wrapeprs in storybook exmaple

* Add view patterns plural label. (#51850)

* Fix css styles in block.jsons. (#51866)

* Update active item appearance in Library (#51848)

* Color

* Use aria-current

* Fix Rename in Navigation on Browse Mode (#51791)

* Ensure edits are passed to save

* Ensure empty strings are invalid

* Force break of long strings in menu titles

* Fix ability to click through to Template Parts in Library (#51838)

* ItemGroup: Update button focus styles to use `:focus-visible` (#51787)

* Use focus-visible rather than focus on ItemGroup buttons

* Update snapshot

* Update Changelog

* Update package-lock

---------

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Héctor <27339341+priethor@users.noreply.github.com>
Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
Co-authored-by: Alex Lende <alex@lende.xyz>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: Lena Morita <lena@jaguchi.com>
Co-authored-by: Andrea Fercia <a.fercia@gmail.com>
Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>
Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
  • Loading branch information
20 people authored Jun 27, 2023
1 parent ce56391 commit 8171451
Show file tree
Hide file tree
Showing 141 changed files with 3,734 additions and 1,324 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
- **Name:** core/image
- **Category:** media
- **Supports:** anchor, behaviors (lightbox), color (~~background~~, ~~text~~), filter (duotone)
- **Attributes:** align, alt, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, sizeSlug, title, url, width
- **Attributes:** align, alt, aspectRatio, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width

## Latest Comments

Expand Down
1 change: 1 addition & 0 deletions lib/compat/wordpress-6.3/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function gutenberg_rename_reusable_block_cpt_to_pattern( $args, $post_type ) {
$args['labels']['new_item'] = __( 'New Pattern' );
$args['labels']['edit_item'] = __( 'Edit Pattern' );
$args['labels']['view_item'] = __( 'View Pattern' );
$args['labels']['view_items'] = __( 'View Patterns' );
$args['labels']['all_items'] = __( 'All Patterns' );
$args['labels']['search_items'] = __( 'Search Patterns' );
$args['labels']['not_found'] = __( 'No Patterns found.' );
Expand Down
739 changes: 370 additions & 369 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/base-styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ $icon-size: 24px;
$button-size: 36px;
$button-size-next-default-40px: 40px; // transitionary variable for next default button size
$button-size-small: 24px;
$button-size-small-next-default-32px: 32px; // transitionary variable for next small button size
$button-size-compact: 32px;
$header-height: 60px;
$panel-header-height: $grid-unit-60;
$nav-sidebar-width: 360px;
Expand Down
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ $z-layers: (
".customize-widgets__block-toolbar": 7,

// Site editor layout
".edit-site-layout__header-container": 4,
".edit-site-layout__hub": 3,
".edit-site-layout__header": 2,
".edit-site-page-header": 2,
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -711,6 +711,7 @@ _Properties_
- _maxWidth_ `number`: Max width to constraint resizing
- _allowedBlockTypes_ `boolean|Array`: Allowed block types
- _hasFixedToolbar_ `boolean`: Whether or not the editor toolbar is fixed
- _distractionFree_ `boolean`: Whether or not the editor UI is distraction free
- _focusMode_ `boolean`: Whether the focus mode is enabled or not
- _styles_ `Array`: Editor Styles
- _keepCaretInsideBlock_ `boolean`: Whether caret should move between blocks in edit mode
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
],
"dependencies": {
"@babel/runtime": "^7.16.0",
"@emotion/styled": "^11.6.0",
"@react-spring/web": "^9.4.5",
"@wordpress/a11y": "file:../a11y",
"@wordpress/api-fetch": "file:../api-fetch",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
/>
</svg>
</button>
Expand All @@ -48,7 +48,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
/>
</svg>
</button>
Expand Down Expand Up @@ -80,7 +80,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
/>
</svg>
</button>
Expand Down Expand Up @@ -113,7 +113,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
/>
</svg>
</button>
Expand All @@ -136,7 +136,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
/>
</svg>
</button>
Expand All @@ -159,7 +159,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
d="M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z"
/>
</svg>
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
/>
</svg>
</button>
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
/>
</svg>
</button>
Expand All @@ -77,7 +77,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
/>
</svg>
</button>
Expand All @@ -99,7 +99,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
/>
</svg>
</button>
Expand All @@ -121,7 +121,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z"
d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
/>
</svg>
</button>
Expand Down
40 changes: 34 additions & 6 deletions packages/block-editor/src/components/block-lock/toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
*/
import { __ } from '@wordpress/i18n';
import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { useReducer } from '@wordpress/element';
import { focus } from '@wordpress/dom';
import { useReducer, useRef, useEffect } from '@wordpress/element';
import { lock } from '@wordpress/icons';

/**
Expand All @@ -12,19 +13,45 @@ import { lock } from '@wordpress/icons';
import BlockLockModal from './modal';
import useBlockLock from './use-block-lock';

export default function BlockLockToolbar( { clientId } ) {
export default function BlockLockToolbar( { clientId, wrapperRef } ) {
const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );

const [ isModalOpen, toggleModal ] = useReducer(
( isActive ) => ! isActive,
false
);

if ( ! canLock ) {
return null;
}
const lockButtonRef = useRef( null );
const isFirstRender = useRef( true );

const shouldHideBlockLockUI =
! canLock || ( canEdit && canMove && canRemove );

// Restore focus manually on the first focusable element in the toolbar
// when the block lock modal is closed and the block is not locked anymore.
// See https://github.com/WordPress/gutenberg/issues/51447
useEffect( () => {
if ( isFirstRender.current ) {
isFirstRender.current = false;
return;
}

if ( ! isModalOpen && shouldHideBlockLockUI ) {
focus.focusable
.find( wrapperRef.current, {
sequential: false,
} )
.find(
( element ) =>
element.tagName === 'BUTTON' &&
element !== lockButtonRef.current
)
?.focus();
}
// wrapperRef is a reference object and should be stable
}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );

if ( canEdit && canMove && canRemove ) {
if ( shouldHideBlockLockUI ) {
return null;
}

Expand All @@ -35,6 +62,7 @@ export default function BlockLockToolbar( { clientId } ) {
icon={ lock }
label={ __( 'Unlock' ) }
onClick={ toggleModal }
ref={ lockButtonRef }
/>
</ToolbarGroup>
{ isModalOpen && (
Expand Down
15 changes: 9 additions & 6 deletions packages/block-editor/src/components/block-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
};
}, [] );

const toolbarWrapperRef = useRef( null );

// Handles highlighting the current block outline on hover or focus of the
// block type toolbar area.
const { toggleBlockHighlight } = useDispatch( blockEditorStore );
Expand Down Expand Up @@ -123,27 +125,28 @@ const BlockToolbar = ( { hideDragHandle } ) => {
} );

return (
<div className={ classes }>
<div className={ classes } ref={ toolbarWrapperRef }>
{ ! isMultiToolbar &&
isLargeViewport &&
blockEditingMode === 'default' && <BlockParentSelector /> }
<div ref={ nodeRef } { ...showMoversGestures }>
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
blockEditingMode === 'default' && (
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
blockEditingMode === 'default' && (
<div ref={ nodeRef } { ...showMoversGestures }>
<ToolbarGroup className="block-editor-block-toolbar__block-controls">
<BlockSwitcher clientIds={ blockClientIds } />
{ ! isMultiToolbar && (
<BlockLockToolbar
clientId={ blockClientIds[ 0 ] }
wrapperRef={ toolbarWrapperRef }
/>
) }
<BlockMover
clientIds={ blockClientIds }
hideDragHandle={ hideDragHandle }
/>
</ToolbarGroup>
) }
</div>
</div>
) }
{ shouldShowVisualToolbar && isMultiToolbar && (
<BlockGroupToolbar />
) }
Expand Down
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/block-tools/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@
}
}

&:has(.block-editor-block-toolbar:empty) {
display: none;
}

// on desktop and tablet viewports the toolbar is fixed
// on top of interface header

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/**
* WordPress dependencies
*/
import {
SelectControl,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';

/**
* @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
*/

/**
* @type {SelectControlProps[]}
*/
export const DEFAULT_ASPECT_RATIO_OPTIONS = [
{
label: _x( 'Original', 'Aspect ratio option for dimensions control' ),
value: 'auto',
},
{
label: _x(
'Square - 1:1',
'Aspect ratio option for dimensions control'
),
value: '1',
},
{
label: _x(
'Standard - 4:3',
'Aspect ratio option for dimensions control'
),
value: '4/3',
},
{
label: _x(
'Portrait - 3:4',
'Aspect ratio option for dimensions control'
),
value: '3/4',
},
{
label: _x(
'Classic - 3:2',
'Aspect ratio option for dimensions control'
),
value: '3/2',
},
{
label: _x(
'Classic Portrait - 2:3',
'Aspect ratio option for dimensions control'
),
value: '2/3',
},
{
label: _x(
'Wide - 16:9',
'Aspect ratio option for dimensions control'
),
value: '16/9',
},
{
label: _x(
'Tall - 9:16',
'Aspect ratio option for dimensions control'
),
value: '9/16',
},
{
label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
value: 'custom',
disabled: true,
hidden: true,
},
];

/**
* @callback AspectRatioToolPropsOnChange
* @param {string} [value] New aspect ratio value.
* @return {void} No return.
*/

/**
* @typedef {Object} AspectRatioToolProps
* @property {string} [panelId] ID of the panel this tool is associated with.
* @property {string} [value] Current aspect ratio value.
* @property {AspectRatioToolPropsOnChange} [onChange] Callback to update the aspect ratio value.
* @property {SelectControlProps[]} [options] Aspect ratio options.
* @property {string} [defaultValue] Default aspect ratio value.
* @property {boolean} [isShownByDefault] Whether the tool is shown by default.
*/

export default function AspectRatioTool( {
panelId,
value,
onChange = () => {},
options = DEFAULT_ASPECT_RATIO_OPTIONS,
defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
isShownByDefault = true,
} ) {
// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
const displayValue = value ?? 'auto';

return (
<ToolsPanelItem
hasValue={ () => displayValue !== defaultValue }
label={ __( 'Aspect ratio' ) }
onDeselect={ () => onChange( undefined ) }
isShownByDefault={ isShownByDefault }
panelId={ panelId }
>
<SelectControl
label={ __( 'Aspect ratio' ) }
value={ displayValue }
options={ options }
onChange={ onChange }
size={ '__unstable-large' }
__nextHasNoMarginBottom
/>
</ToolsPanelItem>
);
}
Loading

0 comments on commit 8171451

Please sign in to comment.