Ticket #8048: 8048.patch

.gitignore

@@ -1 +1 @@
 .DS_Store
 phpunit.xml
 .idea
+.cache
 
 lib-cov
 *.seed

.jshintignore

@@ -1 +1 @@
 // 3rd party libraries
 src/bp-core/js/vendor/**/*
 src/bp-messages/js/autocomplete/*
+
+// Blocks Scripts
+src/**/js/blocks/*.js

Gruntfile.js

@@ -17 +17 @@
                         '**/*.js'
                 ],
 
+                BP_EXCLUDED_JS = [
+                        '!js/**/*.js',
+                        '!**/js/blocks/*.js'
+                ],
+
                 BP_EXCLUDED_MISC = [
                 ],
 
@@ -164 +169 @@
                                 expand: true
                         }
                 },
-                makepot: {
-                        target: {
-                                options: {
-                                        cwd: BUILD_DIR,
-                                        domainPath: '.',
-                                        mainFile: 'bp-loader.php',
-                                        potFilename: 'buddypress.pot',
-                                        processPot: function( pot ) {
-                                                pot.headers['report-msgid-bugs-to'] = 'https://buddypress.trac.wordpress.org';
-                                                pot.headers['last-translator'] = 'JOHN JAMES JACOBY <jjj@buddypress.org>';
-                                                pot.headers['language-team'] = 'ENGLISH <jjj@buddypress.org>';
-                                                return pot;
-                                        },
-                                        type: 'wp-plugin'
-                                }
-                        }
-                },
                 imagemin: {
                         core: {
                                 expand: true,
@@ -201 +189 @@
                                                 dest: BUILD_DIR,
                                                 dot: true,
                                                 expand: true,
-                                                src: ['**', '!**/.{svn,git}/**'].concat( BP_EXCLUDED_MISC )
+                                                src: ['**', '!**/.{svn,git,cache}/**', '!js/**'].concat( BP_EXCLUDED_MISC )
                                         },
                                         {
                                                 dest: BUILD_DIR,
@@ -245 +233 @@
                                 extDot: 'last',
                                 expand: true,
                                 ext: '.min.js',
-                                src: BP_JS
+                                src: BP_JS.concat( BP_EXCLUDED_JS, BP_EXCLUDED_MISC )
                         }
                 },
                 stylelint: {
@@ -332 +320 @@
                                 command: 'svn export --force https://github.com/buddypress/BP-REST.git/trunk bp-rest',
                                 cwd: BUILD_DIR,
                                 stdout: false
+                        },
+                        makepot: {
+                                command: 'wp i18n make-pot build build/buddypress.pot --headers=\'{"Project-Id-Version": "BuddyPress", "Report-Msgid-Bugs-To": "https://buddypress.trac.wordpress.org", "Last-Translator": "JOHN JAMES JACOBY <jjj@buddypress.org>", "Language-Team": "ENGLISH <jjj@buddypress.org>"}\'',
+                                stdout: true
+                        },
+                        blocks_build: {
+                                command: 'npm run build',
+                                cwd: SOURCE_DIR,
+                                stdout: true
+                        },
+                        blocks_minify: {
+                                command: 'npm run minify',
+                                cwd: SOURCE_DIR,
+                                stdout: true
                         }
                 },
                 jsvalidate:{
@@ -342 +344 @@
                         },
                         build: {
                                 files: {
-                                        src: [BUILD_DIR + '/**/*.js']
+                                        src: [BUILD_DIR + '/**/*.js'].concat( BP_EXCLUDED_JS, BP_EXCLUDED_MISC )
                                 }
                         },
                         src: {
                                 files: {
-                                        src: [SOURCE_DIR + '/**/*.js'].concat( BP_EXCLUDED_MISC )
+                                        src: [SOURCE_DIR + '/**/*.js'].concat( BP_EXCLUDED_JS, BP_EXCLUDED_MISC )
                                 }
                         }
                 },
@@ -367 +369 @@
          * Register tasks.
          */
         grunt.registerTask( 'src',     ['checkDependencies', 'jsvalidate:src', 'jshint', 'stylelint', 'sass', 'postcss', 'rtlcss'] );
+        grunt.registerTask( 'makepot', ['exec:makepot'] );
         grunt.registerTask( 'commit',  ['src', 'checktextdomain', 'imagemin', 'phplint', 'exec:phpcompat'] );
         grunt.registerTask( 'bp_rest', [ 'exec:rest_api', 'copy:bp_rest_components', 'copy:bp_rest_core', 'clean:bp_rest' ] );
-        grunt.registerTask( 'build',   ['commit', 'clean:all', 'copy:files', 'uglify', 'jsvalidate:build', 'cssmin', 'bp_rest', 'makepot', 'exec:bpdefault', 'exec:cli'] );
+        grunt.registerTask( 'build',   ['commit', 'clean:all', 'copy:files', 'uglify:core', 'jsvalidate:build', 'exec:blocks_build', 'cssmin', 'bp_rest', 'makepot', 'exec:blocks_minify', 'exec:bpdefault', 'exec:cli'] );
         grunt.registerTask( 'release', ['build'] );
 
         // Testing tasks.

composer.json

@@ -31 +31 @@
                 "php": ">=5.3.0"
         },
         "require-dev": {
-                "phpcompatibility/phpcompatibility-wp": "*",
+                "phpcompatibility/phpcompatibility-wp": "*",
                 "dealerdirect/phpcodesniffer-composer-installer": "^0.4.3"
         }
 }

package.json

@@ -5 +5 @@
         },
         "description": "BuddyPress adds community features to WordPress. Member Profiles, Activity Streams, Direct Messaging, Notifications, and more!",
         "devDependencies": {
+                "@babel/core": "~7.8.7",
+                "@wordpress/babel-preset-default": "~4.10.0",
                 "@wordpress/browserslist-config": "~2.1.4",
                 "autoprefixer": "~8.5.2",
                 "grunt": "~1.0.3",
@@ -26 +28 @@
                 "grunt-rtlcss": "~2.0.1",
                 "grunt-sass": "~2.0.0",
                 "grunt-stylelint": "~0.8.0",
-                "grunt-wp-i18n": "~1.0.2",
                 "matchdep": "~1.0.1",
+                "parcel-bundler": "~1.12.4",
                 "postcss-scss": "~1.0.6",
                 "stylelint": "~7.10.1",
                 "stylelint-config-wordpress": "~11.0.0"
@@ -35 +37 @@
         "engines": {
                 "node": ">=6.9.1"
         },
+        "scripts": {
+                "start": "parcel watch src/js/bp-*/*s/blocks/*.js --out-dir src --no-source-maps",
+                "build": "parcel build src/js/bp-*/*s/blocks/*.js --out-dir src --no-source-maps --no-minify",
+                "minify": "parcel build src/js/bp-*/*s/blocks/*.js --out-dir build --no-source-maps"
+        },
         "keywords": [
                 "activity",
                 "community",
@@ -53 +60 @@
                 "url": "https://buddypress.svn.wordpress.org/trunk/"
         },
         "version": "6.0.0-alpha",
-        "dependencies": {},
         "browserslist": [
                 "extends @wordpress/browserslist-config"
         ]

src/bp-core/bp-core-actions.php

@@ -75 +75 @@
 add_action( 'bp_init', 'bp_setup_canonical_stack',   5  );
 add_action( 'bp_init', 'bp_setup_nav',               6  );
 add_action( 'bp_init', 'bp_setup_title',             8  );
+add_action( 'bp_init', 'bp_blocks_init',             10 );
 add_action( 'bp_init', 'bp_core_load_admin_bar_css', 12 );
 add_action( 'bp_init', 'bp_add_rewrite_tags',        20 );
 add_action( 'bp_init', 'bp_add_rewrite_rules',       30 );

new file src/bp-core/bp-core-blocks.php

@@ +1 @@
+<?php
+/**
+ * Core BP Blocks functions.
+ *
+ * @package BuddyPress
+ * @subpackage Core
+ * @since 6.0.0
+ */
+
+// Exit if accessed directly.
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Filters the Block Editor settings to gather BuddyPress ones into a `bp` key.
+ *
+ * @since 6.0.0
+ *
+ * @param array $editor_settings Default editor settings.
+ * @return array The editor settings including BP blocks specific ones.
+ */
+function bp_blocks_editor_settings( $editor_settings = array() ) {
+        /**
+         * Filter here to include your BP Blocks specific settings.
+         *
+         * @since 6.0.0
+         *
+         * @param array $bp_editor_settings BP blocks specific editor settings.
+         */
+        $bp_editor_settings = (array) apply_filters( 'bp_blocks_editor_settings', array() );
+
+        if ( $bp_editor_settings ) {
+                $editor_settings['bp'] = $bp_editor_settings;
+        }
+
+        return $editor_settings;
+}
+add_filter( 'block_editor_settings', 'bp_blocks_editor_settings' );
+
+/**
+ * Register a BuddyPress block type.
+ *
+ * @since 6.0.0
+ *
+ * @param array $args The registration arguments for the block type.
+ * @return BP_Block   The BuddyPress block type object.
+ */
+function bp_register_block( $args = array() ) {
+        return new BP_Block( $args );
+}

src/bp-core/bp-core-dependency.php

@@ -267 +267 @@
         do_action( 'bp_rest_api_init' );
 }
 
