From 4626484b0a4d50adfff79db5ef2a08c83ae8451a Mon Sep 17 00:00:00 2001 From: nfmohit Date: Sun, 23 Sep 2018 22:19:10 +0600 Subject: [PATCH 01/12] Introduce link target in Button block --- package-lock.json | 82 ++------ .../src/components/url-input/index.js | 26 ++- .../src/components/url-input/style.scss | 5 + packages/block-library/src/button/block.json | 12 ++ packages/block-library/src/button/edit.js | 188 +++++++++++------- packages/block-library/src/button/editor.scss | 58 ++---- packages/block-library/src/button/save.js | 4 + 7 files changed, 198 insertions(+), 177 deletions(-) diff --git a/package-lock.json b/package-lock.json index 70048538460260..9d9b8d9dce4ab1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5549,8 +5549,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -5571,14 +5570,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5593,20 +5590,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -5723,8 +5717,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -5736,7 +5729,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5751,7 +5743,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5759,14 +5750,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5785,7 +5774,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -5866,8 +5854,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -5879,7 +5866,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -5966,8 +5952,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -6003,7 +5988,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6023,7 +6007,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6067,14 +6050,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -9831,8 +9812,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -9853,14 +9833,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9875,20 +9853,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -10005,8 +9980,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -10018,7 +9992,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10033,7 +10006,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10041,14 +10013,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10067,7 +10037,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -10148,8 +10117,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -10161,7 +10129,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -10248,8 +10215,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -10285,7 +10251,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10305,7 +10270,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10349,14 +10313,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 88562b719802b0..39035bd1e9d4c8 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -223,8 +223,14 @@ class URLInput extends Component { this.inputRef.current.focus(); } + static getDerivedStateFromProps( { showSuggestionsOverride }, { showSuggestions } ) { + return { + showSuggestions: showSuggestionsOverride !== undefined ? showSuggestionsOverride : showSuggestions, + }; + } + render() { - const { value = '', autoFocus = true, instanceId, className } = this.props; + const { value = '', autoFocus = true, instanceId, className, id, isFullWidth, hasBorder } = this.props; const { showSuggestions, suggestions, selectedSuggestion, loading } = this.state; const suggestionsListboxId = `block-editor-url-input-suggestions-${ instanceId }`; @@ -232,8 +238,12 @@ class URLInput extends Component { /* eslint-disable jsx-a11y/no-autofocus */ return ( -
+
} { showSuggestions && !! suggestions.length && - +
{ }; } ); +const NEW_TAB_REL = 'noreferrer noopener'; + class ButtonEdit extends Component { constructor() { super( ...arguments ); this.nodeRef = null; this.bindRef = this.bindRef.bind( this ); + this.onSetLinkRel = this.onSetLinkRel.bind( this ); + this.onToggleOpenInNewTab = this.onToggleOpenInNewTab.bind( this ); } bindRef( node ) { @@ -51,6 +62,27 @@ class ButtonEdit extends Component { this.nodeRef = node; } + onSetLinkRel( value ) { + this.props.setAttributes( { rel: value } ); + } + + onToggleOpenInNewTab( value ) { + const { rel } = this.props.attributes; + const linkTarget = value ? '_blank' : undefined; + + let updatedRel = rel; + if ( linkTarget && ! rel ) { + updatedRel = NEW_TAB_REL; + } else if ( ! linkTarget && rel === NEW_TAB_REL ) { + updatedRel = undefined; + } + + this.props.setAttributes( { + linkTarget, + rel: updatedRel, + } ); + } + render() { const { attributes, @@ -61,90 +93,104 @@ class ButtonEdit extends Component { fallbackBackgroundColor, fallbackTextColor, setAttributes, - isSelected, className, + instanceId, } = this.props; const { text, url, title, + linkTarget, + rel, } = attributes; + const linkId = `wp-block-button__inline-link-${ instanceId }`; + return ( - <> -
- setAttributes( { text: value } ) } - formattingControls={ [ 'bold', 'italic', 'strikethrough' ] } - className={ classnames( - 'wp-block-button__link', { - 'has-background': backgroundColor.color, - [ backgroundColor.class ]: backgroundColor.class, - 'has-text-color': textColor.color, - [ textColor.class ]: textColor.class, - } - ) } - style={ { - backgroundColor: backgroundColor.color, - color: textColor.color, - } } - keepPlaceholderOnFocus +
+ setAttributes( { text: value } ) } + formattingControls={ [ 'bold', 'italic', 'strikethrough' ] } + className={ classnames( + 'wp-block-button__link', { + 'has-background': backgroundColor.color, + [ backgroundColor.class ]: backgroundColor.class, + 'has-text-color': textColor.color, + [ textColor.class ]: textColor.class, + } + ) } + style={ { + backgroundColor: backgroundColor.color, + color: textColor.color, + } } + keepPlaceholderOnFocus + /> + + setAttributes( { url: value } ) } + className="has-border" + id={ linkId } /> - - - - - -
- { isSelected && ( -
event.preventDefault() }> - - setAttributes( { url: value } ) } + + + + + + + + - - - ) } - + + +
); } } export default compose( [ + withInstanceId, withColors( 'backgroundColor', { textColor: 'color' } ), applyFallbackStyles, ] )( ButtonEdit ); diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 6cfca2f62f0802..a7751afb92a6cb 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -70,52 +70,26 @@ text-overflow: ellipsis; } } -} - -.block-library-button__inline-link { - background: $white; - display: flex; - flex-wrap: wrap; - align-items: center; - font-family: $default-font; - font-size: $default-font-size; - line-height: $default-line-height; - - // The width of input box plus padding plus two icon buttons. - $blocks-button__link-input-width: 300px + 2px + 2 * $icon-button-size; - width: $blocks-button__link-input-width; - - // Move it down by 2px so that it doesn't overlap the button focus outline. - margin-top: 2px; - .block-editor-url-input { - width: auto; - } - - .block-editor-url-input__suggestions { - width: $blocks-button__link-input-width - $icon-button-size - $icon-button-size; - z-index: z-index(".block-library-button__inline-link .block-editor-url-input__suggestions"); - } - - > .dashicon { - width: $icon-button-size; - } - - .dashicon { - color: $dark-gray-100; - } - - .block-editor-url-input input[type="text"]::placeholder { - color: $dark-gray-100; + // Limit width of the text field if empty + .wp-block-button__link[data-is-placeholder-visible="true"] { + max-width: 150px; } +} - [data-align="center"] & { - margin-left: auto; - margin-right: auto; +.wp-block-button__inline-link { + color: $dark-gray-500; + height: 0; + overflow: hidden; + width: 100%; + @include break-small() { + width: 300px; } - [data-align="right"] & { - margin-left: auto; - margin-right: 0; + .is-selected &, + .is-typing & { + height: auto; + overflow: visible; + margin-top: $grid-size-large; } } diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index 67ce1225d26562..ae5fdd9d099f5e 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -20,6 +20,8 @@ export default function save( { attributes } ) { textColor, customBackgroundColor, customTextColor, + linkTarget, + linkRel, } = attributes; const textClass = getColorClassName( 'color', textColor ); @@ -46,6 +48,8 @@ export default function save( { attributes } ) { title={ title } style={ buttonStyle } value={ text } + target={ linkTarget } + rel={ linkRel } />
); From a127edacc1fe7b8fc3d5195abb1b1d7cfa34e9a8 Mon Sep 17 00:00:00 2001 From: nfmohit-wpmudev Date: Wed, 6 Feb 2019 23:34:21 +0600 Subject: [PATCH 02/12] Updated popover style --- packages/block-library/src/button/editor.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index a7751afb92a6cb..ff605ee5ee470a 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -70,6 +70,7 @@ text-overflow: ellipsis; } } +<<<<<<< HEAD // Limit width of the text field if empty .wp-block-button__link[data-is-placeholder-visible="true"] { @@ -92,4 +93,6 @@ overflow: visible; margin-top: $grid-size-large; } +======= +>>>>>>> Updated popover style } From f1ef9ce7a2120ba56ea5a9c47b3f7a44b5a03c38 Mon Sep 17 00:00:00 2001 From: nfmohit-wpmudev Date: Tue, 16 Apr 2019 09:02:29 +0600 Subject: [PATCH 03/12] Moved 'Open in New Tab' toggle to InspectorControls --- packages/block-library/src/button/edit.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 4885b395236a23..d46e08bfe68acf 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -184,6 +184,24 @@ class ButtonEdit extends Component { /> +<<<<<<< HEAD +======= + { isSelected && ( + +
event.preventDefault() }> + setAttributes( { url: value } ) } + /> + +
+ ) } +>>>>>>> Moved 'Open in New Tab' toggle to InspectorControls
); } From c5949c5658a6dcf3fc91f1e4685b71f5a6329eb1 Mon Sep 17 00:00:00 2001 From: nfmohit-wpmudev Date: Tue, 16 Apr 2019 10:28:47 +0600 Subject: [PATCH 04/12] Implemented inline link replacing URLPopover --- packages/block-library/src/button/edit.js | 18 ------------------ packages/block-library/src/button/style.scss | 11 +++++++++++ 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index d46e08bfe68acf..4885b395236a23 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -184,24 +184,6 @@ class ButtonEdit extends Component { /> -<<<<<<< HEAD -======= - { isSelected && ( - -
event.preventDefault() }> - setAttributes( { url: value } ) } - /> - -
- ) } ->>>>>>> Moved 'Open in New Tab' toggle to InspectorControls
); } diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 1ba7da6425f5f2..27f7c8215e9422 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -48,3 +48,14 @@ $blocks-button__height: 56px; border: 2px solid; } } + +.editor-format-toolbar__url-inline { + margin-top: 16px; + color: $dark-gray-500; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + + .block-editor-url-input { + @include reset; + } +} From fb36fe95972cb96e7c957339ac33e27d7ecf6aaf Mon Sep 17 00:00:00 2001 From: nfmohit-wpmudev Date: Wed, 17 Apr 2019 00:17:06 +0600 Subject: [PATCH 05/12] Updated button styles --- packages/block-library/src/button/editor.scss | 5 +++++ packages/block-library/src/button/style.scss | 11 ----------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index ff605ee5ee470a..263d567bbdcb1c 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -96,3 +96,8 @@ ======= >>>>>>> Updated popover style } + +.wp-block-button__inline-link { + margin-top: $grid-size-large; + color: $dark-gray-500; +} diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 27f7c8215e9422..1ba7da6425f5f2 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -48,14 +48,3 @@ $blocks-button__height: 56px; border: 2px solid; } } - -.editor-format-toolbar__url-inline { - margin-top: 16px; - color: $dark-gray-500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; - - .block-editor-url-input { - @include reset; - } -} From 434493ee2ae48d476ebadcef713f0c2288e32841 Mon Sep 17 00:00:00 2001 From: nfmohit-wpmudev Date: Fri, 19 Apr 2019 18:06:51 +0600 Subject: [PATCH 06/12] Make the BaseContrrol available in the DOM always, but hide it with CSS until the block is selected --- packages/block-library/src/button/editor.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 263d567bbdcb1c..2fa230c6ed7bda 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -98,6 +98,14 @@ } .wp-block-button__inline-link { - margin-top: $grid-size-large; color: $dark-gray-500; + height: 0; + overflow: hidden; + + .is-selected & { + height: 100%; + overflow: visible; + margin-top: $grid-size-large; + transition: 0.5s; + } } From db2cbd8d64e7d78f11845dd8599c3839fc0818aa Mon Sep 17 00:00:00 2001 From: nfmohit-wpmudev Date: Fri, 19 Apr 2019 18:34:03 +0600 Subject: [PATCH 07/12] Limit width of the text field if empty --- packages/block-library/src/button/editor.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 2fa230c6ed7bda..a7751afb92a6cb 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -70,7 +70,6 @@ text-overflow: ellipsis; } } -<<<<<<< HEAD // Limit width of the text field if empty .wp-block-button__link[data-is-placeholder-visible="true"] { @@ -93,19 +92,4 @@ overflow: visible; margin-top: $grid-size-large; } -======= ->>>>>>> Updated popover style -} - -.wp-block-button__inline-link { - color: $dark-gray-500; - height: 0; - overflow: hidden; - - .is-selected & { - height: 100%; - overflow: visible; - margin-top: $grid-size-large; - transition: 0.5s; - } } From 5fb59f9a3c8084553eb5889cb0eef2ae323b54af Mon Sep 17 00:00:00 2001 From: nfmohit-wpmudev Date: Fri, 24 May 2019 15:57:19 +0600 Subject: [PATCH 08/12] Fix width and positioning issues of the URLInput and Autocomplete suggestions list --- .../src/components/url-input/style.scss | 12 ++++++++++ packages/block-library/src/button/edit.js | 4 +++- packages/block-library/src/button/editor.scss | 24 ++++++++++++++++--- 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss index 0cca31a1a18365..5e6f34762a4605 100644 --- a/packages/block-editor/src/components/url-input/style.scss +++ b/packages/block-editor/src/components/url-input/style.scss @@ -36,6 +36,18 @@ $input-size: 300px; border-radius: 4px; } + &.is-full-width { + width: 100%; + + input[type="text"] { + width: 100%; + } + + &__suggestions { + width: 100%; + } + } + .components-spinner { position: absolute; right: $input-padding; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 4885b395236a23..f8a9e77dfbece3 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -133,14 +133,16 @@ class ButtonEdit extends Component { className="wp-block-button__inline-link" id={ linkId }> setAttributes( { url: value } ) } - className="has-border" id={ linkId } + isFullWidth + hasBorder /> diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index a7751afb92a6cb..4b0cc2381fb7d3 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -81,9 +81,27 @@ color: $dark-gray-500; height: 0; overflow: hidden; - width: 100%; - @include break-small() { - width: 300px; + max-width: 290px; + + &-input__suggestions { + max-width: 290px; + } + + @media (min-width: #{ ($break-medium) }) { + max-width: 260px; + + &-input__suggestions { + max-width: 260px; + } + + } + @media (min-width: #{ ($break-large) }) { + max-width: 290px; + + &-input__suggestions { + max-width: 290px; + } + } .is-selected &, From 2e67a5217f7b97ff8b6cf15fd22ef89af28d07c4 Mon Sep 17 00:00:00 2001 From: nfmohit-wpmudev Date: Fri, 24 May 2019 16:02:51 +0600 Subject: [PATCH 09/12] Prevent autocomplete suggestions list from showing up when block is deselected --- packages/block-library/src/button/edit.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index f8a9e77dfbece3..f4d38282c196ce 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -95,6 +95,7 @@ class ButtonEdit extends Component { setAttributes, className, instanceId, + isSelected, } = this.props; const { @@ -140,6 +141,7 @@ class ButtonEdit extends Component { autoFocus={ false } /* eslint-enable jsx-a11y/no-autofocus */ onChange={ ( value ) => setAttributes( { url: value } ) } + showSuggestionsOverride={ ! isSelected ? false : undefined } id={ linkId } isFullWidth hasBorder From b576942aeec1bc08991f8657798320915fedf074 Mon Sep 17 00:00:00 2001 From: nahid Date: Thu, 20 Jun 2019 16:18:00 +0200 Subject: [PATCH 10/12] Fixed the rel attribute not working issue --- packages/block-library/src/button/save.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index ae5fdd9d099f5e..9b05e19b7b62fa 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -21,7 +21,7 @@ export default function save( { attributes } ) { customBackgroundColor, customTextColor, linkTarget, - linkRel, + rel, } = attributes; const textClass = getColorClassName( 'color', textColor ); @@ -49,7 +49,7 @@ export default function save( { attributes } ) { style={ buttonStyle } value={ text } target={ linkTarget } - rel={ linkRel } + rel={ rel } /> ); From 0c6285550b7966682a519feb83019655f4a95e7f Mon Sep 17 00:00:00 2001 From: nahid Date: Thu, 20 Jun 2019 17:16:48 +0200 Subject: [PATCH 11/12] Fixed validation errors --- packages/block-library/src/button/block.json | 2 +- .../block-library/src/button/deprecated.js | 67 ++++++++++++++++++- 2 files changed, 67 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 75e27b773c087b..32fda95348d8a1 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -37,7 +37,7 @@ "selector": "a", "attribute": "target" }, - "linkRel": { + "rel": { "type": "string", "source": "attribute", "selector": "a", diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 5e9a29777b99aa..14f65ff5c98104 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -2,11 +2,15 @@ * External dependencies */ import { omit } from 'lodash'; +import classnames from 'classnames'; /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; +import { + RichText, + getColorClassName, +} from '@wordpress/block-editor'; const colorsMigration = ( attributes ) => { return omit( { @@ -37,6 +41,67 @@ const blockAttributes = { }; const deprecated = [ + { + attributes: { + ...blockAttributes, + align: { + type: 'string', + default: 'none', + }, + backgroundColor: { + type: 'string', + }, + textColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, + customTextColor: { + type: 'string', + }, + }, + save( { attributes } ) { + const { + url, + text, + title, + backgroundColor, + textColor, + customBackgroundColor, + customTextColor, + } = attributes; + + const textClass = getColorClassName( 'color', textColor ); + const backgroundClass = getColorClassName( 'background-color', backgroundColor ); + + const buttonClasses = classnames( 'wp-block-button__link', { + 'has-text-color': textColor || customTextColor, + [ textClass ]: textClass, + 'has-background': backgroundColor || customBackgroundColor, + [ backgroundClass ]: backgroundClass, + } ); + + const buttonStyle = { + backgroundColor: backgroundClass ? undefined : customBackgroundColor, + color: textClass ? undefined : customTextColor, + }; + + return ( +
+ +
+ ); + }, + migrate: colorsMigration, + }, { attributes: { ...blockAttributes, From 5ee5208fb48db44245882e84e268b40e139b1d2c Mon Sep 17 00:00:00 2001 From: nahid Date: Sat, 29 Jun 2019 17:22:22 +0200 Subject: [PATCH 12/12] Reverted changes from the package-lock.json file --- package-lock.json | 82 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 60 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9d9b8d9dce4ab1..70048538460260 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5549,7 +5549,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5570,12 +5571,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5590,17 +5593,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5717,7 +5723,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5729,6 +5736,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5743,6 +5751,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5750,12 +5759,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5774,6 +5785,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5854,7 +5866,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5866,6 +5879,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5952,7 +5966,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5988,6 +6003,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6007,6 +6023,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6050,12 +6067,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -9812,7 +9831,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -9833,12 +9853,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9853,17 +9875,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -9980,7 +10005,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -9992,6 +10018,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10006,6 +10033,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10013,12 +10041,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10037,6 +10067,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -10117,7 +10148,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -10129,6 +10161,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -10215,7 +10248,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -10251,6 +10285,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10270,6 +10305,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10313,12 +10349,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } },