Ticket #8517: 8517.patch

Gruntfile.js

@@ -37 +37 @@
                         '!bp-members/css/blocks/member.css',
                         '!bp-groups/css/blocks/group.css',
                         '!bp-members/css/blocks/members.css',
-                        '!bp-groups/css/blocks/groups.css'
+                        '!bp-groups/css/blocks/groups.css',
+                        '!bp-core/css/blocks/login-form.css'
                 ],
 
                 autoprefixer = require('autoprefixer');
@@ -147 +148 @@
                                 flatten: true,
                                 src: ['bp-groups/sass/blocks/*.scss'],
                                 dest: SOURCE_DIR + 'bp-groups/css/blocks/'
+                        },
+                        core_blocks: {
+                                cwd: SOURCE_DIR,
+                                extDot: 'last',
+                                expand: true,
+                                ext: '.css',
+                                flatten: true,
+                                src: ['bp-core/sass/blocks/*.scss'],
+                                dest: SOURCE_DIR + 'bp-core/css/blocks/'
                         }
                 },
                 rtlcss: {

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

@@ -210 +210 @@
         return $classname;
 }
 add_filter( 'widget_block_dynamic_classname', 'bp_widget_block_dynamic_classname', 10, 2 );
+
+/**
+ * Create a link to the registration form for use on the bottom of the login form widget.
+ *
+ * @since 9.0.0
+ *
+ * @param string $content Content to display. Default empty.
+ * @param array  $args    Array of login form arguments.
+ * @return string         HTML output.
+ */
+function bp_blocks_get_login_widget_registration_link( $content = '', $args = array() ) {
+        if ( isset( $args['form_id'] ) && 'bp-login-widget-form' === $args['form_id'] && bp_get_signup_allowed() ) {
+                $content .= sprintf(
+                        '<p class="bp-login-widget-register-link"><a href="%1$s">%2$s</a></p>',
+                        esc_url( bp_get_signup_page() ),
+                        esc_html__( 'Register', 'buddypress' )
+                );
+        }
+
+        $action_output = '';
+        if ( has_action( 'bp_login_widget_form' ) ) {
+                ob_start();
+                /**
+                 * Fires inside the display of the login widget form.
+                 *
+                 * @since 2.4.0
+                 */
+                do_action( 'bp_login_widget_form' );
+                $action_output = ob_get_clean();
+        }
+
+        if ( $action_output ) {
+                $content .= $action_output;
+        }
+
+        return $content;
+}
+
+/**
+ * Callback function to render the BP Login Form.
+ *
+ * @since 9.0.0
+ *
+ * @param array $attributes The block attributes.
+ * @return string           HTML output.
+ */
+function bp_block_render_login_form_block( $attributes = array() ) {
+        $block_args = wp_parse_args(
+                $attributes,
+                array(
+                        'title' => '',
+                )
+        );
+
+        $title = $block_args['title'];
+
+        $classnames         = 'widget_bp_core_login_widget buddypress widget';
+        $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+
+        $widget_content = '';
+
+        if ( $title ) {
+                $widget_content .= sprintf(
+                        '<h2 class="widget-title">%s</h2>',
+                        esc_html( $title )
+                );
+        }
+
+        if ( is_user_logged_in() ) {
+                $action_output = '';
+                if ( has_action( 'bp_before_login_widget_loggedin' ) ) {
+                        ob_start();
+                        /**
+                         * Fires before the display of widget content if logged in.
+                         *
+                         * @since 1.9.0
+                         */
+                        do_action( 'bp_before_login_widget_loggedin' );
+                        $action_output = ob_get_clean();
+                }
+
+                if ( $action_output ) {
+                        $widget_content .= $action_output;
+                }
+
+                $widget_content .= sprintf(
+                        '<div class="bp-login-widget-user-avatar">
+                                <a href="%1$s">
+                                        %2$s
+                                </a>
+                        </div>',
+                        bp_loggedin_user_domain(),
+                        bp_get_loggedin_user_avatar(
+                                array(
+                                        'type'   => 'thumb',
+                                        'width'  => 50,
+                                        'height' => 50,
+                                )
+                        )
+                );
+
+                $widget_content .= sprintf(
+                        '<div class="bp-login-widget-user-links">
+                                <div class="bp-login-widget-user-link">%1$s</div>
+                                <div class="bp-login-widget-user-logout"><a class="logout" href="%2$s">%3$s</a></div>
+                        </div>',
+                        bp_core_get_userlink( bp_loggedin_user_id() ),
+                        wp_logout_url( bp_get_requested_url() ),
+                        __( 'Log Out', 'buddypress' )
+                );
+
+                $action_output = '';
+                if ( has_action( 'bp_after_login_widget_loggedin' ) ) {
+                        ob_start();
+                        /**
+                         * Fires after the display of widget content if logged in.
+                         *
+                         * @since 1.9.0
+                         */
+                        do_action( 'bp_after_login_widget_loggedin' );
+                        $action_output = ob_get_clean();
+                }
+
+                if ( $action_output ) {
+                        $widget_content .= $action_output;
+                }
+        } else {
+                $action_output = '';
+                if ( has_action( 'bp_before_login_widget_loggedout' ) ) {
+                        ob_start();
+                        /**
+                         * Fires before the display of widget content if logged out.
+                         *
+                         * @since 1.9.0
+                         */
+                        do_action( 'bp_before_login_widget_loggedout' );
+                        $action_output = ob_get_clean();
+                }
+
+                if ( $action_output ) {
+                        $widget_content .= $action_output;
+                }
+
+                add_filter( 'login_form_bottom', 'bp_blocks_get_login_widget_registration_link', 10, 2 );
+
+                $widget_content .= wp_login_form(
+                        array(
+                                'echo'           => false,
+                                'form_id'        => 'bp-login-widget-form',
+                                'id_username'    => 'bp-login-widget-user-login',
+                                'label_username' => __( 'Username', 'buddypress' ),
+                                'id_password'    => 'bp-login-widget-user-pass',
+                                'label_password' => __( 'Password', 'buddypress' ),
+                                'id_remember'    => 'bp-login-widget-rememberme',
+                                'id_submit'      => 'bp-login-widget-submit',
+                        )
+                );
+
+                remove_filter( 'login_form_bottom', 'bp_blocks_get_login_widget_registration_link', 10, 2 );
+
+                $action_output = '';
+                if ( has_action( 'bp_after_login_widget_loggedout' ) ) {
+                        ob_start();
+                        /**
+                         * Fires after the display of widget content if logged out.
+                         *
+                         * @since 1.9.0
+                         */
+                        do_action( 'bp_after_login_widget_loggedout' );
+                        $action_output = ob_get_clean();
+                }
+
+                if ( $action_output ) {
+                        $widget_content .= $action_output;
+                }
+        }
+
+        if ( ! did_action( 'dynamic_sidebar_before' ) ) {
+                return sprintf(
+                        '<div %1$s>%2$s</div>',
+                        $wrapper_attributes,
+                        $widget_content
+                );
+        }
+
+        return $widget_content;
+}

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