+/**
+ * BP Blocks Init hook.
+ *
+ * @since 6.0.0
+ */
+function bp_blocks_init() {
+        /**
+         * Hook here to register your BuddyPress blocks.
+         *
+         * @since 6.0.0
+         */
+        do_action( 'bp_blocks_init' );
+}
+
 /**
  * Fire the 'bp_customize_register' action when the Customizer has loaded,
  * allowing scripts and styles to be initialized.

new file src/bp-core/classes/class-bp-block.php

@@ +1 @@
+<?php
+/**
+ * BP Block class.
+ *
+ * @package bp-blocks
+ * @subpackage \inc\classes\class-bp-block
+ *
+ * @since 6.0.0
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+        exit;
+}
+
+/**
+ * BP Block Class.
+ *
+ * @since 6.0.0
+ */
+class BP_Block {
+        /**
+         * WP Block Type object.
+         *
+         * @since 6.0.0
+         * @var WP_Block_Type|WP_Error
+         */
+        public $block;
+
+        /**
+         * The script types registered.
+         *
+         * @since 6.0.0
+         * @var array
+         */
+        private $registered_scripts;
+
+        /**
+         * The style types registered.
+         *
+         * @since 6.0.0
+         * @var array
+         */
+        private $registered_styles;
+
+        /**
+         * Construct the BuddyPress Block.
+         *
+         * @since 6.0.0
+         *
+         * @param array $args The registration arguments for the BP Block.
+         */
+        public function __construct( $args ) {
+                if ( ! did_action( 'bp_blocks_init' ) ) {
+                        _doing_it_wrong( __METHOD__, esc_html__( 'BP Blocks needs to be registered hooking `bp_blocks_init`', 'buddypress' ), '6.0.0' );
+                }
+
+                $min     = bp_core_get_minified_asset_suffix();
+                $wp_args = array_intersect_key(
+                        $args,
+                        array(
+                                'name'            => '',
+                                'render_callback' => '',
+                                'attributes'      => '',
+                                'editor_script'   => '',
+                                'script'          => '',
+                                'editor_style'    => '',
+                                'style'           => '',
+                        )
+                );
+
+                if ( ! isset( $wp_args['name'] ) || ! $wp_args['name'] || ! isset( $wp_args['editor_script'] ) || ! $wp_args['editor_script'] ) {
+                        $this->block = new WP_Error( 'missing_parameters', __( 'The `name` or `editor_script` required keys are missing.', 'buddypress' ) );
+                } else {
+                        // Get specific BP Blocks arguments.
+                        $bp_args = array_intersect_key(
+                                $args,
+                                array(
+                                        'editor_script_url'  => '',
+                                        'editor_script_deps' => array(),
+                                        'script_url'         => '',
+                                        'script_deps'        => array(),
+                                        'editor_style_url'   => '',
+                                        'editor_style_deps'  => array(),
+                                        'style_url'          => '',
+                                        'style_deps'         => array(),
+                                )
+                        );
+
+                        // Register the scripts.
+                        $version                  = bp_get_version();
+                        $this->registered_scripts = array();
+
+                        foreach ( array( 'editor_script', 'script' ) as $script_handle_key ) {
+                                if ( ! isset( $wp_args[ $script_handle_key ] ) || ! $wp_args[ $script_handle_key ] ) {
+                                        continue;
+                                }
+
+                                if ( ! isset( $bp_args[ $script_handle_key . '_url' ] ) || ! $bp_args[ $script_handle_key . '_url' ] ) {
+                                        continue;
+                                }
+
+                                $deps = array();
+                                if ( isset( $bp_args[ $script_handle_key . '_deps' ] ) && is_array( $bp_args[ $script_handle_key . '_deps' ] ) ) {
+                                        $deps = $bp_args[ $script_handle_key . '_deps' ];
+                                }
+
+                                $this->registered_scripts[ $script_handle_key ] = wp_register_script(
+                                        $wp_args[ $script_handle_key ],
+                                        $bp_args[ $script_handle_key . '_url' ],
+                                        $deps,
+                                        $version,
+                                        true
+                                );
+                        }
+
+                        if ( ! isset( $this->registered_scripts['editor_script'] ) || ! $this->registered_scripts['editor_script'] ) {
+                                $this->block = new WP_Error( 'script_registration_error', __( 'The required `editor_script` could not be registered.', 'buddypress' ) );
+                        } else {
+                                // Register the styles.
+                                $registered_styles = array();
+
+                                foreach ( array( 'editor_style', 'style' ) as $style_handle_key ) {
+                                        if ( ! isset( $wp_args[ $style_handle_key ] ) || ! $wp_args[ $style_handle_key ] ) {
+                                                continue;
+                                        }
+
+                                        if ( ! isset( $bp_args[ $style_handle_key . '_url' ] ) || ! $bp_args[ $style_handle_key . '_url' ] ) {
+                                                continue;
+                                        }
+
+                                        if ( $min ) {
+                                                $minified_css  = str_replace( '.css', $min . '.css', $bp_args[ $style_handle_key . '_url' ] );
+                                                $css_file_path = str_replace( content_url(), WP_CONTENT_DIR, $minified_css );
+
+                                                if ( file_exists( $css_file_path ) ) {
+                                                        $bp_args[ $style_handle_key . '_url' ] = $minified_css;
+                                                }
+                                        }
+
+                                        $deps = array();
+                                        if ( isset( $bp_args[ $style_handle_key . '_deps' ] ) && is_array( $bp_args[ $style_handle_key . '_deps' ] ) ) {
+                                                $deps = $bp_args[ $style_handle_key . '_deps' ];
+                                        }
+
+                                        $this->registered_styles[ $style_handle_key ] = wp_register_style(
+                                                $wp_args[ $style_handle_key ],
+                                                $bp_args[ $style_handle_key . '_url' ],
+                                                $deps,
+                                                $version
+                                        );
+
+                                        wp_style_add_data( $wp_args[ $style_handle_key ], 'rtl', 'replace' );
+                                        if ( $min ) {
+                                                wp_style_add_data( $wp_args[ $style_handle_key ], 'suffix', $min );
+                                        }
+                                }
+
+                                $name = $wp_args['name'];
+                                unset( $wp_args['name'] );
+
+                                // Set the Block Type.
+                                $this->block = new WP_Block_Type( $name, $wp_args );
+
+                                // Register the Block Type.
+                                register_block_type( $this->block );
+
+                                // Load Block translations if found.
+                                if ( $this->block->editor_script ) {
+                                        /**
+                                         * Filter here to use a custom directory to look for the JSON translation file into.
+                                         *
+                                         * @since 6.0.0
+                                         *
+                                         * @param string $value         Absolute path to the directory to look for the JSON translation file into.
+                                         * @param string $editor_script The editor's script handle.
+                                         * @param string $name          The block's name.
+                                         */
+                                        $translation_dir = apply_filters( 'bp_block_translation_dir', null, $this->block->editor_script, $name );
+
+                                        /**
+                                         * Filter here to use a custom domain for the JSON translation file.
+                                         *
+                                         * @since 6.0.0
+                                         *
+                                         * @param string $value         The custom domain for the JSON translation file.
+                                         * @param string $editor_script The editor's script handle.
+                                         * @param string $name          The block's name.
+                                         */
+                                        $domain = apply_filters( 'bp_block_translation_dir', 'buddypress', $this->block->editor_script, $name );
+
+                                        // Try to load the translation.
+                                        $translated = wp_set_script_translations( $this->block->editor_script, $domain, $translation_dir );
+                                }
+                        }
+                }
+        }
+}

new file src/bp-core/js/blocks/bp-autocompleter.js

@@ +1 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"kUj2":[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;
+},{}],"dMjH":[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;
+},{}],"FlpK":[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;
+},{}],"oXBW":[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;
+},{}],"cbGp":[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":"FlpK","./assertThisInitialized":"oXBW"}],"XApn":[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;
+},{}],"Omxx":[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;
+},{}],"PhTw":[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":"Omxx"}],"xHsb":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * WordPress dependencies.
+ */
+var _wp$element = wp.element,
+    Component = _wp$element.Component,
+    Fragment = _wp$element.Fragment,
+    createElement = _wp$element.createElement;
+var Popover = wp.components.Popover;
+var _wp = wp,
+    apiFetch = _wp.apiFetch;
+var __ = wp.i18n.__;
+
+var BPAutocompleter = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BPAutocompleter, _Component);
+
+  function BPAutocompleter() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BPAutocompleter);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(BPAutocompleter).apply(this, 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;
+  }
+
+  (0, _createClass2.default)(BPAutocompleter, [{
+    key: "searchItemName",
+    value: function searchItemName(value) {
+      var _this2 = this;
+
+      var search = this.state.search;
+      var _this$props = this.props,
+          component = _this$props.component,
+          objectStatus = _this$props.objectStatus;
+      this.setState({
+        search: value
+      });
+
+      if (value.length < search.length) {
+        this.setState({
+          items: []
+        });
+      }
+
+      var path = '/buddypress/v1/' + component;
+
+      if (value) {
+        path += '?search=' + encodeURIComponent(value);
+      }
+
+      if (objectStatus) {
+        path += '&status=' + objectStatus;
+      }
+
+      apiFetch({
+        path: path
+      }).then(function (items) {
+        _this2.setState({
+          items: items
+        });
+      }, function (error) {
+        _this2.setState({
+          error: error.message
+        });
+      });
+    }
+  }, {
+    key: "selectItemName",
+    value: function selectItemName(event, itemID) {
+      var onSelectItem = this.props.onSelectItem;
+      event.preventDefault();
+      this.setState({
+        search: '',
+        items: [],
+        error: ''
+      });
+      return onSelectItem({
+        itemID: itemID
+      });
+    }
+  }, {
+    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;
+      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
+          }), createElement("span", {
+            key: "name",
+            className: "editor-autocompleters__user-name"
+          }, item.name), item.mention_name && createElement("span", {
+            key: "slug",
+            className: "editor-autocompleters__user-slug"
+          }, item.mention_name));
+        });
+      }
+
+      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)));
+    }
+  }]);
+  return BPAutocompleter;
+}(Component);
+
+var _default = BPAutocompleter;
+exports.default = _default;
+},{"@babel/runtime/helpers/classCallCheck":"kUj2","@babel/runtime/helpers/createClass":"dMjH","@babel/runtime/helpers/possibleConstructorReturn":"cbGp","@babel/runtime/helpers/getPrototypeOf":"XApn","@babel/runtime/helpers/assertThisInitialized":"oXBW","@babel/runtime/helpers/inherits":"PhTw"}]},{},["xHsb"], null)
+ No newline at end of file

new file src/bp-groups/bp-groups-blocks.php

