diff --git a/docs/assets/plugin-sidebar-closed-state.png b/docs/assets/plugin-sidebar-closed-state.png deleted file mode 100644 index 025da900ffcdd5..00000000000000 Binary files a/docs/assets/plugin-sidebar-closed-state.png and /dev/null differ diff --git a/docs/assets/plugin-sidebar-open-state.png b/docs/assets/plugin-sidebar-open-state.png index f1c3781a500f00..a114f7119020ab 100644 Binary files a/docs/assets/plugin-sidebar-open-state.png and b/docs/assets/plugin-sidebar-open-state.png differ diff --git a/docs/reference-guides/slotfills/plugin-sidebar.md b/docs/reference-guides/slotfills/plugin-sidebar.md index 8fe274414905b7..dbf1c5643d3aab 100644 --- a/docs/reference-guides/slotfills/plugin-sidebar.md +++ b/docs/reference-guides/slotfills/plugin-sidebar.md @@ -1,30 +1,68 @@ # PluginSidebar -This slot allows for adding items into the Gutenberg Toolbar. -Using this slot will add an icon to the bar that, when clicked, will open a sidebar with the content of the items wrapped in the `` component. +This slot allows adding items to the tool bar of either the Post or Site editor screens. +Using this slot will add an icon to the toolbar that, when clicked, opens a panel with containing the items wrapped in the `` component. ## Example -```js -import { registerPlugin } from '@wordpress/plugins'; +```jsx +import { __ } from '@wordpress/i18n'; import { PluginSidebar } from '@wordpress/editor'; -import { image } from '@wordpress/icons'; +import { + PanelBody, + Button, + TextControl, + SelectControl, +} from '@wordpress/components'; +import { registerPlugin } from '@wordpress/plugins'; +import { useState } from '@wordpress/element'; + +const PluginSidebarExample = () => { + const [ text, setText ] = useState( '' ); + const [ select, setSelect ] = useState( 'a' ); -const PluginSidebarTest = () => ( - -

Plugin Sidebar

- -); + return ( + + +

+ { __( 'This is a heading for the PluginSidebar example.' ) } +

+

+ { __( + 'This is some example text for the PluginSidebar example.' + ) } +

+ setText( newText ) } + /> + setSelect( newSelect ) } + /> + + + + ); +}; -registerPlugin( 'plugin-sidebar-test', { render: PluginSidebarTest } ); +// Register the plugin. +registerPlugin( 'plugin-sidebar-example', { render: PluginSidebarExample } ); ``` ## Location -### Closed State - -![Closed State](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-closed-state.png?raw=true) - ### Open State ![Open State](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-open-state.png?raw=true) diff --git a/package-lock.json b/package-lock.json index 283127c1861b3f..23f504d7cbf460 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54192,6 +54192,9 @@ "engines": { "node": ">=18.12.0", "npm": ">=8.19.2" + }, + "peerDependencies": { + "react": "^18.0.0" } }, "packages/priority-queue": { diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss index b5e6655e660cbb..bdfd7595da8e44 100644 --- a/packages/base-styles/_animations.scss +++ b/packages/base-styles/_animations.scss @@ -3,3 +3,8 @@ animation-fill-mode: forwards; @include reduce-motion("animation"); } + +@mixin editor-canvas-resize-animation() { + transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1); + @include reduce-motion("transition"); +} diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index fec4f4c0dbe5c3..776b217ba54f6e 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -547,7 +547,7 @@ _Returns_ > **Deprecated** -This function was accidentially exposed for mobile/native usage. +This function was accidentally exposed for mobile/native usage. _Returns_ diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index 9e924cb79bace1..1395b5c0a437d3 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/packages/block-editor/src/components/block-canvas/style.scss @@ -4,4 +4,5 @@ iframe[name="editor-canvas"] { height: 100%; display: block; background-color: transparent; + @include editor-canvas-resize-animation; } diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 8c03d4224745af..90b887993bf6db 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -22,9 +22,9 @@ } .block-editor-iframe__html { + border: 0 solid $gray-300; transform-origin: top center; - transition: transform 0.3s; - @include reduce-motion("transition"); + @include editor-canvas-resize-animation; } .block-editor-iframe__html.is-zoomed-out { diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 669e2fe25a9fbb..3b0bce6d56b403 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -305,7 +305,7 @@ function Iframe( { iframeDocument.documentElement.classList.add( 'is-zoomed-out' ); - const maxWidth = 800; + const maxWidth = 750; iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-scale', scale === 'default' @@ -378,10 +378,8 @@ function Iframe( {