@@ -234 +234 @@
          * }
          */
         public function setup_globals( $args = array() ) {
-
-                /** Slugs ************************************************************
-                 */
-
-                // If a WP directory page exists for the component, it should
-                // be the default value of 'root_slug'.
-                $default_root_slug = isset( buddypress()->pages->{$this->id}->slug ) ? buddypress()->pages->{$this->id}->slug : '';
-
                 $r = wp_parse_args( $args, array(
                         'slug'                  => $this->id,
-                        'root_slug'             => $default_root_slug,
+                        'root_slug'             => '',
                         'has_directory'         => false,
                         'directory_title'       => '',
                         'notification_callback' => '',
@@ -254 +246 @@
                         'block_globals'         => array(),
                 ) );
 
-                /**
-                 * Filters the slug to be used for the permalink URI chunk after root.
-                 *
-                 * @since 1.5.0
-                 *
-                 * @param string $value Slug to use in permalink URI chunk.
+                /** Slugs ************************************************************
                  */
-                $this->slug                  = apply_filters( 'bp_' . $this->id . '_slug',                  $r['slug']                  );
 
-                /**
-                 * Filters the slug used for root directory.
-                 *
-                 * @since 1.5.0
-                 *
-                 * @param string $value Root directory slug.
-                 */
-                $this->root_slug             = apply_filters( 'bp_' . $this->id . '_root_slug',             $r['root_slug']             );
+                // For all Components except Core.
+                if ( 'core' !== $this->id ) {
+                        /**
+                         * If a WP directory page exists for the component, it should
+                         * be the default value of 'root_slug'.
+                         */
+                        if ( isset( buddypress()->pages->{$this->id}->slug ) ) {
+                                $r['root_slug'] = buddypress()->pages->{$this->id}->slug;
+                        }
 
-                /**
-                 * Filters the component's top-level directory if available.
-                 *
-                 * @since 1.5.0
-                 *
-                 * @param bool $value Whether or not there is a top-level directory.
-                 */
-                $this->has_directory         = apply_filters( 'bp_' . $this->id . '_has_directory',         $r['has_directory']         );
+                        /**
+                         * Filters the slug to be used for the permalink URI chunk after root.
+                         *
+                         * @since 1.5.0
+                         *
+                         * @param string $value Slug to use in permalink URI chunk.
+                         */
+                        $this->slug = apply_filters( 'bp_' . $this->id . '_slug', $r['slug'] );
 
-                /**
-                 * Filters the component's directory title.
-                 *
-                 * @since 2.0.0
-                 *
-                 * @param string $value Title to use for the directory.
-                 */
-                $this->directory_title       = apply_filters( 'bp_' . $this->id . '_directory_title',       $r['directory_title']         );
+                        /**
+                         * Filters the slug used for root directory.
+                         *
+                         * @since 1.5.0
+                         *
+                         * @param string $value Root directory slug.
+                         */
+                        $this->root_slug = apply_filters( 'bp_' . $this->id . '_root_slug', $r['root_slug'] );
 
-                /**
-                 * Filters the placeholder text for search inputs for component.
-                 *
-                 * @since 1.5.0
-                 *
-                 * @param string $value Name to use in search input placeholders.
-                 */
-                $this->search_string         = apply_filters( 'bp_' . $this->id . '_search_string',         $r['search_string']         );
+                        /**
+                         * Filters the component's top-level directory if available.
+                         *
+                         * @since 1.5.0
+                         *
+                         * @param bool $value Whether or not there is a top-level directory.
+                         */
+                        $this->has_directory = apply_filters( 'bp_' . $this->id . '_has_directory', $r['has_directory'] );
 
-                /**
-                 * Filters the callable function that formats the component's notifications.
-                 *
-                 * @since 1.5.0
-                 *
-                 * @param string $value Function callback.
-                 */
-                $this->notification_callback = apply_filters( 'bp_' . $this->id . '_notification_callback', $r['notification_callback'] );
+                        /**
+                         * Filters the component's directory title.
+                         *
+                         * @since 2.0.0
+                         *
+                         * @param string $value Title to use for the directory.
+                         */
+                        $this->directory_title = apply_filters( 'bp_' . $this->id . '_directory_title', $r['directory_title'] );
 
-                // Set the global table names, if applicable.
-                if ( ! empty( $r['global_tables'] ) ) {
-                        $this->register_global_tables( $r['global_tables'] );
-                }
+                        /**
+                         * Filters the placeholder text for search inputs for component.
+                         *
+                         * @since 1.5.0
+                         *
+                         * @param string $value Name to use in search input placeholders.
+                         */
+                        $this->search_string = apply_filters( 'bp_' . $this->id . '_search_string', $r['search_string'] );
 
-                // Set the metadata table, if applicable.
-                if ( ! empty( $r['meta_tables'] ) ) {
-                        $this->register_meta_tables( $r['meta_tables'] );
+                        /**
+                         * Filters the callable function that formats the component's notifications.
+                         *
+                         * @since 1.5.0
+                         *
+                         * @param string $value Function callback.
+                         */
+                        $this->notification_callback = apply_filters( 'bp_' . $this->id . '_notification_callback', $r['notification_callback'] );
+
+                        // Set the global table names, if applicable.
+                        if ( ! empty( $r['global_tables'] ) ) {
+                                $this->register_global_tables( $r['global_tables'] );
+                        }
+
+                        // Set the metadata table, if applicable.
+                        if ( ! empty( $r['meta_tables'] ) ) {
+                                $this->register_meta_tables( $r['meta_tables'] );
+                        }
+
+                        // Register this component in the loaded components array.
+                        buddypress()->loaded_components[ $this->slug ] = $this->id;
                 }
 
                 /**
@@ -339 +348 @@
                         }
                 }
 
-                /** BuddyPress *******************************************************
-                 */
-
-                // Register this component in the loaded components array.
-                buddypress()->loaded_components[$this->slug] = $this->id;
-
                 /**
                  * Fires at the end of the setup_globals method inside BP_Component.
                  *

src/bp-core/classes/class-bp-core.php

@@ -289 +289 @@
                 bp_update_is_item_admin( bp_user_has_access(), 'core' );
 
                 // Is the logged in user is a mod for the current item?
-                bp_update_is_item_mod( false,                  'core' );
-
-                /**
-                 * Fires at the end of the setup of bp-core globals setting.
-                 *
-                 * @since 1.1.0
-                 */
-                do_action( 'bp_core_setup_globals' );
+                bp_update_is_item_mod( false, 'core' );
+
+                parent::setup_globals(
+                        array(
+                                'block_globals' => array(
+                                        'bp/login-form' => array(
+                                                'widget_classnames' => array ( 'widget_bp_core_login_widget', 'buddypress' ),
+                                        )
+                                )
+                        )
+                );
         }
 
         /**
@@ -377 +380 @@
          *                      description.
          */
         public function blocks_init( $blocks = array() ) {
-                parent::blocks_init( array() );
+                parent::blocks_init(
+                        array(
+                                'bp/login-form' => array(
+                                        'name'               => 'bp/login-form',
+                                        'editor_script'      => 'bp-login-form-block',
+                                        'editor_script_url'  => plugins_url( 'js/blocks/login-form.js', dirname( __FILE__ ) ),
+                                        'editor_script_deps' => array(
+                                                'wp-blocks',
+                                                'wp-element',
+                                                'wp-components',
+                                                'wp-i18n',
+                                                'wp-block-editor',
+                                                'bp-block-components',
+                                        ),
+                                        'style'              => 'bp-login-form-block',
+                                        'style_url'          => plugins_url( 'css/blocks/login-form.css', dirname( __FILE__ ) ),
+                                        'attributes'         => array(
+                                                'title' => array(
+                                                        'type'    => 'string',
+                                                        'default' => '',
+                                                ),
+                                        ),
+                                        'render_callback'    => 'bp_block_render_login_form_block',
+                                ),
+                        )
+                );
         }
 }

