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

Footnotes: disable based on post type #52934

Merged
merged 6 commits into from
Jul 26, 2023
Merged

Footnotes: disable based on post type #52934

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ecc4349
Footnotes: disable based on post type
ellatrix Jul 25, 2023
d275257
Address feedback
ellatrix Jul 25, 2023
216f5a6
Fix typo
ellatrix Jul 25, 2023
185c7b3
Format: disable if block is not registered
ellatrix Jul 25, 2023
3528458
Lock usesContext api
ellatrix Jul 25, 2023
75330ff
Use Symbol instead of Math.random
ellatrix Jul 25, 2023
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
100 changes: 62 additions & 38 deletions packages/block-editor/src/components/rich-text/format-edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,67 @@
* WordPress dependencies
*/
import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
import { useContext, useMemo } from '@wordpress/element';

export default function FormatEdit( {
formatTypes,
onChange,
onFocus,
value,
forwardedRef,
} ) {
return formatTypes.map( ( settings ) => {
const { name, edit: Edit } = settings;

if ( ! Edit ) {
return null;
}

const activeFormat = getActiveFormat( value, name );
const isActive = activeFormat !== undefined;
const activeObject = getActiveObject( value );
const isObjectActive =
activeObject !== undefined && activeObject.type === name;

return (
<Edit
key={ name }
isActive={ isActive }
activeAttributes={
isActive ? activeFormat.attributes || {} : {}
}
isObjectActive={ isObjectActive }
activeObjectAttributes={
isObjectActive ? activeObject.attributes || {} : {}
}
value={ value }
onChange={ onChange }
onFocus={ onFocus }
contentRef={ forwardedRef }
/>
);
} );
/**
* Internal dependencies
*/
import BlockContext from '../block-context';

const DEFAULT_BLOCK_CONTEXT = {};

export const usesContextKey = Symbol( 'usesContext' );
Copy link
Member

Choose a reason for hiding this comment

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

Nice!

Copy link
Member Author

Choose a reason for hiding this comment

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

Props @mcsf

Copy link
Contributor

Choose a reason for hiding this comment

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

😄


function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
const {
name,
edit: EditFunction,
[ usesContextKey ]: usesContext,
} = settings;

const blockContext = useContext( BlockContext );

// Assign context values using the block type's declared context needs.
const context = useMemo( () => {
return usesContext
? Object.fromEntries(
Object.entries( blockContext ).filter( ( [ key ] ) =>
usesContext.includes( key )
)
)
: DEFAULT_BLOCK_CONTEXT;
}, [ usesContext, blockContext ] );

if ( ! EditFunction ) {
return null;
}

const activeFormat = getActiveFormat( value, name );
const isActive = activeFormat !== undefined;
const activeObject = getActiveObject( value );
const isObjectActive =
activeObject !== undefined && activeObject.type === name;

return (
<EditFunction
key={ name }
isActive={ isActive }
activeAttributes={ isActive ? activeFormat.attributes || {} : {} }
isObjectActive={ isObjectActive }
activeObjectAttributes={
isObjectActive ? activeObject.attributes || {} : {}
}
value={ value }
onChange={ onChange }
onFocus={ onFocus }
contentRef={ forwardedRef }
context={ context }
/>
);
}

export default function FormatEdit( { formatTypes, ...props } ) {
return formatTypes.map( ( settings ) => (
<Edit settings={ settings } { ...props } key={ settings.name } />
) );
}
2 changes: 2 additions & 0 deletions packages/block-editor/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
default as ReusableBlocksRenameHint,
useReusableBlocksRenameHint,
} from './components/inserter/reusable-block-rename-hint';
import { usesContextKey } from './components/rich-text/format-edit';

/**
* Private @wordpress/block-editor APIs.
Expand All @@ -49,4 +50,5 @@ lock( privateApis, {
ResolutionTool,
ReusableBlocksRenameHint,
useReusableBlocksRenameHint,
usesContextKey,
} );
12 changes: 12 additions & 0 deletions packages/block-library/src/footnotes/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,18 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
const blockProps = useBlockProps();

if ( postType !== 'post' && postType !== 'page' ) {
return (
<div { ...blockProps }>
<Placeholder
icon={ <BlockIcon icon={ icon } /> }
label={ __( 'Footnotes' ) }
// To do: add instructions. We can't add new string in RC.
/>
</div>
);
}

if ( ! footnotes.length ) {
return (
<div { ...blockProps }>
Expand Down
25 changes: 23 additions & 2 deletions packages/block-library/src/footnotes/format.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,18 @@ import { insertObject } from '@wordpress/rich-text';
import {
RichTextToolbarButton,
store as blockEditorStore,
privateApis,
} from '@wordpress/block-editor';
import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
import { createBlock } from '@wordpress/blocks';
import { createBlock, store as blocksStore } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import { name } from './block.json';
import { unlock } from '../lock-unlock';

const { usesContextKey } = unlock( privateApis );

export const formatName = 'core/footnote';
export const format = {
Expand All @@ -30,17 +34,34 @@ export const format = {
'data-fn': 'data-fn',
},
contentEditable: false,
edit: function Edit( { value, onChange, isObjectActive } ) {
[ usesContextKey ]: [ 'postType' ],
edit: function Edit( {
value,
onChange,
isObjectActive,
context: { postType },
} ) {
const registry = useRegistry();
const {
getSelectedBlockClientId,
getBlockRootClientId,
getBlockName,
getBlocks,
} = useSelect( blockEditorStore );
const footnotesBlockType = useSelect( ( select ) =>
select( blocksStore ).getBlockType( name )
);
const { selectionChange, insertBlock } =
useDispatch( blockEditorStore );

if ( ! footnotesBlockType ) {
return null;
}

if ( postType !== 'post' && postType !== 'page' ) {
return null;
}
Comment on lines +61 to +63
Copy link
Member

Choose a reason for hiding this comment

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

Note for follow-up: We should check canInsertBlockType here as well. Disabling the block from Preferences results in broken behavior.

Copy link
Member Author

Choose a reason for hiding this comment

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

Not sure if we can do that. What If some block disables footnotes to be inserted as inner blocks? That doesn't mean footnote anchors can't be inserted.

Copy link
Member Author

Choose a reason for hiding this comment

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

So maybe what we should check here is well is just if footnotes is registered at all? But I guess the preference doesn't unregister it.

Copy link
Member

Choose a reason for hiding this comment

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

We'll need to check if the footnotes block is disabled; it doesn't have to be canInsertBlockType.

Copy link
Member Author

Choose a reason for hiding this comment

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

Looks like that is in the editPostStore, which would create a dependency on the edit-post packages for block-library. 🤔

Copy link
Member Author

Choose a reason for hiding this comment

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

Added a registration check in 185c7b3, but that doesn't fix the preferences problem. Not sure if we should depend on the edit post package. Maybe the footnotes block doesn't belong in the block library package. Or is it fine to add the dependency?


function onClick() {
registry.batch( () => {
let id;
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/footnotes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export const settings = {
edit,
};

// Would be good to remove the format and HoR if the block is unregistered.
registerFormatType( formatName, format );

export const init = () => {
Expand Down