diff --git src/bp-activity/classes/class-bp-activity-component.php src/bp-activity/classes/class-bp-activity-component.php
index 38c80cf5d..5b702b34e 100644
--- src/bp-activity/classes/class-bp-activity-component.php
+++ src/bp-activity/classes/class-bp-activity-component.php
@@ -499,8 +499,8 @@ class BP_Activity_Component extends BP_Component {
 					'wp-components',
 					'wp-i18n',
 					'wp-block-editor',
+					'wp-server-side-render',
 					'bp-block-data',
-					'bp-block-components',
 				),
 				'style'              => 'bp-latest-activities-block',
 				'style_url'          => plugins_url( 'css/blocks/latest-activities.css', dirname(  __FILE__ ) ),
diff --git src/bp-activity/js/blocks/embed-activity.js src/bp-activity/js/blocks/embed-activity.js
index fc3a737c8..cc62d03b8 100644
--- src/bp-activity/js/blocks/embed-activity.js
+++ src/bp-activity/js/blocks/embed-activity.js
@@ -117,87 +117,7 @@ parcelRequire = (function (modules, cache, entry, globalName) {
   }
 
   return newRequire;
-})({"DCTP":[function(require,module,exports) {
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-module.exports = _arrayWithHoles;
-},{}],"LoeL":[function(require,module,exports) {
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-module.exports = _iterableToArrayLimit;
-},{}],"jEQo":[function(require,module,exports) {
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-module.exports = _arrayLikeToArray;
-},{}],"Dbv9":[function(require,module,exports) {
-var arrayLikeToArray = require("./arrayLikeToArray");
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
-}
-
-module.exports = _unsupportedIterableToArray;
-},{"./arrayLikeToArray":"jEQo"}],"MWEO":[function(require,module,exports) {
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableRest;
-},{}],"DERy":[function(require,module,exports) {
-var arrayWithHoles = require("./arrayWithHoles");
-
-var iterableToArrayLimit = require("./iterableToArrayLimit");
-
-var unsupportedIterableToArray = require("./unsupportedIterableToArray");
-
-var nonIterableRest = require("./nonIterableRest");
-
-function _slicedToArray(arr, i) {
-  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
-}
-
-module.exports = _slicedToArray;
-},{"./arrayWithHoles":"DCTP","./iterableToArrayLimit":"LoeL","./unsupportedIterableToArray":"Dbv9","./nonIterableRest":"MWEO"}],"Sjre":[function(require,module,exports) {
+})({"Sjre":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -205,62 +125,67 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    _wp$element = _wp.element,
-    createElement = _wp$element.createElement,
-    Fragment = _wp$element.Fragment,
-    useState = _wp$element.useState,
-    __ = _wp.i18n.__,
-    _wp$components = _wp.components,
-    Placeholder = _wp$components.Placeholder,
-    Disabled = _wp$components.Disabled,
-    SandBox = _wp$components.SandBox,
-    Button = _wp$components.Button,
-    ExternalLink = _wp$components.ExternalLink,
-    Spinner = _wp$components.Spinner,
-    ToolbarGroup = _wp$components.ToolbarGroup,
-    ToolbarButton = _wp$components.ToolbarButton,
-    compose = _wp.compose.compose,
-    withSelect = _wp.data.withSelect,
-    _wp$blockEditor = _wp.blockEditor,
-    RichText = _wp$blockEditor.RichText,
-    BlockControls = _wp$blockEditor.BlockControls;
+const {
+  element: {
+    createElement,
+    Fragment,
+    useState
+  },
+  i18n: {
+    __
+  },
+  components: {
+    Placeholder,
+    Disabled,
+    SandBox,
+    Button,
+    ExternalLink,
+    Spinner,
+    ToolbarGroup,
+    ToolbarButton
+  },
+  compose: {
+    compose
+  },
+  data: {
+    withSelect
+  },
+  blockEditor: {
+    RichText,
+    BlockControls
+  }
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    embedScriptURL = _bp.blockData.embedScriptURL;
-
-var EditEmbedActivity = function EditEmbedActivity(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes,
-      isSelected = _ref.isSelected,
-      preview = _ref.preview,
-      fetching = _ref.fetching;
-  var url = attributes.url,
-      caption = attributes.caption;
-
-  var label = __('BuddyPress Activity URL', 'buddypress');
-
-  var _useState = useState(url),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setURL = _useState2[1];
-
-  var _useState3 = useState(!url),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isEditingURL = _useState4[0],
-      setIsEditingURL = _useState4[1];
-
-  var onSubmit = function onSubmit(event) {
+const {
+  blockData: {
+    embedScriptURL
+  }
+} = bp;
+
+const EditEmbedActivity = ({
+  attributes,
+  setAttributes,
+  isSelected,
+  preview,
+  fetching
+}) => {
+  const {
+    url,
+    caption
+  } = attributes;
+
+  const label = __('BuddyPress Activity URL', 'buddypress');
+
+  const [value, setURL] = useState(url);
+  const [isEditingURL, setIsEditingURL] = useState(!url);
+
+  const onSubmit = event => {
     if (event) {
       event.preventDefault();
     }
@@ -271,7 +196,7 @@ var EditEmbedActivity = function EditEmbedActivity(_ref) {
     });
   };
 
-  var switchBackToURLInput = function switchBackToURLInput(event) {
+  const switchBackToURLInput = event => {
     if (event) {
       event.preventDefault();
     }
@@ -279,7 +204,7 @@ var EditEmbedActivity = function EditEmbedActivity(_ref) {
     setIsEditingURL(true);
   };
 
-  var editToolbar = createElement(BlockControls, null, createElement(ToolbarGroup, null, createElement(ToolbarButton, {
+  const editToolbar = createElement(BlockControls, null, createElement(ToolbarGroup, null, createElement(ToolbarButton, {
     icon: "edit",
     title: __('Edit URL', 'buddypress'),
     onClick: switchBackToURLInput
@@ -299,9 +224,7 @@ var EditEmbedActivity = function EditEmbedActivity(_ref) {
       className: "components-placeholder__input",
       "aria-label": label,
       placeholder: __('Enter URL to embed here…', 'buddypress'),
-      onChange: function onChange(event) {
-        return setURL(event.target.value);
-      }
+      onChange: event => setURL(event.target.value)
     }), createElement(Button, {
       isPrimary: true,
       type: "submit"
@@ -338,24 +261,23 @@ var EditEmbedActivity = function EditEmbedActivity(_ref) {
     tagName: "figcaption",
     placeholder: __('Write caption…', 'buddypress'),
     value: caption,
-    onChange: function onChange(value) {
-      return setAttributes({
-        caption: value
-      });
-    },
+    onChange: value => setAttributes({
+      caption: value
+    }),
     inlineToolbar: true
   })));
 };
 
-var editEmbedActivityBlock = compose([withSelect(function (select, ownProps) {
-  var url = ownProps.attributes.url;
-
-  var _select = select('core'),
-      getEmbedPreview = _select.getEmbedPreview,
-      isRequestingEmbedPreview = _select.isRequestingEmbedPreview;
-
-  var preview = !!url && getEmbedPreview(url);
-  var fetching = !!url && isRequestingEmbedPreview(url);
+const editEmbedActivityBlock = compose([withSelect((select, ownProps) => {
+  const {
+    url
+  } = ownProps.attributes;
+  const {
+    getEmbedPreview,
+    isRequestingEmbedPreview
+  } = select('core');
+  const preview = !!url && getEmbedPreview(url);
+  const fetching = !!url && isRequestingEmbedPreview(url);
   return {
     preview: preview,
     fetching: fetching
@@ -363,7 +285,7 @@ var editEmbedActivityBlock = compose([withSelect(function (select, ownProps) {
 })])(EditEmbedActivity);
 var _default = editEmbedActivityBlock;
 exports.default = _default;
-},{"@babel/runtime/helpers/slicedToArray":"DERy"}],"zmBI":[function(require,module,exports) {
+},{}],"zmBI":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -374,14 +296,22 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    RichText = _wp.blockEditor.RichText,
-    createElement = _wp.element.createElement;
+const {
+  blockEditor: {
+    RichText
+  },
+  element: {
+    createElement
+  }
+} = wp;
 
-var saveEmbedActivityBlock = function saveEmbedActivityBlock(_ref) {
-  var attributes = _ref.attributes;
-  var url = attributes.url,
-      caption = attributes.caption;
+const saveEmbedActivityBlock = ({
+  attributes
+}) => {
+  const {
+    url,
+    caption
+  } = attributes;
 
   if (!url) {
     return null;
@@ -391,7 +321,7 @@ var saveEmbedActivityBlock = function saveEmbedActivityBlock(_ref) {
     className: "wp-block-embed is-type-bp-activity"
   }, createElement("div", {
     className: "wp-block-embed__wrapper"
-  }, "\n".concat(url, "\n")
+  }, `\n${url}\n`
   /* URL needs to be on its own line. */
   ), !RichText.isEmpty(caption) && createElement(RichText.Content, {
     tagName: "figcaption",
@@ -413,9 +343,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    __ = _wp.i18n.__,
-    registerBlockType = _wp.blocks.registerBlockType;
+const {
+  i18n: {
+    __
+  },
+  blocks: {
+    registerBlockType
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-activity/js/blocks/latest-activities.js src/bp-activity/js/blocks/latest-activities.js
index 158c08d57..d84849602 100644
--- src/bp-activity/js/blocks/latest-activities.js
+++ src/bp-activity/js/blocks/latest-activities.js
@@ -145,16 +145,14 @@ const {
   },
   i18n: {
     __
-  }
+  },
+  serverSideRender: ServerSideRender
 } = wp;
 /**
  * BuddyPress dependencies.
  */
 
 const {
-  blockComponents: {
-    ServerSideRender
-  },
   blockData: {
     currentPostId,
     activityTypes
diff --git src/bp-blogs/classes/class-bp-blogs-component.php src/bp-blogs/classes/class-bp-blogs-component.php
index 617330a1b..eaf62872d 100644
--- src/bp-blogs/classes/class-bp-blogs-component.php
+++ src/bp-blogs/classes/class-bp-blogs-component.php
@@ -408,7 +408,7 @@ class BP_Blogs_Component extends BP_Component {
 					'wp-components',
 					'wp-i18n',
 					'wp-block-editor',
-					'bp-block-components',
+					'wp-server-side-render',
 				),
 				'style'              => 'bp-recent-posts-block',
 				'style_url'          => plugins_url( 'css/blocks/recent-posts.css', dirname( __FILE__ ) ),
diff --git src/bp-blogs/js/blocks/recent-posts.js src/bp-blogs/js/blocks/recent-posts.js
index 69a2add7f..ed5b309f5 100644
--- src/bp-blogs/js/blocks/recent-posts.js
+++ src/bp-blogs/js/blocks/recent-posts.js
@@ -128,38 +128,43 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    RangeControl = _wp$components.RangeControl,
-    TextControl = _wp$components.TextControl,
-    ToggleControl = _wp$components.ToggleControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
-/**
- * BuddyPress dependencies.
- */
-
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender;
-
-var editRecentPostsBlock = function editRecentPostsBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var title = attributes.title,
-      maxPosts = attributes.maxPosts,
-      linkTitle = attributes.linkTitle;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    PanelBody,
+    RangeControl,
+    TextControl,
+    ToggleControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
+
+const editRecentPostsBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const {
+    title,
+    maxPosts,
+    linkTitle
+  } = attributes;
   return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Settings', 'buddypress'),
     initialOpen: true
   }, createElement(TextControl, {
     label: __('Title', 'buddypress'),
     value: title,
-    onChange: function onChange(text) {
+    onChange: text => {
       setAttributes({
         title: text
       });
@@ -167,18 +172,16 @@ var editRecentPostsBlock = function editRecentPostsBlock(_ref) {
   }), createElement(RangeControl, {
     label: __('Max posts to show', 'buddypress'),
     value: maxPosts,
-    onChange: function onChange(value) {
-      return setAttributes({
-        maxPosts: value
-      });
-    },
+    onChange: value => setAttributes({
+      maxPosts: value
+    }),
     min: 1,
     max: 10,
     required: true
   }), createElement(ToggleControl, {
     label: __('Link block title to Blogs directory', 'buddypress'),
     checked: !!linkTitle,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         linkTitle: !linkTitle
       });
@@ -202,30 +205,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Widget to Recent Posts Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_blogs_recent_posts_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/recent-posts', {
         title: instance.raw.title,
         maxPosts: instance.raw.max_posts,
@@ -248,9 +255,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-core/bp-core-blocks.php src/bp-core/bp-core-blocks.php
index 1ce5c1f18..7f844a045 100644
--- src/bp-core/bp-core-blocks.php
+++ src/bp-core/bp-core-blocks.php
@@ -37,11 +37,6 @@ function bp_support_blocks() {
  *              Uses a dependency to `wp-editor` otherwise.
  */
 function bp_register_block_components() {
-	$server_side_renderer_dep = 'wp-server-side-render';
-	if ( bp_is_running_wp( '5.3.0', '<' ) ) {
-		$server_side_renderer_dep = 'wp-editor';
-	}
-
 	wp_register_script(
 		'bp-block-components',
 		plugins_url( 'js/block-components.js', __FILE__ ),
@@ -51,7 +46,6 @@ function bp_register_block_components() {
 			'wp-i18n',
 			'wp-api-fetch',
 			'wp-url',
-			$server_side_renderer_dep,
 		),
 		bp_get_version(),
 		false
diff --git src/bp-core/classes/class-bp-core.php src/bp-core/classes/class-bp-core.php
index e2ee0bcde..9ecf8ab8d 100644
--- src/bp-core/classes/class-bp-core.php
+++ src/bp-core/classes/class-bp-core.php
@@ -392,7 +392,7 @@ class BP_Core extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
-						'bp-block-components',
+						'wp-server-side-render',
 					),
 					'style'              => 'bp-login-form-block',
 					'style_url'          => plugins_url( 'css/blocks/login-form.css', dirname( __FILE__ ) ),
diff --git src/bp-core/js/block-components.js src/bp-core/js/block-components.js
index 35f909b36..df14748df 100644
--- src/bp-core/js/block-components.js
+++ src/bp-core/js/block-components.js
@@ -117,114 +117,7 @@ parcelRequire = (function (modules, cache, entry, globalName) {
   }
 
   return newRequire;
-})({"IC7x":[function(require,module,exports) {
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-module.exports = _classCallCheck;
-},{}],"WiqS":[function(require,module,exports) {
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-module.exports = _createClass;
-},{}],"NS7G":[function(require,module,exports) {
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-module.exports = _assertThisInitialized;
-},{}],"zqo5":[function(require,module,exports) {
-function _setPrototypeOf(o, p) {
-  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-module.exports = _setPrototypeOf;
-},{}],"RISo":[function(require,module,exports) {
-var setPrototypeOf = require("./setPrototypeOf");
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) setPrototypeOf(subClass, superClass);
-}
-
-module.exports = _inherits;
-},{"./setPrototypeOf":"zqo5"}],"xOn8":[function(require,module,exports) {
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    module.exports = _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    module.exports = _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
-module.exports = _typeof;
-},{}],"oXYo":[function(require,module,exports) {
-var _typeof = require("../helpers/typeof");
-
-var assertThisInitialized = require("./assertThisInitialized");
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof(call) === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return assertThisInitialized(self);
-}
-
-module.exports = _possibleConstructorReturn;
-},{"../helpers/typeof":"xOn8","./assertThisInitialized":"NS7G"}],"goD2":[function(require,module,exports) {
-function _getPrototypeOf(o) {
-  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-module.exports = _getPrototypeOf;
-},{}],"W80x":[function(require,module,exports) {
+})({"W80x":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -232,208 +125,161 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    apiFetch = _wp.apiFetch,
-    Popover = _wp.components.Popover,
-    _wp$element = _wp.element,
-    Component = _wp$element.Component,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__,
-    addQueryArgs = _wp.url.addQueryArgs;
-
-var AutoCompleter = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(AutoCompleter, _Component);
-
-  var _super = _createSuper(AutoCompleter);
-
-  function AutoCompleter() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, AutoCompleter);
-    _this = _super.apply(this, arguments);
-    _this.state = {
+const {
+  apiFetch,
+  components: {
+    Popover
+  },
+  element: {
+    Component,
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  url: {
+    addQueryArgs
+  }
+} = wp;
+
+class AutoCompleter extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
       search: '',
       items: [],
       error: ''
     };
-    _this.searchItemName = _this.searchItemName.bind((0, _assertThisInitialized2.default)(_this));
-    _this.selectItemName = _this.selectItemName.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
+    this.searchItemName = this.searchItemName.bind(this);
+    this.selectItemName = this.selectItemName.bind(this);
   }
 
-  (0, _createClass2.default)(AutoCompleter, [{
-    key: "searchItemName",
-    value: function searchItemName(value) {
-      var _this2 = this;
-
-      var search = this.state.search;
-      var _this$props = this.props,
-          component = _this$props.component,
-          objectQueryArgs = _this$props.objectQueryArgs;
+  searchItemName(value) {
+    const {
+      search
+    } = this.state;
+    const {
+      component,
+      objectQueryArgs
+    } = this.props;
+    this.setState({
+      search: value
+    });
+
+    if (value.length < search.length) {
       this.setState({
-        search: value
+        items: []
       });
+    }
 
-      if (value.length < search.length) {
-        this.setState({
-          items: []
-        });
-      }
-
-      var path = '/buddypress/v1/' + component;
-      var queryArgs = {};
-
-      if (value) {
-        queryArgs.search = encodeURIComponent(value);
-      }
+    let path = '/buddypress/v1/' + component;
+    let queryArgs = {};
 
-      if (objectQueryArgs) {
-        queryArgs = Object.assign(queryArgs, objectQueryArgs);
-      }
+    if (value) {
+      queryArgs.search = encodeURIComponent(value);
+    }
 
-      apiFetch({
-        path: addQueryArgs(path, queryArgs)
-      }).then(function (items) {
-        _this2.setState({
-          items: items
-        });
-      }, function (error) {
-        _this2.setState({
-          error: error.message
-        });
-      });
+    if (objectQueryArgs) {
+      queryArgs = Object.assign(queryArgs, objectQueryArgs);
     }
-  }, {
-    key: "selectItemName",
-    value: function selectItemName(event, itemID) {
-      var onSelectItem = this.props.onSelectItem;
-      event.preventDefault();
+
+    apiFetch({
+      path: addQueryArgs(path, queryArgs)
+    }).then(items => {
       this.setState({
-        search: '',
-        items: [],
-        error: ''
+        items: items
       });
-      return onSelectItem({
-        itemID: itemID
+    }, error => {
+      this.setState({
+        error: error.message
       });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$state = this.state,
-          search = _this$state.search,
-          items = _this$state.items;
-      var _this$props2 = this.props,
-          ariaLabel = _this$props2.ariaLabel,
-          placeholder = _this$props2.placeholder,
-          useAvatar = _this$props2.useAvatar,
-          slugValue = _this$props2.slugValue;
-      var itemsList;
-
-      if (!ariaLabel) {
-        ariaLabel = __('Item\'s name', 'buddypress');
-      }
-
-      if (!placeholder) {
-        placeholder = __('Enter Item\'s name here…', 'buddypress');
-      }
+    });
+  }
 
-      if (items.length) {
-        itemsList = items.map(function (item) {
-          return createElement("button", {
-            type: "button",
-            key: 'editor-autocompleters__item-item-' + item.id,
-            role: "option",
-            "aria-selected": "true",
-            className: "components-button components-autocomplete__result editor-autocompleters__user",
-            onClick: function onClick(event) {
-              return _this3.selectItemName(event, item.id);
-            }
-          }, useAvatar && createElement("img", {
-            key: "avatar",
-            className: "editor-autocompleters__user-avatar",
-            alt: "",
-            src: item.avatar_urls.thumb.replaceAll('&#038;', '&')
-          }), createElement("span", {
-            key: "name",
-            className: "editor-autocompleters__user-name"
-          }, item.name), slugValue && null !== slugValue(item) && createElement("span", {
-            key: "slug",
-            className: "editor-autocompleters__user-slug"
-          }, slugValue(item)));
-        });
-      }
+  selectItemName(event, itemID) {
+    const {
+      onSelectItem
+    } = this.props;
+    event.preventDefault();
+    this.setState({
+      search: '',
+      items: [],
+      error: ''
+    });
+    return onSelectItem({
+      itemID: itemID
+    });
+  }
 
-      return createElement(Fragment, null, createElement("input", {
-        type: "text",
-        value: search,
-        className: "components-placeholder__input",
-        "aria-label": ariaLabel,
-        placeholder: placeholder,
-        onChange: function onChange(event) {
-          return _this3.searchItemName(event.target.value);
-        }
-      }), 0 !== items.length && createElement(Popover, {
-        className: "components-autocomplete__popover",
-        focusOnMount: false,
-        position: "bottom left"
-      }, createElement("div", {
-        className: "components-autocomplete__results"
-      }, itemsList)));
+  render() {
+    const {
+      search,
+      items
+    } = this.state;
+    let {
+      ariaLabel,
+      placeholder,
+      useAvatar,
+      slugValue
+    } = this.props;
+    let itemsList;
+
+    if (!ariaLabel) {
+      ariaLabel = __('Item\'s name', 'buddypress');
     }
-  }]);
-  return AutoCompleter;
-}(Component);
 
-var _default = AutoCompleter;
-exports.default = _default;
-},{"@babel/runtime/helpers/classCallCheck":"IC7x","@babel/runtime/helpers/createClass":"WiqS","@babel/runtime/helpers/assertThisInitialized":"NS7G","@babel/runtime/helpers/inherits":"RISo","@babel/runtime/helpers/possibleConstructorReturn":"oXYo","@babel/runtime/helpers/getPrototypeOf":"goD2"}],"fOJU":[function(require,module,exports) {
-"use strict";
+    if (!placeholder) {
+      placeholder = __('Enter Item\'s name here…', 'buddypress');
+    }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ServerSideRender;
+    if (items.length) {
+      itemsList = items.map(item => {
+        return createElement("button", {
+          type: "button",
+          key: 'editor-autocompleters__item-item-' + item.id,
+          role: "option",
+          "aria-selected": "true",
+          className: "components-button components-autocomplete__result editor-autocompleters__user",
+          onClick: event => this.selectItemName(event, item.id)
+        }, useAvatar && createElement("img", {
+          key: "avatar",
+          className: "editor-autocompleters__user-avatar",
+          alt: "",
+          src: item.avatar_urls.thumb.replaceAll('&#038;', '&')
+        }), createElement("span", {
+          key: "name",
+          className: "editor-autocompleters__user-name"
+        }, item.name), slugValue && null !== slugValue(item) && createElement("span", {
+          key: "slug",
+          className: "editor-autocompleters__user-slug"
+        }, slugValue(item)));
+      });
+    }
 
-/**
- * WordPress dependencies.
- */
-var _wp = wp,
-    createElement = _wp.element.createElement;
-/**
- * Compatibility Server Side Render.
- *
- * @since 9.0.0
- */
+    return createElement(Fragment, null, createElement("input", {
+      type: "text",
+      value: search,
+      className: "components-placeholder__input",
+      "aria-label": ariaLabel,
+      placeholder: placeholder,
+      onChange: event => this.searchItemName(event.target.value)
+    }), 0 !== items.length && createElement(Popover, {
+      className: "components-autocomplete__popover",
+      focusOnMount: false,
+      position: "bottom left"
+    }, createElement("div", {
+      className: "components-autocomplete__results"
+    }, itemsList)));
+  }
 
-function ServerSideRender(props) {
-  var CompatibiltyServerSideRender = wp.serverSideRender ? wp.serverSideRender : wp.editor.ServerSideRender;
-  return createElement(CompatibiltyServerSideRender, props);
 }
+
+var _default = AutoCompleter;
+exports.default = _default;
 },{}],"iA92":[function(require,module,exports) {
 "use strict";
 
@@ -444,19 +290,16 @@ exports.default = void 0;
 
 var _autocompleter = _interopRequireDefault(require("./autocompleter"));
 
-var _serverSideRender = _interopRequireDefault(require("./server-side-render"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
  * BuddyPress components.
  */
 var _default = {
-  AutoCompleter: _autocompleter.default,
-  ServerSideRender: _serverSideRender.default
+  AutoCompleter: _autocompleter.default
 };
 exports.default = _default;
-},{"./autocompleter":"W80x","./server-side-render":"fOJU"}],"Ee8M":[function(require,module,exports) {
+},{"./autocompleter":"W80x"}],"Ee8M":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
diff --git src/bp-core/js/block-data.js src/bp-core/js/block-data.js
index f9fc38caf..03185dce6 100644
--- src/bp-core/js/block-data.js
+++ src/bp-core/js/block-data.js
@@ -117,87 +117,7 @@ parcelRequire = (function (modules, cache, entry, globalName) {
   }
 
   return newRequire;
-})({"DCTP":[function(require,module,exports) {
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-module.exports = _arrayWithHoles;
-},{}],"LoeL":[function(require,module,exports) {
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-module.exports = _iterableToArrayLimit;
-},{}],"jEQo":[function(require,module,exports) {
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-module.exports = _arrayLikeToArray;
-},{}],"Dbv9":[function(require,module,exports) {
-var arrayLikeToArray = require("./arrayLikeToArray");
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
-}
-
-module.exports = _unsupportedIterableToArray;
-},{"./arrayLikeToArray":"jEQo"}],"MWEO":[function(require,module,exports) {
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableRest;
-},{}],"DERy":[function(require,module,exports) {
-var arrayWithHoles = require("./arrayWithHoles");
-
-var iterableToArrayLimit = require("./iterableToArrayLimit");
-
-var unsupportedIterableToArray = require("./unsupportedIterableToArray");
-
-var nonIterableRest = require("./nonIterableRest");
-
-function _slicedToArray(arr, i) {
-  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
-}
-
-module.exports = _slicedToArray;
-},{"./arrayWithHoles":"DCTP","./iterableToArrayLimit":"LoeL","./unsupportedIterableToArray":"Dbv9","./nonIterableRest":"MWEO"}],"Ih1j":[function(require,module,exports) {
+})({"Ih1j":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -210,7 +130,7 @@ exports.STORE_KEY = void 0;
  *
  * @type {string}
  */
-var STORE_KEY = 'bp/core';
+const STORE_KEY = 'bp/core';
 exports.STORE_KEY = STORE_KEY;
 },{}],"DDtj":[function(require,module,exports) {
 "use strict";
@@ -226,7 +146,7 @@ exports.getActiveComponents = void 0;
  * @param {Object} state The current state.
  * @return {array} The list of Active BP Components.
  */
-var getActiveComponents = function getActiveComponents(state) {
+const getActiveComponents = state => {
   return state.components || [];
 };
 
@@ -244,7 +164,7 @@ exports.TYPES = void 0;
  *
  * @type {Object}
  */
-var TYPES = {
+const TYPES = {
   GET_ACTIVE_COMPONENTS: 'GET_ACTIVE_COMPONENTS',
   FETCH_FROM_API: 'FETCH_FROM_API'
 };
@@ -272,7 +192,7 @@ var _actionTypes = require("./action-types");
 function getActiveComponents(list) {
   return {
     type: _actionTypes.TYPES.GET_ACTIVE_COMPONENTS,
-    list: list
+    list
   };
 }
 /**
@@ -287,745 +207,11 @@ function getActiveComponents(list) {
 function fetchFromAPI(path, parse) {
   return {
     type: _actionTypes.TYPES.FETCH_FROM_API,
-    path: path,
-    parse: parse
+    path,
+    parse
   };
 }
-},{"./action-types":"gg2v"}],"rqzK":[function(require,module,exports) {
-/**
- * Copyright (c) 2014-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var runtime = (function (exports) {
-  "use strict";
-
-  var Op = Object.prototype;
-  var hasOwn = Op.hasOwnProperty;
-  var undefined; // More compressible than void 0.
-  var $Symbol = typeof Symbol === "function" ? Symbol : {};
-  var iteratorSymbol = $Symbol.iterator || "@@iterator";
-  var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
-  var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-
-  function wrap(innerFn, outerFn, self, tryLocsList) {
-    // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
-    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
-    var generator = Object.create(protoGenerator.prototype);
-    var context = new Context(tryLocsList || []);
-
-    // The ._invoke method unifies the implementations of the .next,
-    // .throw, and .return methods.
-    generator._invoke = makeInvokeMethod(innerFn, self, context);
-
-    return generator;
-  }
-  exports.wrap = wrap;
-
-  // Try/catch helper to minimize deoptimizations. Returns a completion
-  // record like context.tryEntries[i].completion. This interface could
-  // have been (and was previously) designed to take a closure to be
-  // invoked without arguments, but in all the cases we care about we
-  // already have an existing method we want to call, so there's no need
-  // to create a new function object. We can even get away with assuming
-  // the method takes exactly one argument, since that happens to be true
-  // in every case, so we don't have to touch the arguments object. The
-  // only additional allocation required is the completion record, which
-  // has a stable shape and so hopefully should be cheap to allocate.
-  function tryCatch(fn, obj, arg) {
-    try {
-      return { type: "normal", arg: fn.call(obj, arg) };
-    } catch (err) {
-      return { type: "throw", arg: err };
-    }
-  }
-
-  var GenStateSuspendedStart = "suspendedStart";
-  var GenStateSuspendedYield = "suspendedYield";
-  var GenStateExecuting = "executing";
-  var GenStateCompleted = "completed";
-
-  // Returning this object from the innerFn has the same effect as
-  // breaking out of the dispatch switch statement.
-  var ContinueSentinel = {};
-
-  // Dummy constructor functions that we use as the .constructor and
-  // .constructor.prototype properties for functions that return Generator
-  // objects. For full spec compliance, you may wish to configure your
-  // minifier not to mangle the names of these two functions.
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-
-  // This is a polyfill for %IteratorPrototype% for environments that
-  // don't natively support it.
-  var IteratorPrototype = {};
-  IteratorPrototype[iteratorSymbol] = function () {
-    return this;
-  };
-
-  var getProto = Object.getPrototypeOf;
-  var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-  if (NativeIteratorPrototype &&
-      NativeIteratorPrototype !== Op &&
-      hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
-    // This environment has a native %IteratorPrototype%; use it instead
-    // of the polyfill.
-    IteratorPrototype = NativeIteratorPrototype;
-  }
-
-  var Gp = GeneratorFunctionPrototype.prototype =
-    Generator.prototype = Object.create(IteratorPrototype);
-  GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-  GeneratorFunctionPrototype.constructor = GeneratorFunction;
-  GeneratorFunctionPrototype[toStringTagSymbol] =
-    GeneratorFunction.displayName = "GeneratorFunction";
-
-  // Helper for defining the .next, .throw, and .return methods of the
-  // Iterator interface in terms of a single ._invoke method.
-  function defineIteratorMethods(prototype) {
-    ["next", "throw", "return"].forEach(function(method) {
-      prototype[method] = function(arg) {
-        return this._invoke(method, arg);
-      };
-    });
-  }
-
-  exports.isGeneratorFunction = function(genFun) {
-    var ctor = typeof genFun === "function" && genFun.constructor;
-    return ctor
-      ? ctor === GeneratorFunction ||
-        // For the native GeneratorFunction constructor, the best we can
-        // do is to check its .name property.
-        (ctor.displayName || ctor.name) === "GeneratorFunction"
-      : false;
-  };
-
-  exports.mark = function(genFun) {
-    if (Object.setPrototypeOf) {
-      Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
-    } else {
-      genFun.__proto__ = GeneratorFunctionPrototype;
-      if (!(toStringTagSymbol in genFun)) {
-        genFun[toStringTagSymbol] = "GeneratorFunction";
-      }
-    }
-    genFun.prototype = Object.create(Gp);
-    return genFun;
-  };
-
-  // Within the body of any async function, `await x` is transformed to
-  // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
-  // `hasOwn.call(value, "__await")` to determine if the yielded value is
-  // meant to be awaited.
-  exports.awrap = function(arg) {
-    return { __await: arg };
-  };
-
-  function AsyncIterator(generator, PromiseImpl) {
-    function invoke(method, arg, resolve, reject) {
-      var record = tryCatch(generator[method], generator, arg);
-      if (record.type === "throw") {
-        reject(record.arg);
-      } else {
-        var result = record.arg;
-        var value = result.value;
-        if (value &&
-            typeof value === "object" &&
-            hasOwn.call(value, "__await")) {
-          return PromiseImpl.resolve(value.__await).then(function(value) {
-            invoke("next", value, resolve, reject);
-          }, function(err) {
-            invoke("throw", err, resolve, reject);
-          });
-        }
-
-        return PromiseImpl.resolve(value).then(function(unwrapped) {
-          // When a yielded Promise is resolved, its final value becomes
-          // the .value of the Promise<{value,done}> result for the
-          // current iteration.
-          result.value = unwrapped;
-          resolve(result);
-        }, function(error) {
-          // If a rejected Promise was yielded, throw the rejection back
-          // into the async generator function so it can be handled there.
-          return invoke("throw", error, resolve, reject);
-        });
-      }
-    }
-
-    var previousPromise;
-
-    function enqueue(method, arg) {
-      function callInvokeWithMethodAndArg() {
-        return new PromiseImpl(function(resolve, reject) {
-          invoke(method, arg, resolve, reject);
-        });
-      }
-
-      return previousPromise =
-        // If enqueue has been called before, then we want to wait until
-        // all previous Promises have been resolved before calling invoke,
-        // so that results are always delivered in the correct order. If
-        // enqueue has not been called before, then it is important to
-        // call invoke immediately, without waiting on a callback to fire,
-        // so that the async generator function has the opportunity to do
-        // any necessary setup in a predictable way. This predictability
-        // is why the Promise constructor synchronously invokes its
-        // executor callback, and why async functions synchronously
-        // execute code before the first await. Since we implement simple
-        // async functions in terms of async generators, it is especially
-        // important to get this right, even though it requires care.
-        previousPromise ? previousPromise.then(
-          callInvokeWithMethodAndArg,
-          // Avoid propagating failures to Promises returned by later
-          // invocations of the iterator.
-          callInvokeWithMethodAndArg
-        ) : callInvokeWithMethodAndArg();
-    }
-
-    // Define the unified helper method that is used to implement .next,
-    // .throw, and .return (see defineIteratorMethods).
-    this._invoke = enqueue;
-  }
-
-  defineIteratorMethods(AsyncIterator.prototype);
-  AsyncIterator.prototype[asyncIteratorSymbol] = function () {
-    return this;
-  };
-  exports.AsyncIterator = AsyncIterator;
-
-  // Note that simple async functions are implemented on top of
-  // AsyncIterator objects; they just return a Promise for the value of
-  // the final result produced by the iterator.
-  exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
-    if (PromiseImpl === void 0) PromiseImpl = Promise;
-
-    var iter = new AsyncIterator(
-      wrap(innerFn, outerFn, self, tryLocsList),
-      PromiseImpl
-    );
-
-    return exports.isGeneratorFunction(outerFn)
-      ? iter // If outerFn is a generator, return the full iterator.
-      : iter.next().then(function(result) {
-          return result.done ? result.value : iter.next();
-        });
-  };
-
-  function makeInvokeMethod(innerFn, self, context) {
-    var state = GenStateSuspendedStart;
-
-    return function invoke(method, arg) {
-      if (state === GenStateExecuting) {
-        throw new Error("Generator is already running");
-      }
-
-      if (state === GenStateCompleted) {
-        if (method === "throw") {
-          throw arg;
-        }
-
-        // Be forgiving, per 25.3.3.3.3 of the spec:
-        // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
-        return doneResult();
-      }
-
-      context.method = method;
-      context.arg = arg;
-
-      while (true) {
-        var delegate = context.delegate;
-        if (delegate) {
-          var delegateResult = maybeInvokeDelegate(delegate, context);
-          if (delegateResult) {
-            if (delegateResult === ContinueSentinel) continue;
-            return delegateResult;
-          }
-        }
-
-        if (context.method === "next") {
-          // Setting context._sent for legacy support of Babel's
-          // function.sent implementation.
-          context.sent = context._sent = context.arg;
-
-        } else if (context.method === "throw") {
-          if (state === GenStateSuspendedStart) {
-            state = GenStateCompleted;
-            throw context.arg;
-          }
-
-          context.dispatchException(context.arg);
-
-        } else if (context.method === "return") {
-          context.abrupt("return", context.arg);
-        }
-
-        state = GenStateExecuting;
-
-        var record = tryCatch(innerFn, self, context);
-        if (record.type === "normal") {
-          // If an exception is thrown from innerFn, we leave state ===
-          // GenStateExecuting and loop back for another invocation.
-          state = context.done
-            ? GenStateCompleted
-            : GenStateSuspendedYield;
-
-          if (record.arg === ContinueSentinel) {
-            continue;
-          }
-
-          return {
-            value: record.arg,
-            done: context.done
-          };
-
-        } else if (record.type === "throw") {
-          state = GenStateCompleted;
-          // Dispatch the exception by looping back around to the
-          // context.dispatchException(context.arg) call above.
-          context.method = "throw";
-          context.arg = record.arg;
-        }
-      }
-    };
-  }
-
-  // Call delegate.iterator[context.method](context.arg) and handle the
-  // result, either by returning a { value, done } result from the
-  // delegate iterator, or by modifying context.method and context.arg,
-  // setting context.delegate to null, and returning the ContinueSentinel.
-  function maybeInvokeDelegate(delegate, context) {
-    var method = delegate.iterator[context.method];
-    if (method === undefined) {
-      // A .throw or .return when the delegate iterator has no .throw
-      // method always terminates the yield* loop.
-      context.delegate = null;
-
-      if (context.method === "throw") {
-        // Note: ["return"] must be used for ES3 parsing compatibility.
-        if (delegate.iterator["return"]) {
-          // If the delegate iterator has a return method, give it a
-          // chance to clean up.
-          context.method = "return";
-          context.arg = undefined;
-          maybeInvokeDelegate(delegate, context);
-
-          if (context.method === "throw") {
-            // If maybeInvokeDelegate(context) changed context.method from
-            // "return" to "throw", let that override the TypeError below.
-            return ContinueSentinel;
-          }
-        }
-
-        context.method = "throw";
-        context.arg = new TypeError(
-          "The iterator does not provide a 'throw' method");
-      }
-
-      return ContinueSentinel;
-    }
-
-    var record = tryCatch(method, delegate.iterator, context.arg);
-
-    if (record.type === "throw") {
-      context.method = "throw";
-      context.arg = record.arg;
-      context.delegate = null;
-      return ContinueSentinel;
-    }
-
-    var info = record.arg;
-
-    if (! info) {
-      context.method = "throw";
-      context.arg = new TypeError("iterator result is not an object");
-      context.delegate = null;
-      return ContinueSentinel;
-    }
-
-    if (info.done) {
-      // Assign the result of the finished delegate to the temporary
-      // variable specified by delegate.resultName (see delegateYield).
-      context[delegate.resultName] = info.value;
-
-      // Resume execution at the desired location (see delegateYield).
-      context.next = delegate.nextLoc;
-
-      // If context.method was "throw" but the delegate handled the
-      // exception, let the outer generator proceed normally. If
-      // context.method was "next", forget context.arg since it has been
-      // "consumed" by the delegate iterator. If context.method was
-      // "return", allow the original .return call to continue in the
-      // outer generator.
-      if (context.method !== "return") {
-        context.method = "next";
-        context.arg = undefined;
-      }
-
-    } else {
-      // Re-yield the result returned by the delegate method.
-      return info;
-    }
-
-    // The delegate iterator is finished, so forget it and continue with
-    // the outer generator.
-    context.delegate = null;
-    return ContinueSentinel;
-  }
-
-  // Define Generator.prototype.{next,throw,return} in terms of the
-  // unified ._invoke helper method.
-  defineIteratorMethods(Gp);
-
-  Gp[toStringTagSymbol] = "Generator";
-
-  // A Generator should always return itself as the iterator object when the
-  // @@iterator function is called on it. Some browsers' implementations of the
-  // iterator prototype chain incorrectly implement this, causing the Generator
-  // object to not be returned from this call. This ensures that doesn't happen.
-  // See https://github.com/facebook/regenerator/issues/274 for more details.
-  Gp[iteratorSymbol] = function() {
-    return this;
-  };
-
-  Gp.toString = function() {
-    return "[object Generator]";
-  };
-
-  function pushTryEntry(locs) {
-    var entry = { tryLoc: locs[0] };
-
-    if (1 in locs) {
-      entry.catchLoc = locs[1];
-    }
-
-    if (2 in locs) {
-      entry.finallyLoc = locs[2];
-      entry.afterLoc = locs[3];
-    }
-
-    this.tryEntries.push(entry);
-  }
-
-  function resetTryEntry(entry) {
-    var record = entry.completion || {};
-    record.type = "normal";
-    delete record.arg;
-    entry.completion = record;
-  }
-
-  function Context(tryLocsList) {
-    // The root entry object (effectively a try statement without a catch
-    // or a finally block) gives us a place to store values thrown from
-    // locations where there is no enclosing try statement.
-    this.tryEntries = [{ tryLoc: "root" }];
-    tryLocsList.forEach(pushTryEntry, this);
-    this.reset(true);
-  }
-
-  exports.keys = function(object) {
-    var keys = [];
-    for (var key in object) {
-      keys.push(key);
-    }
-    keys.reverse();
-
-    // Rather than returning an object with a next method, we keep
-    // things simple and return the next function itself.
-    return function next() {
-      while (keys.length) {
-        var key = keys.pop();
-        if (key in object) {
-          next.value = key;
-          next.done = false;
-          return next;
-        }
-      }
-
-      // To avoid creating an additional object, we just hang the .value
-      // and .done properties off the next function object itself. This
-      // also ensures that the minifier will not anonymize the function.
-      next.done = true;
-      return next;
-    };
-  };
-
-  function values(iterable) {
-    if (iterable) {
-      var iteratorMethod = iterable[iteratorSymbol];
-      if (iteratorMethod) {
-        return iteratorMethod.call(iterable);
-      }
-
-      if (typeof iterable.next === "function") {
-        return iterable;
-      }
-
-      if (!isNaN(iterable.length)) {
-        var i = -1, next = function next() {
-          while (++i < iterable.length) {
-            if (hasOwn.call(iterable, i)) {
-              next.value = iterable[i];
-              next.done = false;
-              return next;
-            }
-          }
-
-          next.value = undefined;
-          next.done = true;
-
-          return next;
-        };
-
-        return next.next = next;
-      }
-    }
-
-    // Return an iterator with no values.
-    return { next: doneResult };
-  }
-  exports.values = values;
-
-  function doneResult() {
-    return { value: undefined, done: true };
-  }
-
-  Context.prototype = {
-    constructor: Context,
-
-    reset: function(skipTempReset) {
-      this.prev = 0;
-      this.next = 0;
-      // Resetting context._sent for legacy support of Babel's
-      // function.sent implementation.
-      this.sent = this._sent = undefined;
-      this.done = false;
-      this.delegate = null;
-
-      this.method = "next";
-      this.arg = undefined;
-
-      this.tryEntries.forEach(resetTryEntry);
-
-      if (!skipTempReset) {
-        for (var name in this) {
-          // Not sure about the optimal order of these conditions:
-          if (name.charAt(0) === "t" &&
-              hasOwn.call(this, name) &&
-              !isNaN(+name.slice(1))) {
-            this[name] = undefined;
-          }
-        }
-      }
-    },
-
-    stop: function() {
-      this.done = true;
-
-      var rootEntry = this.tryEntries[0];
-      var rootRecord = rootEntry.completion;
-      if (rootRecord.type === "throw") {
-        throw rootRecord.arg;
-      }
-
-      return this.rval;
-    },
-
-    dispatchException: function(exception) {
-      if (this.done) {
-        throw exception;
-      }
-
-      var context = this;
-      function handle(loc, caught) {
-        record.type = "throw";
-        record.arg = exception;
-        context.next = loc;
-
-        if (caught) {
-          // If the dispatched exception was caught by a catch block,
-          // then let that catch block handle the exception normally.
-          context.method = "next";
-          context.arg = undefined;
-        }
-
-        return !! caught;
-      }
-
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        var record = entry.completion;
-
-        if (entry.tryLoc === "root") {
-          // Exception thrown outside of any try block that could handle
-          // it, so set the completion value of the entire function to
-          // throw the exception.
-          return handle("end");
-        }
-
-        if (entry.tryLoc <= this.prev) {
-          var hasCatch = hasOwn.call(entry, "catchLoc");
-          var hasFinally = hasOwn.call(entry, "finallyLoc");
-
-          if (hasCatch && hasFinally) {
-            if (this.prev < entry.catchLoc) {
-              return handle(entry.catchLoc, true);
-            } else if (this.prev < entry.finallyLoc) {
-              return handle(entry.finallyLoc);
-            }
-
-          } else if (hasCatch) {
-            if (this.prev < entry.catchLoc) {
-              return handle(entry.catchLoc, true);
-            }
-
-          } else if (hasFinally) {
-            if (this.prev < entry.finallyLoc) {
-              return handle(entry.finallyLoc);
-            }
-
-          } else {
-            throw new Error("try statement without catch or finally");
-          }
-        }
-      }
-    },
-
-    abrupt: function(type, arg) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.tryLoc <= this.prev &&
-            hasOwn.call(entry, "finallyLoc") &&
-            this.prev < entry.finallyLoc) {
-          var finallyEntry = entry;
-          break;
-        }
-      }
-
-      if (finallyEntry &&
-          (type === "break" ||
-           type === "continue") &&
-          finallyEntry.tryLoc <= arg &&
-          arg <= finallyEntry.finallyLoc) {
-        // Ignore the finally entry if control is not jumping to a
-        // location outside the try/catch block.
-        finallyEntry = null;
-      }
-
-      var record = finallyEntry ? finallyEntry.completion : {};
-      record.type = type;
-      record.arg = arg;
-
-      if (finallyEntry) {
-        this.method = "next";
-        this.next = finallyEntry.finallyLoc;
-        return ContinueSentinel;
-      }
-
-      return this.complete(record);
-    },
-
-    complete: function(record, afterLoc) {
-      if (record.type === "throw") {
-        throw record.arg;
-      }
-
-      if (record.type === "break" ||
-          record.type === "continue") {
-        this.next = record.arg;
-      } else if (record.type === "return") {
-        this.rval = this.arg = record.arg;
-        this.method = "return";
-        this.next = "end";
-      } else if (record.type === "normal" && afterLoc) {
-        this.next = afterLoc;
-      }
-
-      return ContinueSentinel;
-    },
-
-    finish: function(finallyLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.finallyLoc === finallyLoc) {
-          this.complete(entry.completion, entry.afterLoc);
-          resetTryEntry(entry);
-          return ContinueSentinel;
-        }
-      }
-    },
-
-    "catch": function(tryLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.tryLoc === tryLoc) {
-          var record = entry.completion;
-          if (record.type === "throw") {
-            var thrown = record.arg;
-            resetTryEntry(entry);
-          }
-          return thrown;
-        }
-      }
-
-      // The context.catch method must only be called with a location
-      // argument that corresponds to a known catch block.
-      throw new Error("illegal catch attempt");
-    },
-
-    delegateYield: function(iterable, resultName, nextLoc) {
-      this.delegate = {
-        iterator: values(iterable),
-        resultName: resultName,
-        nextLoc: nextLoc
-      };
-
-      if (this.method === "next") {
-        // Deliberately forget the last sent value so that we don't
-        // accidentally pass it on to the delegate.
-        this.arg = undefined;
-      }
-
-      return ContinueSentinel;
-    }
-  };
-
-  // Regardless of whether this script is executing as a CommonJS module
-  // or not, return the runtime object so that we can declare the variable
-  // regeneratorRuntime in the outer scope, which allows this module to be
-  // injected easily by `bin/regenerator --include-runtime script.js`.
-  return exports;
-
-}(
-  // If this script is executing as a CommonJS module, use module.exports
-  // as the regeneratorRuntime namespace. Otherwise create a new empty
-  // object. Either way, the resulting object will be used to initialize
-  // the regeneratorRuntime variable at the top of this file.
-  typeof module === "object" ? module.exports : {}
-));
-
-try {
-  regeneratorRuntime = runtime;
-} catch (accidentalStrictMode) {
-  // This module should not be running in strict mode, so the above
-  // assignment should always work unless something is misconfigured. Just
-  // in case runtime.js accidentally runs in strict mode, we can escape
-  // strict mode using a global Function call. This could conceivably fail
-  // if a Content Security Policy forbids using Function, but in that case
-  // the proper solution is to fix the accidental strict mode problem. If
-  // you've misconfigured your bundler to force strict mode and applied a
-  // CSP to forbid Function, and you're not willing to fix either of those
-  // problems, please detail your unique predicament in a GitHub issue.
-  Function("r", "regeneratorRuntime = r")(runtime);
-}
-
-},{}],"BxGn":[function(require,module,exports) {
-module.exports = require("regenerator-runtime");
-
-},{"regenerator-runtime":"rqzK"}],"SaI5":[function(require,module,exports) {
+},{"./action-types":"gg2v"}],"SaI5":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -1033,56 +219,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getActiveComponents = getActiveComponents;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _actions = require("./actions");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _marked = /*#__PURE__*/_regenerator.default.mark(getActiveComponents);
+/**
+ * Internal dependencies.
+ */
 
 /**
  * Resolver for retrieving active BP Components.
  */
-function getActiveComponents() {
-  var list;
-  return _regenerator.default.wrap(function getActiveComponents$(_context) {
-    while (1) {
-      switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return (0, _actions.fetchFromAPI)('/buddypress/v1/components?status=active', true);
-
-        case 2:
-          list = _context.sent;
-          _context.next = 5;
-          return (0, _actions.getActiveComponents)(list);
-
-        case 5:
-        case "end":
-          return _context.stop();
-      }
-    }
-  }, _marked);
+function* getActiveComponents() {
+  const list = yield (0, _actions.fetchFromAPI)('/buddypress/v1/components?status=active', true);
+  yield (0, _actions.getActiveComponents)(list);
 }
-},{"@babel/runtime/regenerator":"BxGn","./actions":"NTbX"}],"cQfh":[function(require,module,exports) {
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-module.exports = _defineProperty;
-},{}],"yrui":[function(require,module,exports) {
+},{"./actions":"NTbX"}],"yrui":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -1090,20 +240,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _actionTypes = require("./action-types");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Internal dependencies
+ */
 
 /**
  * Default state.
  */
-var DEFAULT_STATE = {
+const DEFAULT_STATE = {
   components: []
 };
 /**
@@ -1115,15 +261,12 @@ var DEFAULT_STATE = {
  * @return  {Object}          New or existing state.
  */
 
-var reducer = function reducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_STATE;
-  var action = arguments.length > 1 ? arguments[1] : undefined;
-
+const reducer = (state = DEFAULT_STATE, action) => {
   switch (action.type) {
     case _actionTypes.TYPES.GET_ACTIVE_COMPONENTS:
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return { ...state,
         components: action.list
-      });
+      };
   }
 
   return state;
@@ -1131,7 +274,7 @@ var reducer = function reducer() {
 
 var _default = reducer;
 exports.default = _default;
-},{"@babel/runtime/helpers/defineProperty":"cQfh","./action-types":"gg2v"}],"KdPQ":[function(require,module,exports) {
+},{"./action-types":"gg2v"}],"KdPQ":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -1142,8 +285,9 @@ exports.controls = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    apiFetch = _wp.apiFetch;
+const {
+  apiFetch
+} = wp;
 /**
  * Default export for registering the controls with the store.
  *
@@ -1151,15 +295,17 @@ var _wp = wp,
  *                  the controls property of the registration object.
  */
 
-var controls = {
-  FETCH_FROM_API: function FETCH_FROM_API(_ref) {
-    var path = _ref.path,
-        parse = _ref.parse;
+const controls = {
+  FETCH_FROM_API({
+    path,
+    parse
+  }) {
     return apiFetch({
-      path: path,
-      parse: parse
+      path,
+      parse
     });
   }
+
 };
 exports.controls = controls;
 },{}],"QFc2":[function(require,module,exports) {
@@ -1191,20 +337,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerStore = _wp.data.registerStore;
+const {
+  data: {
+    registerStore
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
 
 registerStore(_constants.STORE_KEY, {
   reducer: _reducers.default,
-  actions: actions,
-  selectors: selectors,
+  actions,
+  selectors,
   controls: _controls.controls,
-  resolvers: resolvers
+  resolvers
 });
-var BP_CORE_STORE_KEY = _constants.STORE_KEY;
+const BP_CORE_STORE_KEY = _constants.STORE_KEY;
 exports.BP_CORE_STORE_KEY = BP_CORE_STORE_KEY;
 var _default = BP_CORE_STORE_KEY;
 exports.default = _default;
@@ -1222,8 +371,6 @@ exports.currentPostId = currentPostId;
 exports.getCurrentWidgetsSidebar = getCurrentWidgetsSidebar;
 exports.default = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _register = _interopRequireDefault(require("./register"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1231,15 +378,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    useSelect = _wp.data.useSelect;
+const {
+  data: {
+    useSelect
+  }
+} = wp;
 /**
  * External dependencies.
  */
 
-var _lodash = lodash,
-    find = _lodash.find,
-    get = _lodash.get;
+const {
+  find,
+  get
+} = lodash;
 /**
  * Internal dependencies.
  */
@@ -1253,12 +404,11 @@ var _lodash = lodash,
  * @param {string} feature (optional) The feature to check.
  * @return {boolean} Whether a component or the feature of an active component is enabled.
  */
-function isActive(component) {
-  var feature = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var components = useSelect(function (select) {
+function isActive(component, feature = '') {
+  const components = useSelect(select => {
     return select(_register.default).getActiveComponents();
   }, []);
-  var activeComponent = find(components, ['name', component]);
+  const activeComponent = find(components, ['name', component]);
 
   if (!feature) {
     return !!activeComponent;
@@ -1279,22 +429,18 @@ var _default = isActive;
 exports.default = _default;
 
 function activityTypes() {
-  var components = useSelect(function (select) {
+  const components = useSelect(select => {
     return select(_register.default).getActiveComponents();
   }, []);
-  var activityComponent = find(components, ['name', 'activity']);
+  const activityComponent = find(components, ['name', 'activity']);
 
   if (!activityComponent) {
     return [];
   }
 
-  var activityTypes = get(activityComponent, ['features', 'types']);
-  var activityTypesList = [];
-  Object.entries(activityTypes).forEach(function (_ref) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-        type = _ref2[0],
-        label = _ref2[1];
-
+  const activityTypes = get(activityComponent, ['features', 'types']);
+  let activityTypesList = [];
+  Object.entries(activityTypes).forEach(([type, label]) => {
     activityTypesList.push({
       label: label,
       value: type
@@ -1312,8 +458,8 @@ function activityTypes() {
 
 
 function loggedInUser() {
-  var loggedInUser = useSelect(function (select) {
-    var store = select('core');
+  const loggedInUser = useSelect(select => {
+    const store = select('core');
 
     if (store) {
       return select('core').getCurrentUser();
@@ -1333,13 +479,13 @@ function loggedInUser() {
 
 
 function postAuhor() {
-  var postAuhor = useSelect(function (select) {
-    var editorStore = select('core/editor');
-    var coreStore = select('core');
+  const postAuhor = useSelect(select => {
+    const editorStore = select('core/editor');
+    const coreStore = select('core');
 
     if (editorStore && coreStore) {
-      var postAuthorId = editorStore.getCurrentPostAttribute('author');
-      var authorsList = coreStore.getAuthors();
+      const postAuthorId = editorStore.getCurrentPostAttribute('author');
+      const authorsList = coreStore.getAuthors();
       return find(authorsList, ['id', postAuthorId]);
     }
 
@@ -1357,8 +503,8 @@ function postAuhor() {
 
 
 function currentPostId() {
-  var currentPostId = useSelect(function (select) {
-    var store = select('core/editor');
+  const currentPostId = useSelect(select => {
+    const store = select('core/editor');
 
     if (store) {
       return store.getCurrentPostId();
@@ -1378,19 +524,19 @@ function currentPostId() {
  */
 
 
-function getCurrentWidgetsSidebar() {
-  var widgetClientId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var currentWidgetsSidebar = useSelect(function (select) {
-    var blockEditorStore = select('core/block-editor');
-    var widgetsStore = select('core/edit-widgets');
+function getCurrentWidgetsSidebar(widgetClientId = '') {
+  const currentWidgetsSidebar = useSelect(select => {
+    const blockEditorStore = select('core/block-editor');
+    const widgetsStore = select('core/edit-widgets');
 
     if (widgetClientId && widgetsStore && blockEditorStore) {
-      var areas = blockEditorStore.getBlocks();
-      var parents = blockEditorStore.getBlockParents(widgetClientId);
-      var sidebars = [];
-      areas.forEach(function (_ref3) {
-        var clientId = _ref3.clientId,
-            attributes = _ref3.attributes;
+      const areas = blockEditorStore.getBlocks();
+      const parents = blockEditorStore.getBlockParents(widgetClientId);
+      let sidebars = [];
+      areas.forEach(({
+        clientId,
+        attributes
+      }) => {
         sidebars.push({
           id: attributes.id,
           isCurrent: -1 !== parents.indexOf(clientId)
@@ -1403,7 +549,7 @@ function getCurrentWidgetsSidebar() {
   }, []);
   return currentWidgetsSidebar;
 }
-},{"@babel/runtime/helpers/slicedToArray":"DERy","./register":"QFc2"}],"xHVY":[function(require,module,exports) {
+},{"./register":"QFc2"}],"xHVY":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
diff --git src/bp-core/js/blocks/login-form.js src/bp-core/js/blocks/login-form.js
index 5f9eb3d0a..1fc1d0fa0 100644
--- src/bp-core/js/blocks/login-form.js
+++ src/bp-core/js/blocks/login-form.js
@@ -128,36 +128,41 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    TextControl = _wp$components.TextControl,
-    ToggleControl = _wp$components.ToggleControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
-/**
- * BuddyPress dependencies.
- */
-
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender;
-
-var editLoginForm = function editLoginForm(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var title = attributes.title,
-      forgotPwdLink = attributes.forgotPwdLink;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    PanelBody,
+    TextControl,
+    ToggleControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
+
+const editLoginForm = ({
+  attributes,
+  setAttributes
+}) => {
+  const {
+    title,
+    forgotPwdLink
+  } = attributes;
   return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Settings', 'buddypress'),
     initialOpen: true
   }, createElement(TextControl, {
     label: __('Title', 'buddypress'),
     value: title,
-    onChange: function onChange(text) {
+    onChange: text => {
       setAttributes({
         title: text
       });
@@ -165,7 +170,7 @@ var editLoginForm = function editLoginForm(_ref) {
   }), createElement(ToggleControl, {
     label: __('Include the link to reset the user password', 'buddypress'),
     checked: !!forgotPwdLink,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         forgotPwdLink: !forgotPwdLink
       });
@@ -189,30 +194,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Login Form Widget to Login Form Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_core_login_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/login-form', {
         title: instance.raw.title
       });
@@ -233,9 +242,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-core/js/blocks/primary-nav.js src/bp-core/js/blocks/primary-nav.js
index 67b40d2d0..adb34d270 100644
--- src/bp-core/js/blocks/primary-nav.js
+++ src/bp-core/js/blocks/primary-nav.js
@@ -128,32 +128,45 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    Notice = _wp$components.Notice,
-    PanelBody = _wp$components.PanelBody,
-    ToggleControl = _wp$components.ToggleControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    Notice,
+    PanelBody,
+    ToggleControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender,
-    getCurrentWidgetsSidebar = _bp.blockData.getCurrentWidgetsSidebar;
-
-var editPrimaryNavBlock = function editPrimaryNavBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes,
-      clientId = _ref.clientId;
-  var displayTitle = attributes.displayTitle;
-  var currentSidebar = getCurrentWidgetsSidebar(clientId);
-  var disabledSidebars = ['sidebar-buddypress-members', 'sidebar-buddypress-groups'];
+const {
+  blockData: {
+    getCurrentWidgetsSidebar
+  }
+} = bp;
+
+const editPrimaryNavBlock = ({
+  attributes,
+  setAttributes,
+  clientId
+}) => {
+  const {
+    displayTitle
+  } = attributes;
+  const currentSidebar = getCurrentWidgetsSidebar(clientId);
+  const disabledSidebars = ['sidebar-buddypress-members', 'sidebar-buddypress-groups'];
 
   if (currentSidebar && currentSidebar.id && -1 !== disabledSidebars.indexOf(currentSidebar.id)) {
     return createElement(Notice, {
@@ -168,7 +181,7 @@ var editPrimaryNavBlock = function editPrimaryNavBlock(_ref) {
   }, createElement(ToggleControl, {
     label: __('Include navigation title', 'buddypress'),
     checked: !!displayTitle,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayTitle: !displayTitle
       });
@@ -192,30 +205,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Widget to Primary Nav Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_nouveau_sidebar_object_nav_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/primary-nav', {
         displayTitle: instance.raw.bp_nouveau_widget_title
       });
@@ -236,9 +253,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-core/js/dynamic-widget-block.js src/bp-core/js/dynamic-widget-block.js
index dfe59fefc..867540738 100644
--- src/bp-core/js/dynamic-widget-block.js
+++ src/bp-core/js/dynamic-widget-block.js
@@ -118,23 +118,21 @@ parcelRequire = (function (modules, cache, entry, globalName) {
 
   return newRequire;
 })({"eNhW":[function(require,module,exports) {
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    addQueryArgs = _wp.url.addQueryArgs;
+const {
+  url: {
+    addQueryArgs
+  }
+} = wp;
 /**
  * External dependencies.
  */
 
-var _lodash = lodash,
-    template = _lodash.template; // Use the bp global.
+const {
+  template
+} = lodash; // Use the bp global.
 
 window.bp = window.bp || {};
 /**
@@ -143,81 +141,66 @@ window.bp = window.bp || {};
  * @since 9.0.0
  */
 
-bp.dynamicWidgetBlock = /*#__PURE__*/function () {
-  function bpDynamicWidgetBlock(settings, blocks) {
-    var _this = this;
-
-    _classCallCheck(this, bpDynamicWidgetBlock);
-
-    var path = settings.path,
-        root = settings.root,
-        nonce = settings.nonce;
+bp.dynamicWidgetBlock = class bpDynamicWidgetBlock {
+  constructor(settings, blocks) {
+    const {
+      path,
+      root,
+      nonce
+    } = settings;
     this.path = path;
     this.root = root;
     this.nonce = nonce, this.blocks = blocks;
-    this.blocks.forEach(function (block, i) {
-      var _ref = block.query_args || 'active',
-          type = _ref.type;
-
-      var _ref2 = block.preloaded || [],
-          body = _ref2.body;
-
-      _this.blocks[i].items = {
+    this.blocks.forEach((block, i) => {
+      const {
+        type
+      } = block.query_args || 'active';
+      const {
+        body
+      } = block.preloaded || [];
+      this.blocks[i].items = {
         'active': [],
         'newest': [],
         'popular': [],
         'alphabetical': []
       };
 
-      if (!_this.blocks[i].items[type].length && body && body.length) {
-        _this.blocks[i].items[type] = body;
+      if (!this.blocks[i].items[type].length && body && body.length) {
+        this.blocks[i].items[type] = body;
       }
     });
   }
 
-  _createClass(bpDynamicWidgetBlock, [{
-    key: "useTemplate",
-    value: function useTemplate(tmpl) {
-      var options = {
-        evaluate: /<#([\s\S]+?)#>/g,
-        interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
-        escape: /\{\{([^\}]+?)\}\}(?!\})/g,
-        variable: 'data'
-      };
-      return template(document.querySelector('#tmpl-' + tmpl).innerHTML, options);
-    }
-  }, {
-    key: "loop",
-    value: function loop() {// This method needs to be overriden.
-    }
-  }, {
-    key: "getItems",
-    value: function getItems() {
-      var _this2 = this;
+  useTemplate(tmpl) {
+    const options = {
+      evaluate: /<#([\s\S]+?)#>/g,
+      interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
+      escape: /\{\{([^\}]+?)\}\}(?!\})/g,
+      variable: 'data'
+    };
+    return template(document.querySelector('#tmpl-' + tmpl).innerHTML, options);
+  }
+
+  loop() {// This method needs to be overriden.
+  }
 
-      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'active';
-      var blockIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      this.blocks[blockIndex].query_args.type = type;
+  getItems(type = 'active', blockIndex = 0) {
+    this.blocks[blockIndex].query_args.type = type;
 
-      if (this.blocks[blockIndex].items[type].length) {
+    if (this.blocks[blockIndex].items[type].length) {
+      this.loop(this.blocks[blockIndex].items[type], this.blocks[blockIndex].selector, type);
+    } else {
+      fetch(addQueryArgs(this.root + this.path, this.blocks[blockIndex].query_args), {
+        method: 'GET',
+        headers: {
+          'X-WP-Nonce': this.nonce
+        }
+      }).then(response => response.json()).then(data => {
+        this.blocks[blockIndex].items[type] = data;
         this.loop(this.blocks[blockIndex].items[type], this.blocks[blockIndex].selector, type);
-      } else {
-        fetch(addQueryArgs(this.root + this.path, this.blocks[blockIndex].query_args), {
-          method: 'GET',
-          headers: {
-            'X-WP-Nonce': this.nonce
-          }
-        }).then(function (response) {
-          return response.json();
-        }).then(function (data) {
-          _this2.blocks[blockIndex].items[type] = data;
-
-          _this2.loop(_this2.blocks[blockIndex].items[type], _this2.blocks[blockIndex].selector, type);
-        });
-      }
+      });
     }
-  }]);
+  }
 
-  return bpDynamicWidgetBlock;
-}();
+};
 },{}]},{},["eNhW"], null)
\ No newline at end of file
diff --git src/bp-friends/classes/class-bp-friends-component.php src/bp-friends/classes/class-bp-friends-component.php
index 287a6f417..aeb6eb70b 100644
--- src/bp-friends/classes/class-bp-friends-component.php
+++ src/bp-friends/classes/class-bp-friends-component.php
@@ -370,8 +370,8 @@ class BP_Friends_Component extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
+						'wp-server-side-render',
 						'bp-block-data',
-						'bp-block-components',
 					),
 					'style'              => 'bp-friends-block',
 					'style_url'          => plugins_url( 'css/blocks/friends.css', dirname( __FILE__ ) ),
diff --git src/bp-friends/js/blocks/friends.js src/bp-friends/js/blocks/friends.js
index 611ea18c8..d5b81cd0e 100644
--- src/bp-friends/js/blocks/friends.js
+++ src/bp-friends/js/blocks/friends.js
@@ -128,15 +128,18 @@ exports.TYPES = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    __ = _wp.i18n.__;
+const {
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Friends ordering types.
  *
  * @type {Array}
  */
 
-var TYPES = [{
+const TYPES = [{
   label: __('Newest', 'buddypress'),
   value: 'newest'
 }, {
@@ -160,37 +163,50 @@ var _constants = require("./constants");
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    RangeControl = _wp$components.RangeControl,
-    SelectControl = _wp$components.SelectControl,
-    ToggleControl = _wp$components.ToggleControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    PanelBody,
+    RangeControl,
+    SelectControl,
+    ToggleControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender,
-    currentPostId = _bp.blockData.currentPostId;
+const {
+  blockData: {
+    currentPostId
+  }
+} = bp;
 /**
  * Internal dependencies.
  */
 
-var editDynamicFriendsBlock = function editDynamicFriendsBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var postId = attributes.postId,
-      maxFriends = attributes.maxFriends,
-      friendDefault = attributes.friendDefault,
-      linkTitle = attributes.linkTitle;
-  var post = currentPostId();
+const editDynamicFriendsBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const {
+    postId,
+    maxFriends,
+    friendDefault,
+    linkTitle
+  } = attributes;
+  const post = currentPostId();
 
   if (!postId && post) {
     setAttributes({
@@ -204,11 +220,9 @@ var editDynamicFriendsBlock = function editDynamicFriendsBlock(_ref) {
   }, createElement(RangeControl, {
     label: __('Max friends to show', 'buddypress'),
     value: maxFriends,
-    onChange: function onChange(value) {
-      return setAttributes({
-        maxFriends: value
-      });
-    },
+    onChange: value => setAttributes({
+      maxFriends: value
+    }),
     min: 1,
     max: 10,
     required: true
@@ -216,7 +230,7 @@ var editDynamicFriendsBlock = function editDynamicFriendsBlock(_ref) {
     label: __('Default members to show', 'buddypress'),
     value: friendDefault,
     options: _constants.TYPES,
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         friendDefault: option
       });
@@ -224,7 +238,7 @@ var editDynamicFriendsBlock = function editDynamicFriendsBlock(_ref) {
   }), createElement(ToggleControl, {
     label: __('Link block title to Member\'s profile friends page', 'buddypress'),
     checked: !!linkTitle,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         linkTitle: !linkTitle
       });
@@ -248,30 +262,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Widget to Friends Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_core_friends_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/friends', {
         maxFriends: instance.raw.max_friends,
         friendDefault: instance.raw.friend_default,
@@ -294,9 +312,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-friends/js/friends.js src/bp-friends/js/friends.js
index 93de95628..359827b35 100644
--- src/bp-friends/js/friends.js
+++ src/bp-friends/js/friends.js
@@ -118,140 +118,98 @@ parcelRequire = (function (modules, cache, entry, globalName) {
 
   return newRequire;
 })({"pMhP":[function(require,module,exports) {
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
-
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    _wp$i18n = _wp.i18n,
-    __ = _wp$i18n.__,
-    sprintf = _wp$i18n.sprintf;
+const {
+  i18n: {
+    __,
+    sprintf
+  }
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    dynamicWidgetBlock = _bp.dynamicWidgetBlock;
+const {
+  dynamicWidgetBlock
+} = bp;
 /**
  * Front-end Friends block class.
  */
 
-var bpFriendsWidgetBlock = /*#__PURE__*/function (_dynamicWidgetBlock) {
-  _inherits(bpFriendsWidgetBlock, _dynamicWidgetBlock);
-
-  var _super = _createSuper(bpFriendsWidgetBlock);
-
-  function bpFriendsWidgetBlock() {
-    _classCallCheck(this, bpFriendsWidgetBlock);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(bpFriendsWidgetBlock, [{
-    key: "loop",
-    value: function loop() {
-      var friends = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'active';
-
-      var tmpl = _get(_getPrototypeOf(bpFriendsWidgetBlock.prototype), "useTemplate", this).call(this, 'bp-friends-item');
-
-      var selector = document.querySelector('#' + container);
-      var output = '';
-
-      if (friends && friends.length) {
-        friends.forEach(function (friend) {
-          if ('active' === type && friend.last_activity) {
-            /* translators: %s: a human time diff. */
-            friend.extra = sprintf(__('Active %s', 'buddypress'), friend.last_activity.timediff);
-          } else if ('popular' === type && friend.total_friend_count) {
-            var friendsCount = parseInt(friend.total_friend_count, 10);
-
-            if (0 === friendsCount) {
-              friend.extra = __('No friends', 'buddypress');
-            } else if (1 === friendsCount) {
-              friend.extra = __('1 friend', 'buddypress');
-            } else {
-              /* translators: %s: total friend count (more than 1). */
-              friend.extra = sprintf(__('%s friends', 'buddypress'), friend.total_friend_count);
-            }
-          } else if ('newest' === type && friend.registered_since) {
-            /* translators: %s is time elapsed since the registration date happened */
-            friend.extra = sprintf(__('Registered %s', 'buddypress'), friend.registered_since);
+class bpFriendsWidgetBlock extends dynamicWidgetBlock {
+  loop(friends = [], container = '', type = 'active') {
+    const tmpl = super.useTemplate('bp-friends-item');
+    const selector = document.querySelector('#' + container);
+    let output = '';
+
+    if (friends && friends.length) {
+      friends.forEach(friend => {
+        if ('active' === type && friend.last_activity) {
+          /* translators: %s: a human time diff. */
+          friend.extra = sprintf(__('Active %s', 'buddypress'), friend.last_activity.timediff);
+        } else if ('popular' === type && friend.total_friend_count) {
+          const friendsCount = parseInt(friend.total_friend_count, 10);
+
+          if (0 === friendsCount) {
+            friend.extra = __('No friends', 'buddypress');
+          } else if (1 === friendsCount) {
+            friend.extra = __('1 friend', 'buddypress');
+          } else {
+            /* translators: %s: total friend count (more than 1). */
+            friend.extra = sprintf(__('%s friends', 'buddypress'), friend.total_friend_count);
           }
-          /* translators: %s: member name */
-
+        } else if ('newest' === type && friend.registered_since) {
+          /* translators: %s is time elapsed since the registration date happened */
+          friend.extra = sprintf(__('Registered %s', 'buddypress'), friend.registered_since);
+        }
+        /* translators: %s: member name */
 
-          friend.avatar_alt = sprintf(__('Profile picture of %s', 'buddypress'), friend.name);
-          output += tmpl(friend);
-        });
-      } else {
-        output = '<div class="widget-error">' + __('Sorry, no members were found.', 'buddypress') + '</div>';
-      }
 
-      selector.innerHTML = output;
+        friend.avatar_alt = sprintf(__('Profile picture of %s', 'buddypress'), friend.name);
+        output += tmpl(friend);
+      });
+    } else {
+      output = '<div class="widget-error">' + __('Sorry, no members were found.', 'buddypress') + '</div>';
     }
-  }, {
-    key: "start",
-    value: function start() {
-      var _this = this;
 
-      this.blocks.forEach(function (block, i) {
-        var selector = block.selector;
-        var type = block.query_args.type;
-        var list = document.querySelector('#' + selector).closest('.bp-dynamic-block-container'); // Get default Block's type friends.
+    selector.innerHTML = output;
+  }
 
-        _get(_getPrototypeOf(bpFriendsWidgetBlock.prototype), "getItems", _this).call(_this, type, i); // Listen to Block's Nav item clics
+  start() {
+    this.blocks.forEach((block, i) => {
+      const {
+        selector
+      } = block;
+      const {
+        type
+      } = block.query_args;
+      const list = document.querySelector('#' + selector).closest('.bp-dynamic-block-container'); // Get default Block's type friends.
 
+      super.getItems(type, i); // Listen to Block's Nav item clics
 
-        list.querySelectorAll('.item-options a').forEach(function (navItem) {
-          navItem.addEventListener('click', function (event) {
-            event.preventDefault(); // Changes the displayed filter.
+      list.querySelectorAll('.item-options a').forEach(navItem => {
+        navItem.addEventListener('click', event => {
+          event.preventDefault(); // Changes the displayed filter.
 
-            event.target.closest('.item-options').querySelector('.selected').classList.remove('selected');
-            event.target.classList.add('selected');
-            var newType = event.target.getAttribute('data-bp-sort');
+          event.target.closest('.item-options').querySelector('.selected').classList.remove('selected');
+          event.target.classList.add('selected');
+          const newType = event.target.getAttribute('data-bp-sort');
 
-            if (newType !== _this.blocks[i].query_args.type) {
-              _get(_getPrototypeOf(bpFriendsWidgetBlock.prototype), "getItems", _this).call(_this, newType, i);
-            }
-          });
+          if (newType !== this.blocks[i].query_args.type) {
+            super.getItems(newType, i);
+          }
         });
       });
-    }
-  }]);
+    });
+  }
 
-  return bpFriendsWidgetBlock;
-}(dynamicWidgetBlock);
+}
 
-var settings = window.bpFriendsSettings || {};
-var blocks = window.bpFriendsBlocks || {};
-var bpFriends = new bpFriendsWidgetBlock(settings, blocks);
+const settings = window.bpFriendsSettings || {};
+const blocks = window.bpFriendsBlocks || {};
+const bpFriends = new bpFriendsWidgetBlock(settings, blocks);
 
 if ('loading' === document.readyState) {
   document.addEventListener('DOMContentLoaded', bpFriends.start());
diff --git src/bp-groups/classes/class-bp-groups-component.php src/bp-groups/classes/class-bp-groups-component.php
index b272b3bdb..8f771c7d0 100644
--- src/bp-groups/classes/class-bp-groups-component.php
+++ src/bp-groups/classes/class-bp-groups-component.php
@@ -1018,6 +1018,7 @@ class BP_Groups_Component extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
+						'wp-server-side-render',
 						'bp-block-components',
 						'bp-block-data',
 					),
@@ -1107,7 +1108,7 @@ class BP_Groups_Component extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
-						'bp-block-components',
+						'wp-server-side-render',
 					),
 					'style'              => 'bp-dynamic-groups-block',
 					'style_url'          => plugins_url( 'css/blocks/dynamic-groups.css', dirname( __FILE__ ) ),
diff --git src/bp-groups/js/blocks/dynamic-groups.js src/bp-groups/js/blocks/dynamic-groups.js
index ed9e2a31e..e4f636006 100644
--- src/bp-groups/js/blocks/dynamic-groups.js
+++ src/bp-groups/js/blocks/dynamic-groups.js
@@ -128,15 +128,18 @@ exports.TYPES = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    __ = _wp.i18n.__;
+const {
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Groups ordering types.
  *
  * @type {Array}
  */
 
-var TYPES = [{
+const TYPES = [{
   label: __('Newest', 'buddypress'),
   value: 'newest'
 }, {
@@ -163,43 +166,48 @@ var _constants = require("./constants");
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    RangeControl = _wp$components.RangeControl,
-    SelectControl = _wp$components.SelectControl,
-    TextControl = _wp$components.TextControl,
-    ToggleControl = _wp$components.ToggleControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
-/**
- * BuddyPress dependencies.
- */
-
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    PanelBody,
+    RangeControl,
+    SelectControl,
+    TextControl,
+    ToggleControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
 /**
  * Internal dependencies.
  */
 
-var editDynamicGroupsBlock = function editDynamicGroupsBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var title = attributes.title,
-      maxGroups = attributes.maxGroups,
-      groupDefault = attributes.groupDefault,
-      linkTitle = attributes.linkTitle;
+const editDynamicGroupsBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const {
+    title,
+    maxGroups,
+    groupDefault,
+    linkTitle
+  } = attributes;
   return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Settings', 'buddypress'),
     initialOpen: true
   }, createElement(TextControl, {
     label: __('Title', 'buddypress'),
     value: title,
-    onChange: function onChange(text) {
+    onChange: text => {
       setAttributes({
         title: text
       });
@@ -207,11 +215,9 @@ var editDynamicGroupsBlock = function editDynamicGroupsBlock(_ref) {
   }), createElement(RangeControl, {
     label: __('Max groups to show', 'buddypress'),
     value: maxGroups,
-    onChange: function onChange(value) {
-      return setAttributes({
-        maxGroups: value
-      });
-    },
+    onChange: value => setAttributes({
+      maxGroups: value
+    }),
     min: 1,
     max: 10,
     required: true
@@ -219,7 +225,7 @@ var editDynamicGroupsBlock = function editDynamicGroupsBlock(_ref) {
     label: __('Default groups to show', 'buddypress'),
     value: groupDefault,
     options: _constants.TYPES,
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         groupDefault: option
       });
@@ -227,7 +233,7 @@ var editDynamicGroupsBlock = function editDynamicGroupsBlock(_ref) {
   }), createElement(ToggleControl, {
     label: __('Link block title to Groups directory', 'buddypress'),
     checked: !!linkTitle,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         linkTitle: !linkTitle
       });
@@ -251,30 +257,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Widget to Dynamic Groups Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_groups_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/dynamic-groups', {
         title: instance.raw.title,
         maxGroups: instance.raw.max_groups,
@@ -298,9 +308,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-groups/js/blocks/group.js src/bp-groups/js/blocks/group.js
index 0e3c7aafe..6ffee4cd5 100644
--- src/bp-groups/js/blocks/group.js
+++ src/bp-groups/js/blocks/group.js
@@ -128,15 +128,18 @@ exports.GROUP_STATI = exports.AVATAR_SIZES = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    __ = _wp.i18n.__;
+const {
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Avatar sizes.
  *
  * @type {Array}
  */
 
-var AVATAR_SIZES = [{
+const AVATAR_SIZES = [{
   label: __('None', 'buddypress'),
   value: 'none'
 }, {
@@ -153,7 +156,7 @@ var AVATAR_SIZES = [{
  */
 
 exports.AVATAR_SIZES = AVATAR_SIZES;
-var GROUP_STATI = {
+const GROUP_STATI = {
   public: __('Public', 'buddypress'),
   private: __('Private', 'buddypress'),
   hidden: __('Hidden', 'buddypress')
@@ -172,36 +175,46 @@ var _constants = require("./constants");
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    _wp$blockEditor = _wp.blockEditor,
-    InspectorControls = _wp$blockEditor.InspectorControls,
-    BlockControls = _wp$blockEditor.BlockControls,
-    _wp$components = _wp.components,
-    Placeholder = _wp$components.Placeholder,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    SelectControl = _wp$components.SelectControl,
-    ToggleControl = _wp$components.ToggleControl,
-    Toolbar = _wp$components.Toolbar,
-    ToolbarButton = _wp$components.ToolbarButton,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
+const {
+  blockEditor: {
+    InspectorControls,
+    BlockControls
+  },
+  components: {
+    Placeholder,
+    Disabled,
+    PanelBody,
+    SelectControl,
+    ToggleControl,
+    Toolbar,
+    ToolbarButton
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    _bp$blockComponents = _bp.blockComponents,
-    AutoCompleter = _bp$blockComponents.AutoCompleter,
-    ServerSideRender = _bp$blockComponents.ServerSideRender,
-    isActive = _bp.blockData.isActive;
+const {
+  blockComponents: {
+    AutoCompleter
+  },
+  blockData: {
+    isActive
+  }
+} = bp;
 /**
  * Internal dependencies.
  */
 
-var getSlugValue = function getSlugValue(item) {
+const getSlugValue = item => {
   if (item && item.status && _constants.GROUP_STATI[item.status]) {
     return _constants.GROUP_STATI[item.status];
   }
@@ -209,15 +222,18 @@ var getSlugValue = function getSlugValue(item) {
   return null;
 };
 
-var editGroupBlock = function editGroupBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var isAvatarEnabled = isActive('groups', 'avatar');
-  var isCoverImageEnabled = isActive('groups', 'cover');
-  var avatarSize = attributes.avatarSize,
-      displayDescription = attributes.displayDescription,
-      displayActionButton = attributes.displayActionButton,
-      displayCoverImage = attributes.displayCoverImage;
+const editGroupBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const isAvatarEnabled = isActive('groups', 'avatar');
+  const isCoverImageEnabled = isActive('groups', 'cover');
+  const {
+    avatarSize,
+    displayDescription,
+    displayActionButton,
+    displayCoverImage
+  } = attributes;
 
   if (!attributes.itemID) {
     return createElement(Placeholder, {
@@ -242,7 +258,7 @@ var editGroupBlock = function editGroupBlock(_ref) {
   }, createElement(ToolbarButton, {
     icon: "edit",
     title: __('Select another group', 'buddypress'),
-    onClick: function onClick() {
+    onClick: () => {
       setAttributes({
         itemID: 0
       });
@@ -253,7 +269,7 @@ var editGroupBlock = function editGroupBlock(_ref) {
   }, createElement(ToggleControl, {
     label: __('Display Group\'s home button', 'buddypress'),
     checked: !!displayActionButton,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayActionButton: !displayActionButton
       });
@@ -262,7 +278,7 @@ var editGroupBlock = function editGroupBlock(_ref) {
   }), createElement(ToggleControl, {
     label: __('Display group\'s description', 'buddypress'),
     checked: !!displayDescription,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayDescription: !displayDescription
       });
@@ -273,7 +289,7 @@ var editGroupBlock = function editGroupBlock(_ref) {
     value: avatarSize,
     options: _constants.AVATAR_SIZES,
     help: __('Select "None" to disable the avatar.', 'buddypress'),
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         avatarSize: option
       });
@@ -281,7 +297,7 @@ var editGroupBlock = function editGroupBlock(_ref) {
   }), isCoverImageEnabled && createElement(ToggleControl, {
     label: __('Display Cover Image', 'buddypress'),
     checked: !!displayCoverImage,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayCoverImage: !displayCoverImage
       });
@@ -305,9 +321,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-groups/js/blocks/groups.js src/bp-groups/js/blocks/groups.js
index 092956c2f..e6231296e 100644
--- src/bp-groups/js/blocks/groups.js
+++ src/bp-groups/js/blocks/groups.js
@@ -117,121 +117,7 @@ parcelRequire = (function (modules, cache, entry, globalName) {
   }
 
   return newRequire;
-})({"jEQo":[function(require,module,exports) {
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-module.exports = _arrayLikeToArray;
-},{}],"o3SL":[function(require,module,exports) {
-var arrayLikeToArray = require("./arrayLikeToArray");
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return arrayLikeToArray(arr);
-}
-
-module.exports = _arrayWithoutHoles;
-},{"./arrayLikeToArray":"jEQo"}],"lZpU":[function(require,module,exports) {
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-module.exports = _iterableToArray;
-},{}],"Dbv9":[function(require,module,exports) {
-var arrayLikeToArray = require("./arrayLikeToArray");
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
-}
-
-module.exports = _unsupportedIterableToArray;
-},{"./arrayLikeToArray":"jEQo"}],"NCaH":[function(require,module,exports) {
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableSpread;
-},{}],"I9dH":[function(require,module,exports) {
-var arrayWithoutHoles = require("./arrayWithoutHoles");
-
-var iterableToArray = require("./iterableToArray");
-
-var unsupportedIterableToArray = require("./unsupportedIterableToArray");
-
-var nonIterableSpread = require("./nonIterableSpread");
-
-function _toConsumableArray(arr) {
-  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
-}
-
-module.exports = _toConsumableArray;
-},{"./arrayWithoutHoles":"o3SL","./iterableToArray":"lZpU","./unsupportedIterableToArray":"Dbv9","./nonIterableSpread":"NCaH"}],"DCTP":[function(require,module,exports) {
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-module.exports = _arrayWithHoles;
-},{}],"LoeL":[function(require,module,exports) {
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-module.exports = _iterableToArrayLimit;
-},{}],"MWEO":[function(require,module,exports) {
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableRest;
-},{}],"DERy":[function(require,module,exports) {
-var arrayWithHoles = require("./arrayWithHoles");
-
-var iterableToArrayLimit = require("./iterableToArrayLimit");
-
-var unsupportedIterableToArray = require("./unsupportedIterableToArray");
-
-var nonIterableRest = require("./nonIterableRest");
-
-function _slicedToArray(arr, i) {
-  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
-}
-
-module.exports = _slicedToArray;
-},{"./arrayWithHoles":"DCTP","./iterableToArrayLimit":"LoeL","./unsupportedIterableToArray":"Dbv9","./nonIterableRest":"MWEO"}],"jS06":[function(require,module,exports) {
+})({"jS06":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -242,15 +128,18 @@ exports.EXTRA_INFO = exports.GROUP_STATI = exports.AVATAR_SIZES = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    __ = _wp.i18n.__;
+const {
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Avatar sizes.
  *
  * @type {Array}
  */
 
-var AVATAR_SIZES = [{
+const AVATAR_SIZES = [{
   label: __('None', 'buddypress'),
   value: 'none'
 }, {
@@ -267,7 +156,7 @@ var AVATAR_SIZES = [{
  */
 
 exports.AVATAR_SIZES = AVATAR_SIZES;
-var GROUP_STATI = {
+const GROUP_STATI = {
   public: __('Public', 'buddypress'),
   private: __('Private', 'buddypress'),
   hidden: __('Hidden', 'buddypress')
@@ -279,7 +168,7 @@ var GROUP_STATI = {
  */
 
 exports.GROUP_STATI = GROUP_STATI;
-var EXTRA_INFO = [{
+const EXTRA_INFO = [{
   label: __('None', 'buddypress'),
   value: 'none'
 }, {
@@ -301,48 +190,54 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _constants = require("./constants");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    _wp$blockEditor = _wp.blockEditor,
-    InspectorControls = _wp$blockEditor.InspectorControls,
-    BlockControls = _wp$blockEditor.BlockControls,
-    _wp$components = _wp.components,
-    Placeholder = _wp$components.Placeholder,
-    PanelBody = _wp$components.PanelBody,
-    SelectControl = _wp$components.SelectControl,
-    ToggleControl = _wp$components.ToggleControl,
-    Button = _wp$components.Button,
-    Dashicon = _wp$components.Dashicon,
-    Tooltip = _wp$components.Tooltip,
-    ToolbarGroup = _wp$components.ToolbarGroup,
-    RangeControl = _wp$components.RangeControl,
-    _wp$element = _wp.element,
-    createElement = _wp$element.createElement,
-    Fragment = _wp$element.Fragment,
-    useState = _wp$element.useState,
-    _wp$i18n = _wp.i18n,
-    __ = _wp$i18n.__,
-    sprintf = _wp$i18n.sprintf,
-    _n = _wp$i18n._n,
-    apiFetch = _wp.apiFetch,
-    addQueryArgs = _wp.url.addQueryArgs;
+const {
+  blockEditor: {
+    InspectorControls,
+    BlockControls
+  },
+  components: {
+    Placeholder,
+    PanelBody,
+    SelectControl,
+    ToggleControl,
+    Button,
+    Dashicon,
+    Tooltip,
+    ToolbarGroup,
+    RangeControl
+  },
+  element: {
+    createElement,
+    Fragment,
+    useState
+  },
+  i18n: {
+    __,
+    sprintf,
+    _n
+  },
+  apiFetch,
+  url: {
+    addQueryArgs
+  }
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    AutoCompleter = _bp.blockComponents.AutoCompleter,
-    isActive = _bp.blockData.isActive;
+const {
+  blockComponents: {
+    AutoCompleter
+  },
+  blockData: {
+    isActive
+  }
+} = bp;
 /**
  * Internal dependencies.
  */
@@ -350,12 +245,13 @@ var _bp = bp,
 /**
  * External dependencies.
  */
-var _lodash = lodash,
-    reject = _lodash.reject,
-    remove = _lodash.remove,
-    sortBy = _lodash.sortBy;
+const {
+  reject,
+  remove,
+  sortBy
+} = lodash;
 
-var getSlugValue = function getSlugValue(item) {
+const getSlugValue = item => {
   if (item && item.status && _constants.GROUP_STATI[item.status]) {
     return _constants.GROUP_STATI[item.status];
   }
@@ -363,69 +259,63 @@ var getSlugValue = function getSlugValue(item) {
   return null;
 };
 
-var editGroupsBlock = function editGroupsBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes,
-      isSelected = _ref.isSelected;
-  var isAvatarEnabled = isActive('groups', 'avatar');
-  var itemIDs = attributes.itemIDs,
-      avatarSize = attributes.avatarSize,
-      displayGroupName = attributes.displayGroupName,
-      extraInfo = attributes.extraInfo,
-      layoutPreference = attributes.layoutPreference,
-      columns = attributes.columns;
-  var hasGroups = 0 !== itemIDs.length;
-
-  var _useState = useState([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      groups = _useState2[0],
-      setGroups = _useState2[1];
-
-  var layoutControls = [{
+const editGroupsBlock = ({
+  attributes,
+  setAttributes,
+  isSelected
+}) => {
+  const isAvatarEnabled = isActive('groups', 'avatar');
+  const {
+    itemIDs,
+    avatarSize,
+    displayGroupName,
+    extraInfo,
+    layoutPreference,
+    columns
+  } = attributes;
+  const hasGroups = 0 !== itemIDs.length;
+  const [groups, setGroups] = useState([]);
+  const layoutControls = [{
     icon: 'text',
     title: __('List view', 'buddypress'),
-    onClick: function onClick() {
-      return setAttributes({
-        layoutPreference: 'list'
-      });
-    },
+    onClick: () => setAttributes({
+      layoutPreference: 'list'
+    }),
     isActive: layoutPreference === 'list'
   }, {
     icon: 'screenoptions',
     title: __('Grid view', 'buddypress'),
-    onClick: function onClick() {
-      return setAttributes({
-        layoutPreference: 'grid'
-      });
-    },
+    onClick: () => setAttributes({
+      layoutPreference: 'grid'
+    }),
     isActive: layoutPreference === 'grid'
   }];
-  var groupsList;
-  var containerClasses = 'bp-block-groups avatar-' + avatarSize;
-  var extraInfoOptions = _constants.EXTRA_INFO;
+  let groupsList;
+  let containerClasses = 'bp-block-groups avatar-' + avatarSize;
+  let extraInfoOptions = _constants.EXTRA_INFO;
 
   if (layoutPreference === 'grid') {
     containerClasses += ' is-grid columns-' + columns;
-    extraInfoOptions = _constants.EXTRA_INFO.filter(function (extra) {
+    extraInfoOptions = _constants.EXTRA_INFO.filter(extra => {
       return 'description' !== extra.value;
     });
   }
 
-  var onSelectedGroup = function onSelectedGroup(_ref2) {
-    var itemID = _ref2.itemID;
-
+  const onSelectedGroup = ({
+    itemID
+  }) => {
     if (itemID && -1 === itemIDs.indexOf(itemID)) {
       setAttributes({
-        itemIDs: [].concat((0, _toConsumableArray2.default)(itemIDs), [parseInt(itemID, 10)])
+        itemIDs: [...itemIDs, parseInt(itemID, 10)]
       });
     }
   };
 
-  var onRemoveGroup = function onRemoveGroup(itemID) {
+  const onRemoveGroup = itemID => {
     if (itemID && -1 !== itemIDs.indexOf(itemID)) {
       setGroups(reject(groups, ['id', itemID]));
       setAttributes({
-        itemIDs: remove(itemIDs, function (value) {
+        itemIDs: remove(itemIDs, value => {
           return value !== itemID;
         })
       });
@@ -434,21 +324,21 @@ var editGroupsBlock = function editGroupsBlock(_ref) {
 
   if (hasGroups && itemIDs.length !== groups.length) {
     apiFetch({
-      path: addQueryArgs("/buddypress/v1/groups", {
+      path: addQueryArgs(`/buddypress/v1/groups`, {
         populate_extras: true,
         include: itemIDs
       })
-    }).then(function (items) {
-      setGroups(sortBy(items, [function (item) {
+    }).then(items => {
+      setGroups(sortBy(items, [item => {
         return itemIDs.indexOf(item.id);
       }]));
     });
   }
 
   if (groups.length) {
-    groupsList = groups.map(function (group) {
-      var hasDescription = false;
-      var groupItemClasses = 'group-content';
+    groupsList = groups.map(group => {
+      let hasDescription = false;
+      let groupItemClasses = 'group-content';
 
       if (layoutPreference === 'list' && 'description' === extraInfo && group.description && group.description.rendered) {
         hasDescription = true;
@@ -462,9 +352,7 @@ var editGroupsBlock = function editGroupsBlock(_ref) {
         text: __('Remove group', 'buddypress')
       }, createElement(Button, {
         className: "is-right",
-        onClick: function onClick() {
-          return onRemoveGroup(group.id);
-        },
+        onClick: () => onRemoveGroup(group.id),
         label: __('Remove group', 'buddypress')
       }, createElement(Dashicon, {
         icon: "no"
@@ -504,7 +392,7 @@ var editGroupsBlock = function editGroupsBlock(_ref) {
   }, createElement(ToggleControl, {
     label: __('Display the group\'s name', 'buddypress'),
     checked: !!displayGroupName,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayGroupName: !displayGroupName
       });
@@ -515,7 +403,7 @@ var editGroupsBlock = function editGroupsBlock(_ref) {
     value: avatarSize,
     options: _constants.AVATAR_SIZES,
     help: __('Select "None" to disable the avatar.', 'buddypress'),
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         avatarSize: option
       });
@@ -525,7 +413,7 @@ var editGroupsBlock = function editGroupsBlock(_ref) {
     value: extraInfo,
     options: extraInfoOptions,
     help: __('Select "None" to show no extra information.', 'buddypress'),
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         extraInfo: option
       });
@@ -533,11 +421,9 @@ var editGroupsBlock = function editGroupsBlock(_ref) {
   }), layoutPreference === 'grid' && createElement(RangeControl, {
     label: __('Columns', 'buddypress'),
     value: columns,
-    onChange: function onChange(value) {
-      return setAttributes({
-        columns: value
-      });
-    },
+    onChange: value => setAttributes({
+      columns: value
+    }),
     min: 2,
     max: 4,
     required: true
@@ -566,7 +452,7 @@ var editGroupsBlock = function editGroupsBlock(_ref) {
 
 var _default = editGroupsBlock;
 exports.default = _default;
-},{"@babel/runtime/helpers/toConsumableArray":"I9dH","@babel/runtime/helpers/slicedToArray":"DERy","./constants":"jS06"}],"jcTh":[function(require,module,exports) {
+},{"./constants":"jS06"}],"jcTh":[function(require,module,exports) {
 "use strict";
 
 var _edit = _interopRequireDefault(require("./groups/edit"));
@@ -576,9 +462,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-groups/js/dynamic-groups.js src/bp-groups/js/dynamic-groups.js
index 4a0839982..801585d38 100644
--- src/bp-groups/js/dynamic-groups.js
+++ src/bp-groups/js/dynamic-groups.js
@@ -118,142 +118,100 @@ parcelRequire = (function (modules, cache, entry, globalName) {
 
   return newRequire;
 })({"UOvc":[function(require,module,exports) {
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
-
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 /**
  * WordPress dependencies
  */
-var _wp = wp,
-    _wp$i18n = _wp.i18n,
-    __ = _wp$i18n.__,
-    sprintf = _wp$i18n.sprintf;
+const {
+  i18n: {
+    __,
+    sprintf
+  }
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    dynamicWidgetBlock = _bp.dynamicWidgetBlock;
+const {
+  dynamicWidgetBlock
+} = bp;
 /**
  * Front-end Dynamic Groups Widget Block class.
  *
  * @since 9.0.0
  */
 
-var bpGroupsWidgetBlock = /*#__PURE__*/function (_dynamicWidgetBlock) {
-  _inherits(bpGroupsWidgetBlock, _dynamicWidgetBlock);
-
-  var _super = _createSuper(bpGroupsWidgetBlock);
-
-  function bpGroupsWidgetBlock() {
-    _classCallCheck(this, bpGroupsWidgetBlock);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(bpGroupsWidgetBlock, [{
-    key: "loop",
-    value: function loop() {
-      var groups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'active';
-
-      var tmpl = _get(_getPrototypeOf(bpGroupsWidgetBlock.prototype), "useTemplate", this).call(this, 'bp-dynamic-groups-item');
-
-      var selector = document.querySelector('#' + container);
-      var output = '';
-
-      if (groups && groups.length) {
-        groups.forEach(function (group) {
-          if ('newest' === type && group.created_since) {
-            /* translators: %s is time elapsed since the group was created */
-            group.extra = sprintf(__('Created %s', 'buddypress'), group.created_since);
-          } else if ('popular' === type && group.total_member_count) {
-            var membersCount = parseInt(group.total_member_count, 10);
-
-            if (0 === membersCount) {
-              group.extra = __('No members', 'buddypress');
-            } else if (1 === membersCount) {
-              group.extra = __('1 member', 'buddypress');
-            } else {
-              /* translators: %s is the number of Group members (more than 1). */
-              group.extra = sprintf(__('%s members', 'buddypress'), group.total_member_count);
-            }
+class bpGroupsWidgetBlock extends dynamicWidgetBlock {
+  loop(groups = [], container = '', type = 'active') {
+    const tmpl = super.useTemplate('bp-dynamic-groups-item');
+    const selector = document.querySelector('#' + container);
+    let output = '';
+
+    if (groups && groups.length) {
+      groups.forEach(group => {
+        if ('newest' === type && group.created_since) {
+          /* translators: %s is time elapsed since the group was created */
+          group.extra = sprintf(__('Created %s', 'buddypress'), group.created_since);
+        } else if ('popular' === type && group.total_member_count) {
+          const membersCount = parseInt(group.total_member_count, 10);
+
+          if (0 === membersCount) {
+            group.extra = __('No members', 'buddypress');
+          } else if (1 === membersCount) {
+            group.extra = __('1 member', 'buddypress');
           } else {
-            /* translators: %s: a human time diff. */
-            group.extra = sprintf(__('Active %s', 'buddypress'), group.last_activity_diff);
+            /* translators: %s is the number of Group members (more than 1). */
+            group.extra = sprintf(__('%s members', 'buddypress'), group.total_member_count);
           }
-          /* Translators: %s is the group's name. */
-
+        } else {
+          /* translators: %s: a human time diff. */
+          group.extra = sprintf(__('Active %s', 'buddypress'), group.last_activity_diff);
+        }
+        /* Translators: %s is the group's name. */
 
-          group.avatar_alt = sprintf(__('Group Profile photo of %s', 'buddypress'), group.name);
-          output += tmpl(group);
-        });
-      } else {
-        output = '<div class="widget-error">' + __('There are no groups to display.', 'buddypress') + '</div>';
-      }
 
-      selector.innerHTML = output;
+        group.avatar_alt = sprintf(__('Group Profile photo of %s', 'buddypress'), group.name);
+        output += tmpl(group);
+      });
+    } else {
+      output = '<div class="widget-error">' + __('There are no groups to display.', 'buddypress') + '</div>';
     }
-  }, {
-    key: "start",
-    value: function start() {
-      var _this = this;
 
-      this.blocks.forEach(function (block, i) {
-        var selector = block.selector;
-        var type = block.query_args.type;
-        var list = document.querySelector('#' + selector).closest('.bp-dynamic-block-container'); // Get default Block's type groups.
+    selector.innerHTML = output;
+  }
 
-        _get(_getPrototypeOf(bpGroupsWidgetBlock.prototype), "getItems", _this).call(_this, type, i); // Listen to Block's Nav item clics
+  start() {
+    this.blocks.forEach((block, i) => {
+      const {
+        selector
+      } = block;
+      const {
+        type
+      } = block.query_args;
+      const list = document.querySelector('#' + selector).closest('.bp-dynamic-block-container'); // Get default Block's type groups.
 
+      super.getItems(type, i); // Listen to Block's Nav item clics
 
-        list.querySelectorAll('.item-options a').forEach(function (navItem) {
-          navItem.addEventListener('click', function (event) {
-            event.preventDefault(); // Changes the displayed filter.
+      list.querySelectorAll('.item-options a').forEach(navItem => {
+        navItem.addEventListener('click', event => {
+          event.preventDefault(); // Changes the displayed filter.
 
-            event.target.closest('.item-options').querySelector('.selected').classList.remove('selected');
-            event.target.classList.add('selected');
-            var newType = event.target.getAttribute('data-bp-sort');
+          event.target.closest('.item-options').querySelector('.selected').classList.remove('selected');
+          event.target.classList.add('selected');
+          const newType = event.target.getAttribute('data-bp-sort');
 
-            if (newType !== _this.blocks[i].query_args.type) {
-              _get(_getPrototypeOf(bpGroupsWidgetBlock.prototype), "getItems", _this).call(_this, newType, i);
-            }
-          });
+          if (newType !== this.blocks[i].query_args.type) {
+            super.getItems(newType, i);
+          }
         });
       });
-    }
-  }]);
+    });
+  }
 
-  return bpGroupsWidgetBlock;
-}(dynamicWidgetBlock);
+}
 
-var settings = window.bpDynamicGroupsSettings || {};
-var blocks = window.bpDynamicGroupsBlocks || [];
-var bpDynamicGroups = new bpGroupsWidgetBlock(settings, blocks);
+const settings = window.bpDynamicGroupsSettings || {};
+const blocks = window.bpDynamicGroupsBlocks || [];
+const bpDynamicGroups = new bpGroupsWidgetBlock(settings, blocks);
 
 if ('loading' === document.readyState) {
   document.addEventListener('DOMContentLoaded', bpDynamicGroups.start());
diff --git src/bp-members/classes/class-bp-members-component.php src/bp-members/classes/class-bp-members-component.php
index 432e3ecce..7bca5d8bb 100644
--- src/bp-members/classes/class-bp-members-component.php
+++ src/bp-members/classes/class-bp-members-component.php
@@ -764,6 +764,7 @@ class BP_Members_Component extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
+						'wp-server-side-render',
 						'bp-block-components',
 						'bp-block-data',
 					),
@@ -857,8 +858,8 @@ class BP_Members_Component extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
+						'wp-server-side-render',
 						'bp-block-data',
-						'bp-block-components',
 					),
 					'style'              => 'bp-dynamic-members-block',
 					'style_url'          => plugins_url( 'css/blocks/dynamic-members.css', dirname( __FILE__ ) ),
@@ -892,7 +893,7 @@ class BP_Members_Component extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
-						'bp-block-components',
+						'wp-server-side-render',
 					),
 					'editor_style'       => 'bp-member-avatar-blocks',
 					'editor_style_url'   => plugins_url( 'css/blocks/member-avatar-blocks.css', dirname( __FILE__ ) ),
@@ -918,7 +919,7 @@ class BP_Members_Component extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
-						'bp-block-components',
+						'wp-server-side-render',
 					),
 					'editor_style'       => 'bp-member-avatar-blocks',
 					'editor_style_url'   => plugins_url( 'css/blocks/member-avatar-blocks.css', dirname( __FILE__ ) ),
diff --git src/bp-members/js/blocks/active-members.js src/bp-members/js/blocks/active-members.js
index 1ff2415e1..4cdb55e89 100644
--- src/bp-members/js/blocks/active-members.js
+++ src/bp-members/js/blocks/active-members.js
@@ -128,36 +128,41 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    RangeControl = _wp$components.RangeControl,
-    TextControl = _wp$components.TextControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
-/**
- * BuddyPress dependencies.
- */
-
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender;
-
-var editActiveMembersBlock = function editActiveMembersBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var title = attributes.title,
-      maxMembers = attributes.maxMembers;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    PanelBody,
+    RangeControl,
+    TextControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
+
+const editActiveMembersBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const {
+    title,
+    maxMembers
+  } = attributes;
   return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Settings', 'buddypress'),
     initialOpen: true
   }, createElement(TextControl, {
     label: __('Title', 'buddypress'),
     value: title,
-    onChange: function onChange(text) {
+    onChange: text => {
       setAttributes({
         title: text
       });
@@ -165,11 +170,9 @@ var editActiveMembersBlock = function editActiveMembersBlock(_ref) {
   }), createElement(RangeControl, {
     label: __('Max members to show', 'buddypress'),
     value: maxMembers,
-    onChange: function onChange(value) {
-      return setAttributes({
-        maxMembers: value
-      });
-    },
+    onChange: value => setAttributes({
+      maxMembers: value
+    }),
     min: 1,
     max: 15,
     required: true
@@ -192,30 +195,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Widget to Active Members Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_core_recently_active_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/active-members', {
         title: instance.raw.title,
         maxMembers: instance.raw.max_members
@@ -237,9 +244,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-members/js/blocks/dynamic-members.js src/bp-members/js/blocks/dynamic-members.js
index 6f55a264e..54e8d8d9a 100644
--- src/bp-members/js/blocks/dynamic-members.js
+++ src/bp-members/js/blocks/dynamic-members.js
@@ -128,15 +128,18 @@ exports.TYPES = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    __ = _wp.i18n.__;
+const {
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Members ordering types.
  *
  * @type {Array}
  */
 
-var TYPES = [{
+const TYPES = [{
   label: __('Newest', 'buddypress'),
   value: 'newest'
 }, {
@@ -160,47 +163,58 @@ var _constants = require("./constants");
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    RangeControl = _wp$components.RangeControl,
-    SelectControl = _wp$components.SelectControl,
-    TextControl = _wp$components.TextControl,
-    ToggleControl = _wp$components.ToggleControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    PanelBody,
+    RangeControl,
+    SelectControl,
+    TextControl,
+    ToggleControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender,
-    isActive = _bp.blockData.isActive;
+const {
+  blockData: {
+    isActive
+  }
+} = bp;
 /**
  * Internal dependencies.
  */
 
-var editDynamicMembersBlock = function editDynamicMembersBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var title = attributes.title,
-      maxMembers = attributes.maxMembers,
-      memberDefault = attributes.memberDefault,
-      linkTitle = attributes.linkTitle;
-  var sortTypes = !!isActive('friends') ? _constants.TYPES : _constants.TYPES.filter(function (type) {
-    return 'popular' !== type.value;
-  });
+const editDynamicMembersBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const {
+    title,
+    maxMembers,
+    memberDefault,
+    linkTitle
+  } = attributes;
+  const sortTypes = !!isActive('friends') ? _constants.TYPES : _constants.TYPES.filter(type => 'popular' !== type.value);
   return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Settings', 'buddypress'),
     initialOpen: true
   }, createElement(TextControl, {
     label: __('Title', 'buddypress'),
     value: title,
-    onChange: function onChange(text) {
+    onChange: text => {
       setAttributes({
         title: text
       });
@@ -208,11 +222,9 @@ var editDynamicMembersBlock = function editDynamicMembersBlock(_ref) {
   }), createElement(RangeControl, {
     label: __('Max members to show', 'buddypress'),
     value: maxMembers,
-    onChange: function onChange(value) {
-      return setAttributes({
-        maxMembers: value
-      });
-    },
+    onChange: value => setAttributes({
+      maxMembers: value
+    }),
     min: 1,
     max: 10,
     required: true
@@ -220,7 +232,7 @@ var editDynamicMembersBlock = function editDynamicMembersBlock(_ref) {
     label: __('Default members to show', 'buddypress'),
     value: memberDefault,
     options: sortTypes,
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         memberDefault: option
       });
@@ -228,7 +240,7 @@ var editDynamicMembersBlock = function editDynamicMembersBlock(_ref) {
   }), createElement(ToggleControl, {
     label: __('Link block title to Members directory', 'buddypress'),
     checked: !!linkTitle,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         linkTitle: !linkTitle
       });
@@ -252,30 +264,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Widget to Dynamic Members Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_core_members_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/dynamic-members', {
         title: instance.raw.title,
         maxMembers: instance.raw.max_members,
@@ -299,9 +315,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-members/js/blocks/member.js src/bp-members/js/blocks/member.js
index 2e3648a9e..5a9053321 100644
--- src/bp-members/js/blocks/member.js
+++ src/bp-members/js/blocks/member.js
@@ -128,15 +128,18 @@ exports.AVATAR_SIZES = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    __ = _wp.i18n.__;
+const {
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Avatar sizes.
  *
  * @type {Array}
  */
 
-var AVATAR_SIZES = [{
+const AVATAR_SIZES = [{
   label: __('None', 'buddypress'),
   value: 'none'
 }, {
@@ -160,36 +163,46 @@ var _constants = require("./constants");
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    _wp$blockEditor = _wp.blockEditor,
-    InspectorControls = _wp$blockEditor.InspectorControls,
-    BlockControls = _wp$blockEditor.BlockControls,
-    _wp$components = _wp.components,
-    Placeholder = _wp$components.Placeholder,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    SelectControl = _wp$components.SelectControl,
-    ToggleControl = _wp$components.ToggleControl,
-    Toolbar = _wp$components.Toolbar,
-    ToolbarButton = _wp$components.ToolbarButton,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
+const {
+  blockEditor: {
+    InspectorControls,
+    BlockControls
+  },
+  components: {
+    Placeholder,
+    Disabled,
+    PanelBody,
+    SelectControl,
+    ToggleControl,
+    Toolbar,
+    ToolbarButton
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    _bp$blockComponents = _bp.blockComponents,
-    AutoCompleter = _bp$blockComponents.AutoCompleter,
-    ServerSideRender = _bp$blockComponents.ServerSideRender,
-    isActive = _bp.blockData.isActive;
+const {
+  blockComponents: {
+    AutoCompleter
+  },
+  blockData: {
+    isActive
+  }
+} = bp;
 /**
  * Internal dependencies.
  */
 
-var getSlugValue = function getSlugValue(item) {
+const getSlugValue = item => {
   if (item && item.mention_name) {
     return item.mention_name;
   }
@@ -197,16 +210,19 @@ var getSlugValue = function getSlugValue(item) {
   return null;
 };
 
-var editMemberBlock = function editMemberBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var isAvatarEnabled = isActive('members', 'avatar');
-  var isMentionEnabled = isActive('activity', 'mentions');
-  var isCoverImageEnabled = isActive('members', 'cover');
-  var avatarSize = attributes.avatarSize,
-      displayMentionSlug = attributes.displayMentionSlug,
-      displayActionButton = attributes.displayActionButton,
-      displayCoverImage = attributes.displayCoverImage;
+const editMemberBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const isAvatarEnabled = isActive('members', 'avatar');
+  const isMentionEnabled = isActive('activity', 'mentions');
+  const isCoverImageEnabled = isActive('members', 'cover');
+  const {
+    avatarSize,
+    displayMentionSlug,
+    displayActionButton,
+    displayCoverImage
+  } = attributes;
 
   if (!attributes.itemID) {
     return createElement(Placeholder, {
@@ -228,7 +244,7 @@ var editMemberBlock = function editMemberBlock(_ref) {
   }, createElement(ToolbarButton, {
     icon: "edit",
     title: __('Select another member', 'buddypress'),
-    onClick: function onClick() {
+    onClick: () => {
       setAttributes({
         itemID: 0
       });
@@ -239,7 +255,7 @@ var editMemberBlock = function editMemberBlock(_ref) {
   }, createElement(ToggleControl, {
     label: __('Display Profile button', 'buddypress'),
     checked: !!displayActionButton,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayActionButton: !displayActionButton
       });
@@ -250,7 +266,7 @@ var editMemberBlock = function editMemberBlock(_ref) {
     value: avatarSize,
     options: _constants.AVATAR_SIZES,
     help: __('Select "None" to disable the avatar.', 'buddypress'),
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         avatarSize: option
       });
@@ -258,7 +274,7 @@ var editMemberBlock = function editMemberBlock(_ref) {
   }), isCoverImageEnabled && createElement(ToggleControl, {
     label: __('Display Cover Image', 'buddypress'),
     checked: !!displayCoverImage,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayCoverImage: !displayCoverImage
       });
@@ -267,7 +283,7 @@ var editMemberBlock = function editMemberBlock(_ref) {
   }), isMentionEnabled && createElement(ToggleControl, {
     label: __('Display Mention slug', 'buddypress'),
     checked: !!displayMentionSlug,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayMentionSlug: !displayMentionSlug
       });
@@ -291,9 +307,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-members/js/blocks/members.js src/bp-members/js/blocks/members.js
index a37f593c2..0bfe8fe6f 100644
--- src/bp-members/js/blocks/members.js
+++ src/bp-members/js/blocks/members.js
@@ -117,121 +117,7 @@ parcelRequire = (function (modules, cache, entry, globalName) {
   }
 
   return newRequire;
-})({"jEQo":[function(require,module,exports) {
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-module.exports = _arrayLikeToArray;
-},{}],"o3SL":[function(require,module,exports) {
-var arrayLikeToArray = require("./arrayLikeToArray");
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return arrayLikeToArray(arr);
-}
-
-module.exports = _arrayWithoutHoles;
-},{"./arrayLikeToArray":"jEQo"}],"lZpU":[function(require,module,exports) {
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-module.exports = _iterableToArray;
-},{}],"Dbv9":[function(require,module,exports) {
-var arrayLikeToArray = require("./arrayLikeToArray");
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
-}
-
-module.exports = _unsupportedIterableToArray;
-},{"./arrayLikeToArray":"jEQo"}],"NCaH":[function(require,module,exports) {
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableSpread;
-},{}],"I9dH":[function(require,module,exports) {
-var arrayWithoutHoles = require("./arrayWithoutHoles");
-
-var iterableToArray = require("./iterableToArray");
-
-var unsupportedIterableToArray = require("./unsupportedIterableToArray");
-
-var nonIterableSpread = require("./nonIterableSpread");
-
-function _toConsumableArray(arr) {
-  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
-}
-
-module.exports = _toConsumableArray;
-},{"./arrayWithoutHoles":"o3SL","./iterableToArray":"lZpU","./unsupportedIterableToArray":"Dbv9","./nonIterableSpread":"NCaH"}],"DCTP":[function(require,module,exports) {
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-module.exports = _arrayWithHoles;
-},{}],"LoeL":[function(require,module,exports) {
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-module.exports = _iterableToArrayLimit;
-},{}],"MWEO":[function(require,module,exports) {
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableRest;
-},{}],"DERy":[function(require,module,exports) {
-var arrayWithHoles = require("./arrayWithHoles");
-
-var iterableToArrayLimit = require("./iterableToArrayLimit");
-
-var unsupportedIterableToArray = require("./unsupportedIterableToArray");
-
-var nonIterableRest = require("./nonIterableRest");
-
-function _slicedToArray(arr, i) {
-  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
-}
-
-module.exports = _slicedToArray;
-},{"./arrayWithHoles":"DCTP","./iterableToArrayLimit":"LoeL","./unsupportedIterableToArray":"Dbv9","./nonIterableRest":"MWEO"}],"gr8I":[function(require,module,exports) {
+})({"gr8I":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -242,15 +128,18 @@ exports.EXTRA_DATA = exports.AVATAR_SIZES = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    __ = _wp.i18n.__;
+const {
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Avatar sizes.
  *
  * @type {Array}
  */
 
-var AVATAR_SIZES = [{
+const AVATAR_SIZES = [{
   label: __('None', 'buddypress'),
   value: 'none'
 }, {
@@ -267,7 +156,7 @@ var AVATAR_SIZES = [{
  */
 
 exports.AVATAR_SIZES = AVATAR_SIZES;
-var EXTRA_DATA = [{
+const EXTRA_DATA = [{
   label: __('None', 'buddypress'),
   value: 'none'
 }, {
@@ -286,47 +175,53 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _constants = require("./constants");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    _wp$blockEditor = _wp.blockEditor,
-    InspectorControls = _wp$blockEditor.InspectorControls,
-    BlockControls = _wp$blockEditor.BlockControls,
-    _wp$components = _wp.components,
-    Placeholder = _wp$components.Placeholder,
-    PanelBody = _wp$components.PanelBody,
-    SelectControl = _wp$components.SelectControl,
-    ToggleControl = _wp$components.ToggleControl,
-    Button = _wp$components.Button,
-    Dashicon = _wp$components.Dashicon,
-    Tooltip = _wp$components.Tooltip,
-    ToolbarGroup = _wp$components.ToolbarGroup,
-    RangeControl = _wp$components.RangeControl,
-    _wp$element = _wp.element,
-    createElement = _wp$element.createElement,
-    Fragment = _wp$element.Fragment,
-    useState = _wp$element.useState,
-    _wp$i18n = _wp.i18n,
-    __ = _wp$i18n.__,
-    sprintf = _wp$i18n.sprintf,
-    apiFetch = _wp.apiFetch,
-    addQueryArgs = _wp.url.addQueryArgs;
+const {
+  blockEditor: {
+    InspectorControls,
+    BlockControls
+  },
+  components: {
+    Placeholder,
+    PanelBody,
+    SelectControl,
+    ToggleControl,
+    Button,
+    Dashicon,
+    Tooltip,
+    ToolbarGroup,
+    RangeControl
+  },
+  element: {
+    createElement,
+    Fragment,
+    useState
+  },
+  i18n: {
+    __,
+    sprintf
+  },
+  apiFetch,
+  url: {
+    addQueryArgs
+  }
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    AutoCompleter = _bp.blockComponents.AutoCompleter,
-    isActive = _bp.blockData.isActive;
+const {
+  blockComponents: {
+    AutoCompleter
+  },
+  blockData: {
+    isActive
+  }
+} = bp;
 /**
  * Internal dependencies.
  */
@@ -334,12 +229,13 @@ var _bp = bp,
 /**
  * External dependencies.
  */
-var _lodash = lodash,
-    reject = _lodash.reject,
-    remove = _lodash.remove,
-    sortBy = _lodash.sortBy;
+const {
+  reject,
+  remove,
+  sortBy
+} = lodash;
 
-var getSlugValue = function getSlugValue(item) {
+const getSlugValue = item => {
   if (item && item.mention_name) {
     return item.mention_name;
   }
@@ -347,71 +243,65 @@ var getSlugValue = function getSlugValue(item) {
   return null;
 };
 
-var editMembersBlock = function editMembersBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes,
-      isSelected = _ref.isSelected;
-  var isAvatarEnabled = isActive('members', 'avatar');
-  var isMentionEnabled = isActive('activity', 'mentions');
-  var itemIDs = attributes.itemIDs,
-      avatarSize = attributes.avatarSize,
-      displayMentionSlug = attributes.displayMentionSlug,
-      displayUserName = attributes.displayUserName,
-      extraData = attributes.extraData,
-      layoutPreference = attributes.layoutPreference,
-      columns = attributes.columns;
-  var hasMembers = 0 !== itemIDs.length;
-
-  var _useState = useState([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      members = _useState2[0],
-      setMembers = _useState2[1];
-
-  var layoutControls = [{
+const editMembersBlock = ({
+  attributes,
+  setAttributes,
+  isSelected
+}) => {
+  const isAvatarEnabled = isActive('members', 'avatar');
+  const isMentionEnabled = isActive('activity', 'mentions');
+  const {
+    itemIDs,
+    avatarSize,
+    displayMentionSlug,
+    displayUserName,
+    extraData,
+    layoutPreference,
+    columns
+  } = attributes;
+  const hasMembers = 0 !== itemIDs.length;
+  const [members, setMembers] = useState([]);
+  const layoutControls = [{
     icon: 'text',
     title: __('List view', 'buddypress'),
-    onClick: function onClick() {
-      return setAttributes({
-        layoutPreference: 'list'
-      });
-    },
+    onClick: () => setAttributes({
+      layoutPreference: 'list'
+    }),
     isActive: layoutPreference === 'list'
   }, {
     icon: 'screenoptions',
     title: __('Grid view', 'buddypress'),
-    onClick: function onClick() {
-      return setAttributes({
-        layoutPreference: 'grid'
-      });
-    },
+    onClick: () => setAttributes({
+      layoutPreference: 'grid'
+    }),
     isActive: layoutPreference === 'grid'
   }];
-  var membersList;
-  var containerClasses = 'bp-block-members avatar-' + avatarSize;
-  var extraDataOptions = _constants.EXTRA_DATA;
+  let membersList;
+  let containerClasses = 'bp-block-members avatar-' + avatarSize;
+  let extraDataOptions = _constants.EXTRA_DATA;
 
   if (layoutPreference === 'grid') {
     containerClasses += ' is-grid columns-' + columns;
-    extraDataOptions = _constants.EXTRA_DATA.filter(function (extra) {
+    extraDataOptions = _constants.EXTRA_DATA.filter(extra => {
       return 'latest_update' !== extra.value;
     });
   }
 
-  var onSelectedMember = function onSelectedMember(_ref2) {
-    var itemID = _ref2.itemID;
-
+  const onSelectedMember = ({
+    itemID
+  }) => {
     if (itemID && -1 === itemIDs.indexOf(itemID)) {
       setAttributes({
-        itemIDs: [].concat((0, _toConsumableArray2.default)(itemIDs), [parseInt(itemID, 10)])
+        itemIDs: [...itemIDs, parseInt(itemID, 10)]
       });
     }
   };
 
-  var onRemoveMember = function onRemoveMember(itemID) {
+  const onRemoveMember = itemID => {
     if (itemID && -1 !== itemIDs.indexOf(itemID)) {
       setMembers(reject(members, ['id', itemID]));
       setAttributes({
-        itemIDs: remove(itemIDs, function (value) {
+        itemIDs: remove(itemIDs, value => {
           return value !== itemID;
         })
       });
@@ -420,21 +310,21 @@ var editMembersBlock = function editMembersBlock(_ref) {
 
   if (hasMembers && itemIDs.length !== members.length) {
     apiFetch({
-      path: addQueryArgs("/buddypress/v1/members", {
+      path: addQueryArgs(`/buddypress/v1/members`, {
         populate_extras: true,
         include: itemIDs
       })
-    }).then(function (items) {
-      setMembers(sortBy(items, [function (item) {
+    }).then(items => {
+      setMembers(sortBy(items, [item => {
         return itemIDs.indexOf(item.id);
       }]));
     });
   }
 
   if (members.length) {
-    membersList = members.map(function (member) {
-      var hasActivity = false;
-      var memberItemClasses = 'member-content';
+    membersList = members.map(member => {
+      let hasActivity = false;
+      let memberItemClasses = 'member-content';
 
       if (layoutPreference === 'list' && 'latest_update' === extraData && member.latest_update && member.latest_update.rendered) {
         hasActivity = true;
@@ -448,9 +338,7 @@ var editMembersBlock = function editMembersBlock(_ref) {
         text: __('Remove member', 'buddypress')
       }, createElement(Button, {
         className: "is-right",
-        onClick: function onClick() {
-          return onRemoveMember(member.id);
-        },
+        onClick: () => onRemoveMember(member.id),
         label: __('Remove member', 'buddypress')
       }, createElement(Dashicon, {
         icon: "no"
@@ -492,7 +380,7 @@ var editMembersBlock = function editMembersBlock(_ref) {
   }, createElement(ToggleControl, {
     label: __('Display the user name', 'buddypress'),
     checked: !!displayUserName,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayUserName: !displayUserName
       });
@@ -501,7 +389,7 @@ var editMembersBlock = function editMembersBlock(_ref) {
   }), isMentionEnabled && createElement(ToggleControl, {
     label: __('Display Mention slug', 'buddypress'),
     checked: !!displayMentionSlug,
-    onChange: function onChange() {
+    onChange: () => {
       setAttributes({
         displayMentionSlug: !displayMentionSlug
       });
@@ -512,7 +400,7 @@ var editMembersBlock = function editMembersBlock(_ref) {
     value: avatarSize,
     options: _constants.AVATAR_SIZES,
     help: __('Select "None" to disable the avatar.', 'buddypress'),
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         avatarSize: option
       });
@@ -522,7 +410,7 @@ var editMembersBlock = function editMembersBlock(_ref) {
     value: extraData,
     options: extraDataOptions,
     help: __('Select "None" to show no extra information.', 'buddypress'),
-    onChange: function onChange(option) {
+    onChange: option => {
       setAttributes({
         extraData: option
       });
@@ -530,11 +418,9 @@ var editMembersBlock = function editMembersBlock(_ref) {
   }), layoutPreference === 'grid' && createElement(RangeControl, {
     label: __('Columns', 'buddypress'),
     value: columns,
-    onChange: function onChange(value) {
-      return setAttributes({
-        columns: value
-      });
-    },
+    onChange: value => setAttributes({
+      columns: value
+    }),
     min: 2,
     max: 4,
     required: true
@@ -562,7 +448,7 @@ var editMembersBlock = function editMembersBlock(_ref) {
 
 var _default = editMembersBlock;
 exports.default = _default;
-},{"@babel/runtime/helpers/toConsumableArray":"I9dH","@babel/runtime/helpers/slicedToArray":"DERy","./constants":"gr8I"}],"XEHU":[function(require,module,exports) {
+},{"./constants":"gr8I"}],"XEHU":[function(require,module,exports) {
 "use strict";
 
 var _edit = _interopRequireDefault(require("./members/edit"));
@@ -572,9 +458,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-members/js/blocks/online-members.js src/bp-members/js/blocks/online-members.js
index 21fbf528f..27420d521 100644
--- src/bp-members/js/blocks/online-members.js
+++ src/bp-members/js/blocks/online-members.js
@@ -128,36 +128,41 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    RangeControl = _wp$components.RangeControl,
-    TextControl = _wp$components.TextControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
-/**
- * BuddyPress dependencies.
- */
-
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender;
-
-var editOnlineMembersBlock = function editOnlineMembersBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var title = attributes.title,
-      maxMembers = attributes.maxMembers;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    PanelBody,
+    RangeControl,
+    TextControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
+
+const editOnlineMembersBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const {
+    title,
+    maxMembers
+  } = attributes;
   return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Settings', 'buddypress'),
     initialOpen: true
   }, createElement(TextControl, {
     label: __('Title', 'buddypress'),
     value: title,
-    onChange: function onChange(text) {
+    onChange: text => {
       setAttributes({
         title: text
       });
@@ -165,11 +170,9 @@ var editOnlineMembersBlock = function editOnlineMembersBlock(_ref) {
   }), createElement(RangeControl, {
     label: __('Max members to show', 'buddypress'),
     value: maxMembers,
-    onChange: function onChange(value) {
-      return setAttributes({
-        maxMembers: value
-      });
-    },
+    onChange: value => setAttributes({
+      maxMembers: value
+    }),
     min: 1,
     max: 15,
     required: true
@@ -192,30 +195,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Widget to Online Members Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_core_whos_online_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/online-members', {
         title: instance.raw.title,
         maxMembers: instance.raw.max_members
@@ -237,9 +244,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-members/js/dynamic-members.js src/bp-members/js/dynamic-members.js
index 827f914c5..076e8ca2b 100644
--- src/bp-members/js/dynamic-members.js
+++ src/bp-members/js/dynamic-members.js
@@ -118,142 +118,100 @@ parcelRequire = (function (modules, cache, entry, globalName) {
 
   return newRequire;
 })({"k5We":[function(require,module,exports) {
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
-
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    _wp$i18n = _wp.i18n,
-    __ = _wp$i18n.__,
-    sprintf = _wp$i18n.sprintf;
+const {
+  i18n: {
+    __,
+    sprintf
+  }
+} = wp;
 /**
  * BuddyPress dependencies.
  */
 
-var _bp = bp,
-    dynamicWidgetBlock = _bp.dynamicWidgetBlock;
+const {
+  dynamicWidgetBlock
+} = bp;
 /**
  * Front-end Dynamic Members Widget Block class.
  *
  * @since 9.0.0
  */
 
-var bpMembersWidgetBlock = /*#__PURE__*/function (_dynamicWidgetBlock) {
-  _inherits(bpMembersWidgetBlock, _dynamicWidgetBlock);
-
-  var _super = _createSuper(bpMembersWidgetBlock);
-
-  function bpMembersWidgetBlock() {
-    _classCallCheck(this, bpMembersWidgetBlock);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(bpMembersWidgetBlock, [{
-    key: "loop",
-    value: function loop() {
-      var members = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'active';
-
-      var tmpl = _get(_getPrototypeOf(bpMembersWidgetBlock.prototype), "useTemplate", this).call(this, 'bp-dynamic-members-item');
-
-      var selector = document.querySelector('#' + container);
-      var output = '';
-
-      if (members && members.length) {
-        members.forEach(function (member) {
-          if ('active' === type && member.last_activity) {
-            /* translators: %s: a human time diff. */
-            member.extra = sprintf(__('Active %s', 'buddypress'), member.last_activity.timediff);
-          } else if ('popular' === type && member.total_friend_count) {
-            var friendsCount = parseInt(member.total_friend_count, 10);
-
-            if (0 === friendsCount) {
-              member.extra = __('No friends', 'buddypress');
-            } else if (1 === friendsCount) {
-              member.extra = __('1 friend', 'buddypress');
-            } else {
-              /* translators: %s: total friend count (more than 1). */
-              member.extra = sprintf(__('%s friends', 'buddypress'), member.total_friend_count);
-            }
-          } else if ('newest' === type && member.registered_since) {
-            /* translators: %s is time elapsed since the registration date happened */
-            member.extra = sprintf(__('Registered %s', 'buddypress'), member.registered_since);
+class bpMembersWidgetBlock extends dynamicWidgetBlock {
+  loop(members = [], container = '', type = 'active') {
+    const tmpl = super.useTemplate('bp-dynamic-members-item');
+    const selector = document.querySelector('#' + container);
+    let output = '';
+
+    if (members && members.length) {
+      members.forEach(member => {
+        if ('active' === type && member.last_activity) {
+          /* translators: %s: a human time diff. */
+          member.extra = sprintf(__('Active %s', 'buddypress'), member.last_activity.timediff);
+        } else if ('popular' === type && member.total_friend_count) {
+          const friendsCount = parseInt(member.total_friend_count, 10);
+
+          if (0 === friendsCount) {
+            member.extra = __('No friends', 'buddypress');
+          } else if (1 === friendsCount) {
+            member.extra = __('1 friend', 'buddypress');
+          } else {
+            /* translators: %s: total friend count (more than 1). */
+            member.extra = sprintf(__('%s friends', 'buddypress'), member.total_friend_count);
           }
-          /* translators: %s: member name */
-
+        } else if ('newest' === type && member.registered_since) {
+          /* translators: %s is time elapsed since the registration date happened */
+          member.extra = sprintf(__('Registered %s', 'buddypress'), member.registered_since);
+        }
+        /* translators: %s: member name */
 
-          member.avatar_alt = sprintf(__('Profile picture of %s', 'buddypress'), member.name);
-          output += tmpl(member);
-        });
-      } else {
-        output = '<div class="widget-error">' + __('No members found.', 'buddypress') + '</div>';
-      }
 
-      selector.innerHTML = output;
+        member.avatar_alt = sprintf(__('Profile picture of %s', 'buddypress'), member.name);
+        output += tmpl(member);
+      });
+    } else {
+      output = '<div class="widget-error">' + __('No members found.', 'buddypress') + '</div>';
     }
-  }, {
-    key: "start",
-    value: function start() {
-      var _this = this;
 
-      this.blocks.forEach(function (block, i) {
-        var selector = block.selector;
-        var type = block.query_args.type;
-        var list = document.querySelector('#' + selector).closest('.bp-dynamic-block-container'); // Get default Block's type members.
+    selector.innerHTML = output;
+  }
 
-        _get(_getPrototypeOf(bpMembersWidgetBlock.prototype), "getItems", _this).call(_this, type, i); // Listen to Block's Nav item clics
+  start() {
+    this.blocks.forEach((block, i) => {
+      const {
+        selector
+      } = block;
+      const {
+        type
+      } = block.query_args;
+      const list = document.querySelector('#' + selector).closest('.bp-dynamic-block-container'); // Get default Block's type members.
 
+      super.getItems(type, i); // Listen to Block's Nav item clics
 
-        list.querySelectorAll('.item-options a').forEach(function (navItem) {
-          navItem.addEventListener('click', function (event) {
-            event.preventDefault(); // Changes the displayed filter.
+      list.querySelectorAll('.item-options a').forEach(navItem => {
+        navItem.addEventListener('click', event => {
+          event.preventDefault(); // Changes the displayed filter.
 
-            event.target.closest('.item-options').querySelector('.selected').classList.remove('selected');
-            event.target.classList.add('selected');
-            var newType = event.target.getAttribute('data-bp-sort');
+          event.target.closest('.item-options').querySelector('.selected').classList.remove('selected');
+          event.target.classList.add('selected');
+          const newType = event.target.getAttribute('data-bp-sort');
 
-            if (newType !== _this.blocks[i].query_args.type) {
-              _get(_getPrototypeOf(bpMembersWidgetBlock.prototype), "getItems", _this).call(_this, newType, i);
-            }
-          });
+          if (newType !== this.blocks[i].query_args.type) {
+            super.getItems(newType, i);
+          }
         });
       });
-    }
-  }]);
+    });
+  }
 
-  return bpMembersWidgetBlock;
-}(dynamicWidgetBlock);
+}
 
-var settings = window.bpDynamicMembersSettings || {};
-var blocks = window.bpDynamicMembersBlocks || {};
-var bpDynamicMembers = new bpMembersWidgetBlock(settings, blocks);
+const settings = window.bpDynamicMembersSettings || {};
+const blocks = window.bpDynamicMembersBlocks || {};
+const bpDynamicMembers = new bpMembersWidgetBlock(settings, blocks);
 
 if ('loading' === document.readyState) {
   document.addEventListener('DOMContentLoaded', bpDynamicMembers.start());
diff --git src/bp-messages/classes/class-bp-messages-component.php src/bp-messages/classes/class-bp-messages-component.php
index 01105f390..9d1656173 100644
--- src/bp-messages/classes/class-bp-messages-component.php
+++ src/bp-messages/classes/class-bp-messages-component.php
@@ -468,8 +468,8 @@ class BP_Messages_Component extends BP_Component {
 						'wp-components',
 						'wp-i18n',
 						'wp-block-editor',
+						'wp-server-side-render',
 						'bp-block-data',
-						'bp-block-components',
 					),
 					'style'              => 'bp-sitewide-notices-block',
 					'style_url'          => plugins_url( 'css/blocks/sitewide-notices.css', dirname( __FILE__ ) ),
diff --git src/bp-messages/js/blocks/sitewide-notices.js src/bp-messages/js/blocks/sitewide-notices.js
index 683f80566..31b4a16b2 100644
--- src/bp-messages/js/blocks/sitewide-notices.js
+++ src/bp-messages/js/blocks/sitewide-notices.js
@@ -128,34 +128,39 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    InspectorControls = _wp.blockEditor.InspectorControls,
-    _wp$components = _wp.components,
-    Disabled = _wp$components.Disabled,
-    PanelBody = _wp$components.PanelBody,
-    TextControl = _wp$components.TextControl,
-    _wp$element = _wp.element,
-    Fragment = _wp$element.Fragment,
-    createElement = _wp$element.createElement,
-    __ = _wp.i18n.__;
-/**
- * BuddyPress dependencies.
- */
-
-var _bp = bp,
-    ServerSideRender = _bp.blockComponents.ServerSideRender;
-
-var editSitewideNoticesBlock = function editSitewideNoticesBlock(_ref) {
-  var attributes = _ref.attributes,
-      setAttributes = _ref.setAttributes;
-  var title = attributes.title;
+const {
+  blockEditor: {
+    InspectorControls
+  },
+  components: {
+    Disabled,
+    PanelBody,
+    TextControl
+  },
+  element: {
+    Fragment,
+    createElement
+  },
+  i18n: {
+    __
+  },
+  serverSideRender: ServerSideRender
+} = wp;
+
+const editSitewideNoticesBlock = ({
+  attributes,
+  setAttributes
+}) => {
+  const {
+    title
+  } = attributes;
   return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Settings', 'buddypress'),
     initialOpen: true
   }, createElement(TextControl, {
     label: __('Title', 'buddypress'),
     value: title,
-    onChange: function onChange(text) {
+    onChange: text => {
       setAttributes({
         title: text
       });
@@ -179,30 +184,34 @@ exports.default = void 0;
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    createBlock = _wp.blocks.createBlock;
+const {
+  blocks: {
+    createBlock
+  }
+} = wp;
 /**
  * Transforms Legacy Widget to Friends Block.
  *
  * @type {Object}
  */
 
-var transforms = {
+const transforms = {
   from: [{
     type: 'block',
     blocks: ['core/legacy-widget'],
-    isMatch: function isMatch(_ref) {
-      var idBase = _ref.idBase,
-          instance = _ref.instance;
-
+    isMatch: ({
+      idBase,
+      instance
+    }) => {
       if (!(instance !== null && instance !== void 0 && instance.raw)) {
         return false;
       }
 
       return idBase === 'bp_messages_sitewide_notices_widget';
     },
-    transform: function transform(_ref2) {
-      var instance = _ref2.instance;
+    transform: ({
+      instance
+    }) => {
       return createBlock('bp/sitewide-notices', {
         title: instance.raw.title
       });
@@ -223,9 +232,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * WordPress dependencies.
  */
-var _wp = wp,
-    registerBlockType = _wp.blocks.registerBlockType,
-    __ = _wp.i18n.__;
+const {
+  blocks: {
+    registerBlockType
+  },
+  i18n: {
+    __
+  }
+} = wp;
 /**
  * Internal dependencies.
  */
diff --git src/bp-messages/js/sitewide-notices.js src/bp-messages/js/sitewide-notices.js
index d027afa70..eceea12ef 100644
--- src/bp-messages/js/sitewide-notices.js
+++ src/bp-messages/js/sitewide-notices.js
@@ -118,65 +118,51 @@ parcelRequire = (function (modules, cache, entry, globalName) {
 
   return newRequire;
 })({"nIsC":[function(require,module,exports) {
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
 /**
  * Front-end Sitewide notices block class.
  *
  * @since 9.0.0
  */
-var bpSitewideNoticeBlock = /*#__PURE__*/function () {
-  function bpSitewideNoticeBlock(settings) {
-    _classCallCheck(this, bpSitewideNoticeBlock);
-
-    var path = settings.path,
-        dismissPath = settings.dismissPath,
-        root = settings.root,
-        nonce = settings.nonce;
+class bpSitewideNoticeBlock {
+  constructor(settings) {
+    const {
+      path,
+      dismissPath,
+      root,
+      nonce
+    } = settings;
     this.path = path;
     this.dismissPath = dismissPath;
     this.root = root;
     this.nonce = nonce;
   }
 
-  _createClass(bpSitewideNoticeBlock, [{
-    key: "start",
-    value: function start() {
-      var _this = this;
-
-      // Listen to each Block's dismiss button clicks
-      document.querySelectorAll('.bp-sitewide-notice-block a.dismiss-notice').forEach(function (dismissButton) {
-        dismissButton.addEventListener('click', function (event) {
-          event.preventDefault();
-          fetch(_this.root + _this.dismissPath, {
-            method: 'POST',
-            headers: {
-              'X-WP-Nonce': _this.nonce
-            }
-          }).then(function (response) {
-            return response.json();
-          }).then(function (data) {
-            if ('undefined' !== typeof data && 'undefined' !== typeof data.dismissed && data.dismissed) {
-              document.querySelectorAll('.bp-sitewide-notice-block').forEach(function (elem) {
-                elem.remove();
-              });
-            }
-          });
+  start() {
+    // Listen to each Block's dismiss button clicks
+    document.querySelectorAll('.bp-sitewide-notice-block a.dismiss-notice').forEach(dismissButton => {
+      dismissButton.addEventListener('click', event => {
+        event.preventDefault();
+        fetch(this.root + this.dismissPath, {
+          method: 'POST',
+          headers: {
+            'X-WP-Nonce': this.nonce
+          }
+        }).then(response => response.json()).then(data => {
+          if ('undefined' !== typeof data && 'undefined' !== typeof data.dismissed && data.dismissed) {
+            document.querySelectorAll('.bp-sitewide-notice-block').forEach(elem => {
+              elem.remove();
+            });
+          }
         });
       });
-    }
-  }]);
+    });
+  }
 
-  return bpSitewideNoticeBlock;
-}(); // widget_bp_core_sitewide_messages buddypress widget wp-block-bp-sitewide-notices > bp-sitewide-notice > a.dismiss-notice
+} // widget_bp_core_sitewide_messages buddypress widget wp-block-bp-sitewide-notices > bp-sitewide-notice > a.dismiss-notice
 
 
-var settings = window.bpSitewideNoticeBlockSettings || {};
-var bpSitewideNotice = new bpSitewideNoticeBlock(settings);
+const settings = window.bpSitewideNoticeBlockSettings || {};
+const bpSitewideNotice = new bpSitewideNoticeBlock(settings);
 
 if ('loading' === document.readyState) {
   document.addEventListener('DOMContentLoaded', bpSitewideNotice.start());
diff --git src/bp-templates/bp-nouveau/includes/functions.php src/bp-templates/bp-nouveau/includes/functions.php
index a01f82e03..a761586ae 100644
--- src/bp-templates/bp-nouveau/includes/functions.php
+++ src/bp-templates/bp-nouveau/includes/functions.php
@@ -1511,8 +1511,8 @@ function bp_nouveau_register_primary_nav_widget_block( $blocks = array() ) {
 			'wp-components',
 			'wp-i18n',
 			'wp-block-editor',
+			'wp-server-side-render',
 			'bp-block-data',
-			'bp-block-components',
 		),
 		'editor_style'       => 'bp-primary-nav-block',
 		'editor_style_url'   => $editor_style['uri'],
diff --git src/js/bp-activity/js/blocks/latest-activities/edit.js src/js/bp-activity/js/blocks/latest-activities/edit.js
index f5ebcaddc..9d0e984e8 100644
--- src/js/bp-activity/js/blocks/latest-activities/edit.js
+++ src/js/bp-activity/js/blocks/latest-activities/edit.js
@@ -19,15 +19,13 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
 /**
  * BuddyPress dependencies.
  */
 const {
-	blockComponents: {
-		ServerSideRender,
-	},
 	blockData: {
 		currentPostId,
 		activityTypes,
diff --git src/js/bp-blogs/js/blocks/recent-posts/edit.js src/js/bp-blogs/js/blocks/recent-posts/edit.js
index 921087ac0..67450683c 100644
--- src/js/bp-blogs/js/blocks/recent-posts/edit.js
+++ src/js/bp-blogs/js/blocks/recent-posts/edit.js
@@ -19,17 +19,9 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
-/**
- * BuddyPress dependencies.
- */
-const {
-	blockComponents: {
-		ServerSideRender,
-	},
-} = bp;
-
 const editRecentPostsBlock = ( { attributes, setAttributes } ) => {
 	const { title, maxPosts, linkTitle } = attributes;
 
diff --git src/js/bp-core/js/block-components/components/index.js src/js/bp-core/js/block-components/components/index.js
index ea14e9b39..926aa0616 100644
--- src/js/bp-core/js/block-components/components/index.js
+++ src/js/bp-core/js/block-components/components/index.js
@@ -2,9 +2,7 @@
  * BuddyPress components.
  */
 import AutoCompleter from './autocompleter';
-import ServerSideRender from './server-side-render';
 
 export default {
 	AutoCompleter,
-	ServerSideRender,
 };
diff --git src/js/bp-core/js/block-components/components/server-side-render.js src/js/bp-core/js/block-components/components/server-side-render.js
deleted file mode 100644
index cba764ff7..000000000
--- src/js/bp-core/js/block-components/components/server-side-render.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * WordPress dependencies.
- */
-const {
-	element: {
-		createElement,
-	},
-} = wp;
-
-/**
- * Compatibility Server Side Render.
- *
- * @since 9.0.0
- */
- export default function ServerSideRender( props ) {
-	const CompatibiltyServerSideRender = wp.serverSideRender ? wp.serverSideRender : wp.editor.ServerSideRender;
-
-	return (
-		<CompatibiltyServerSideRender { ...props } />
-	);
-}
diff --git src/js/bp-core/js/blocks/login-form/edit.js src/js/bp-core/js/blocks/login-form/edit.js
index 7734dc7d8..36c65c342 100644
--- src/js/bp-core/js/blocks/login-form/edit.js
+++ src/js/bp-core/js/blocks/login-form/edit.js
@@ -18,17 +18,9 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
-/**
- * BuddyPress dependencies.
- */
-const {
-	blockComponents: {
-		ServerSideRender,
-	},
-} = bp;
-
 const editLoginForm = ( { attributes, setAttributes } ) => {
 	const { title,forgotPwdLink } = attributes;
 
diff --git src/js/bp-core/js/blocks/primary-nav/edit.js src/js/bp-core/js/blocks/primary-nav/edit.js
index 8aa4b4375..a9553486c 100644
--- src/js/bp-core/js/blocks/primary-nav/edit.js
+++ src/js/bp-core/js/blocks/primary-nav/edit.js
@@ -18,15 +18,13 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
 /**
  * BuddyPress dependencies.
  */
 const {
-	blockComponents: {
-		ServerSideRender,
-	},
 	blockData: {
 		getCurrentWidgetsSidebar,
 	}
diff --git src/js/bp-friends/js/blocks/friends/edit.js src/js/bp-friends/js/blocks/friends/edit.js
index a5928e51b..1ebb2bd17 100644
--- src/js/bp-friends/js/blocks/friends/edit.js
+++ src/js/bp-friends/js/blocks/friends/edit.js
@@ -19,15 +19,13 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
 /**
  * BuddyPress dependencies.
  */
 const {
-	blockComponents: {
-		ServerSideRender,
-	},
 	blockData: {
 		currentPostId,
 	}
diff --git src/js/bp-groups/js/blocks/dynamic-groups/edit.js src/js/bp-groups/js/blocks/dynamic-groups/edit.js
index b1be4d5b5..719c5ee1c 100644
--- src/js/bp-groups/js/blocks/dynamic-groups/edit.js
+++ src/js/bp-groups/js/blocks/dynamic-groups/edit.js
@@ -20,17 +20,9 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
-/**
- * BuddyPress dependencies.
- */
-const {
-	blockComponents: {
-		ServerSideRender,
-	},
-} = bp;
-
 /**
  * Internal dependencies.
  */
diff --git src/js/bp-groups/js/blocks/group/edit.js src/js/bp-groups/js/blocks/group/edit.js
index 0f44b18b2..46cc34917 100644
--- src/js/bp-groups/js/blocks/group/edit.js
+++ src/js/bp-groups/js/blocks/group/edit.js
@@ -22,6 +22,7 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
 /**
@@ -30,7 +31,6 @@ const {
 const {
 	blockComponents: {
 		AutoCompleter,
-		ServerSideRender,
 	},
 	blockData: {
 		isActive,
diff --git src/js/bp-members/js/blocks/active-members/edit.js src/js/bp-members/js/blocks/active-members/edit.js
index 8b3722b22..c814ccc2e 100644
--- src/js/bp-members/js/blocks/active-members/edit.js
+++ src/js/bp-members/js/blocks/active-members/edit.js
@@ -18,17 +18,9 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
-/**
- * BuddyPress dependencies.
- */
-const {
-	blockComponents: {
-		ServerSideRender,
-	},
-} = bp;
-
 const editActiveMembersBlock = ( { attributes, setAttributes } ) => {
 	const { title, maxMembers } = attributes;
 
diff --git src/js/bp-members/js/blocks/dynamic-members/edit.js src/js/bp-members/js/blocks/dynamic-members/edit.js
index 88b5ee297..afe5c3b85 100644
--- src/js/bp-members/js/blocks/dynamic-members/edit.js
+++ src/js/bp-members/js/blocks/dynamic-members/edit.js
@@ -20,15 +20,13 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
 /**
  * BuddyPress dependencies.
  */
 const {
-	blockComponents: {
-		ServerSideRender,
-	},
 	blockData: {
 		isActive,
 	}
diff --git src/js/bp-members/js/blocks/member/edit.js src/js/bp-members/js/blocks/member/edit.js
index fbafdb359..c3ebbce4e 100644
--- src/js/bp-members/js/blocks/member/edit.js
+++ src/js/bp-members/js/blocks/member/edit.js
@@ -22,6 +22,7 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
 /**
@@ -30,7 +31,6 @@ const {
 const {
 	blockComponents: {
 		AutoCompleter,
-		ServerSideRender,
 	},
 	blockData: {
 		isActive,
diff --git src/js/bp-members/js/blocks/online-members/edit.js src/js/bp-members/js/blocks/online-members/edit.js
index d2157a33f..1c3f78145 100644
--- src/js/bp-members/js/blocks/online-members/edit.js
+++ src/js/bp-members/js/blocks/online-members/edit.js
@@ -18,17 +18,9 @@ const {
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
-/**
- * BuddyPress dependencies.
- */
-const {
-	blockComponents: {
-		ServerSideRender,
-	},
-} = bp;
-
 const editOnlineMembersBlock = ( { attributes, setAttributes } ) => {
 	const { title, maxMembers } = attributes;
 
diff --git src/js/bp-messages/js/blocks/sitewide-notices/edit.js src/js/bp-messages/js/blocks/sitewide-notices/edit.js
index 7c82d7bfc..2d78c4af0 100644
--- src/js/bp-messages/js/blocks/sitewide-notices/edit.js
+++ src/js/bp-messages/js/blocks/sitewide-notices/edit.js
@@ -17,17 +17,9 @@
 	i18n: {
 		__,
 	},
+	serverSideRender: ServerSideRender,
 } = wp;
 
-/**
- * BuddyPress dependencies.
- */
- const {
-	blockComponents: {
-		ServerSideRender,
-	},
-} = bp;
-
 const editSitewideNoticesBlock = ( { attributes, setAttributes } ) => {
 	const { title } = attributes;