@@ +1 @@
+<?php
+/**
+ * BP Groups Blocks Functions.
+ *
+ * @package   bp-blocks
+ * @subpackage \inc\bp-groups\bp-groups-blocks
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+        exit;
+}
+
+/**
+ * Register Groups Blocks.
+ *
+ * @since 6.0.0
+ */
+function bp_groups_register_blocks() {
+        bp_register_block(
+                array(
+                        'name'               => 'bp/group',
+                        'editor_script'      => 'bp-group-block',
+                        'editor_script_url'  => plugins_url( 'js/blocks/group.js', __FILE__ ),
+                        'editor_script_deps' => array(
+                                'wp-blocks',
+                                'wp-element',
+                                'wp-components',
+                                'wp-i18n',
+                                'wp-api-fetch',
+                                'wp-editor',
+                                'wp-compose',
+                                'wp-data',
+                                'wp-block-editor',
+                        ),
+                        'style'              => 'bp-group-block',
+                        'style_url'          => plugins_url( 'css/blocks/group.css', __FILE__ ),
+                        'render_callback'    => 'bp_groups_render_group_block',
+                        'attributes'         => array(
+                                'itemID'              => array(
+                                        'type'    => 'integer',
+                                        'default' => 0,
+                                ),
+                                'avatarSize'          => array(
+                                        'type'    => 'string',
+                                        'default' => 'full',
+                                ),
+                                'displayDescription'  => array(
+                                        'type'    => 'boolean',
+                                        'default' => true,
+                                ),
+                                'displayActionButton' => array(
+                                        'type'    => 'boolean',
+                                        'default' => true,
+                                ),
+                                'displayCoverImage'   => array(
+                                        'type'    => 'boolean',
+                                        'default' => true,
+                                ),
+                        ),
+                )
+        );
+}
+add_action( 'bp_blocks_init', 'bp_groups_register_blocks', 10 );
+
+/**
+ * Add BP Groups blocks specific settings to the BP Blocks Editor ones.
+ *
+ * @since 6.0.0
+ *
+ * @param array $bp_editor_settings BP blocks editor settings.
+ * @return array BP Groups blocks editor settings.
+ */
+function bp_groups_editor_settings( $bp_editor_settings = array() ) {
+        $bp = buddypress();
+
+        return array_merge(
+                $bp_editor_settings,
+                array(
+                        'groups' => array(
+                                'isAvatarEnabled'     => $bp->avatar && $bp->avatar->show_avatars && ! bp_disable_group_avatar_uploads(),
+                                'isCoverImageEnabled' => bp_is_active( 'groups', 'cover_image' ),
+                        ),
+                )
+        );
+}
+add_filter( 'bp_blocks_editor_settings', 'bp_groups_editor_settings' );
+
+/**
+ * Callback function to render the BP Group Block.
+ *
+ * @since 6.0.0
+ *
+ * @param array $attributes The block attributes.
+ * @return string           HTML output.
+ */
+function bp_groups_render_group_block( $attributes = array() ) {
+        $bp = buddypress();
+
+        $block_args = wp_parse_args(
+                $attributes,
+                array(
+                        'itemID'              => 0,
+                        'avatarSize'          => 'full',
+                        'displayDescription'  => true,
+                        'displayActionButton' => true,
+                        'displayCoverImage'   => true,
+                )
+        );
+
+        if ( ! $block_args['itemID'] ) {
+                return;
+        }
+
+        // Set the group ID and container classes.
+        $group_id          = (int) $block_args['itemID'];
+        $container_classes = array( 'bp-block-group' );
+
+        // Group object.
+        $group = groups_get_group( $group_id );
+
+        if ( ! $group->id ) {
+                return;
+        }
+
+        // Avatar variables.
+        $avatar           = '';
+        $avatar_container = '';
+
+        // Cover image variable.
+        $cover_image     = '';
+        $cover_style     = '';
+        $cover_container = '';
+
+        // Group name/link/description variables.
+        $group_name        = bp_get_group_name( $group );
+        $group_link        = bp_get_group_permalink( $group );
+        $group_description = '';
+        $group_content     = '';
+
+        // Group action button.
+        $action_button         = '';
+        $display_action_button = (bool) $block_args['displayActionButton'];
+
+        if ( $bp->avatar && $bp->avatar->show_avatars && ! bp_disable_group_avatar_uploads() && in_array( $block_args['avatarSize'], array( 'thumb', 'full' ), true ) ) {
+                $avatar = bp_core_fetch_avatar(
+                        array(
+                                'item_id' => $group->id,
+                                'object'  => 'group',
+                                'type'    => $block_args['avatarSize'],
+                                'html'    => false,
+                        )
+                );
+
+                $container_classes[] = 'avatar-' . $block_args['avatarSize'];
+        } else {
+                $container_classes[] = 'avatar-none';
+        }
+
+        if ( $avatar ) {
+                $avatar_container = sprintf(
+                        '<div class="item-header-avatar">
+                                <a href="%1$s">
+                                        <img src="%2$s" alt="%3$s" class="avatar">
+                                </a>
+                        </div>',
+                        esc_url( $group_link ),
+                        esc_url( $avatar ),
+                        // Translators: %s is the group's name.
+                        sprintf( esc_html__( 'Group Profile photo of %s', 'buddypress' ), $group_name )
+                );
+        }
+
+        $display_cover_image = (bool) $block_args['displayCoverImage'];
+        if ( bp_is_active( 'groups', 'cover_image' ) && $display_cover_image ) {
+                $cover_image = bp_attachments_get_attachment(
+                        'url',
+                        array(
+                                'item_id'    => $group->id,
+                                'object_dir' => 'groups',
+                        )
+                );
+
+                if ( $cover_image ) {
+                        $cover_style = sprintf(
+                                ' style="background-image: url( %s );"',
+                                esc_url( $cover_image )
+                        );
+                }
+
+                $cover_container = sprintf(
+                        '<div class="bp-group-cover-image"%s></div>',
+                        $cover_style
+                );
+
+                $container_classes[] = 'has-cover';
+        }
+
+        $display_description = (bool) $block_args['displayDescription'];
+        if ( $display_description ) {
+                $group_description = bp_get_group_description( $group );
+                $group_content     = sprintf(
+                        '<div class="group-description-content">%s</div>',
+                        $group_description
+                );
+
+                $container_classes[] = 'has-description';
+        }
+
+        if ( $display_action_button ) {
+                $action_button = sprintf(
+                        '<div class="bp-profile-button">
+                                <a href="%1$s" class="button large primary button-primary" role="button">%2$s</a>
+                        </div>',
+                        esc_url( $group_link ),
+                        esc_html__( 'Visit Group', 'buddypress' )
+                );
+        }
+
+        $output = sprintf(
+                '<div class="%1$s">
+                        %2$s
+                        <div class="group-content">
+                                %3$s
+                                <div class="group-description">
+                                        <strong><a href="%4$s">%5$s</a></strong>
+                                        %6$s
+                                        %7$s
+                                </div>
+                        </div>
+                </div>',
+                implode( ' ', array_map( 'sanitize_html_class', $container_classes ) ),
+                $cover_container,
+                $avatar_container,
+                esc_url( $group_link ),
+                esc_html( $group_name ),
+                $group_content,
+                $action_button
+        );
+
+        // Compact all interesting parameters.
+        $params = array_merge( $block_args, compact( 'group_name', 'group_link', 'group_description', 'avatar', 'cover_image' ) );
+
+        /**
+         * Filter here to edit the output of the single group block.
+         *
+         * @since 6.0.0
+         *
+         * @param string          $output The HTML output of the block.
+         * @param BP_Groups_Group $group  The group object.
+         * @param array           $params The block extended parameters.
+         */
+        return apply_filters( 'bp_groups_render_group_block_output', $output, $group, $params );
+}

src/bp-groups/classes/class-bp-groups-component.php

@@ -130 +130 @@
                         'functions',
                         'notifications',
                         'cssjs',
+                        'blocks',
                 );
 
                 // Conditional includes.

new file src/bp-groups/css/blocks/group-rtl.css

@@ +1 @@
+/* CSS for the bp/group block */
+.bp-block-group {
+        position: relative;
+}
+
+.bp-block-group .group-content {
+        display: flex;
+}
+
+.bp-block-group.has-cover .group-content,
+.bp-block-group.has-cover .item-header-avatar,
+.bp-block-group.has-cover .group-description {
+        z-index: 2;
+}
+
+.bp-block-group .group-description {
+        width: 100%;
+}
+
+.bp-block-group.has-cover .group-description {
+        padding-top: 75px;
+}
+
+.bp-block-group.avatar-full .group-description {
+        padding-right: 35px;
+}
+
+.bp-block-group.has-cover .bp-group-cover-image {
+        background-color: #c5c5c5;
+        background-position: center top;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border: 0;
+        display: block;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+        height: 150px;
+}
+
+.bp-block-group img.avatar {
+        width: auto;
+        height: auto;
+}
+
+.bp-block-group.avatar-none .item-header-avatar {
+        display: none;
+}
+
+.bp-block-group.avatar-none.has-cover {
+        min-height: 200px;
+}
+
+.bp-block-group.avatar-full {
+        min-height: 150px;
+}
+
+.bp-block-group.avatar-full.has-cover {
+        min-height: 300px;
+}
+
+.bp-block-group.avatar-full .item-header-avatar {
+        width: 180px;
+}
+
+.bp-block-group.has-cover.avatar-full .item-header-avatar {
+        width: 200px;
+}
+
+.bp-block-group.has-cover.avatar-full img.avatar {
+        border: solid 2px #fff;
+        background: rgba(255, 255, 255, 0.8);
+        margin-right: 20px;
+}
+
+.bp-block-group.has-cover .group-content {
+        padding-top: 75px;
+}
+
+.bp-block-group.avatar-thumb .item-header-avatar img.avatar {
+        margin-top: 15px;
+}
+
+.bp-block-group.avatar-thumb:not(.has-description) .group-content {
+        min-height: 50px;
+        align-items: center;
+}
+
+.bp-block-group .group-description-content {
+        width: 100%;
+        margin-bottom: 18px;
+}
+
+.bp-block-group.avatar-thumb .item-header-avatar {
+        width: 70px;
+}
+
+.bp-block-group.avatar-thumb.has-cover .item-header-avatar {
+        padding-top: 75px;
+}
+
+.bp-block-group .bp-profile-button {
+        width: 100%;
+        overflow: hidden;
+}
+
+.bp-block-group .bp-profile-button a.button {
+        margin: 18px 0 0;
+}
+
+.bp-block-group.has-description .bp-profile-button a.button {
+        display: block;
+        float: left;
+}

