Wp upgrade/5.7 base compatibility

CHANGELOG.md

@@ -1,6 +1,50 @@
 # Changelog
 
 ## Unreleased
+- Fix #315 - disable autogenerated Anchor ID's in the Headline Block
+- Click to Tweet style fixes. Closes #320. Updates the styles to restore the styling for the Click to Tweet feature on Paragraph blocks.
+- Stats Block: 
+  - Update to block api 2 and fix alignment issues for WP 5.7
+    - Change default fill / stroke color of the stats block svg donut chart so it isn't white on white background.
+  - Editor Styles: Add CSS4 Variable for theme styling: `--bu_blocks-block-bu-stats-editor-floated-width`
+  - Frontend Styles: Fix issue where stat bar is invisible in themes by default using light/dark color themes. The SVG circle paths needed darker colors so they are visible on a white background like Responsive Framework defaults to. 
+- Modal Block 5.7 updates:
+  - Update Block to Block API 2 for 5.7 compatibility
+  - Change how modalHasSelectedBlock value is determined and move from getEditWrapperProps into the edit function as it wasn't working with Block API 2. 
+  - Editor Styles: adjust editor styles and selectors to match new markup of Block API 2
+  - Editor Styles: add a new CSS4 Variable `--bu_blocks-block-bu-modal-editor-floated-width` for theme styling
+- Related Stories Block 5.7 updates:
+  - Update block to Block API 2 and fix alignment issues.
+  - Related Stories Block: invert "Manual Selection" to true for new blocks since most sites don't use YARPP for the automatic related posts feature and this makes the default state of the block appear functional instead of broken without YARPP.
+  - Refactor how the `isCardStyle` is determined as `className` prop is sometimes undefined in Block API 2 when the block loads.
+  - Editor Styles: remove a clearfix style on an `:after` psuedo element that the Block Editor needs for it's own core styling. 
+- Drawer Block 5.7 updates:
+  - Update Block to Block API 2 for 5.7 compatibility
+  - Editor Styles: adjust editor styles and selectors to match new markup of Block API 2
+- Collapsible Block 5.7 updates:
+  - Update Block to Block API 2 for 5.7 compatibility
+    - Adjust how `is-style-preview` class is checked as `props.attributes.classname` is sometimes undefined.
+  - Editor Styles: adjust editor styles and selectors to match new markup of Block API 2
+- Collapsible Control Block: 
+  - Update to Block API 2, styling fixes for 5.7, fix center aligned styles.
+  - add Editor.scss and Style.scss files that were missing and better styling for the block
+- Aside Block 5.7 updates:
+  - Update Block to Block API 2 for 5.7 compatibility
+    - It was necessary to refactor the edit function from a class structure to a function component as useBlockProps and Block API 2 won't work with class based components (https://make.wordpress.org/core/2020/11/18/block-api-version-2/#comment-40855)
+  - Editor Styles: Add CSS4 Variable `--bu_blocks-block-bu-aside-editor-floated-width` so themes can adjust floated width easily
+  - Editor Styles: Adjust how align left/right styles in the editor are targeted as Block API 2 markup is different from Block API 1 and the previous selectors no longer work.
+- Button Block 5.7 updates:
+  - Update Block to Block API 2 for 5.7 compatibility
+    - Adjust editor markup to add a proper classname to the wrapping `<p>` tag around the button itself. 
+    - This block still has issues and conflicts with the core button block due to clashing block names. A later fix is needed to address that and carefully update it.
+  - Editor Styles: adjust editor styles to match new markup classnames
+- 5.7 fixes: change default light & dark color values to be slightly off color to avoid conflicts with new `white` and `black` colors. See: https://github.com/WordPress/gutenberg/issues/9357
+- BUniverse Block 5.7 updates:
+  - Update Buniverse Block to Block API 2 for 5.7 compatibility
+  - Move TextControl for video id from editor to sidebar to aid in styling block when floated
+  - Editor Styles: Add CSS4 Variable `--bu_blocks-block-bu-buniverse-editor-floated-width` so themes can adjust floated width easily
+
+
 
 ## 0.3.7
 - Photo Essay: add tall 2 by 2 image layout and full frame single layouts for photo essay

src/block-support.js

@@ -5,35 +5,41 @@
  * @author Boston University: Interactive Design <[email protected]>
  */
 
+const { select } = wp.data;
+const { applyFilters } = wp.hooks;
+const { registerPlugin } = wp.plugins;
+const { getBlockTypes } = wp.blocks;
+
 /**
  * Disables support for the blocks in this plugin for all but the `post` and `page` post types.
  *
  * Runs once the dom is loaded in order to avoid a race condition.
+ *
+ * @returns {null} Nothing to return
  */