new file src/bp-core/css/blocks/login-form-rtl.css

@@ +1 @@
+.widget_bp_core_login_widget .bp-login-widget-user-avatar {
+        float: right;
+}
+
+.widget_bp_core_login_widget .bp-login-widget-user-links {
+        margin-right: 70px;
+}
+
+#bp-login-widget-form label {
+        display: block;
+        font-weight: 600;
+        margin: 15px 0 5px;
+        width: auto;
+}
+
+#bp-login-widget-form input[type="text"],
+#bp-login-widget-form input[type="password"] {
+        width: 100%;
+        background-color: #fafafa;
+        border: 1px solid #d6d6d6;
+        border-radius: 0;
+        font: inherit;
+        font-size: 100%;
+        padding: 0.5em;
+}
+
+#bp-login-widget-form .login-submit,
+#bp-login-widget-form .bp-login-widget-register-link {
+        width: fit-content;
+        display: inline;
+}
+
+#bp-login-widget-form .bp-login-widget-register-link {
+        margin-right: 1em;
+        vertical-align: super;
+}

new file src/bp-core/css/blocks/login-form.css

@@ +1 @@
+.widget_bp_core_login_widget .bp-login-widget-user-avatar {
+        float: left;
+}
+
+.widget_bp_core_login_widget .bp-login-widget-user-links {
+        margin-left: 70px;
+}
+
+#bp-login-widget-form label {
+        display: block;
+        font-weight: 600;
+        margin: 15px 0 5px;
+        width: auto;
+}
+
+#bp-login-widget-form input[type="text"],
+#bp-login-widget-form input[type="password"] {
+        width: 100%;
+        background-color: #fafafa;
+        border: 1px solid #d6d6d6;
+        border-radius: 0;
+        font: inherit;
+        font-size: 100%;
+        padding: 0.5em;
+}
+
+#bp-login-widget-form .login-submit,
+#bp-login-widget-form .bp-login-widget-register-link {
+        width: fit-content;
+        display: inline;
+}
+
+#bp-login-widget-form .bp-login-widget-register-link {
+        margin-left: 1em;
+        vertical-align: super;
+}