new file src/bp-groups/css/blocks/group.css

@@ +1 @@
+/* CSS for the bp/group block */
+.bp-block-group {
+        position: relative;
+}
+
+.bp-block-group .group-content {
+        display: flex;
+}
+
+.bp-block-group.has-cover .group-content,
+.bp-block-group.has-cover .item-header-avatar,
+.bp-block-group.has-cover .group-description {
+        z-index: 2;
+}
+
+.bp-block-group .group-description {
+        width: 100%;
+}
+
+.bp-block-group.has-cover .group-description {
+        padding-top: 75px;
+}
+
+.bp-block-group.avatar-full .group-description {
+        padding-left: 35px;
+}
+
+.bp-block-group.has-cover .bp-group-cover-image {
+        background-color: #c5c5c5;
+        background-position: center top;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border: 0;
+        display: block;
+        left: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+        height: 150px;
+}
+
+.bp-block-group img.avatar {
+        width: auto;
+        height: auto;
+}
+
+.bp-block-group.avatar-none .item-header-avatar {
+        display: none;
+}
+
+.bp-block-group.avatar-none.has-cover {
+        min-height: 200px;
+}
+
+.bp-block-group.avatar-full {
+        min-height: 150px;
+}
+
+.bp-block-group.avatar-full.has-cover {
+        min-height: 300px;
+}
+
+.bp-block-group.avatar-full .item-header-avatar {
+        width: 180px;
+}
+
+.bp-block-group.has-cover.avatar-full .item-header-avatar {
+        width: 200px;
+}
+
+.bp-block-group.has-cover.avatar-full img.avatar {
+        border: solid 2px #fff;
+        background: rgba(255, 255, 255, 0.8);
+        margin-left: 20px;
+}
+
+.bp-block-group.has-cover .group-content {
+        padding-top: 75px;
+}
+
+.bp-block-group.avatar-thumb .item-header-avatar img.avatar {
+        margin-top: 15px;
+}
+
+.bp-block-group.avatar-thumb:not(.has-description) .group-content {
+        min-height: 50px;
+        align-items: center;
+}
+
+.bp-block-group .group-description-content {
+        width: 100%;
+        margin-bottom: 18px;
+}
+
+.bp-block-group.avatar-thumb .item-header-avatar {
+        width: 70px;
+}
+
+.bp-block-group.avatar-thumb.has-cover .item-header-avatar {
+        padding-top: 75px;
+}
+
+.bp-block-group .bp-profile-button {
+        width: 100%;
+        overflow: hidden;
+}
+
+.bp-block-group .bp-profile-button a.button {
+        margin: 18px 0 0;
+}
+
+.bp-block-group.has-description .bp-profile-button a.button {
+        display: block;
+        float: right;
+}

new file src/bp-groups/js/blocks/group.js

@@ +1 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"kUj2":[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;
+},{}],"dMjH":[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;
+},{}],"FlpK":[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;
+},{}],"oXBW":[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;
+},{}],"cbGp":[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":"FlpK","./assertThisInitialized":"oXBW"}],"XApn":[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;
+},{}],"Omxx":[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;
+},{}],"PhTw":[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":"Omxx"}],"xHsb":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * WordPress dependencies.
+ */
+var _wp$element = wp.element,
+    Component = _wp$element.Component,
+    Fragment = _wp$element.Fragment,
+    createElement = _wp$element.createElement;
+var Popover = wp.components.Popover;
+var _wp = wp,
+    apiFetch = _wp.apiFetch;
+var __ = wp.i18n.__;
+
+var BPAutocompleter = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BPAutocompleter, _Component);
+
+  function BPAutocompleter() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BPAutocompleter);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(BPAutocompleter).apply(this, 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;
+  }
+
+  (0, _createClass2.default)(BPAutocompleter, [{
+    key: "searchItemName",
+    value: function searchItemName(value) {
+      var _this2 = this;
+
+      var search = this.state.search;
+      var _this$props = this.props,
+          component = _this$props.component,
+          objectStatus = _this$props.objectStatus;
+      this.setState({
+        search: value
+      });
+
+      if (value.length < search.length) {
+        this.setState({
+          items: []
+        });
+      }
+
+      var path = '/buddypress/v1/' + component;
+
+      if (value) {
+        path += '?search=' + encodeURIComponent(value);
+      }
+
+      if (objectStatus) {
+        path += '&status=' + objectStatus;
+      }
+
+      apiFetch({
+        path: path
+      }).then(function (items) {
+        _this2.setState({
+          items: items
+        });
+      }, function (error) {
+        _this2.setState({
+          error: error.message
+        });
+      });
+    }
+  }, {
+    key: "selectItemName",
+    value: function selectItemName(event, itemID) {
+      var onSelectItem = this.props.onSelectItem;
+      event.preventDefault();
+      this.setState({
+        search: '',
+        items: [],
+        error: ''
+      });
+      return onSelectItem({
+        itemID: itemID
+      });
+    }
+  }, {
+    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;
+      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
+          }), createElement("span", {
+            key: "name",
+            className: "editor-autocompleters__user-name"
+          }, item.name), item.mention_name && createElement("span", {
+            key: "slug",
+            className: "editor-autocompleters__user-slug"
+          }, item.mention_name));
+        });
+      }
+
+      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)));
+    }
+  }]);
+  return BPAutocompleter;
+}(Component);
+
+var _default = BPAutocompleter;
+exports.default = _default;
+},{"@babel/runtime/helpers/classCallCheck":"kUj2","@babel/runtime/helpers/createClass":"dMjH","@babel/runtime/helpers/possibleConstructorReturn":"cbGp","@babel/runtime/helpers/getPrototypeOf":"XApn","@babel/runtime/helpers/assertThisInitialized":"oXBW","@babel/runtime/helpers/inherits":"PhTw"}],"pvse":[function(require,module,exports) {
+"use strict";
+
+var _bpAutocompleter = _interopRequireDefault(require("../../../bp-core/js/blocks/bp-autocompleter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * WordPress dependencies.
+ */
+var registerBlockType = wp.blocks.registerBlockType;
+var _wp$element = wp.element,
+    createElement = _wp$element.createElement,
+    Fragment = _wp$element.Fragment;
+var _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;
+var _wp$blockEditor = wp.blockEditor,
+    InspectorControls = _wp$blockEditor.InspectorControls,
+    BlockControls = _wp$blockEditor.BlockControls;
+var withSelect = wp.data.withSelect;
+var compose = wp.compose.compose;
+var ServerSideRender = wp.editor.ServerSideRender;
+var __ = wp.i18n.__;
+/**
+ * Internal dependencies.
+ */
+
+var AVATAR_SIZES = [{
+  label: __('None', 'buddypress'),
+  value: 'none'
+}, {
+  label: __('Thumb', 'buddypress'),
+  value: 'thumb'
+}, {
+  label: __('Full', 'buddypress'),
+  value: 'full'
+}];
+
+var editGroup = function editGroup(_ref) {
+  var attributes = _ref.attributes,
+      setAttributes = _ref.setAttributes,
+      bpSettings = _ref.bpSettings;
+  var isAvatarEnabled = bpSettings.isAvatarEnabled,
+      isCoverImageEnabled = bpSettings.isCoverImageEnabled;
+  var avatarSize = attributes.avatarSize,
+      displayDescription = attributes.displayDescription,
+      displayActionButton = attributes.displayActionButton,
+      displayCoverImage = attributes.displayCoverImage;
+
+  if (!attributes.itemID) {
+    return createElement(Placeholder, {
+      icon: "buddicons-groups",
+      label: __('BuddyPress Group', 'buddypress'),
+      instructions: __('Start typing the name of the group you want to feature into this post.', 'buddypress')
+    }, createElement(_bpAutocompleter.default, {
+      component: "groups",
+      objectStatus: "public",
+      ariaLabel: __('Group\'s name', 'buddypress'),
+      placeholder: __('Enter Group\'s name here…', 'buddypress'),
+      onSelectItem: setAttributes,
+      useAvatar: isAvatarEnabled
+    }));
+  }
+
+  return createElement(Fragment, null, createElement(BlockControls, null, createElement(Toolbar, null, createElement(ToolbarButton, {
+    icon: "edit",
+    title: __('Select another group', 'buddypress'),
+    onClick: function onClick() {
+      setAttributes({
+        itemID: 0
+      });
+    }
+  }))), createElement(InspectorControls, null, createElement(PanelBody, {
+    title: __('Group\'s home button settings', 'buddypress'),
+    initialOpen: true
+  }, createElement(ToggleControl, {
+    label: __('Display Group\'s home button', 'buddypress'),
+    checked: !!displayActionButton,
+    onChange: function onChange() {
+      setAttributes({
+        displayActionButton: !displayActionButton
+      });
+    },
+    help: displayActionButton ? __('Include a link to the group\'s home page under their name.', 'buddypress') : __('Toggle to display a link to the group\'s home page under their name.', 'buddypress')
+  })), createElement(PanelBody, {
+    title: __('Description settings', 'buddypress'),
+    initialOpen: false
+  }, createElement(ToggleControl, {
+    label: __('Display group\'s description', 'buddypress'),
+    checked: !!displayDescription,
+    onChange: function onChange() {
+      setAttributes({
+        displayDescription: !displayDescription
+      });
+    },
+    help: displayDescription ? __('Include the group\'s description under their name.', 'buddypress') : __('Toggle to display the group\'s description under their name.', 'buddypress')
+  })), isAvatarEnabled && createElement(PanelBody, {
+    title: __('Avatar settings', 'buddypress'),
+    initialOpen: false
+  }, createElement(SelectControl, {
+    label: __('Size', 'buddypress'),
+    value: avatarSize,
+    options: AVATAR_SIZES,
+    onChange: function onChange(option) {
+      setAttributes({
+        avatarSize: option
+      });
+    }
+  })), isCoverImageEnabled && createElement(PanelBody, {
+    title: __('Cover image settings', 'buddypress'),
+    initialOpen: false
+  }, createElement(ToggleControl, {
+    label: __('Display Cover Image', 'buddypress'),
+    checked: !!displayCoverImage,
+    onChange: function onChange() {
+      setAttributes({
+        displayCoverImage: !displayCoverImage
+      });
+    },
+    help: displayCoverImage ? __('Include the group\'s cover image over their name.', 'buddypress') : __('Toggle to display the group\'s cover image over their name.', 'buddypress')
+  }))), createElement(Disabled, null, createElement(ServerSideRender, {
+    block: "bp/group",
+    attributes: attributes
+  })));
+};
+
+var editGroupBlock = compose([withSelect(function (select) {
+  var editorSettings = select('core/editor').getEditorSettings();
+  return {
+    bpSettings: editorSettings.bp.groups || {}
+  };
+})])(editGroup);
+registerBlockType('bp/group', {
+  title: __('Group', 'buddypress'),
+  description: __('BuddyPress Group.', 'buddypress'),
+  icon: 'buddicons-groups',
+  category: 'buddypress',
+  attributes: {
+    itemID: {
+      type: 'integer',
+      default: 0
+    },
+    avatarSize: {
+      type: 'string',
+      default: 'full'
+    },
+    displayDescription: {
+      type: 'boolean',
+      default: true
+    },
+    displayActionButton: {
+      type: 'boolean',
+      default: true
+    },
+    displayCoverImage: {
+      type: 'boolean',
+      default: true
+    }
+  },
+  edit: editGroupBlock
+});
+},{"../../../bp-core/js/blocks/bp-autocompleter":"xHsb"}]},{},["pvse"], null)
+ No newline at end of file

