Skip to content

Commit

Permalink
fix: replaced hardcoded values with dynamic approach
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kallyan01
Kallyan01 committed Jan 17, 2025
1 parent 5a31aac commit 6996602
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 97 deletions.
167 changes: 82 additions & 85 deletions packages/block-editor/src/components/block-manager/category.js
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,102 @@
/**
* WordPress dependencies
*/
import { useCallback, forwardRef } from '@wordpress/element';
import { useCallback } from '@wordpress/element';
import { useInstanceId } from '@wordpress/compose';
import { CheckboxControl } from '@wordpress/components';

/**
* Internal dependencies
*/
import BlockTypesChecklist from './checklist';
const a = forwardRef( () => {
return a;
} );

const BlockManagerCategory = forwardRef(
( { title, blockTypes, selectedBlockTypes, onChange }, ref ) => {
const instanceId = useInstanceId( BlockManagerCategory );
const BlockManagerCategory = ( {
title,
blockTypes,
selectedBlockTypes,
onChange,
} ) => {
const instanceId = useInstanceId( BlockManagerCategory );

const toggleVisible = useCallback(
( blockType, nextIsChecked ) => {
if ( nextIsChecked ) {
onChange( [ ...selectedBlockTypes, blockType ] );
} else {
onChange(
selectedBlockTypes.filter(
( { name } ) => name !== blockType.name
)
);
}
},
[ selectedBlockTypes, onChange ]
);
const toggleVisible = useCallback(
( blockType, nextIsChecked ) => {
if ( nextIsChecked ) {
onChange( [ ...selectedBlockTypes, blockType ] );
} else {
onChange(
selectedBlockTypes.filter(
( { name } ) => name !== blockType.name
)
);
}
},
[ selectedBlockTypes, onChange ]
);

const toggleAllVisible = useCallback(
( nextIsChecked ) => {
if ( nextIsChecked ) {
onChange( [
...selectedBlockTypes,
...blockTypes.filter(
( blockType ) =>
! selectedBlockTypes.find(
( { name } ) => name === blockType.name
)
),
] );
} else {
onChange(
selectedBlockTypes.filter(
( selectedBlockType ) =>
! blockTypes.find(
( { name } ) =>
name === selectedBlockType.name
)
)
);
}
},
[ blockTypes, selectedBlockTypes, onChange ]
);
const toggleAllVisible = useCallback(
( nextIsChecked ) => {
if ( nextIsChecked ) {
onChange( [
...selectedBlockTypes,
...blockTypes.filter(
( blockType ) =>
! selectedBlockTypes.find(
( { name } ) => name === blockType.name
)
),
] );
} else {
onChange(
selectedBlockTypes.filter(
( selectedBlockType ) =>
! blockTypes.find(
( { name } ) => name === selectedBlockType.name
)
)
);
}
},
[ blockTypes, selectedBlockTypes, onChange ]
);

if ( ! blockTypes.length ) {
return null;
}
if ( ! blockTypes.length ) {
return null;
}

const checkedBlockNames = blockTypes
.map( ( { name } ) => name )
.filter( ( type ) =>
( selectedBlockTypes ?? [] ).some(
( selectedBlockType ) => selectedBlockType.name === type
)
);
const checkedBlockNames = blockTypes
.map( ( { name } ) => name )
.filter( ( type ) =>
( selectedBlockTypes ?? [] ).some(
( selectedBlockType ) => selectedBlockType.name === type
)
);

const titleId =
'block-editor-block-manager__category-title-' + instanceId;
const titleId = 'block-editor-block-manager__category-title-' + instanceId;

const isAllChecked = checkedBlockNames.length === blockTypes.length;
const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
const isAllChecked = checkedBlockNames.length === blockTypes.length;
const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;

return (
<div
role="group"
aria-labelledby={ titleId }
className="block-editor-block-manager__category"
ref={ ref }
>
<CheckboxControl
__nextHasNoMarginBottom
checked={ isAllChecked }
onChange={ toggleAllVisible }
className="block-editor-block-manager__category-title"
indeterminate={ isIndeterminate }
label={ <span id={ titleId }>{ title }</span> }
/>
<BlockTypesChecklist
blockTypes={ blockTypes }
value={ checkedBlockNames }
onItemChange={ toggleVisible }
/>
</div>
);
}
);
return (
<div
role="group"
aria-labelledby={ titleId }
className="block-editor-block-manager__category"
>
<CheckboxControl
__nextHasNoMarginBottom
checked={ isAllChecked }
onChange={ toggleAllVisible }
className="block-editor-block-manager__category-title"
indeterminate={ isIndeterminate }
label={ <span id={ titleId }>{ title }</span> }
/>
<BlockTypesChecklist
blockTypes={ blockTypes }
value={ checkedBlockNames }
onItemChange={ toggleVisible }
/>
</div>
);
};

