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

Font Library: Hide UI elements when user lacks permissions #59332

Merged
merged 3 commits into from
Feb 28, 2024
Merged

Font Library: Hide UI elements when user lacks permissions #59332

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c2fa78c
Font Library: Hide UI elements when user lacks permissions
creativecoder Feb 23, 2024
fe28f6d
Merge branch 'trunk' into update/font-library-ui-permissions
matiasbenedetto Feb 28, 2024
29d01c4
remove not needed check
matiasbenedetto Feb 28, 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
35 changes: 21 additions & 14 deletions packages/edit-site/src/components/global-styles/font-library-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
Modal,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { useContext } from '@wordpress/element';

/**
Expand All @@ -19,16 +21,15 @@ import { unlock } from '../../../lock-unlock';

const { Tabs } = unlock( componentsPrivateApis );

const DEFAULT_TABS = [
{
id: 'installed-fonts',
title: __( 'Library' ),
},
{
id: 'upload-fonts',
title: __( 'Upload' ),
},
];
const DEFAULT_TAB = {
id: 'installed-fonts',
title: __( 'Library' ),
};

const UPLOAD_TAB = {
id: 'upload-fonts',
title: __( 'Upload' ),
};

const tabsFromCollections = ( collections ) =>
collections.map( ( { slug, name } ) => ( {
Expand All @@ -44,11 +45,17 @@ function FontLibraryModal( {
defaultTabId = 'installed-fonts',
} ) {
const { collections, setNotice } = useContext( FontLibraryContext );
const canUserCreate = useSelect( ( select ) => {
const { canUser } = select( coreStore );
return canUser( 'create', 'font-families' );
}, [] );

const tabs = [ DEFAULT_TAB ];

const tabs = [
...DEFAULT_TABS,
...tabsFromCollections( collections || [] ),
];
if ( canUserCreate ) {
tabs.push( UPLOAD_TAB );
tabs.push( ...tabsFromCollections( collections || [] ) );
}

// Reset notice when new tab is selected.
const onSelect = () => {
Expand Down
19 changes: 18 additions & 1 deletion packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
Spinner,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { useContext, useEffect, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { chevronLeft } from '@wordpress/icons';
Expand Down Expand Up @@ -49,9 +51,24 @@ function InstalledFonts() {
setNotice,
} = useContext( FontLibraryContext );
const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
const customFontFamilyId =
libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;

const canUserDelete = useSelect(
( select ) => {
const { canUser } = select( coreStore );
return (
customFontFamilyId &&
canUser( 'delete', 'font-families', customFontFamilyId )
);
},
[ customFontFamilyId ]
);

const shouldDisplayDeleteButton =
!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
!! libraryFontSelected &&
libraryFontSelected?.source !== 'theme' &&
canUserDelete;

const handleUninstallClick = () => {
setIsConfirmDeleteOpen( true );
Expand Down
10 changes: 10 additions & 0 deletions packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
FlexItem,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { useContext, useState } from '@wordpress/element';

/**
Expand All @@ -30,6 +32,14 @@ const { ProgressBar } = unlock( componentsPrivateApis );
function UploadFonts() {
const { installFont, notice, setNotice } = useContext( FontLibraryContext );
const [ isUploading, setIsUploading ] = useState( false );
const canUserCreate = useSelect( ( select ) => {
const { canUser } = select( coreStore );
return canUser( 'create', 'font-families' );
}, [] );

if ( ! canUserCreate ) {
return null;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that we will render the upload tab only if canUserCreate, is this needed?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed here: 29d01c4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the late response. I added the additional check based on the concern expressed here about the component being reused elsewhere and missing the check:

#59294 (comment)

Copy link
Contributor

@matiasbenedetto matiasbenedetto Feb 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the component is going to be re-used, it can be added later. It will probably require more work than that check, and that's out of the scope of this PR.


const handleDropZone = ( files ) => {
handleFilesUpload( files );
Expand Down
Loading