new file src/bp-members/bp-members-blocks.php

@@ +1 @@
+<?php
+/**
+ * BP Members Blocks Functions.
+ *
+ * @package   bp-blocks
+ * @subpackage \inc\bp-members\bp-members-blocks
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+        exit;
+}
+
+/**
+ * Register Members Blocks.
+ *
+ * @since 6.0.0
+ */
+function bp_members_register_blocks() {
+        bp_register_block(
+                array(
+                        'name'               => 'bp/member',
+                        'editor_script'      => 'bp-member-block',
+                        'editor_script_url'  => plugins_url( 'js/blocks/member.js', __FILE__ ),
+                        'editor_script_deps' => array(
+                                'wp-blocks',
+                                'wp-element',
+                                'wp-components',
+                                'wp-i18n',
+                                'wp-api-fetch',
+                                'wp-editor',
+                                'wp-compose',
+                                'wp-data',
+                                'wp-block-editor',
+                        ),
+                        'style'              => 'bp-member-block',
+                        'style_url'          => plugins_url( 'css/blocks/member.css', __FILE__ ),
+                        'render_callback'    => 'bp_members_render_member_block',
+                        'attributes'         => array(
+                                'itemID'              => array(
+                                        'type'    => 'integer',
+                                        'default' => 0,
+                                ),
+                                'avatarSize'          => array(
+                                        'type'    => 'string',
+                                        'default' => 'full',
+                                ),
+                                'displayMentionSlug'  => array(
+                                        'type'    => 'boolean',
+                                        'default' => true,
+                                ),
+                                'displayActionButton' => array(
+                                        'type'    => 'boolean',
+                                        'default' => true,
+                                ),
+                                'displayCoverImage'   => array(
+                                        'type'    => 'boolean',
+                                        'default' => true,
+                                ),
+                        ),
+                )
+        );
+}
+add_action( 'bp_blocks_init', 'bp_members_register_blocks', 10 );
+
+/**
+ * Add BP Members blocks specific settings to the BP Blocks Editor ones.
+ *
+ * @since 6.0.0
+ *
+ * @param array $bp_editor_settings BP blocks editor settings.
+ * @return array BP Members blocks editor settings.
+ */
+function bp_members_editor_settings( $bp_editor_settings = array() ) {
+        $bp = buddypress();
+
+        return array_merge(
+                $bp_editor_settings,
+                array(
+                        'members' => array(
+                                'isMentionEnabled'    => bp_is_active( 'activity' ) && bp_activity_do_mentions(),
+                                'isAvatarEnabled'     => $bp->avatar && $bp->avatar->show_avatars,
+                                'isCoverImageEnabled' => bp_is_active( 'members', 'cover_image' ),
+                        ),
+                )
+        );
+}
+add_filter( 'bp_blocks_editor_settings', 'bp_members_editor_settings' );
+
+/**
+ * Callback function to render the BP Member Block.
+ *
+ * @since 6.0.0
+ *
+ * @param array $attributes The block attributes.
+ * @return string           HTML output.
+ */
+function bp_members_render_member_block( $attributes = array() ) {
+        $bp = buddypress();
+
+        $block_args = wp_parse_args(
+                $attributes,
+                array(
+                        'itemID'              => 0,
+                        'avatarSize'          => 'full',
+                        'displayMentionSlug'  => true,
+                        'displayActionButton' => true,
+                        'displayCoverImage'   => true,
+                )
+        );
+
+        if ( ! $block_args['itemID'] ) {
+                return;
+        }
+
+        // Set the member ID and container classes.
+        $member_id         = (int) $block_args['itemID'];
+        $container_classes = array( 'bp-block-member' );
+
+        // Mention variables.
+        $username   = bp_core_get_username( $member_id );
+        $at_mention = '';
+
+        // Avatar variables.
+        $avatar           = '';
+        $avatar_container = '';
+
+        // Cover image variable.
+        $cover_image     = '';
+        $cover_style     = '';
+        $cover_container = '';
+
+        // Member name variables.
+        $display_name = bp_core_get_user_displayname( $member_id );
+        $member_link  = bp_core_get_user_domain( $member_id );
+
+        // Member action button.
+        $action_button         = '';
+        $display_action_button = (bool) $block_args['displayActionButton'];
+
+        if ( $bp->avatar && $bp->avatar->show_avatars && in_array( $block_args['avatarSize'], array( 'thumb', 'full' ), true ) ) {
+                $avatar = bp_core_fetch_avatar(
+                        array(
+                                'item_id' => $member_id,
+                                'object'  => 'user',
+                                'type'    => $block_args['avatarSize'],
+                                'html'    => false,
+                        )
+                );
+
+                $container_classes[] = 'avatar-' . $block_args['avatarSize'];
+        } else {
+                $container_classes[] = 'avatar-none';
+        }
+
+        if ( $avatar ) {
+                $avatar_container = sprintf(
+                        '<div class="item-header-avatar">
+                                <a href="%1$s">
+                                        <img src="%2$s" alt="%3$s" class="avatar">
+                                </a>
+                        </div>',
+                        esc_url( $member_link ),
+                        esc_url( $avatar ),
+                        // Translators: %s is the member's display name.
+                        sprintf( esc_html__( 'Profile photo of %s', 'buddypress' ), $display_name )
+                );
+        }
+
+        $display_cover_image = (bool) $block_args['displayCoverImage'];
+        if ( bp_is_active( 'members', 'cover_image' ) && $display_cover_image ) {
+                $cover_image = bp_attachments_get_attachment(
+                        'url',
+                        array(
+                                'item_id' => $member_id,
+                        )
+                );
+
+                if ( $cover_image ) {
+                        $cover_style = sprintf(
+                                ' style="background-image: url( %s );"',
+                                esc_url( $cover_image )
+                        );
+                }
+
+                $cover_container = sprintf(
+                        '<div class="bp-member-cover-image"%s></div>',
+                        $cover_style
+                );
+
+                $container_classes[] = 'has-cover';
+        }
+
+        $display_mention_slug = (bool) $block_args['displayMentionSlug'];
+        if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() && $display_mention_slug ) {
+                $at_mention = sprintf(
+                        '<span class="user-nicename">@%s</span>',
+                        esc_html( $username )
+                );
+        }
+
+        if ( $display_action_button ) {
+                $action_button = sprintf(
+                        '<div class="bp-profile-button">
+                                <a href="%1$s" class="button large primary button-primary" role="button">%2$s</a>
+                        </div>',
+                        esc_url( $member_link ),
+                        esc_html__( 'View Profile', 'buddypress' )
+                );
+        }
+
+        $output = sprintf(
+                '<div class="%1$s">
+                        %2$s
+                        <div class="member-content">
+                                %3$s
+                                <div class="member-description">
+                                        <strong><a href="%4$s">%5$s</a></strong>
+                                        %6$s
+                                        %7$s
+                                </div>
+                        </div>
+                </div>',
+                implode( ' ', array_map( 'sanitize_html_class', $container_classes ) ),
+                $cover_container,
+                $avatar_container,
+                esc_url( $member_link ),
+                esc_html( $display_name ),
+                $at_mention,
+                $action_button
+        );
+
+        // Compact all interesting parameters.
+        $params = array_merge( $block_args, compact( 'username', 'display_name', 'member_link', 'avatar', 'cover_image' ) );
+
+        /**
+         * Filter here to edit the output of the single member block.
+         *
+         * @since 6.0.0
+         *
+         * @param string          $output The HTML output of the block.
+         * @param array           $params The block extended parameters.
+         */
+        return apply_filters( 'bp_members_render_member_block_output', $output, $params );
+}

src/bp-members/classes/class-bp-members-component.php

@@ -61 +61 @@
                         'template',
                         'adminbar',
                         'functions',
+                        'blocks',
                         'widgets',
                         'cache',
                 );

new file src/bp-members/css/blocks/member-rtl.css

