Skip to content

Commit

Permalink
Add a way to change template parts. (#24990)
Browse files Browse the repository at this point in the history 
* refactor reusable selection component

* update class names

* another classname

* use an icon

* add onClose

* search form needs value...

* updated styles to support dropdown from name panel

* missing newline, lol

* disable button when open
  • Loading branch information
@Addison-Stavlo
Addison-Stavlo authored Sep 9, 2020
1 parent 86cd404 commit bd8bfea
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 50 deletions.
36 changes: 32 additions & 4 deletions packages/block-library/src/template-part/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import {
BlockControls,
__experimentalBlock as Block,
} from '@wordpress/block-editor';
import { Dropdown, ToolbarButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { chevronUp, chevronDown } from '@wordpress/icons';

/**
* Internal dependencies
Expand All @@ -15,6 +18,7 @@ import useTemplatePartPost from './use-template-part-post';
import TemplatePartNamePanel from './name-panel';
import TemplatePartInnerBlocks from './inner-blocks';
import TemplatePartPlaceholder from './placeholder';
import TemplatePartSelection from './selection';

export default function TemplatePartEdit( {
attributes: { postId: _postId, slug, theme, tagName },
Expand Down Expand Up @@ -67,10 +71,34 @@ export default function TemplatePartEdit( {
return (
<BlockWrapper>
<BlockControls>
<TemplatePartNamePanel
postId={ postId }
setAttributes={ setAttributes }
/>
<div className="wp-block-template-part__block-control-group">
<TemplatePartNamePanel
postId={ postId }
setAttributes={ setAttributes }
/>
<Dropdown
className="wp-block-template-part__preview-dropdown-button"
contentClassName="wp-block-template-part__preview-dropdown-content"
position="bottom right left"
renderToggle={ ( { isOpen, onToggle } ) => (
<ToolbarButton
aria-expanded={ isOpen }
icon={ isOpen ? chevronUp : chevronDown }
label={ __( 'Choose another' ) }
onClick={ onToggle }
// Disable when open to prevent odd FireFox bug causing reopening.
// As noted in https://github.com/WordPress/gutenberg/pull/24990#issuecomment-689094119 .
disabled={ isOpen }
/>
) }
renderContent={ ( { onClose } ) => (
<TemplatePartSelection
setAttributes={ setAttributes }
onClose={ onClose }
/>
) }
/>
</div>
</BlockControls>
<TemplatePartInnerBlocks
postId={ postId }
Expand Down
24 changes: 7 additions & 17 deletions packages/block-library/src/template-part/edit/placeholder/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState, useCallback } from '@wordpress/element';
import { useCallback } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { cleanForSlug } from '@wordpress/url';
import { Placeholder, Dropdown, Button } from '@wordpress/components';
import { blockDefault } from '@wordpress/icons';
import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import TemplatePartPreviews from './template-part-previews';
import TemplatePartSelection from '../selection';

export default function TemplatePartPlaceholder( { setAttributes } ) {
const { saveEntityRecord } = useDispatch( 'core' );
Expand All @@ -36,7 +35,6 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
} );
}, [ setAttributes ] );

const [ filterValue, setFilterValue ] = useState( '' );
return (
<Placeholder
icon={ blockDefault }
Expand All @@ -62,19 +60,11 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
</Button>
</>
) }
renderContent={ () => (
<>
<SearchForm
onChange={ setFilterValue }
className="wp-block-template-part__placeholder-preview-search-form"
/>
<div className="wp-block-template-part__placeholder-preview-container">
<TemplatePartPreviews
setAttributes={ setAttributes }
filterValue={ filterValue }
/>
</div>
</>
renderContent={ ( { onClose } ) => (
<TemplatePartSelection
setAttributes={ setAttributes }
onClose={ onClose }
/>
) }
/>
</Placeholder>
Expand Down
29 changes: 29 additions & 0 deletions packages/block-library/src/template-part/edit/selection/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* WordPress dependencies
*/
import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import TemplatePartPreviews from './template-part-previews';

export default function TemplatePartSelection( { setAttributes, onClose } ) {
const [ filterValue, setFilterValue ] = useState( '' );
return (
<>
<SearchForm
value={ filterValue }
onChange={ setFilterValue }
className="wp-block-template-part__selection-preview-search-form"
/>
<div className="wp-block-template-part__selection-preview-container">
<TemplatePartPreviews
setAttributes={ setAttributes }
filterValue={ filterValue }
onClose={ onClose }
/>
</div>
</>
);
}
28 changes: 19 additions & 9 deletions ...dit/placeholder/template-part-previews.js → .../edit/selection/template-part-previews.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ import { groupBy, uniq, deburr } from 'lodash';

function PreviewPlaceholder() {
return (
<div className="wp-block-template-part__placeholder-preview-item is-placeholder" />
<div className="wp-block-template-part__selection-preview-item is-placeholder" />
);
}

function TemplatePartItem( { templatePart, setAttributes } ) {
function TemplatePartItem( { templatePart, setAttributes, onClose } ) {
const {
id,
slug,
Expand All @@ -45,11 +45,12 @@ function TemplatePartItem( { templatePart, setAttributes } ) {
type: 'snackbar',
}
);
onClose();
}, [ id, slug, theme ] );

return (
<div
className="wp-block-template-part__placeholder-preview-item"
className="wp-block-template-part__selection-preview-item"
role="button"
onClick={ onClick }
onKeyDown={ ( event ) => {
Expand All @@ -61,7 +62,7 @@ function TemplatePartItem( { templatePart, setAttributes } ) {
aria-label={ templatePart.slug }
>
<BlockPreview blocks={ blocks } />
<div className="wp-block-template-part__placeholder-preview-item-title">
<div className="wp-block-template-part__selection-preview-item-title">
{ templatePart.slug }
</div>
</div>
Expand All @@ -71,20 +72,20 @@ function TemplatePartItem( { templatePart, setAttributes } ) {
function PanelGroup( { title, icon, children } ) {
return (
<>
<div className="wp-block-template-part__placeholder-panel-group-header">
<span className="wp-block-template-part__placeholder-panel-group-title">
<div className="wp-block-template-part__selection-panel-group-header">
<span className="wp-block-template-part__selection-panel-group-title">
{ title }
</span>
<Icon icon={ icon } />
</div>
<div className="wp-block-template-part__placeholder-panel-group-content">
<div className="wp-block-template-part__selection-panel-group-content">
{ children }
</div>
</>
);
}

function TemplatePartsByTheme( { templateParts, setAttributes } ) {
function TemplatePartsByTheme( { templateParts, setAttributes, onClose } ) {
const templatePartsByTheme = useMemo( () => {
return Object.values( groupBy( templateParts, 'meta.theme' ) );
}, [ templateParts ] );
Expand All @@ -101,6 +102,7 @@ function TemplatePartsByTheme( { templateParts, setAttributes } ) {
key={ templatePart.id }
templatePart={ templatePart }
setAttributes={ setAttributes }
onClose={ onClose }
/>
) : (
<PreviewPlaceholder key={ templatePart.id } />
Expand All @@ -114,6 +116,7 @@ function TemplatePartSearchResults( {
templateParts,
setAttributes,
filterValue,
onClose,
} ) {
const filteredTPs = useMemo( () => {
// Filter based on value.
Expand Down Expand Up @@ -164,6 +167,7 @@ function TemplatePartSearchResults( {
key={ templatePart.id }
templatePart={ templatePart }
setAttributes={ setAttributes }
onClose={ onClose }
/>
) : (
<PreviewPlaceholder key={ templatePart.id } />
Expand All @@ -172,7 +176,11 @@ function TemplatePartSearchResults( {
) );
}

export default function TemplateParts( { setAttributes, filterValue } ) {
export default function TemplateParts( {
setAttributes,
filterValue,
onClose,
} ) {
const templateParts = useSelect( ( select ) => {
const publishedTemplateParts = select( 'core' ).getEntityRecords(
'postType',
Expand Down Expand Up @@ -212,6 +220,7 @@ export default function TemplateParts( { setAttributes, filterValue } ) {
templateParts={ templateParts }
setAttributes={ setAttributes }
filterValue={ filterValue }
onClose={ onClose }
/>
);
}
Expand All @@ -220,6 +229,7 @@ export default function TemplateParts( { setAttributes, filterValue } ) {
<TemplatePartsByTheme
templateParts={ templateParts }
setAttributes={ setAttributes }
onClose={ onClose }
/>
);
}
48 changes: 28 additions & 20 deletions packages/block-library/src/template-part/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@

.wp-block-template-part__placeholder-preview-dropdown-content {
.wp-block-template-part__placeholder-preview-dropdown-content,
.wp-block-template-part__preview-dropdown-content {
.components-popover__content {
min-width: 320px;
padding: 0;
}
}

.wp-block-template-part__placeholder-preview-search-form {
.wp-block-template-part__selection-preview-search-form {
border-bottom: $border-width solid $gray-200;
}

.wp-block-template-part__placeholder-preview-container {
.wp-block-template-part__selection-preview-container {
background: $white;
padding-bottom: 16px;

.wp-block-template-part__placeholder-preview-item {
.wp-block-template-part__selection-preview-item {
border-radius: $radius-block-ui;
cursor: pointer;
margin-top: $grid-unit-20;
Expand All @@ -37,43 +38,50 @@
}
}

.wp-block-template-part__placeholder-preview-item-title {
.wp-block-template-part__selection-preview-item-title {
padding: $grid-unit-05;
font-size: 12px;
text-align: left;
}

.wp-block-template-part__placeholder-panel-group-header {
.wp-block-template-part__selection-panel-group-header {
padding: $grid-unit-20 $grid-unit-20 0;
}

.wp-block-template-part__placeholder-panel-group-content {
.wp-block-template-part__selection-panel-group-content {
padding: 0 $grid-unit-20;
}

.wp-block-template-part__placeholder-panel-group-title {
.wp-block-template-part__selection-panel-group-title {
color: var(--wp-admin-theme-color);
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
}
}

.wp-block-template-part__name-panel {
background-color: $white;
box-shadow: 0 0 0 $border-width $gray-900;
outline: 1px solid transparent;
padding: $grid-unit-10 $grid-unit-15;
.wp-block-template-part__block-control-group {
display: flex;

.components-base-control__field {
align-items: center;
display: flex;
margin-bottom: 0;
.wp-block-template-part__name-panel {
background-color: $white;
outline: 1px solid transparent;
padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15;

.components-base-control__field {
align-items: center;
display: flex;
margin-bottom: 0;
}

.components-base-control__label {
margin-bottom: 0;
margin-right: 8px;
}
}

.components-base-control__label {
margin-bottom: 0;
margin-right: 8px;
.wp-block-template-part__preview-dropdown-button {
border-right: $border-width solid $gray-900;
}
}

Expand Down

0 comments on commit bd8bfea

Please sign in to comment.