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

Social Links: Update Placeholder experience when first inserting Social Links #25941

Merged
merged 12 commits into from
Oct 16, 2020
Merged

Social Links: Update Placeholder experience when first inserting Social Links #25941

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f41e9df
Do not hide the icons if the URL is not set
mkaz Oct 8, 2020
71ff7b6
Adds placeholder prop to show if no blocks in list
mkaz Oct 8, 2020
6cb5b26
Add placeholder prop to pass forward to BlockList
mkaz Oct 8, 2020
536c0c1
Add placeholder components when no links specified
mkaz Oct 8, 2020
9312add
Fix issues with rebase/refactor
mkaz Oct 9, 2020
17fc942
Prettier formatting autofix
mkaz Oct 9, 2020
d44ad00
Used blurred faux-icons for placeholder
mkaz Oct 14, 2020
4b6a770
Soften the placeholder colors with some Alphaville
mkaz Oct 14, 2020
211a6b7
Polish the placeholder state.
jasmussen Oct 15, 2020
91a2f20
Tweak setup state.
jasmussen Oct 16, 2020
83542c0
Fix margin and color issue.
jasmussen Oct 16, 2020
6b71e3c
Add placeholder prop to InnerBlocks README
mkaz Oct 16, 2020
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
8 changes: 7 additions & 1 deletion packages/block-editor/src/components/block-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ const appenderNodesMap = new Map();
*/
const BLOCK_ANIMATION_THRESHOLD = 200;

function BlockList( { className, rootClientId, renderAppender }, ref ) {
function BlockList(
{ className, placeholder, rootClientId, renderAppender },
ref
) {
const Container = rootClientId ? 'div' : RootContainer;
const fallbackRef = useRef();
const wrapperRef = ref || fallbackRef;
Expand All @@ -45,6 +48,7 @@ function BlockList( { className, rootClientId, renderAppender }, ref ) {
) }
>
<BlockListItems
placeholder={ placeholder }
rootClientId={ rootClientId }
renderAppender={ renderAppender }
wrapperRef={ wrapperRef }
Expand All @@ -55,6 +59,7 @@ function BlockList( { className, rootClientId, renderAppender }, ref ) {
}

function Items( {
placeholder,
rootClientId,
renderAppender,
__experimentalAppenderTagName,
Expand Down Expand Up @@ -136,6 +141,7 @@ function Items( {
</AsyncModeProvider>
);
} ) }
{ blockClientIds.length < 1 && placeholder }
<BlockListAppender
tagName={ __experimentalAppenderTagName }
rootClientId={ rootClientId }
Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/inner-blocks/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,5 +162,7 @@ Determines whether the toolbars of _all_ child Blocks (applied deeply, recursive

For example, a button block, deeply nested in several levels of block `X` that utilises this property will see the button block's toolbar displayed on block `X`'s toolbar area.

### `placeholder`


* **Type:** `Function`
* **Default:** - `undefined`. The placeholder is an optional function that can be passed in to be a rendered component placed in front of the appender. This can be used to represent an example state prior to any blocks being placed. See the Social Links for an implementation example.
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/inner-blocks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ function UncontrolledInnerBlocks( props ) {
__experimentalAppenderTagName,
renderAppender,
orientation,
placeholder,
} = props;

useNestedSettingsUpdate(
Expand Down Expand Up @@ -88,6 +89,7 @@ function UncontrolledInnerBlocks( props ) {
renderAppender={ renderAppender }
__experimentalAppenderTagName={ __experimentalAppenderTagName }
wrapperRef={ wrapperRef }
placeholder={ placeholder }
/>
</BlockContextProvider>
);
Expand Down
26 changes: 11 additions & 15 deletions packages/block-library/src/social-links/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,26 @@ import { __ } from '@wordpress/i18n';

const ALLOWED_BLOCKS = [ 'core/social-link' ];

// Template contains the links that show when start.
const TEMPLATE = [
[
'core/social-link',
{ service: 'wordpress', url: 'https://wordpress.org' },
],
[ 'core/social-link', { service: 'facebook' } ],
[ 'core/social-link', { service: 'twitter' } ],
[ 'core/social-link', { service: 'instagram' } ],
[ 'core/social-link', { service: 'linkedin' } ],
[ 'core/social-link', { service: 'youtube' } ],
];

export function SocialLinksEdit( props ) {
const {
attributes: { openInNewTab },
setAttributes,
} = props;

const SocialPlaceholder = (
<div className="wp-block-social-links__social-placeholder">
<div className="wp-block-social-link wp-social-link-facebook"></div>
<div className="wp-block-social-link wp-social-link-twitter"></div>
<div className="wp-block-social-link wp-social-link-instagram"></div>
</div>
);

const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps, {
allowedBlocks: ALLOWED_BLOCKS,
templateLock: false,
template: TEMPLATE,
orientation: 'horizontal',
placeholder: SocialPlaceholder,
templateLock: false,
__experimentalAppenderTagName: 'li',
} );
return (
Expand Down
50 changes: 33 additions & 17 deletions packages/block-library/src/social-links/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,41 @@
padding: 0;
}

// Placeholder/setup state.
.wp-block-social-links__social-placeholder {
display: flex;

.wp-block-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 $grid-unit-10 $grid-unit-10 0;
width: 36px;
height: 36px;
border-radius: $radius-round;
opacity: 0.8;
}
}

.is-style-logos-only .wp-block-social-links__social-placeholder .wp-block-social-link::before {
content: "";
display: block;
width: 18px;
height: 18px;
border-radius: $radius-round;
opacity: 0.8;
background: currentColor;
}

.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-block-social-link {
border-radius: 9999px;
padding-left: 16px + 12px;
padding-right: 16px + 12px;
}

// Polish the Appender.
.wp-block-social-links .block-list-appender {
margin: 0;
margin: 0 0 $grid-unit-10 0;
display: flex;
align-items: center;
}
Expand All @@ -47,22 +79,6 @@
min-height: 36px; // This height matches the height of the buttons and ensures an empty block doesn't collapse.
}

// Disappear but show on hover or nav mode focus.
[data-type="core/social-links"] .wp-social-link__is-incomplete {
transition: transform 0.1s ease;
transform-origin: center center;
}

[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) {
.wp-social-link__is-incomplete {
opacity: 0;
transform: scale(0);
width: 0;
padding: 0;
margin-right: 0;
}
}

// Unconfigured placeholder links are semitransparent.
.wp-social-link.wp-social-link__is-incomplete {
opacity: 0.5;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-links/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
display: block;
width: 36px;
height: 36px;
border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
margin: 0 8px 8px 0;
transition: transform 0.1s ease;
@include reduce-motion("transition");
Expand Down