@@ +1 @@
+/* CSS for the bp/member block */
+.bp-block-member {
+        position: relative;
+}
+
+.bp-block-member .member-content {
+        display: flex;
+}
+
+.bp-block-member.has-cover .member-content,
+.bp-block-member.has-cover .item-header-avatar,
+.bp-block-member.has-cover .member-description {
+        z-index: 2;
+}
+
+.bp-block-member.has-cover .member-description {
+        padding-top: 75px;
+}
+
+.bp-block-member.has-cover .bp-member-cover-image {
+        background-color: #c5c5c5;
+        background-position: center top;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border: 0;
+        display: block;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+        height: 150px;
+}
+
+.bp-block-member img.avatar {
+        width: auto;
+        height: auto;
+}
+
+.bp-block-member.avatar-none .item-header-avatar {
+        display: none;
+}
+
+.bp-block-member.avatar-none.has-cover {
+        min-height: 200px;
+}
+
+.bp-block-member.avatar-full {
+        min-height: 150px;
+}
+
+.bp-block-member.avatar-full.has-cover {
+        min-height: 300px;
+}
+
+.bp-block-member.avatar-full .item-header-avatar {
+        width: 180px;
+}
+
+.bp-block-member.has-cover.avatar-full .item-header-avatar {
+        width: 200px;
+}
+
+.bp-block-member.has-cover.avatar-full img.avatar {
+        border: solid 2px #fff;
+        background: rgba(255, 255, 255, 0.8);
+        margin-right: 20px;
+}
+
+.bp-block-member.has-cover .member-content {
+        padding-top: 75px;
+}
+
+.bp-block-member.avatar-thumb .member-content {
+        min-height: 50px;
+        align-items: center;
+}
+
+.bp-block-member.avatar-thumb .item-header-avatar {
+        width: 70px;
+}
+
+.bp-block-member.avatar-thumb.has-cover .item-header-avatar {
+        padding-top: 75px;
+}
+
+.bp-block-member .user-nicename {
+        display: block;
+}
+
+.bp-block-member .user-nicename a,
+.entry .entry-content .bp-block-member .user-nicename a {
+        color: currentColor;
+        text-decoration: none;
+        border: none;
+}
+
+.bp-block-member .bp-profile-button {
+        width: 100%;
+}
+
+.bp-block-member .bp-profile-button a.button {
+        position: absolute;
+        bottom: 10px;
+        left: 0;
+        display: inline-block;
+        margin: 18px 0 0;
+}

new file src/bp-members/css/blocks/member.css

@@ +1 @@
+/* CSS for the bp/member block */
+.bp-block-member {
+        position: relative;
+}
+
+.bp-block-member .member-content {
+        display: flex;
+}
+
+.bp-block-member.has-cover .member-content,
+.bp-block-member.has-cover .item-header-avatar,
+.bp-block-member.has-cover .member-description {
+        z-index: 2;
+}
+
+.bp-block-member.has-cover .member-description {
+        padding-top: 75px;
+}
+
+.bp-block-member.has-cover .bp-member-cover-image {
+        background-color: #c5c5c5;
+        background-position: center top;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border: 0;
+        display: block;
+        left: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+        height: 150px;
+}
+
+.bp-block-member img.avatar {
+        width: auto;
+        height: auto;
+}
+
+.bp-block-member.avatar-none .item-header-avatar {
+        display: none;
+}
+
+.bp-block-member.avatar-none.has-cover {
+        min-height: 200px;
+}
+
+.bp-block-member.avatar-full {
+        min-height: 150px;
+}
+
+.bp-block-member.avatar-full.has-cover {
+        min-height: 300px;
+}
+
+.bp-block-member.avatar-full .item-header-avatar {
+        width: 180px;
+}
+
+.bp-block-member.has-cover.avatar-full .item-header-avatar {
+        width: 200px;
+}
+
+.bp-block-member.has-cover.avatar-full img.avatar {
+        border: solid 2px #fff;
+        background: rgba(255, 255, 255, 0.8);
+        margin-left: 20px;
+}
+
+.bp-block-member.has-cover .member-content {
+        padding-top: 75px;
+}
+
+.bp-block-member.avatar-thumb .member-content {
+        min-height: 50px;
+        align-items: center;
+}
+
+.bp-block-member.avatar-thumb .item-header-avatar {
+        width: 70px;
+}
+
+.bp-block-member.avatar-thumb.has-cover .item-header-avatar {
+        padding-top: 75px;
+}
+
+.bp-block-member .user-nicename {
+        display: block;
+}
+
+.bp-block-member .user-nicename a,
+.entry .entry-content .bp-block-member .user-nicename a {
+        color: currentColor;
+        text-decoration: none;
+        border: none;
+}
+
+.bp-block-member .bp-profile-button {
+        width: 100%;
+}
+
+.bp-block-member .bp-profile-button a.button {
+        position: absolute;
+        bottom: 10px;
+        right: 0;
+        display: inline-block;
+        margin: 18px 0 0;
+}

new file src/bp-members/js/blocks/member.js

@@ +1 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"kUj2":[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;
+},{}],"dMjH":[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;
+},{}],"FlpK":[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;
+},{}],"oXBW":[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;
+},{}],"cbGp":[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":"FlpK","./assertThisInitialized":"oXBW"}],"XApn":[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;
+},{}],"Omxx":[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;
+},{}],"PhTw":[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":"Omxx"}],"xHsb":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * WordPress dependencies.
+ */
+var _wp$element = wp.element,
+    Component = _wp$element.Component,
+    Fragment = _wp$element.Fragment,
+    createElement = _wp$element.createElement;
+var Popover = wp.components.Popover;
+var _wp = wp,
+    apiFetch = _wp.apiFetch;
+var __ = wp.i18n.__;
+
+var BPAutocompleter = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BPAutocompleter, _Component);
+
+  function BPAutocompleter() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BPAutocompleter);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(BPAutocompleter).apply(this, 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;
+  }
+
+  (0, _createClass2.default)(BPAutocompleter, [{
+    key: "searchItemName",
+    value: function searchItemName(value) {
+      var _this2 = this;
+
+      var search = this.state.search;
+      var _this$props = this.props,
+          component = _this$props.component,
+          objectStatus = _this$props.objectStatus;
+      this.setState({
+        search: value
+      });
+
+      if (value.length < search.length) {
+        this.setState({
+          items: []
+        });
+      }
+
+      var path = '/buddypress/v1/' + component;
+
+      if (value) {
+        path += '?search=' + encodeURIComponent(value);
+      }
+
+      if (objectStatus) {
+        path += '&status=' + objectStatus;
+      }
+
+      apiFetch({
+        path: path
+      }).then(function (items) {
+        _this2.setState({
+          items: items
+        });
+      }, function (error) {
+        _this2.setState({
+          error: error.message
+        });
+      });
+    }
+  }, {
+    key: "selectItemName",
+    value: function selectItemName(event, itemID) {
+      var onSelectItem = this.props.onSelectItem;
+      event.preventDefault();
+      this.setState({
+        search: '',
+        items: [],
+        error: ''
+      });
+      return onSelectItem({
+        itemID: itemID
+      });
+    }
+  }, {
+    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;
+      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
+          }), createElement("span", {
+            key: "name",
+            className: "editor-autocompleters__user-name"
+          }, item.name), item.mention_name && createElement("span", {
+            key: "slug",
+            className: "editor-autocompleters__user-slug"
+          }, item.mention_name));
+        });
+      }
+
+      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)));
+    }
+  }]);
+  return BPAutocompleter;
+}(Component);
+
+var _default = BPAutocompleter;
+exports.default = _default;
+},{"@babel/runtime/helpers/classCallCheck":"kUj2","@babel/runtime/helpers/createClass":"dMjH","@babel/runtime/helpers/possibleConstructorReturn":"cbGp","@babel/runtime/helpers/getPrototypeOf":"XApn","@babel/runtime/helpers/assertThisInitialized":"oXBW","@babel/runtime/helpers/inherits":"PhTw"}],"TmUL":[function(require,module,exports) {
+"use strict";
+
+var _bpAutocompleter = _interopRequireDefault(require("../../../bp-core/js/blocks/bp-autocompleter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * WordPress dependencies.
+ */
+var registerBlockType = wp.blocks.registerBlockType;
+var _wp$element = wp.element,
+    createElement = _wp$element.createElement,
+    Fragment = _wp$element.Fragment;
+var _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;
+var _wp$blockEditor = wp.blockEditor,
+    InspectorControls = _wp$blockEditor.InspectorControls,
+    BlockControls = _wp$blockEditor.BlockControls;
+var withSelect = wp.data.withSelect;
+var compose = wp.compose.compose;
+var ServerSideRender = wp.editor.ServerSideRender;
+var __ = wp.i18n.__;
+/**
+ * Internal dependencies.
+ */
+
+var AVATAR_SIZES = [{
+  label: __('None', 'buddypress'),
+  value: 'none'
+}, {
+  label: __('Thumb', 'buddypress'),
+  value: 'thumb'
+}, {
+  label: __('Full', 'buddypress'),
+  value: 'full'
+}];
+
+var editMember = function editMember(_ref) {
+  var attributes = _ref.attributes,
+      setAttributes = _ref.setAttributes,
+      bpSettings = _ref.bpSettings;
+  var isAvatarEnabled = bpSettings.isAvatarEnabled,
+      isMentionEnabled = bpSettings.isMentionEnabled,
+      isCoverImageEnabled = bpSettings.isCoverImageEnabled;
+  var avatarSize = attributes.avatarSize,
+      displayMentionSlug = attributes.displayMentionSlug,
+      displayActionButton = attributes.displayActionButton,
+      displayCoverImage = attributes.displayCoverImage;
+
+  if (!attributes.itemID) {
+    return createElement(Placeholder, {
+      icon: "admin-users",
+      label: __('BuddyPress Member', 'buddypress'),
+      instructions: __('Start typing the name of the member you want to feature into this post.', 'buddypress')
+    }, createElement(_bpAutocompleter.default, {
+      component: "members",
+      ariaLabel: __('Member\'s username', 'buddypress'),
+      placeholder: __('Enter Member\'s username here…', 'buddypress'),
+      onSelectItem: setAttributes,
+      useAvatar: isAvatarEnabled
+    }));
+  }
+
+  return createElement(Fragment, null, createElement(BlockControls, null, createElement(Toolbar, null, createElement(ToolbarButton, {
+    icon: "edit",
+    title: __('Select another member', 'buddypress'),
+    onClick: function onClick() {
+      setAttributes({
+        itemID: 0
+      });
+    }
+  }))), createElement(InspectorControls, null, createElement(PanelBody, {
+    title: __('Profile button settings', 'buddypress'),
+    initialOpen: true
+  }, createElement(ToggleControl, {
+    label: __('Display Profile button', 'buddypress'),
+    checked: !!displayActionButton,
+    onChange: function onChange() {
+      setAttributes({
+        displayActionButton: !displayActionButton
+      });
+    },
+    help: displayActionButton ? __('Include a link to the user\'s profile page under their display name.', 'buddypress') : __('Toggle to display a link to the user\'s profile page under their display name.', 'buddypress')
+  })), isAvatarEnabled && createElement(PanelBody, {
+    title: __('Avatar settings', 'buddypress'),
+    initialOpen: false
+  }, createElement(SelectControl, {
+    label: __('Size', 'buddypress'),
+    value: avatarSize,
+    options: AVATAR_SIZES,
+    onChange: function onChange(option) {
+      setAttributes({
+        avatarSize: option
+      });
+    }
+  })), isCoverImageEnabled && createElement(PanelBody, {
+    title: __('Cover image settings', 'buddypress'),
+    initialOpen: false
+  }, createElement(ToggleControl, {
+    label: __('Display Cover Image', 'buddypress'),
+    checked: !!displayCoverImage,
+    onChange: function onChange() {
+      setAttributes({
+        displayCoverImage: !displayCoverImage
+      });
+    },
+    help: displayCoverImage ? __('Include the user\'s cover image over their display name.', 'buddypress') : __('Toggle to display the user\'s cover image over their display name.', 'buddypress')
+  })), isMentionEnabled && createElement(PanelBody, {
+    title: __('Mention settings', 'buddypress'),
+    initialOpen: false
+  }, createElement(ToggleControl, {
+    label: __('Display Mention slug', 'buddypress'),
+    checked: !!displayMentionSlug,
+    onChange: function onChange() {
+      setAttributes({
+        displayMentionSlug: !displayMentionSlug
+      });
+    },
+    help: displayMentionSlug ? __('Include the user\'s mention name under their display name.', 'buddypress') : __('Toggle to display the user\'s mention name under their display name.', 'buddypress')
+  }))), createElement(Disabled, null, createElement(ServerSideRender, {
+    block: "bp/member",
+    attributes: attributes
+  })));
+};
+
+var editMemberBlock = compose([withSelect(function (select) {
+  var editorSettings = select('core/editor').getEditorSettings();
+  return {
+    bpSettings: editorSettings.bp.members || {}
+  };
+})])(editMember);
+registerBlockType('bp/member', {
+  title: __('Member', 'buddypress'),
+  description: __('BuddyPress Member.', 'buddypress'),
+  icon: 'admin-users',
+  category: 'buddypress',
+  attributes: {
+    itemID: {
+      type: 'integer',
+      default: 0
+    },
+    avatarSize: {
+      type: 'string',
+      default: 'full'
+    },
+    displayMentionSlug: {
+      type: 'boolean',
+      default: true
+    },
+    displayActionButton: {
+      type: 'boolean',
+      default: true
+    },
+    displayCoverImage: {
+      type: 'boolean',
+      default: true
+    }
+  },
+  edit: editMemberBlock
+});
+},{"../../../bp-core/js/blocks/bp-autocompleter":"xHsb"}]},{},["TmUL"], null)
+ No newline at end of file

