diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1311bd2ab401f6..69c7174fea19fd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,6 +16,13 @@ The easiest way to get started (on MacOS, Linux, or Windows 10 with the Linux Su For other version of Windows, or if you prefer to set things up manually, be sure to have Node.js installed first. You should be running a Node version matching the [current active LTS release](https://github.com/nodejs/Release#release-schedule) or newer for this plugin to work correctly. You can check your Node.js version by typing `node -v` in the Terminal prompt. +If you have an incompatible version of Node in your development environment, you can use [nvm](https://github.com/creationix/nvm) to change node versions on the command line: + +``` +npx nvm install +npx nvm use +``` + You should also have the latest release of npm installed, npm is a separate project from Node.js and is updated frequently. If you've just installed Node.js which includes a version of npm within the installation you most likely will need to also update your npm install. To update npm, type this into your terminal: `npm install npm@latest -g` To test the plugin, or to contribute to it, you can clone this repository and build the plugin files using Node. How you do that depends on whether you're developing locally or uploading the plugin to a remote host. diff --git a/core-blocks/button/edit.js b/core-blocks/button/edit.js index b9a95d10f10812..1ba27165d48e62 100644 --- a/core-blocks/button/edit.js +++ b/core-blocks/button/edit.js @@ -7,7 +7,11 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component, Fragment } from '@wordpress/element'; +import { + Component, + Fragment, +} from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { Dashicon, IconButton, @@ -16,12 +20,10 @@ import { import { URLInput, RichText, - BlockControls, - BlockAlignmentToolbar, ContrastChecker, InspectorControls, withColors, - PanelColor, + PanelColorSettings, } from '@wordpress/editor'; /** @@ -31,26 +33,23 @@ import './editor.scss'; const { getComputedStyle } = window; -const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps ) => { +const FallbackStyles = withFallbackStyles( ( node, ownProps ) => { const { textColor, backgroundColor } = ownProps; + const backgroundColorValue = backgroundColor && backgroundColor.value; + const textColorValue = textColor && textColor.value; //avoid the use of querySelector if textColor color is known and verify if node is available. - const textNode = ! textColor && node ? node.querySelector( '[contenteditable="true"]' ) : null; + const textNode = ! textColorValue && node ? node.querySelector( '[contenteditable="true"]' ) : null; return { - fallbackBackgroundColor: backgroundColor || ! node ? undefined : getComputedStyle( node ).backgroundColor, - fallbackTextColor: textColor || ! textNode ? undefined : getComputedStyle( textNode ).color, + fallbackBackgroundColor: backgroundColorValue || ! node ? undefined : getComputedStyle( node ).backgroundColor, + fallbackTextColor: textColorValue || ! textNode ? undefined : getComputedStyle( textNode ).color, }; -} )( ContrastChecker ); +} ); class ButtonEdit extends Component { constructor() { super( ...arguments ); this.nodeRef = null; this.bindRef = this.bindRef.bind( this ); - this.updateAlignment = this.updateAlignment.bind( this ); - } - - updateAlignment( nextAlign ) { - this.props.setAttributes( { align: nextAlign } ); } bindRef( node ) { @@ -67,6 +66,8 @@ class ButtonEdit extends Component { textColor, setBackgroundColor, setTextColor, + fallbackBackgroundColor, + fallbackTextColor, setAttributes, isSelected, className, @@ -76,14 +77,10 @@ class ButtonEdit extends Component { text, url, title, - align, } = attributes; return ( - - - - - - { this.nodeRef && } + + + { isSelected && ( @@ -141,4 +147,7 @@ class ButtonEdit extends Component { } } -export default withColors( 'backgroundColor', { textColor: 'color' } )( ButtonEdit ); +export default compose( [ + withColors( 'backgroundColor', { textColor: 'color' } ), + FallbackStyles, +] )( ButtonEdit ); diff --git a/core-blocks/button/index.js b/core-blocks/button/index.js index 3fc45f847ea26f..54b4222978e746 100644 --- a/core-blocks/button/index.js +++ b/core-blocks/button/index.js @@ -37,10 +37,6 @@ const blockAttributes = { source: 'children', selector: 'a', }, - align: { - type: 'string', - default: 'none', - }, backgroundColor: { type: 'string', }, @@ -76,15 +72,9 @@ export const settings = { attributes: blockAttributes, - getEditWrapperProps( attributes ) { - const { align } = attributes; - const props = { 'data-resized': true }; - - if ( 'left' === align || 'right' === align || 'center' === align ) { - props[ 'data-align' ] = align; - } - - return props; + supports: { + align: true, + wideAlign: false, }, styles: [ @@ -100,7 +90,6 @@ export const settings = { url, text, title, - align, backgroundColor, textColor, customBackgroundColor, @@ -123,7 +112,7 @@ export const settings = { }; return ( -
+
-
+ + -
+
-
-
-
- + + +
`; diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js index 04c1afcb922a6a..529644ee90deac 100644 --- a/core-blocks/embed/index.js +++ b/core-blocks/embed/index.js @@ -15,8 +15,6 @@ import { Component, Fragment, renderToString } from '@wordpress/element'; import { Button, Placeholder, Spinner, SandBox } from '@wordpress/components'; import { createBlock } from '@wordpress/blocks'; import { - BlockControls, - BlockAlignmentToolbar, RichText, } from '@wordpress/editor'; import apiFetch from '@wordpress/api-fetch'; @@ -67,9 +65,6 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', selector: 'figcaption', default: [], }, - align: { - type: 'string', - }, type: { type: 'string', }, @@ -78,15 +73,12 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', }, }, - transforms, - - getEditWrapperProps( attributes ) { - const { align } = attributes; - if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) { - return { 'data-align': align }; - } + supports: { + align: true, }, + transforms, + edit: class extends Component { constructor() { super( ...arguments ); @@ -183,28 +175,15 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', render() { const { html, type, error, fetching } = this.state; - const { align, url, caption } = this.props.attributes; + const { url, caption } = this.props.attributes; const { setAttributes, isSelected, className } = this.props; - const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); - - const controls = ( - - - - ); if ( fetching ) { return ( - - { controls } -
- -

{ __( 'Embedding…' ) }

-
- +
+ +

{ __( 'Embedding…' ) }

+
); } @@ -213,26 +192,23 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', const label = sprintf( __( '%s URL' ), title ); return ( - - { controls } - -
- setAttributes( { url: event.target.value } ) } /> - - { error &&

{ __( 'Sorry, we could not embed that content.' ) }

} -
- - + +
+ setAttributes( { url: event.target.value } ) } /> + + { error &&

{ __( 'Sorry, we could not embed that content.' ) }

} +
+ ); } @@ -257,7 +233,6 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', return ( - { controls }
{ ( cannotPreview ) ? ( @@ -281,14 +256,13 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', }, save( { attributes } ) { - const { url, caption, align, type, providerNameSlug } = attributes; + const { url, caption, type, providerNameSlug } = attributes; if ( ! url ) { return null; } const embedClassName = classnames( 'wp-block-embed', { - [ `align${ align }` ]: align, [ `is-type-${ type }` ]: type, [ `is-provider-${ providerNameSlug }` ]: providerNameSlug, } ); diff --git a/core-blocks/file/edit.js b/core-blocks/file/edit.js index 0f9bf176675b9d..96cc76dc2dcc7d 100644 --- a/core-blocks/file/edit.js +++ b/core-blocks/file/edit.js @@ -21,7 +21,7 @@ import { MediaPlaceholder, BlockControls, RichText, - editorMediaUpload, + mediaUpload, } from '@wordpress/editor'; import { compose } from '@wordpress/compose'; @@ -44,21 +44,27 @@ class FileEdit extends Component { this.changeShowDownloadButton = this.changeShowDownloadButton.bind( this ); this.state = { + hasError: false, showCopyConfirmation: false, }; } componentDidMount() { - const { href } = this.props.attributes; + const { attributes, noticeOperations } = this.props; + const { href } = attributes; // Upload a file drag-and-dropped into the editor if ( this.isBlobURL( href ) ) { const file = getBlobByURL( href ); - editorMediaUpload( { + mediaUpload( { allowedType: '*', filesList: [ file ], onFileChange: ( [ media ] ) => this.onSelectFile( media ), + onError: ( message ) => { + this.setState( { hasError: true } ); + noticeOperations.createErrorNotice( message ); + }, } ); revokeBlobURL( href ); @@ -74,6 +80,7 @@ class FileEdit extends Component { onSelectFile( media ) { if ( media && media.url ) { + this.setState( { hasError: false } ); this.props.setAttributes( { href: media.url, fileName: media.title, @@ -129,14 +136,10 @@ class FileEdit extends Component { downloadButtonText, id, } = attributes; - const { showCopyConfirmation } = this.state; + const { hasError, showCopyConfirmation } = this.state; const attachmentPage = media && media.link; - const classes = classnames( className, { - 'is-transient': this.isBlobURL( href ), - } ); - - if ( ! href ) { + if ( ! href || hasError ) { return ( { @@ -171,10 +165,6 @@ class GalleryEdit extends Component { const controls = ( - { !! images.length && ( ( { url: createBlobURL( file ) } ) ), } ); - editorMediaUpload( { + mediaUpload( { filesList: files, onFileChange: ( images ) => onChange( block.clientId, { images } ), allowedType: 'image', @@ -158,19 +157,12 @@ export const settings = { ], }, - getEditWrapperProps( attributes ) { - const { align } = attributes; - if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) { - return { 'data-align': align }; - } - }, - edit, save( { attributes } ) { - const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; + const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes; return ( -