Skip to content

Colorize template parts and Reusable blocks #45473

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

Merged
glendaviesnz merged 28 commits into from
Nov 23, 2022
Merged

Colorize template parts and Reusable blocks #45473

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
7d47273
Add initial colorization code
glendaviesnz Nov 1, 2022
9204830
Tidy up the setting of colors in the list view
glendaviesnz Nov 1, 2022
c26150b
Tidy up doc block types
glendaviesnz Nov 1, 2022
27e1cf5
Add color to block toolbar
glendaviesnz Nov 1, 2022
1ab8214
Add color to template block toolbar
glendaviesnz Nov 1, 2022
93bf9ba
Add selection box color
glendaviesnz Nov 2, 2022
2a3deca
Fix scope of styles
glendaviesnz Nov 2, 2022
22c5977
Add colors to block selector
glendaviesnz Nov 2, 2022
be58817
fix issue with outline styles
glendaviesnz Nov 2, 2022
0d1dbb9
Switch to using the existing isTemplatePart and isReusable methods
glendaviesnz Nov 2, 2022
3fbf88d
another switch to use existing methods
glendaviesnz Nov 2, 2022
3e0d7f0
Combine the template part and reusable block colors under an `isSynce…
glendaviesnz Nov 3, 2022
bc38da3
Remove color from block name and just color icon
glendaviesnz Nov 3, 2022
e0f5905
Apply selected outline color to reusable blocks in the post editor
glendaviesnz Nov 3, 2022
6931586
change colour of focus outline
glendaviesnz Nov 3, 2022
e5d1f96
Add synced color to block icon in inspector panel header
glendaviesnz Nov 22, 2022
00abab3
Add synced color to block hover overlay
glendaviesnz Nov 3, 2022
a28dd85
Colorise name in header
glendaviesnz Nov 4, 2022
878ae16
Add icon to site editor template part dropdown
glendaviesnz Nov 16, 2022
a9d1848
Add brightness to background color
glendaviesnz Nov 17, 2022
31a7b11
Add extra class to denote synced branches
glendaviesnz Nov 17, 2022
d4e1e7d
Add synced color to list view branch items
glendaviesnz Nov 17, 2022
00846fb
Make sure child leaves are colored correctly
glendaviesnz Nov 17, 2022
e93470d
Standardise opacity as 0.04
glendaviesnz Nov 17, 2022
d50750c
Revert "Make sure child leaves are colored correctly"
glendaviesnz Nov 22, 2022
8fb97dd
Standardise format in classnames
glendaviesnz Nov 22, 2022
2333a27
Fix icon color
glendaviesnz Nov 22, 2022
0ea11cb
Fix failing e2e tests
glendaviesnz Nov 23, 2022
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
Prev Previous commit
Next Next commit
Combine the template part and reusable block colors under an `isSynce… 
…d` flag
  • Loading branch information
@glendaviesnz
glendaviesnz committed Nov 23, 2022
commit 3e0d7f025f304d3317ba22177244e0c1aadffcb8
3 changes: 1 addition & 2 deletions packages/base-styles/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,5 @@ $alert-red: #cc1818;
$alert-green: #4ab866;

Copy link
Contributor Author

@glendaviesnz glendaviesnz Nov 2, 2022

Choose a reason for hiding this comment

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

not sure if this is the best place to put these - went with CSS vars instead of SCSS vars so themes can potentially override these.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw Nov 22, 2022

Choose a reason for hiding this comment

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

The choice of CSS vars over SCSS makes sense to me 👍

:root {
--wp-block-template-part-color: #7c4dc3;
--wp-block-reusable-color: #34948e;
--wp-block-synced-color: #7a00df;
}
9 changes: 4 additions & 5 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
getBlockType,
hasBlockSupport,
isReusableBlock,
isTemplatePart as isTemplate,
isTemplatePart,
} from '@wordpress/blocks';
import { ToolbarGroup } from '@wordpress/components';

Expand Down Expand Up @@ -114,15 +114,14 @@ const BlockToolbar = ( { hideDragHandle } ) => {

const shouldShowVisualToolbar = isValid && isVisual;
const isMultiToolbar = blockClientIds.length > 1;
const isReusable = isReusableBlock( blockType );
const isTemplatePart = isTemplate( blockType );
const isSynced =
isReusableBlock( blockType ) || isTemplatePart( blockType );

const classes = classnames(
'block-editor-block-toolbar',
shouldShowMovers && 'is-showing-movers',
{
'is-reusable': isReusable,
'is-template-part': isTemplatePart,
'is-synced': isSynced,
}
);

Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@
border-right: $border-width solid $gray-300;
}

&.is-reusable .block-editor-block-switcher .components-button {
color: var(--wp-block-reusable-color);
&.is-synced .block-editor-block-switcher .components-button {
color: var(--wp-block-synced-color);
}

&.is-template-part .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
color: var(--wp-block-template-part-color);
&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
color: var(--wp-block-synced-color);
&:disabled .block-editor-block-icon.has-colors {
color: var(--wp-block-template-part-color);
color: var(--wp-block-synced-color);
}
}

Expand Down
8 changes: 3 additions & 5 deletions packages/block-editor/src/components/inserter-list-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
createBlock,
createBlocksFromInnerBlocksTemplate,
isReusableBlock,
isTemplatePart as isTemplate,
isTemplatePart,
} from '@wordpress/blocks';
import { __experimentalTruncate as Truncate } from '@wordpress/components';
import { ENTER, isAppleOS } from '@wordpress/keycodes';
Expand Down Expand Up @@ -49,8 +49,7 @@ function InserterListItem( {
];
}, [ item.name, item.initialAttributes, item.initialAttributes ] );

const isReusable = isReusableBlock( item );
const isTemplatePart = isTemplate( item );
const isSynced = isReusableBlock( item ) || isTemplatePart( item );

return (
<InserterDraggableBlocks
Expand All @@ -64,8 +63,7 @@ function InserterListItem( {
'block-editor-block-types-list__list-item',

{
'is-reusable': isReusable,
'is-template-part': isTemplatePart,
'is-synced': isSynced,
}
) }
draggable={ draggable }
Expand Down
10 changes: 2 additions & 8 deletions packages/block-editor/src/components/inserter-list-item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,10 @@
width: 33.33%;
padding: 0;
margin: 0;
&.is-template-part {
&.is-synced {
.block-editor-block-icon.has-colors,
.block-editor-block-types-list__item-title {
color: var(--wp-block-template-part-color);
}
}
&.is-reusable {
.block-editor-block-icon.has-colors,
.block-editor-block-types-list__item-title {
color: var(--wp-block-reusable-color);
color: var(--wp-block-synced-color);
}
}
}
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/list-view/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,7 @@ function ListViewBlock( {
'is-branch-selected': isBranchSelected,
'is-dragging': isDragged,
'has-single-cell': ! showBlockActions,
'is-reusable': blockInformation.isReusable,
'is-template-part': blockInformation.isTemplatePart,
'is-synced': blockInformation.isSynced,
} );

// Only include all selected blocks if the currently clicked on block
Expand Down
14 changes: 4 additions & 10 deletions packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,11 @@
&.is-selected td {
background: var(--wp-admin-theme-color);
}
&.is-selected.is-template-part td {
background: var(--wp-block-template-part-color);
&.is-selected.is-synced td {
background: var(--wp-block-synced-color);
}
&.is-selected.is-reusable td {
background: var(--wp-block-reusable-color);
}
&.is-template-part .block-editor-list-view-block-contents {
color: var(--wp-block-template-part-color);
}
&.is-reusable .block-editor-list-view-block-contents {
color: var(--wp-block-reusable-color);
&.is-synced .block-editor-list-view-block-contents {
color: var(--wp-block-synced-color);
}
&.is-selected .block-editor-list-view-block-contents,
&.is-selected .components-button.has-icon {
Expand Down
23 changes: 10 additions & 13 deletions packages/block-editor/src/components/use-block-display-information/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useSelect } from '@wordpress/data';
import {
store as blocksStore,
isReusableBlock,
isTemplatePart as isTemplate,
isTemplatePart,
} from '@wordpress/blocks';

/**
Expand All @@ -20,12 +20,11 @@ import { store as blockEditorStore } from '../../store';
*
* @typedef {Object} WPBlockDisplayInformation
*
* @property {boolean} isReusable True if is a reusable block
* @property {boolean} isTemplatePart True if is a template part block
* @property {string} title Human-readable block type label.
* @property {WPIcon} icon Block type icon.
* @property {string} description A detailed block type description.
* @property {string} anchor HTML anchor.
* @property {boolean} isSynced True if is a reusable block or template part
* @property {string} title Human-readable block type label.
* @property {WPIcon} icon Block type icon.
* @property {string} description A detailed block type description.
* @property {string} anchor HTML anchor.
*/

/**
Expand Down Expand Up @@ -56,11 +55,10 @@ export default function useBlockDisplayInformation( clientId ) {
if ( ! blockType ) return null;
const attributes = getBlockAttributes( clientId );
const match = getActiveBlockVariation( blockName, attributes );
const isReusable = isReusableBlock( blockType );
const isTemplatePart = isTemplate( blockType );
const isSynced =
isReusableBlock( blockType ) || isTemplatePart( blockType );
const blockTypeInfo = {
isReusable,
isTemplatePart,
isSynced,
title: blockType.title,
icon: blockType.icon,
description: blockType.description,
Expand All @@ -69,8 +67,7 @@ export default function useBlockDisplayInformation( clientId ) {
if ( ! match ) return blockTypeInfo;

return {
isReusable,
isTemplatePart,
isSynced,
title: match.title || blockType.title,
icon: match.icon || blockType.icon,
description: match.description || blockType.description,
Expand Down
11 changes: 6 additions & 5 deletions packages/block-library/src/template-part/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,16 @@
z-index: z-index(".block-library-template-part__selection-search");
}

.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part {
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
&.is-highlighted,
&.is-selected {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
}

&.block-editor-block-list__block:not([contenteditable]):focus {
&::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-template-part-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
Expand All @@ -45,12 +46,12 @@
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
&.is-highlighted,
&.is-selected {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
}

&.block-editor-block-list__block:not([contenteditable]):focus {
&::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-reusable-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
Expand Down