new file src/bp-core/js/blocks/login-form.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;
+})({"ploe":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * WordPress dependencies.
+ */
+var _wp = wp,
+    InspectorControls = _wp.blockEditor.InspectorControls,
+    _wp$components = _wp.components,
+    Disabled = _wp$components.Disabled,
+    PanelBody = _wp$components.PanelBody,
+    TextControl = _wp$components.TextControl,
+    _wp$element = _wp.element,
+    Fragment = _wp$element.Fragment,
+    createElement = _wp$element.createElement,
+    __ = _wp.i18n.__;
+/**
+ * BuddyPress dependencies.
+ */
+
+var _bp = bp,
+    ServerSideRender = _bp.blockComponents.ServerSideRender;
+
+var editLoginForm = function editLoginForm(_ref) {
+  var attributes = _ref.attributes,
+      setAttributes = _ref.setAttributes;
+  var title = attributes.title;
+  return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
+    title: __('Settings', 'buddypress'),
+    initialOpen: true
+  }, createElement(TextControl, {
+    label: __('Title', 'buddypress'),
+    value: title,
+    onChange: function onChange(text) {
+      setAttributes({
+        title: text
+      });
+    }
+  }))), createElement(Disabled, null, createElement(ServerSideRender, {
+    block: "bp/login-form",
+    attributes: attributes
+  })));
+};
+
+var _default = editLoginForm;
+exports.default = _default;
+},{}],"RDNZ":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * WordPress dependencies.
+ */
+var _wp = wp,
+    createBlock = _wp.blocks.createBlock;
+/**
+ * Transforms Legacy Login Form Widget to Login Form Block.
+ *
+ * @type {Object}
+ */
+
+var transforms = {
+  from: [{
+    type: 'block',
+    blocks: ['core/legacy-widget'],
+    isMatch: function isMatch(_ref) {
+      var idBase = _ref.idBase,
+          instance = _ref.instance;
+
+      if (!(instance !== null && instance !== void 0 && instance.raw)) {
+        return false;
+      }
+
+      return idBase === 'bp_core_login_widget';
+    },
+    transform: function transform(_ref2) {
+      var instance = _ref2.instance;
+      return createBlock('bp/login-form', {
+        title: instance.raw.title
+      });
+    }
+  }]
+};
+var _default = transforms;
+exports.default = _default;
+},{}],"A1QM":[function(require,module,exports) {
+"use strict";
+
+var _edit = _interopRequireDefault(require("./login-form/edit"));
+
+var _transforms = _interopRequireDefault(require("./login-form/transforms"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * WordPress dependencies.
+ */
+var _wp = wp,
+    registerBlockType = _wp.blocks.registerBlockType,
+    __ = _wp.i18n.__;
+/**
+ * Internal dependencies.
+ */
+
+registerBlockType('bp/login-form', {
+  title: __('Login Form', 'buddypress'),
+  description: __('Show a Log In form to logged-out visitors, and a Log Out link to those who are logged in.', 'buddypress'),
+  icon: {
+    background: '#fff',
+    foreground: '#d84800',
+    src: 'admin-users'
+  },
+  category: 'buddypress',
+  attributes: {
+    title: {
+      type: 'string',
+      default: ''
+    }
+  },
+  edit: _edit.default,
+  transforms: _transforms.default
+});
+},{"./login-form/edit":"ploe","./login-form/transforms":"RDNZ"}]},{},["A1QM"], null)
+ No newline at end of file