export default BlockManagerCategory;
39 changes: 27 additions & 12 deletions packages/block-editor/src/components/block-manager/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { store as blocksStore } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { SearchControl, Button } from '@wordpress/components';
import { __, _n, sprintf } from '@wordpress/i18n';
import { useEffect, useState, useRef } from '@wordpress/element';
import { useEffect, useState } from '@wordpress/element';
import { useDebounce } from '@wordpress/compose';
import { speak } from '@wordpress/a11y';

Expand Down Expand Up @@ -35,33 +35,50 @@ export default function BlockManager( {
isMatchingSearchTerm: select( blocksStore ).isMatchingSearchTerm,
};
}, [] );
const blockManagerCategoryRef = useRef( null );

// Function to determine which sticky element is active in the viewport
const getActiveStickyElement = ( Elements, parentElement ) => {
for ( const Element of Elements ) {
const rect = Element.getBoundingClientRect();

// Check if the sticky element is in the viewport
if ( rect.top < parentElement.clientHeight && rect.bottom > 0 ) {
return Element; // Return the active sticky element
}
}
return null; // No sticky element is active in the viewport
};

useEffect( () => {
const container = document.querySelector(
'.components-modal__content'
);
const stickyElement = blockManagerCategoryRef.current;
const stickyElements = document.querySelectorAll(
'.block-editor-block-manager__category-title'
);
let activeStickyElement = null;

if ( ! container || ! stickyElement ) {
if ( ! container || ! stickyElements ) {
return;
}

const handleFocusIn = ( event ) => {
activeStickyElement = getActiveStickyElement(
stickyElements,
container
);
const focusedElement = event.target;

// Check if the focused element is within the container
if ( container.contains( focusedElement ) ) {
const stickyBottom = 250;
const stickyBottom =
activeStickyElement.getBoundingClientRect().bottom;
const focusedRect = focusedElement.getBoundingClientRect();

// Calculate the desired scroll position
if (
focusedRect.top < stickyBottom &&
container.scrollTop > 190
) {
if ( focusedRect.top < stickyBottom ) {
const offset =
container.scrollTop - stickyElement.offsetHeight;
container.scrollTop - activeStickyElement.offsetHeight;
container.scrollTo( {
top: offset,
behavior: 'smooth',
Expand Down Expand Up @@ -145,7 +162,6 @@ export default function BlockManager( {
) }
{ categories.map( ( category ) => (
<BlockManagerCategory
ref={ blockManagerCategoryRef }
key={ category.slug }
title={ category.title }
blockTypes={ filteredBlockTypes.filter(
Expand All @@ -157,7 +173,6 @@ export default function BlockManager( {
/>
) ) }
<BlockManagerCategory
ref={ blockManagerCategoryRef }
title={ __( 'Uncategorized' ) }
blockTypes={ filteredBlockTypes.filter(
( { category } ) => ! category
Expand Down

0 comments on commit 6996602

Please sign in to comment.