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

Jump to bottom

Fix useInstanceId hook references #65733

Merged
merged 1 commit into from
Sep 30, 2024
Merged

Fix useInstanceId hook references #65733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 4 additions & 1 deletion packages/block-editor/src/hooks/duotone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,8 +314,11 @@ function useDuotoneStyles( {
}, [ isValidFilter, blockElement, colors ] );
}

// Used for generating the instance ID
const DUOTONE_BLOCK_PROPS_REFERENCE = {};

function useBlockProps( { clientId, name, style } ) {
const id = useInstanceId( useBlockProps );
const id = useInstanceId( DUOTONE_BLOCK_PROPS_REFERENCE );
const selector = useMemo( () => {
const blockType = getBlockType( name );

Expand Down
5 changes: 4 additions & 1 deletion packages/block-editor/src/hooks/layout-child.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import {
GridItemMovers,
} from '../components/grid';

// Used for generating the instance ID
const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};

function useBlockPropsChildLayoutStyles( { style } ) {
const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
Expand All @@ -32,7 +35,7 @@ function useBlockPropsChildLayoutStyles( { style } ) {
} = layout;
const parentLayout = useLayout() || {};
const { columnCount, minimumColumnWidth } = parentLayout;
const id = useInstanceId( useBlockPropsChildLayoutStyles );
const id = useInstanceId( LAYOUT_CHILD_BLOCK_PROPS_REFERENCE );
const selector = `.wp-container-content-${ id }`;

// Check that the grid layout attributes are of the correct type, so that we don't accidentally
Expand Down
5 changes: 4 additions & 1 deletion packages/block-editor/src/hooks/position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,9 @@ export default {
},
};

// Used for generating the instance ID
const POSITION_BLOCK_PROPS_REFERENCE = {};

function useBlockProps( { name, style } ) {
const hasPositionBlockSupport = hasBlockSupport(
name,
Expand All @@ -318,7 +321,7 @@ function useBlockProps( { name, style } ) {
const isPositionDisabled = useIsPositionDisabled( { name } );
const allowPositionStyles = hasPositionBlockSupport && ! isPositionDisabled;

const id = useInstanceId( useBlockProps );
const id = useInstanceId( POSITION_BLOCK_PROPS_REFERENCE );

// Higher specificity to override defaults in editor UI.
const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
Expand Down
5 changes: 4 additions & 1 deletion packages/components/src/autocomplete/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,17 @@ const getNodeText = ( node: React.ReactNode ): string => {

const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];

// Used for generating the instance ID
const AUTOCOMPLETE_HOOK_REFERENCE = {};

export function useAutocomplete( {
record,
onChange,
onReplace,
completers,
contentRef,
}: UseAutocompleteProps ) {
const instanceId = useInstanceId( useAutocomplete );
const instanceId = useInstanceId( AUTOCOMPLETE_HOOK_REFERENCE );
const [ selectedIndex, setSelectedIndex ] = useState( 0 );

const [ filteredOptions, setFilteredOptions ] = useState<
Expand Down
Loading