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

[Experimental] Cross platform Box component to replace div #17614

Closed
wants to merge 18 commits into from
Closed

[Experimental] Cross platform Box component to replace div #17614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d9de3ef
Install styled-system and styled-components packages
mkevins Sep 23, 2019
fb3403e
Add simple Box component
mkevins Sep 23, 2019
0903f8d
Add experimental Box to spacer block
mkevins Sep 23, 2019
e409523
Export some grid size constants
mkevins Sep 23, 2019
8373764
Try experimental Box with gallery image mover buttons
mkevins Sep 23, 2019
88490fb
add theme provider and fix styles
dratwas Sep 26, 2019
7711806
fix theme provider
dratwas Sep 26, 2019
6d17490
fix lint
dratwas Sep 26, 2019
30f7828
Little refactor
dratwas Sep 27, 2019
7e3a0bf
remove unused code
dratwas Sep 27, 2019
8f0a152
fix styles
dratwas Sep 27, 2019
9545777
remove unused changes
dratwas Sep 27, 2019
4c0d8ae
remove compose
dratwas Sep 27, 2019
7b1336d
remove sass from deps
dratwas Sep 27, 2019
8bb7dfa
add isCompact prop
dratwas Sep 27, 2019
6dbbfd9
use themeprovider values
dratwas Sep 27, 2019
52791f6
use z-index from the theme
dratwas Sep 27, 2019
af23aee
use className
dratwas Sep 30, 2019
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
265 changes: 243 additions & 22 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ class GalleryEdit extends Component {
url={ img.url }
alt={ img.alt }
id={ img.id }
isCompact={ columns >= 7 }
isFirstItem={ index === 0 }
isLastItem={ ( index + 1 ) === images.length }
isSelected={ isSelected && this.state.selectedImage === index }
Expand Down
32 changes: 1 addition & 31 deletions packages/block-library/src/gallery/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,41 +96,11 @@ ul.wp-block-gallery {
}
}

.block-library-gallery-item__move-menu,
.block-library-gallery-item__inline-menu {
padding: $grid-size-small;
display: inline-flex;
z-index: z-index(".block-library-gallery-item__inline-menu");

.components-button {
color: transparent;
}

@include break-small() {
// Use smaller buttons to fit when there are many columns.
.columns-7 &,
.columns-8 & {
padding: $grid-size-small / 2;
}
}
}

.block-library-gallery-item__inline-menu {
position: absolute;
top: -2px;
right: -2px;
}

.block-library-gallery-item__move-menu {
position: absolute;
top: -2px;
left: -2px;
}

.blocks-gallery-item__move-backward,
.blocks-gallery-item__move-forward,
.blocks-gallery-item__remove {
padding: 0;
color: transparent;
}

.blocks-gallery-item .components-spinner {
Expand Down
28 changes: 22 additions & 6 deletions packages/block-library/src/gallery/gallery-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ import { withSelect } from '@wordpress/data';
import { RichText } from '@wordpress/block-editor';
import { isBlobURL } from '@wordpress/blob';

/**
* Internal dependencies
*/
import MenuBox from './menu-box';

class GalleryImage extends Component {
constructor() {
super( ...arguments );
Expand Down Expand Up @@ -86,10 +91,11 @@ class GalleryImage extends Component {
}

render() {
const { url, alt, id, linkTo, link, isFirstItem, isLastItem, isSelected, caption, onRemove, onMoveForward, onMoveBackward, setAttributes, 'aria-label': ariaLabel } = this.props;
const { url, alt, id, linkTo, link, isFirstItem, isLastItem, isSelected,
caption, onRemove, onMoveForward, onMoveBackward, setAttributes, isCompact,
'aria-label': ariaLabel } = this.props;

let href;

switch ( linkTo ) {
case 'media':
href = url;
Expand Down Expand Up @@ -128,7 +134,11 @@ class GalleryImage extends Component {
return (
<figure className={ className }>
{ href ? <a href={ href }>{ img }</a> : img }
<div className="block-library-gallery-item__move-menu">
<MenuBox
isSelected={ isSelected }
isCompact={ isCompact }
className="block-library-gallery-item__move-menu"
>
<IconButton
icon="arrow-left"
onClick={ isFirstItem ? undefined : onMoveBackward }
Expand All @@ -145,16 +155,22 @@ class GalleryImage extends Component {
aria-disabled={ isLastItem }
disabled={ ! isSelected }
/>
</div>
<div className="block-library-gallery-item__inline-menu">
</MenuBox>

<MenuBox
isSelected={ isSelected }
isCompact={ isCompact }
right
className="block-library-gallery-item__inline-menu"
>
<IconButton
icon="no-alt"
onClick={ onRemove }
className="blocks-gallery-item__remove"
label={ __( 'Remove Image' ) }
disabled={ ! isSelected }
/>
</div>
</MenuBox>
<RichText
tagName="figcaption"
placeholder={ isSelected ? __( 'Write caption…' ) : null }
Expand Down
24 changes: 24 additions & 0 deletions packages/block-library/src/gallery/menu-box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* WordPress dependencies
*/
import { Box } from '@wordpress/components';

const MenuBox = ( { right, isSelected, isCompact, children, className } ) => {
const side = right ? { right: '-2px' } : { left: '-2px' };
return (
<Box
className={ className }
display={ 'inline-flex' }
padding={ isCompact ? 0 : 'small' }
position="absolute"
zIndex={ 'block-library-gallery-item__inline-menu' }
bg={ isSelected ? '#ffffff' : 'inherit' }
Copy link
Contributor

Choose a reason for hiding this comment

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

Note: this line is just for demonstrating that it is possible to override this value with custom CSS from outer place. You'll see #ffffff is not getting effective since we pass block-library-gallery-item__move-menu and block-library-gallery-item__inline-menu to Box component.

top="-2px"
{ ...side }
>
{ children }
</Box>
);
};

export default MenuBox;
2 changes: 2 additions & 0 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@
"react-dates": "^17.1.1",
"react-spring": "^8.0.20",
"rememo": "^3.0.0",
"styled-components": "^4.4.0",
"styled-system": "^5.1.2",
"tinycolor2": "^1.4.1",
"uuid": "^3.3.2"
},
Expand Down
19 changes: 19 additions & 0 deletions packages/components/src/box/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/**
* External dependencies
*/
import styled from 'styled-components';
import { color, space, layout, flexbox, background, border, position, shadow }
from 'styled-system';

const Box = styled.div`
Copy link
Contributor

Choose a reason for hiding this comment

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

Does this automatically translate to View on native or would we need a separate implementation?

Copy link
Contributor

Choose a reason for hiding this comment

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

no, we'll need a sparate box/index.native.js for that. Planning to open a separate PR for mobile

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh, I was hoping styled-components would bring more reusability there. I imagine the implementation of that would be exactly the same except using styled.View instead of styled.div?

How would we implement other components, like the one to replace the <figure> in GalleryImage? Would that also be the same as this but a styled.figure?

Borrowing from the previous HTMLElement experiment, I would expect Box to be a more generic container thing that would accept a tagName prop to be used on the web implementation.

I think the syntax of styled-components would allow for this, but I'm not sure what that looks like yet

Copy link
Contributor

Choose a reason for hiding this comment

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

I imagine the implementation of that would be exactly the same except using styled.View instead of styled.div?

Right, that's also an option. We can do a platform check and call styled.View if it is mobile.

How would we implement other components, like the one to replace the

in GalleryImage? Would that also be the same as this but a styled.figure?

yes, you can either use a valid react/react-native component or a tagname like div, figure, h1 etc.

${ color }
${ space }
${ layout }
${ flexbox }
${ background }
${ border }
${ position }
${ shadow }
`;

export default Box;
2 changes: 2 additions & 0 deletions packages/components/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export * from './primitives';
export { default as Animate } from './animate';
export { default as Autocomplete } from './autocomplete';
export { default as BaseControl } from './base-control';
export { default as Box } from './box';
export { default as Button } from './button';
export { default as ButtonGroup } from './button-group';
export { default as CheckboxControl } from './checkbox-control';
Expand Down Expand Up @@ -73,3 +74,4 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside';
export { default as withFocusReturn, Provider as FocusReturnProvider } from './higher-order/with-focus-return';
export { default as withNotices } from './higher-order/with-notices';
export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
export { withTheme, default as ThemeProvider } from './theme-provider';
89 changes: 89 additions & 0 deletions packages/components/src/theme-provider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/**
* External dependencies
*/
import { ThemeProvider } from 'styled-components';

export { withTheme as withTheme } from 'styled-components';

const getTheme = ( theme ) => ( {
fontSizes: {
small: 12,
medium: 18,
big: 22,
},
space: {
small: 4,
medium: 8,
large: 16,
xlarge: 24,
},
zIndices: {
'block-library-gallery-item__inline-menu': 20,
},
colors: themes[ theme || '' ] || themes.default,
} );

const themes = {
default: {
primary: '#0085ba',
secondary: '#11a0d2',
toggle: '#11a0d2',
button: '#0085ba',
outlines: '#007cba',
},
'admin-color-light': {
primary: '#0085ba',
secondary: '#c75726',
toggle: '#11a0d2',
button: '#0085ba',
outlines: '#007cba',
},
'admin-color-blue': {
primary: '#82b4cb',
secondary: '#d9ab59',
toggle: '#82b4cb',
button: '#d9ab59',
outlines: '#417e9B',
},
'admin-color-coffee': {
primary: '#c2a68c',
secondary: '#9fa47b',
toggle: '#c2a68c',
button: '#c2a68c',
outlines: '#59524c',
},
'admin-color-ectoplasm': {
primary: '#a7b656',
secondary: '#c77430',
toggle: '#a7b656',
button: '#a7b656',
outlines: '#523f6d',
},
'admin-color-midnight': {
primary: '#e14d43',
secondary: '#77a6b9',
toggle: '#77a6b9',
button: '#e14d43',
outlines: '#497b8d',
},
'admin-color-ocean': {
primary: '#a3b9a2',
secondary: '#a89d8a',
toggle: '#a3b9a2',
button: '#a3b9a2',
outlines: '#5e7d5e',
},
'admin-color-sunrise': {
primary: '#d1864a',
secondary: '#c8b03c',
toggle: '#c8b03c',
button: '#d1864a',
outlines: '#837425',
},
};

export default ( { theme, children } ) => (
<ThemeProvider theme={ getTheme( theme ) }>
{ children }
</ThemeProvider>
);
5 changes: 4 additions & 1 deletion packages/edit-post/src/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
KeyboardShortcuts,
SlotFillProvider,
DropZoneProvider,
ThemeProvider,
} from '@wordpress/components';

/**
Expand Down Expand Up @@ -110,7 +111,9 @@ class Editor extends Component {
>
<ErrorBoundary onError={ onError }>
<EditorInitialization postId={ postId } />
<Layout />
<ThemeProvider>
<Layout />
</ThemeProvider>
<KeyboardShortcuts shortcuts={ preventEventDiscovery } />
</ErrorBoundary>
<PostLockedModal />
Expand Down