-wp.domReady( function() {
-
+const UnregisterBlocks = () => {
 	// Bail if the default support has been filtered off.
-	if ( wp.hooks.applyFilters( 'buBlocks.blockSupport.disableDefault', false ) ) {
-		return;
+	if ( applyFilters( 'buBlocks.blockSupport.disableDefault', false ) ) {
+		return null;
 	}
 
 	// Create a filterable array of post types to restrict the blocks to.
-	const postTypes = wp.hooks.applyFilters( 'buBlocks.blockSupport.postTypes', [ 'post', 'page' ] );
+	const postTypes = applyFilters( 'buBlocks.blockSupport.postTypes', [ 'post', 'page' ] );
 
 	// Get the current post type.
-	const currentPostType = wp.data.select( 'core/editor' ).getCurrentPost().type;
+	const currentPostType = select( 'core/editor' ).getCurrentPostType();
 
 	// Bail if the current post type is in the array of post types to restrict the blocks to.
 	if ( postTypes.includes( currentPostType ) ) {
-		return;
+		return null;
 	}
 
 	// A filterable list of the blocks registered by this plugin.
 	// Alternatively, a setting added to each block could be used
 	// to filter the list of all blocks. For example:
 	// const blocks = select( 'core/blocks' ).getBlockTypes();
 	// const buBlocks = blocks.filter( block => block.plugin === 'bu-blocks' );
-	const buBlocks = wp.hooks.applyFilters( 'buBlocks.blockSupport.blocks', [
+	const buBlocks = applyFilters( 'buBlocks.blockSupport.blocks', [
 		'editorial/aside',
 		'editorial-preset/aside',
 		'bu/buniverse',
@@ -52,8 +58,19 @@ wp.domReady( function() {
 		'bu/stats',
 	] );
 
+	const registeredBlocks = getBlockTypes().map( item => item.name );
+
 	// Unregister the blocks.
 	buBlocks.forEach( block => {
-		wp.blocks.unregisterBlockType( block );
+		if ( registeredBlocks.includes( block ) ) {
+			wp.blocks.unregisterBlockType( block );
+		}
 	} );
+
+	// Return null to avoid rendering anything.
+	return null;
+};
+
+registerPlugin( 'unregister-bu-blocks', {
+	render: UnregisterBlocks,
 } );

src/blocks/aside/aside.js

@@ -22,14 +22,15 @@ const { registerBlockType } = wp.blocks;
 const {
 	getColorClassName,
 	InnerBlocks,
+	useBlockProps,
 } = ( 'undefined' === typeof wp.blockEditor ) ? wp.editor : wp.blockEditor;
 
 // Internal dependencies.
 import edit from './edit.js';
 
 // Register the block.
 const asideBlock = registerBlockType( 'editorial/aside', {
-
+	apiVersion: 2,
 	title: __( 'Aside' ),
 	description: __( 'Add an aside with related information. Accepts image, headline, paragraph, and button blocks as children.' ),
 	icon: blockIcons('aside'),
@@ -53,8 +54,12 @@ const asideBlock = registerBlockType( 'editorial/aside', {
 			{ [ getColorClassName( 'background', themeColor ) ]: getColorClassName( 'background', themeColor ) }
 		);
 
+		const blockProps = useBlockProps.save( {
+			className: classes,
+		});
+
 		return (
-			<aside className={ classes }>
+			<aside {...blockProps}>
 				<InnerBlocks.Content />
 			</aside>
 		);

src/blocks/aside/edit.js

@@ -18,26 +18,28 @@ const {
 	InspectorControls,
 	PanelColorSettings,
 	withColors,
+	useBlockProps
 } = ( 'undefined' === typeof wp.blockEditor ) ? wp.editor : wp.blockEditor;
 
-class BUAsideEdit extends Component {
-	constructor() {
-		super( ...arguments );
-	}
+const BUAsideEdit = ( props ) => {
 
-	render() {
 		const {
+			attributes,
 			className,
 			themeColor,
 			setThemeColor,
 			presetTemplate,
-		} = this.props;
+		} = props;
 
 		const classes = classnames(
 			className,
 			{ [ `has-${themeColor.slug}-background` ]: themeColor.slug }
 		);
 
+		const blockProps = useBlockProps( {
+			className: classes,
+		});
+
 		return (
 			<Fragment>
 				<InspectorControls>
@@ -54,15 +56,14 @@ class BUAsideEdit extends Component {
 						] }
 					/>
 				</InspectorControls>
-				<aside className={ classes }>
+				<aside {...blockProps}>
 					<InnerBlocks
 						allowedBlocks={ allowedBlocks() }
 						template={ presetTemplate }
 					/>
 				</aside>
 			</Fragment>
 		);
-	}
 }
 
 export default compose( [

src/blocks/aside/editor.scss

@@ -5,38 +5,56 @@
  * which makes it higher in priority.
  */
 
-.editor-block-list__block[data-align="right"][data-type="editorial/aside"] > .editor-block-list__block-edit,
-.editor-block-list__block[data-align="left"][data-type="editorial/aside"] > .editor-block-list__block-edit,
-.editor-block-list__block[data-align="right"][data-type="editorial-preset/aside"] > .editor-block-list__block-edit,
-.editor-block-list__block[data-align="left"][data-type="editorial-preset/aside"] > .editor-block-list__block-edit,
-.block-editor-block-list__block[data-align="right"][data-type="editorial/aside"] > .block-editor-block-list__block-edit,
-.block-editor-block-list__block[data-align="left"][data-type="editorial/aside"] > .block-editor-block-list__block-edit,
-.block-editor-block-list__block[data-align="right"][data-type="editorial-preset/aside"] > .block-editor-block-list__block-edit,
-.block-editor-block-list__block[data-align="left"][data-type="editorial-preset/aside"] > .block-editor-block-list__block-edit {
-	width: calc(100% / 3);
+/**
+* Define CSS variables to allow child themes
+* to alter these values easily if needed.
+**/
+:root {
+	--bu_blocks-block-bu-aside-editor-floated-width: calc(100% / 3);
 }
 
-div[data-type="editorial/aside"] .wp-block-editorial-aside {
+// Remove default float left on Aside from frontend styles.
+aside[data-type="editorial/aside"].wp-block-editorial-aside {
 	float: none;
 }
 
-.editor-block-list__block[data-align="right"] .wp-block-editorial-aside .editor-block-list__block-edit,
-.editor-block-list__block[data-align="left"] .wp-block-editorial-aside .editor-block-list__block-edit,
-.block-editor-block-list__block[data-align="right"] .wp-block-editorial-aside .block-editor-block-list__block-edit,
-.block-editor-block-list__block[data-align="left"] .wp-block-editorial-aside .block-editor-block-list__block-edit {
-	float: none;
-	margin-left: 0;
-	margin-right: 0;
+[data-align="right"],
+[data-align="left"] {
+	> [data-type="editorial/aside"].wp-block-editorial-aside {
+		width: var(--bu_blocks-block-bu-aside-editor-floated-width);
+	}
+}
+
+[data-align="right"] {
+	> [data-type="editorial/aside"].wp-block-editorial-aside {
+		float: right;
+	}
 }
 
-.editor-block-list__block[data-align="left"] .wp-block-editorial-aside .editor-block-list__block,
-.editor-block-list__block[data-align="right"] .wp-block-editorial-aside .editor-block-list__block,
-.block-editor-block-list__block[data-align="left"] .wp-block-editorial-aside .block-editor-block-list__block,
-.block-editor-block-list__block[data-align="right"] .wp-block-editorial-aside .block-editor-block-list__block {
-	padding-left: 16px;
-	padding-right: 16px;
+[data-align="left"] {
+	> [data-type="editorial/aside"].wp-block-editorial-aside {
+		float: left;
+	}
 }
 
+
+// .editor-block-list__block[data-align="right"] .wp-block-editorial-aside .editor-block-list__block-edit,
+// .editor-block-list__block[data-align="left"] .wp-block-editorial-aside .editor-block-list__block-edit,
+// .block-editor-block-list__block[data-align="right"] .wp-block-editorial-aside .block-editor-block-list__block-edit,
+// .block-editor-block-list__block[data-align="left"] .wp-block-editorial-aside .block-editor-block-list__block-edit {
+// 	float: none;
+// 	margin-left: 0;
+// 	margin-right: 0;
+// }
+
+// .editor-block-list__block[data-align="left"] .wp-block-editorial-aside .editor-block-list__block,
+// .editor-block-list__block[data-align="right"] .wp-block-editorial-aside .editor-block-list__block,
+// .block-editor-block-list__block[data-align="left"] .wp-block-editorial-aside .block-editor-block-list__block,
+// .block-editor-block-list__block[data-align="right"] .wp-block-editorial-aside .block-editor-block-list__block {
+// 	padding-left: 16px;
+// 	padding-right: 16px;
+// }
+
 .wp-block-editorial-aside.has-dark-background {
 	.wp-block-heading h2 {
 		color: $color-grayscale-f;