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.

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

Update to Gutenberg 17 #253

Merged
merged 26 commits into from
Mar 21, 2024
Merged
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
c46b892
Update NodeJS to 16
fjorgemota Feb 8, 2024
e81b7d8
Update package dependencies to use pacakges from Gutenberg 17.6.4
fjorgemota Feb 8, 2024
9514a29
Move logic to unlock private APIs to separate file
fjorgemota Feb 15, 2024
e45061a
Use setEditedPost in editor-setup instead of setupEditorState
fjorgemota Feb 15, 2024
c843aa5
Fix Sidebar so it works with Gutenberg 17
fjorgemota Feb 15, 2024
21929a9
Update packages to those from Gutenberg 17.7
fjorgemota Feb 15, 2024
63ca409
Use new CSS classes in the inserter sidebar
fjorgemota Feb 19, 2024
6855038
Make ListViewOutline use the new Gutenberg structure / components
fjorgemota Feb 19, 2024
5ba705d
Adapt ListViewSidebar to work on Gutenberg 17
fjorgemota Feb 19, 2024
d33fd3b
Fix Formatting Toolbar not appearing
fjorgemota Feb 26, 2024
ead70d1
Fix Typescript error
fjorgemota Feb 27, 2024
038463a
Fix style issue of the header toolbar when isolated
fjorgemota Feb 27, 2024
5c8b5fb
Fix formatting toolbar not appearing on small screens
fjorgemota Feb 27, 2024
2f189a3
Do not show Document tab if the document inspector is not true
fjorgemota Feb 27, 2024
f6b873d
Update terser-webpack-plugin
fjorgemota Feb 27, 2024
13570cf
Update build files
fjorgemota Feb 27, 2024
6383b42
Update dependencies to Gutenberg 17.9
fjorgemota Mar 13, 2024
714795b
Another package bump
johngodley Mar 20, 2024
61343fb
Fix the tab headings in the inspector/inserter
johngodley Mar 20, 2024
5e85206
Prevent unnecessary API requests
johngodley Mar 20, 2024
e07ec33
Update changelog for 2.29.0
johngodley Mar 20, 2024
62b0ef7
Fix unit test
johngodley Mar 20, 2024
bf3d78c
Build
johngodley Mar 20, 2024
c64e9a1
Try and fix the tests
johngodley Mar 20, 2024
4eac66c
Remove failing test
johngodley Mar 20, 2024
b1241a0
Create IBE using React's in the isolated non-WP browser example
fullofcaffeine Mar 21, 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
Prev Previous commit
Next Next commit
Fix Formatting Toolbar not appearing
fjorgemota committed Feb 26, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit d33fd3b568b2df19dc7dcb7dc7cb18af2e8dd936
58 changes: 55 additions & 3 deletions src/components/block-editor-toolbar/index.js
Original file line number Diff line number Diff line change
@@ -2,13 +2,19 @@
* WordPress dependencies
*/

import { useEffect, useRef } from '@wordpress/element';
import { Button } from '@wordpress/components';
import { cog } from '@wordpress/icons';
import { BlockToolbar } from '@wordpress/block-editor';
import { useEffect, useRef, useState } from '@wordpress/element';
import { Button, Popover } from '@wordpress/components';
import { cog, next, previous } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { useViewportMatch } from '@wordpress/compose';

/**
* External dependencies
*/
import classnames from 'classnames';

/**
* Internal dependencies
*/
@@ -34,6 +40,8 @@ const BlockEditorToolbar = ( props ) => {
const ref = useRef( null );
const { settings, editorMode, renderMoreMenu } = props;
const isHugeViewport = useViewportMatch( 'huge', '>=' );
const blockToolbarRef = useRef();
const isLargeViewport = useViewportMatch( 'medium' );
const { inspector } = settings.iso?.toolbar || {};
const { moreMenu } = settings.iso || {};
const inspectorInSidebar = settings?.iso?.sidebar?.inspector || false;
@@ -54,6 +62,16 @@ const BlockEditorToolbar = ( props ) => {
[]
);

const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
useState( true );

useEffect( () => {
// If we have a new block selection, show the block tools
if ( isBlockSelected ) {
setIsBlockToolsCollapsed( false );
}
}, [ isBlockSelected ] );

function toggleSidebar( isOpen ) {
if ( ! isOpen ) {
closeGeneralSidebar();
@@ -94,6 +112,40 @@ const BlockEditorToolbar = ( props ) => {
<div className="edit-post-header">
<div className="edit-post-header__toolbar">
<HeaderToolbar settings={ settings } />
{ isLargeViewport && (
<>
<div
className={ classnames(
'selected-block-tools-wrapper',
{
'is-collapsed': isBlockToolsCollapsed,
}
) }
>
<BlockToolbar hideDragHandle />
</div>
<Popover.Slot
ref={ blockToolbarRef }
name="block-toolbar"
/>
{ isBlockSelected && (
<Button
className="edit-post-header__block-tools-toggle"
icon={ isBlockToolsCollapsed ? next : previous }
onClick={ () => {
setIsBlockToolsCollapsed(
( collapsed ) => ! collapsed
);
} }
label={
isBlockToolsCollapsed
? __( 'Show block tools' )
: __( 'Hide block tools' )
}
/>
) }
</>
) }
</div>

<div className="edit-post-header__settings" ref={ ref }>