Merge pull request #495 from xwp/feature/wp-52-min

Update minimum WP version to 5.2

Author: emeaguiar

.stylelintrc.json

@@ -7,6 +7,7 @@
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
     "number-leading-zero": null,
+    "selector-class-pattern": null,
     "selector-type-no-unknown": [ true, { "ignore": ["custom-elements"] } ],
     "at-rule-no-unknown": [ true, { "ignoreAtRules": ["mixin"] } ]
   }

.travis.yml

@@ -86,9 +86,10 @@ jobs:
       php: "7.4"
       env: NODE_ENV=teste2e COVERALLS_REPO_TOKEN=$CR_TOKEN
       before_install:
+        - unset PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
         - nvm install
         - nvm use
-        - unset PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
+        - set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
       before_script:
         - sudo service mysql stop
         - echo "Running E2E tests with code coverage ..."
@@ -98,7 +99,7 @@ jobs:
         - docker-compose exec mysql bash -c "chown -R mysql:mysql /var/lib/mysql"
         - npm run wp -- wp core install --title=WordPress --admin_user=admin --admin_password=password --admin_email=admin@example.com --skip-email --url=http://localhost:8088
         - npm run wp -- wp plugin activate material-design
-        - sudo chown -R travis:travis tests # ensure coverage folder can be created
+        - sudo chown -R travis:travis tests node_modules # ensure coverage folder can be created
         - npm run test:e2e:coveralls
 
     - name: JS unit tests (7.4, WordPress latest, with code coverage)
@@ -130,13 +131,13 @@ jobs:
       php: "7.1"
       env: WP_VERSION=latest DEV_LIB_ONLY=phpunit
 
-    - name: PHP unit tests (7.0, WordPress 5.1)
+    - name: PHP unit tests (7.0, WordPress 5.3)
       php: "7.0"
-      env: WP_VERSION=5.1 DEV_LIB_ONLY=phpunit
+      env: WP_VERSION=5.3 DEV_LIB_ONLY=phpunit
 
-    - name: PHP unit tests (5.6, WordPress 5.0)
+    - name: PHP unit tests (5.6, WordPress 5.2)
       php: "5.6"
-      env: WP_VERSION=5.0 DEV_LIB_ONLY=phpunit
+      env: WP_VERSION=5.2 DEV_LIB_ONLY=phpunit
 
     - name: PHP unit tests (7.4, WordPress trunk)
       php: "7.4"

assets/css/src/customize-controls.css

@@ -325,6 +325,10 @@
 
 	& span {
 		font-size: 13px;
+
+		&.dashicons {
+			font-size: 20px;
+		}
 	}
 
 	&.control-settings-expanded {

assets/css/src/overrides.css

@@ -62,10 +62,22 @@ html {
 @mixin typography body1, 1, 1.5, 400, *;
 @mixin typography body2, 0.875, 1.25, 400, *;
 
-/* Additional selectors requiring typoghraphy styles */
+/* Additional selectors requiring typography styles */
+@mixin selector-typography .mdc-button, button, 0.875, 2.25, 500;
+@mixin selector-typography .mdc-button .mdc-button__label, button, 0.875, 2.25, 500;
 @mixin selector-typography .mdc-list-item__primary-text, body1, 1, 1.5, 400;
 @mixin selector-typography .mdc-list-item__secondary-text, body2, 0.875, 1.25, 400;
 
+/* Material Design Icons */
+.material-icons {
+	font-family: var(--mdc-icons-font-family) !important;
+	font-weight: normal;
+	font-size: 24px;
+	font-style: normal;
+	line-height: 1 !important;
+	letter-spacing: normal;
+}
+
 /* Button */
 .mdc-button {
 	box-shadow: none !important;
@@ -90,6 +102,10 @@ html {
 		box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
 		transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 	}
+
+	& .mdc-button__icon {
+		font-size: 18px !important;
+	}
 }
 
 .mdc-button--outlined:not(:disabled) {

assets/src/block-editor/blocks/list/components/list-item.js

@@ -18,16 +18,16 @@
  * WordPress dependencies
  */
 import { findDOMNode, useEffect, useRef } from '@wordpress/element';
-import { create, insert } from '@wordpress/rich-text';
+import {
+	create,
+	insert,
+	__experimentalRichText as RichText,
+} from '@wordpress/rich-text';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import {
-	RichText,
-	isExperimentalRichText,
-} from '../../../components/polyfills';
 import { useStateCallback } from '../../../helpers/hooks';
 
 /**
@@ -246,14 +246,6 @@ const ListItem = ( {
 	// Noop function.
 	const noop = () => {};
 
-	const richTextProps = ! isExperimentalRichText
-		? {
-				selectionStart: rangeStartRef.current,
-				selectionEnd: rangeStartRef.current,
-				onSelectionChange,
-		  }
-		: { onSelectionChange: noop };
-
 	return (
 		<li className="mdc-list-item">
 			{ 'leading' === iconPosition && (
@@ -273,7 +265,7 @@ const ListItem = ( {
 						unstableOnFocus={ () => onFocus( index ) }
 						className="rich-text block-editor-rich-text__editable"
 						__unstableIsSelected={ isPrimarySelected }
-						{ ...richTextProps }
+						onSelectionChange={ onSelectionChange }
 					/>
 				</span>
 
@@ -293,7 +285,7 @@ const ListItem = ( {
 							className="rich-text block-editor-rich-text__editable"
 							placeholder={ __( 'Secondary text…', 'material-design' ) }
 							__unstableIsSelected={ isSecondarySelected }
-							{ ...richTextProps }
+							onSelectionChange={ onSelectionChange }
 						/>
 					</span>
 				) }

assets/src/block-editor/blocks/tab-bar/components/tab.js

@@ -70,6 +70,7 @@ const Tab = ( {
 							tagName={ 'span' }
 							placeholder={ __( 'Tab Title', 'material-design' ) }
 							value={ label }
+							onFocus={ onChange }
 							onChange={ value => onInput( value, index ) }
 							withoutInteractiveFormatting
 							allowedFormats={ [] }

assets/src/block-editor/blocks/tab-bar/style.css

@@ -44,7 +44,7 @@
 		min-width: 50px !important;
 	}
 
-	&__delete {
+	&__delete.material-icons {
 		position: absolute;
 		top: calc(50% - 7.5px);
 		display: none;

assets/src/block-editor/components/polyfills/index.js

@@ -1,5 +1 @@
-export {
-	default as RichText,
-	isExperimental as isExperimentalRichText,
-} from './rich-text';
 export { default as ToolbarGroup } from './toolbar-group';

assets/src/block-editor/components/polyfills/rich-text.js

@@ -157,10 +157,11 @@ const GoogleFontsControl = props => {
 						isLink
 						label={ __( 'View more options', 'material-design' ) }
 						showTooltip={ true }
-						icon="admin-settings"
 						className="control-settings-expanded google-fonts-control-settings-expanded"
 						onClick={ handleClick }
-					/>
+					>
+						<span className="dashicons dashicons-admin-settings"></span>
+					</Button>
 				</span>
 			</div>