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

SDK: import Calypso UI into a Gutenberg extension and scope styles #26683

Closed
wants to merge 15 commits into from
Closed

SDK: import Calypso UI into a Gutenberg extension and scope styles #26683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9d2bc89
SDK: Explore importing Calypso UI into a Gutenberg extension
dmsnell Aug 7, 2018
5287c1c
Break apart styles and import granularly
dmsnell Aug 12, 2018
920f61d
Include sass utilities globally and namespace only imported Calypso c…
simison Aug 14, 2018
bbaed35
Load shared/utils also in webpack.config.node.js
simison Aug 14, 2018
99df4ea
Remove globals and keep namespacing
simison Aug 17, 2018
7be68db
Fix build when not excluding styles
simison Aug 17, 2018
5e863bc
Remove unrelated scss changes
simison Aug 17, 2018
f5853f0
,
simison Aug 17, 2018
35541b8
Fix failing tests — don't import scss files in Jest
simison Aug 17, 2018
a9fc7eb
Clean out global import from webpack.config.node.js
simison Aug 17, 2018
d2ab07e
✂ Remove unnessesary `_.compact`
simison Aug 17, 2018
88ae7e4
Add `moduleNameMapper` also to integration tests
simison Aug 17, 2018
261fc7d
Simplify namespacing inclusion/exclusion
simison Aug 17, 2018
052349f
Use singular name
simison Aug 22, 2018
c52e42f
Do a test run of integration Jest config in CI
simison Aug 24, 2018
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
2 changes: 1 addition & 1 deletion bin/sdk-cli.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const getBaseConfig = ( options = {} ) => {
};

const build = ( target, argv ) => {
const config = target.config( { argv, getBaseConfig } );
const config = target.config( { argv, getBaseConfig, __rootDir } );
const compiler = webpack( config );

// watch takes an additional argument, adjust accordingly
Expand Down
6 changes: 5 additions & 1 deletion bin/sdk/gutenberg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,12 @@ const path = require( 'path' );
exports.config = ( {
argv: { editorScript, viewScript, outputDir, outputEditorFile, outputViewFile },
getBaseConfig,
__rootDir,
} ) => {
const baseConfig = getBaseConfig( { externalizeWordPressPackages: true } );
const baseConfig = getBaseConfig( {
externalizeWordPressPackages: true,
styleNamespace: 'calypso',
} );
const name = path.basename( path.dirname( editorScript ).replace( /\/$/, '' ) );

return {
Expand Down
2 changes: 2 additions & 0 deletions client/components/card/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import classNames from 'classnames';
import Gridicon from 'gridicons';
import PropTypes from 'prop-types';

import './style.scss';

const getClassName = ( { className, compact, displayAsLink, highlight, href, onClick } ) =>
classNames(
'card',
Expand Down
2 changes: 2 additions & 0 deletions client/components/card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../../../assets/stylesheets/shared/_utils.scss';
Copy link
Member

Choose a reason for hiding this comment

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

We seem to need only:

  • assets/stylesheets/shared/_colors.scss
  • assets/stylesheets/shared/mixins/clear-fix.scss
  • assets/stylesheets/shared/mixins/breakpoints.scss

How do you feel about being even more specific and listing them specifically? Being granular enough will hopefully result in smaller bundle sizes.


.card {
display: block;
position: relative;
Expand Down
2 changes: 2 additions & 0 deletions client/components/ribbon/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
import React from 'react';
import classNames from 'classnames';

import './style.scss';

export default props => (
<div
className={ classNames( {
Expand Down
2 changes: 2 additions & 0 deletions client/components/ribbon/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../../../assets/stylesheets/shared/_utils.scss';
Copy link
Member

Choose a reason for hiding this comment

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

We seem to need only:

  • assets/stylesheets/shared/_colors.scss
  • assets/stylesheets/shared/functions/_z-index.scss

How do you feel about being even more specific and listing them specifically? Being granular enough will hopefully result in smaller bundle sizes.


.ribbon {
position: absolute;
right: -5px;
Expand Down
17 changes: 6 additions & 11 deletions client/gutenberg/extensions/editor-notes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
*/
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/editor';
import Card from 'components/card';
import Ribbon from 'components/ribbon';

import './style.scss';

Expand All @@ -14,23 +16,16 @@ const attributes = {
},
};

const edit = ( { attributes: { notes }, className, isSelected, setAttributes } ) => (
<div className={ isSelected ? 'is-selected' : '' }>
{ ! isSelected && (
Copy link
Member

Choose a reason for hiding this comment

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

Any good reason to be getting rid of this functionality? It was nice to have the notebook icon while editing the block content.

<span className="editor-notes__editor-indicator">
<span role="img" aria-label="notebook">
📔
</span>
Editor's Notes: hidden from rendered page
</span>
) }
const edit = ( { attributes: { notes }, className, setAttributes } ) => (
<Card highlight="error" className={ `${ className } ${ className }__box calypso` }>
<Ribbon>Hidden</Ribbon>
Copy link
Member

Choose a reason for hiding this comment

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

Maybe we should localize this string?

Copy link
Member Author

Choose a reason for hiding this comment

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

Maybe we should localize this string?

We definitely should give it a try! 😍

Copy link
Member

Choose a reason for hiding this comment

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

Let's wait until we have some more clarity on i18n, before we dip our toes into this :)

<RichText
tagName="p"
className={ className }
value={ notes }
onChange={ newNotes => setAttributes( { notes: newNotes } ) }
/>
</div>
</Card>
);

const save = () => null;
Expand Down
19 changes: 4 additions & 15 deletions client/gutenberg/extensions/editor-notes/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
.wp-block-a8c-editor-notes {
border: 2px solid gray;
position: relative;
padding: 32px 6px 6px;
background-color: #c0e7ff;
@import '../../../../assets/stylesheets/shared/_colors.scss';

.is-selected {
padding-top: 6px;
}
}

.editor-notes__editor-indicator {
position: absolute;
top: 0;
left: 8px;
font-style: italic;
.wp-block-a8c-editor-notes__box {
background-color: lighten( $alert-red, 40% );
border-color: $alert-red;
}
Loading