src/class-buddypress.php

@@ -488 +488 @@
                 require( $this->plugin_dir . 'bp-core/bp-core-loader.php'           );
                 require( $this->plugin_dir . 'bp-core/bp-core-customizer-email.php' );
                 require( $this->plugin_dir . 'bp-core/bp-core-rest-api.php'         );
+                require( $this->plugin_dir . 'bp-core/bp-core-blocks.php'           );
 
                 // Maybe load deprecated functionality (this double negative is proof positive!).
                 if ( ! bp_get_option( '_bp_ignore_deprecated_code', ! $this->load_deprecated ) ) {
@@ -554 +555 @@
                         'BP_Attachment_Cover_Image'                  => 'core',
                         'BP_Attachment'                              => 'core',
                         'BP_Button'                                  => 'core',
+                        'BP_Block'                                   => 'core',
                         'BP_Component'                               => 'core',
                         'BP_Customizer_Control_Range'                => 'core',
                         'BP_Date_Query'                              => 'core',

new file src/js/bp-core/js/blocks/.babelrc

@@ +1 @@
+{
+        "presets": ["@wordpress/default"]
+}

new file src/js/bp-core/js/blocks/bp-autocompleter.js

@@ +1 @@
+/**
+ * WordPress dependencies.
+ */
+const { Component, Fragment, createElement } = wp.element;
+const { Popover } = wp.components;
+const { apiFetch } = wp;
+const { __ } = wp.i18n;
+
+class BPAutocompleter extends Component {
+        constructor() {
+                super( ...arguments );
+
+                this.state = {
+                        search: '',
+                        items: [],
+                        error: '',
+                };
+
+                this.searchItemName = this.searchItemName.bind( this );
+                this.selectItemName = this.selectItemName.bind( this );
+        }
+
+        searchItemName( value ) {
+                const { search } = this.state;
+                const { component, objectStatus } = this.props;
+                this.setState( { search: value } );
+
+                if ( value.length < search.length ) {
+                        this.setState( { items: [] } );
+                }
+
+                let path= '/buddypress/v1/' + component;
+
+                if ( value ) {
+                        path += '?search=' + encodeURIComponent( value );
+                }
+
+                if ( objectStatus ) {
+                        path += '&status=' + objectStatus;
+                }
+
+                apiFetch( { path:  path } ).then( items => {
+                        this.setState( { items: items } );
+                }, error => {
+                        this.setState( { error: error.message } );
+                } );
+        }
+
+        selectItemName( event, itemID ) {
+                const { onSelectItem } = this.props;
+                event.preventDefault();
+
+                this.setState( {
+                        search: '',
+                        items: [],
+                        error: '',
+                } );
+
+                return onSelectItem( { itemID: itemID } );
+        }
+
+        render() {
+                const { search, items } = this.state;
+                let { ariaLabel, placeholder, useAvatar } = this.props;
+                let itemsList;
+
+                if ( ! ariaLabel ) {
+                        ariaLabel = __( 'Item\'s name', 'buddypress' );
+                }
+
+                if ( ! placeholder ) {
+                        placeholder = __( 'Enter Item\'s name here…', 'buddypress' );
+                }
+
+                if ( items.length ) {
+                        itemsList = items.map( ( item ) => {
+                                return (
+                                        <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 && (
+                                                        <img key="avatar" className="editor-autocompleters__user-avatar" alt="" src={ item.avatar_urls.thumb } />
+                                                ) }
+                                                <span key="name" className="editor-autocompleters__user-name">{ item.name }</span>
+
+                                                { item.mention_name && (
+                                                        <span key="slug" className="editor-autocompleters__user-slug">{ item.mention_name }</span>
+                                                ) }
+                                        </button>
+                                );
+                        } );
+                }
+
+                return (
+                        <Fragment>
+                                <input
+                                        type="text"
+                                        value={ search }
+                                        className="components-placeholder__input"
+                                        aria-label={ ariaLabel }
+                                        placeholder={ placeholder }
+                                        onChange={ ( event ) => this.searchItemName( event.target.value ) }
+                                />
+                                { 0 !== items.length &&
+                                        <Popover
+                                                className="components-autocomplete__popover"
+                                                focusOnMount={ false }
+                                                position="bottom left"
+                                        >
+                                                <div className="components-autocomplete__results">
+                                                        { itemsList }
+                                                </div>
+                                        </Popover>
+                                }
+                        </Fragment>
+                );
+        }
+}
+
+export default BPAutocompleter;

new file src/js/bp-groups/js/blocks/.babelrc

@@ +1 @@
+{
+        "presets": ["@wordpress/default"]
+}

new file src/js/bp-groups/js/blocks/group.js