new file src/bp-core/sass/blocks/login-form.scss

@@ +1 @@
+// BP login form widget
+.widget_bp_core_login_widget {
+
+        .bp-login-widget-user-avatar {
+                float: left;
+        }
+
+        .bp-login-widget-user-links {
+                margin-left: 70px;
+        }
+}
+
+#bp-login-widget-form {
+
+        label {
+                display: block;
+                font-weight: 600;
+                margin: 15px 0 5px;
+                width: auto;
+        }
+
+        input[type="text"],
+        input[type="password"] {
+                width: 100%;
+                background-color: #fafafa;
+                border: 1px solid #d6d6d6;
+                border-radius: 0;
+                font: inherit;
+                font-size: 100%;
+                padding: 0.5em;
+        }
+
+        .login-submit,
+        .bp-login-widget-register-link {
+                width: fit-content;
+                display: inline;
+        }
+
+        .bp-login-widget-register-link {
+                margin-left: 1em;
+                vertical-align: super;
+        }
+}

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

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

new file src/js/bp-core/js/blocks/login-form.js

@@ +1 @@
+/**
+ * WordPress dependencies.
+ */
+const {
+        blocks: {
+                registerBlockType,
+        },
+        i18n: {
+                __,
+        },
+} = wp;
+
+/**
+ * Internal dependencies.
+ */
+import editLoginForm from './login-form/edit';
+import transforms from './login-form/transforms';
+
+registerBlockType( 'bp/login-form', {
+        title: __( 'Login Form', 'buddypress' ),
+        description: __( 'Show a Log In form to logged-out visitors, and a Log Out link to those who are logged in.', 'buddypress' ),
+        icon: {
+                background: '#fff',
+                foreground: '#d84800',
+                src: 'admin-users',
+        },
+        category: 'buddypress',
+        attributes: {
+                title: {
+                        type: 'string',
+                        default: '',
+                },
+        },
+        edit: editLoginForm,
+        transforms: transforms,
+} );

