-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Editor: Display Site Icon (if one is set) in Gutenberg Fullscreen Mode (
#22952) * Register setting for site icon url Info about site icon was previously unavailable in the Gutenberg editor. Registering a setting addresses the problem by adding site icon url as a field to the wp/v2/settings REST API. The information can then be fetched by the client. * Display user uploaded site icon for edit site if available * Apply default site icon styling only to default icon * Remove unnecessary whitespace * Fix PHP formatting with linter * Use isResolving to determine site icon loading state Previously, we were using hasFinishedResolution and inverting the resulting boolean to determine site icon loading state. Implementing isResolving instead let's us determine the same loading state without boolean inversion. * Add unit tests for edit-site * Refactor button icon logic Previously, to render the default icon, we were passing an SVG through the icon prop to the @wordpress/components Button. The data provided for user uploaded site icons, however, are incompatible. We receive custom URLs, and not SVGs, for custom site icons. Rather than support the logic for both Button icon props and site icon image tags, we do away with the Button icon prop entirely. We now explicitly define the children for Button, which consolidates the display logic for both default and custom site icons. * Update styling for site icon * Add user uploaded site icon to post editor * Display tooltip for editor back button * Use getEntityRecord to fetch site icon URL for edit-site useEntityProp was pulling information about site icon url from the core-data store. Although the method worked, it relied on a context provider around the block editor. The context is unnecessary in this instance, and so, to prevent unnecessary coupling, we replace useEntityProp with getEntityRecord instead. * Use getEntityRecord to fetch site icon URL for edit-post * Register site icon url with rest index filter All roles that could access the editor but that could not edit site configurations (Contributor, Author, and Editor) received a 403 response when querying the settings WordPress REST API. This is because site configurations and the settings API are only accessible to Admins and Super Admins. We want the read-only site icon url to be accessible to all roles. In order to accomplish that, we opt to register the site icon url with the WordPress REST index endpoint instead of the WordPress REST settings endpoint. * Fetch site icon url from the WordPress REST index * Add inline documentation when registering site icon url * Add __unstable prefix to base entity Because of limitations with permissioning, we are adding site icon url to the WP Rest index endpoint instead of the settings endpoint. Once the settings endpoint is updated and accessible by more than the admin and super admin roles, we will remove the base entity (hence the unstable prefix). At that time, we will subsequently add site icon url to the settings endpoint. * Preload index endpoint * Translate alt text for site icon in edit post * Translate alt text for site icon in edit site * Preload edit post index endpoint Data from WordPress REST endpoints can be preloaded. We're effectively asking the server to inject a response on the initial page load that we know will always be triggered on that page. The alternative is waiting for the page to load, waiting for the scripts to executre, and then waiting for a response to a network request. Preloading the site icon means that upon initial page load, rather than a blank placeholder, the icon will be displayed almost immediately. Edit post preloading happens in core, and the endpoints we specify for preloading are extensible through the block_editor_preload_paths filter. This change preloads the endpoint that serves site icon data to edit post. * Add core trac ticket annotation
- Loading branch information
Showing
10 changed files
with
282 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,3 +27,8 @@ | |
| } | ||
| } | ||
| } | ||
|
|
||
| .edit-post-fullscreen-mode-close_site-icon { | ||
| width: 36px; | ||
| } | ||
|
|
||
70 changes: 70 additions & 0 deletions
70
packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import FullscreenModeClose from '../'; | ||
|
|
||
| jest.mock( '@wordpress/data/src/components/use-select', () => { | ||
| // This allows us to tweak the returned value on each test | ||
| const mock = jest.fn(); | ||
| return mock; | ||
| } ); | ||
|
|
||
| jest.mock( '@wordpress/core-data' ); | ||
|
|
||
| describe( 'FullscreenModeClose', () => { | ||
| describe( 'when in full screen mode', () => { | ||
| it( 'should display a user uploaded site icon if it exists', () => { | ||
| useSelect.mockImplementation( ( cb ) => { | ||
| return cb( () => ( { | ||
| isResolving: () => false, | ||
| isFeatureActive: () => true, | ||
| getCurrentPostType: () => {}, | ||
| getPostType: () => true, | ||
| getEntityRecord: () => ( { | ||
| site_icon_url: 'https://fakeUrl.com', | ||
| } ), | ||
| } ) ); | ||
| } ); | ||
|
|
||
| const { container } = render( <FullscreenModeClose /> ); | ||
| const siteIcon = container.querySelector( | ||
| '.edit-post-fullscreen-mode-close_site-icon' | ||
| ); | ||
|
|
||
| expect( siteIcon ).toBeTruthy(); | ||
| } ); | ||
|
|
||
| it( 'should display a default site icon if no user uploaded site icon exists', () => { | ||
| useSelect.mockImplementation( ( cb ) => { | ||
| return cb( () => ( { | ||
| isResolving: () => false, | ||
| isFeatureActive: () => true, | ||
| getCurrentPostType: () => {}, | ||
| getPostType: () => true, | ||
| getEntityRecord: () => ( { | ||
| site_icon_url: '', | ||
| } ), | ||
| } ) ); | ||
| } ); | ||
|
|
||
| const { container } = render( <FullscreenModeClose /> ); | ||
| const siteIcon = container.querySelector( | ||
| '.edit-post-fullscreen-mode-close_site-icon' | ||
| ); | ||
| const defaultIcon = container.querySelector( 'svg' ); | ||
|
|
||
| expect( siteIcon ).toBeFalsy(); | ||
| expect( defaultIcon ).toBeTruthy(); | ||
| } ); | ||
| } ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
packages/edit-site/src/components/header/fullscreen-mode-close/test/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import FullscreenModeClose from '../'; | ||
|
|
||
| jest.mock( '@wordpress/data/src/components/use-select', () => { | ||
| // This allows us to tweak the returned value on each test | ||
| const mock = jest.fn(); | ||
| return mock; | ||
| } ); | ||
|
|
||
| jest.mock( '@wordpress/core-data' ); | ||
|
|
||
| describe( 'FullscreenModeClose', () => { | ||
| describe( 'when in full screen mode', () => { | ||
| it( 'should display a user uploaded site icon if it exists', () => { | ||
| useSelect.mockImplementation( ( cb ) => { | ||
| return cb( () => ( { | ||
| isResolving: () => false, | ||
| isFeatureActive: () => true, | ||
| getEntityRecord: () => ( { | ||
| site_icon_url: 'https://fakeUrl.com', | ||
| } ), | ||
| } ) ); | ||
| } ); | ||
|
|
||
| const { container } = render( <FullscreenModeClose /> ); | ||
| const siteIcon = container.querySelector( | ||
| '.edit-site-fullscreen-mode-close_site-icon' | ||
| ); | ||
|
|
||
| expect( siteIcon ).toBeTruthy(); | ||
| } ); | ||
|
|
||
| it( 'should display a default site icon if no user uploaded site icon exists', () => { | ||
| useSelect.mockImplementation( ( cb ) => { | ||
| return cb( () => ( { | ||
| isResolving: () => false, | ||
| isFeatureActive: () => true, | ||
| getEntityRecord: () => ( { | ||
| site_icon_url: '', | ||
| } ), | ||
| } ) ); | ||
| } ); | ||
|
|
||
| const { container } = render( <FullscreenModeClose /> ); | ||
| const siteIcon = container.querySelector( | ||
| '.edit-site-fullscreen-mode-close_site-icon' | ||
| ); | ||
| const defaultIcon = container.querySelector( 'svg' ); | ||
|
|
||
| expect( siteIcon ).toBeFalsy(); | ||
| expect( defaultIcon ).toBeTruthy(); | ||
| } ); | ||
| } ); | ||
| } ); |