@@ +1 @@
+/**
+ * WordPress dependencies.
+ */
+const { registerBlockType } = wp.blocks;
+const { createElement, Fragment } = wp.element;
+const { Placeholder, Disabled, PanelBody, SelectControl, ToggleControl, Toolbar, ToolbarButton } = wp.components;
+const { InspectorControls, BlockControls } = wp.blockEditor;
+const { withSelect } = wp.data;
+const { compose } = wp.compose;
+const { ServerSideRender } = wp.editor;
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies.
+ */
+import BPAutocompleter from '../../../bp-core/js/blocks/bp-autocompleter';
+
+const AVATAR_SIZES = [
+        {
+                label: __( 'None', 'buddypress' ),
+                value: 'none',
+        },
+        {
+                label: __( 'Thumb', 'buddypress' ),
+                value: 'thumb',
+        },
+        {
+                label: __( 'Full', 'buddypress' ),
+                value: 'full',
+        },
+];
+
+const editGroup = ( { attributes, setAttributes, bpSettings } ) => {
+        const { isAvatarEnabled, isCoverImageEnabled } = bpSettings;
+        const { avatarSize, displayDescription, displayActionButton, displayCoverImage } = attributes;
+
+        if ( ! attributes.itemID ) {
+                return (
+                        <Placeholder
+                                icon="buddicons-groups"
+                                label={ __( 'BuddyPress Group', 'buddypress' ) }
+                                instructions={ __( 'Start typing the name of the group you want to feature into this post.', 'buddypress' ) }
+                        >
+                                <BPAutocompleter
+                                        component="groups"
+                                        objectStatus="public"
+                                        ariaLabel={ __( 'Group\'s name', 'buddypress' ) }
+                                        placeholder={ __( 'Enter Group\'s name here…', 'buddypress' ) }
+                                        onSelectItem={ setAttributes }
+                                        useAvatar={ isAvatarEnabled }
+                                />
+                        </Placeholder>
+                );
+        }
+
+        return (
+                <Fragment>
+                        <BlockControls>
+                                <Toolbar>
+                                        <ToolbarButton
+                                                icon="edit"
+                                                title={ __( 'Select another group', 'buddypress' ) }
+                                                onClick={ () =>{
+                                                        setAttributes( { itemID: 0 } );
+                                                } }
+                                        />
+                                </Toolbar>
+                        </BlockControls>
+                        <InspectorControls>
+                                <PanelBody title={ __( 'Group\'s home button settings', 'buddypress' ) } initialOpen={ true }>
+                                        <ToggleControl
+                                                label={ __( 'Display Group\'s home button', 'buddypress' ) }
+                                                checked={ !! displayActionButton }
+                                                onChange={ () => {
+                                                        setAttributes( { displayActionButton: ! displayActionButton } );
+                                                } }
+                                                help={
+                                                        displayActionButton
+                                                                ? __( 'Include a link to the group\'s home page under their name.', 'buddypress' )
+                                                                : __( 'Toggle to display a link to the group\'s home page under their name.', 'buddypress' )
+                                                }
+                                        />
+                                </PanelBody>
+                                <PanelBody title={ __( 'Description settings', 'buddypress' ) } initialOpen={ false }>
+                                        <ToggleControl
+                                                label={ __( 'Display group\'s description', 'buddypress' ) }
+                                                checked={ !! displayDescription }
+                                                onChange={ () => {
+                                                        setAttributes( { displayDescription: ! displayDescription } );
+                                                } }
+                                                help={
+                                                        displayDescription
+                                                                ? __( 'Include the group\'s description under their name.', 'buddypress' )
+                                                                : __( 'Toggle to display the group\'s description under their name.', 'buddypress' )
+                                                }
+                                        />
+                                </PanelBody>
+                                { isAvatarEnabled && (
+                                        <PanelBody title={ __( 'Avatar settings', 'buddypress' ) } initialOpen={ false }>
+                                                <SelectControl
+                                                        label={ __( 'Size', 'buddypress' ) }
+                                                        value={ avatarSize }
+                                                        options={ AVATAR_SIZES }
+                                                        onChange={ ( option ) => {
+                                                                setAttributes( { avatarSize: option } );
+                                                        } }
+                                                />
+                                        </PanelBody>
+                                ) }
+                                { isCoverImageEnabled && (
+                                        <PanelBody title={ __( 'Cover image settings', 'buddypress' ) } initialOpen={ false }>
+                                                <ToggleControl
+                                                        label={ __( 'Display Cover Image', 'buddypress' ) }
+                                                        checked={ !! displayCoverImage }
+                                                        onChange={ () => {
+                                                                setAttributes( { displayCoverImage: ! displayCoverImage } );
+                                                        } }
+                                                        help={
+                                                                displayCoverImage
+                                                                        ? __( 'Include the group\'s cover image over their name.', 'buddypress' )
+                                                                        : __( 'Toggle to display the group\'s cover image over their name.', 'buddypress' )
+                                                        }
+                                                />
+                                        </PanelBody>
+                                ) }
+                        </InspectorControls>
+                        <Disabled>
+                                <ServerSideRender block="bp/group" attributes={ attributes } />
+                        </Disabled>
+                </Fragment>
+        );
+};
+
+const editGroupBlock = compose( [
+        withSelect( ( select ) => {
+                const editorSettings = select( 'core/editor' ).getEditorSettings();
+                return {
+                        bpSettings: editorSettings.bp.groups || {},
+                };
+        } ),
+] )( editGroup );
+
+registerBlockType( 'bp/group', {
+        title: __( 'Group', 'buddypress' ),
+
+        description: __( 'BuddyPress Group.', 'buddypress' ),
+
+        icon: 'buddicons-groups',
+
+        category: 'buddypress',
+
+        attributes: {
+                itemID: {
+                        type: 'integer',
+                        default: 0,
+                },
+                avatarSize: {
+                        type: 'string',
+                        default: 'full',
+                },
+                displayDescription: {
+                        type: 'boolean',
+                        default: true,
+                },
+                displayActionButton: {
+                        type: 'boolean',
+                        default: true,
+                },
+                displayCoverImage: {
+                        type: 'boolean',
+                        default: true,
+                },
+        },
+
+        edit: editGroupBlock,
+} );

new file src/js/bp-members/js/blocks/.babelrc

@@ +1 @@
+{
+        "presets": ["@wordpress/default"]
+}

new file src/js/bp-members/js/blocks/member.js

@@ +1 @@
+/**
+ * WordPress dependencies.
+ */
+const { registerBlockType } = wp.blocks;
+const { createElement, Fragment } = wp.element;
+const { Placeholder, Disabled, PanelBody, SelectControl, ToggleControl, Toolbar, ToolbarButton } = wp.components;
+const { InspectorControls, BlockControls } = wp.blockEditor;
+const { withSelect } = wp.data;
+const { compose } = wp.compose;
+const { ServerSideRender } = wp.editor;
+const { __ } = wp.i18n;
+
+/**
+ * Internal dependencies.
+ */
+import BPAutocompleter from '../../../bp-core/js/blocks/bp-autocompleter';
+
+const AVATAR_SIZES = [
+        {
+                label: __( 'None', 'buddypress' ),
+                value: 'none',
+        },
+        {
+                label: __( 'Thumb', 'buddypress' ),
+                value: 'thumb',
+        },
+        {
+                label: __( 'Full', 'buddypress' ),
+                value: 'full',
+        },
+];
+
+const editMember = ( { attributes, setAttributes, bpSettings } ) => {
+        const { isAvatarEnabled, isMentionEnabled, isCoverImageEnabled } = bpSettings;
+        const { avatarSize, displayMentionSlug, displayActionButton, displayCoverImage } = attributes;
+
+        if ( ! attributes.itemID ) {
+                return (
+                        <Placeholder
+                                icon="admin-users"
+                                label={ __( 'BuddyPress Member', 'buddypress' ) }
+                                instructions={ __( 'Start typing the name of the member you want to feature into this post.', 'buddypress' ) }
+                        >
+                                <BPAutocompleter
+                                        component="members"
+                                        ariaLabel={ __( 'Member\'s username', 'buddypress' ) }
+                                        placeholder={ __( 'Enter Member\'s username here…', 'buddypress' ) }
+                                        onSelectItem={ setAttributes }
+                                        useAvatar={ isAvatarEnabled }
+                                />
+                        </Placeholder>
+                );
+        }
+
+        return (
+                <Fragment>
+                        <BlockControls>
+                                <Toolbar>
+                                        <ToolbarButton
+                                                icon="edit"
+                                                title={ __( 'Select another member', 'buddypress' ) }
+                                                onClick={ () =>{
+                                                        setAttributes( { itemID: 0 } );
+                                                } }
+                                        />
+                                </Toolbar>
+                        </BlockControls>
+                        <InspectorControls>
+                                <PanelBody title={ __( 'Profile button settings', 'buddypress' ) } initialOpen={ true }>
+                                        <ToggleControl
+                                                label={ __( 'Display Profile button', 'buddypress' ) }
+                                                checked={ !! displayActionButton }
+                                                onChange={ () => {
+                                                        setAttributes( { displayActionButton: ! displayActionButton } );
+                                                } }
+                                                help={
+                                                        displayActionButton
+                                                                ? __( 'Include a link to the user\'s profile page under their display name.', 'buddypress' )
+                                                                : __( 'Toggle to display a link to the user\'s profile page under their display name.', 'buddypress' )
+                                                }
+                                        />
+                                </PanelBody>
+                                { isAvatarEnabled && (
+                                        <PanelBody title={ __( 'Avatar settings', 'buddypress' ) } initialOpen={ false }>
+                                                <SelectControl
+                                                        label={ __( 'Size', 'buddypress' ) }
+                                                        value={ avatarSize }
+                                                        options={ AVATAR_SIZES }
+                                                        onChange={ ( option ) => {
+                                                                setAttributes( { avatarSize: option } );
+                                                        } }
+                                                />
+                                        </PanelBody>
+                                ) }
+                                { isCoverImageEnabled && (
+                                        <PanelBody title={ __( 'Cover image settings', 'buddypress' ) } initialOpen={ false }>
+                                                <ToggleControl
+                                                        label={ __( 'Display Cover Image', 'buddypress' ) }
+                                                        checked={ !! displayCoverImage }
+                                                        onChange={ () => {
+                                                                setAttributes( { displayCoverImage: ! displayCoverImage } );
+                                                        } }
+                                                        help={
+                                                                displayCoverImage
+                                                                        ? __( 'Include the user\'s cover image over their display name.', 'buddypress' )
+                                                                        : __( 'Toggle to display the user\'s cover image over their display name.', 'buddypress' )
+                                                        }
+                                                />
+                                        </PanelBody>
+                                ) }
+                                { isMentionEnabled && (
+                                        <PanelBody title={ __( 'Mention settings', 'buddypress' ) } initialOpen={ false }>
+                                                <ToggleControl
+                                                        label={ __( 'Display Mention slug', 'buddypress' ) }
+                                                        checked={ !! displayMentionSlug }
+                                                        onChange={ () => {
+                                                                setAttributes( { displayMentionSlug: ! displayMentionSlug } );
+                                                        } }
+                                                        help={
+                                                                displayMentionSlug
+                                                                        ? __( 'Include the user\'s mention name under their display name.', 'buddypress' )
+                                                                        : __( 'Toggle to display the user\'s mention name under their display name.', 'buddypress' )
+                                                        }
+                                                />
+                                        </PanelBody>
+                                ) }
+                        </InspectorControls>
+                        <Disabled>
+                                <ServerSideRender block="bp/member" attributes={ attributes } />
+                        </Disabled>
+                </Fragment>
+        );
+};
+
+const editMemberBlock = compose( [
+        withSelect( ( select ) => {
+                const editorSettings = select( 'core/editor' ).getEditorSettings();
+                return {
+                        bpSettings: editorSettings.bp.members || {},
+                };
+        } ),
+] )( editMember );
+
+registerBlockType( 'bp/member', {
+        title: __( 'Member', 'buddypress' ),
+
+        description: __( 'BuddyPress Member.', 'buddypress' ),
+
+        icon: 'admin-users',
+
+        category: 'buddypress',
+
+        attributes: {
+                itemID: {
+                        type: 'integer',
+                        default: 0,
+                },
+                avatarSize: {
+                        type: 'string',
+                        default: 'full',
+                },
+                displayMentionSlug: {
+                        type: 'boolean',
+                        default: true,
+                },
+                displayActionButton: {
+                        type: 'boolean',
+                        default: true,
+                },
+                displayCoverImage: {
+                        type: 'boolean',
+                        default: true,
+                },
+        },
+
+        edit: editMemberBlock,
+} );