new file src/js/bp-core/js/blocks/login-form/edit.js

@@ +1 @@
+/**
+ * WordPress dependencies.
+ */
+const {
+        blockEditor: {
+                InspectorControls,
+        },
+        components: {
+                Disabled,
+                PanelBody,
+                TextControl,
+        },
+        element: {
+                Fragment,
+                createElement,
+        },
+        i18n: {
+                __,
+        },
+} = wp;
+
+/**
+ * BuddyPress dependencies.
+ */
+const {
+        blockComponents: {
+                ServerSideRender,
+        },
+} = bp;
+
+const editLoginForm = ( { attributes, setAttributes } ) => {
+        const { title } = attributes;
+
+        return (
+                <Fragment>
+                        <InspectorControls>
+                                <PanelBody title={ __( 'Settings', 'buddypress' ) } initialOpen={ true }>
+                                        <TextControl
+                                                label={ __( 'Title', 'buddypress' ) }
+                                                value={ title }
+                                                onChange={ ( text ) => {
+                                                        setAttributes( { title: text } );
+                                                } }
+                                        />
+                                </PanelBody>
+                        </InspectorControls>
+                        <Disabled>
+                                <ServerSideRender block="bp/login-form" attributes={ attributes } />
+                        </Disabled>
+                </Fragment>
+        );
+};
+
+export default editLoginForm;

new file src/js/bp-core/js/blocks/login-form/transforms.js

@@ +1 @@
+/**
+ * WordPress dependencies.
+ */
+ const {
+        blocks: {
+                createBlock,
+        },
+} = wp;
+
+/**
+ * Transforms Legacy Login Form Widget to Login Form Block.
+ *
+ * @type {Object}
+ */
+const transforms = {
+        from: [
+                {
+                        type: 'block',
+                        blocks: [ 'core/legacy-widget' ],
+                        isMatch: ( { idBase, instance } ) => {
+                                if ( ! instance?.raw ) {
+                                        return false;
+                                }
+
+                                return idBase === 'bp_core_login_widget';
+                        },
+                        transform: ( { instance } ) => {
+                                return createBlock( 'bp/login-form', {
+                                        title: instance.raw.title,
+                                } );
+                        },
+                },
+        ],
+};
+
+export default transforms;