- add account block

includes/admin/core/class-admin-enqueue.php

@@ -104,6 +104,46 @@ if ( ! class_exists( 'um\admin\core\Admin_Enqueue' ) ) {
 				wp_register_style( 'um_members_rtl', um_url . '/assets/css/um-members-rtl.css', array( 'um_members' ), ultimatemember_version );
 			}
 			wp_register_style( 'um_styles', um_url . '/assets/css/um-styles.css', array(), ultimatemember_version );
+			wp_register_style( 'um_profile', um_url . '/assets/css/um-profile.css', array(), ultimatemember_version );
+			wp_register_style( 'um_crop', um_url . '/assets/css/um-crop.css', array(), ultimatemember_version );
+			wp_register_style( 'um_responsive', um_url . '/assets/css/um-responsive.css', array( 'um_profile', 'um_crop' ), ultimatemember_version );
+			wp_register_style( 'um_account', um_url . '/assets/css/um-account.css', array(), ultimatemember_version );
+
+			wp_register_script( 'um_admin_blocks_shortcodes', um_url . 'assets/js/um-blocks' . $this->suffix . '.js', array( 'wp-i18n', 'wp-blocks', 'wp-components' ), ultimatemember_version, true );
+			wp_set_script_translations( 'jb_admin_blocks_shortcodes', 'ultimate-member' );
+
+			if ( ! empty( UM()->account()->get_tab_fields( 'notifications', array() ) ) ) {
+				$notifications_enabled = 1;
+			} else {
+				$notifications_enabled = 0;
+			}
+
+			$um_account_settings = array(
+				'general'       => array(
+					'label'   => __( 'General', 'ultimate-member' ),
+					'enabled' => 1,
+				),
+				'password'      => array(
+					'label'   => __( 'Password', 'ultimate-member' ),
+					'enabled' => UM()->options()->get( 'account_tab_password' ),
+				),
+				'privacy'       => array(
+					'label'   => __( 'Privacy', 'ultimate-member' ),
+					'enabled' => UM()->options()->get( 'account_tab_privacy' ),
+				),
+				'notifications' => array(
+					'label'   => __( 'Notifications', 'ultimate-member' ),
+					'enabled' => $notifications_enabled,
+				),
+				'delete'        => array(
+					'label'   => __( 'Delete', 'ultimate-member' ),
+					'enabled' => UM()->options()->get( 'account_tab_delete' ),
+				),
+			);
+			$um_account_settings = apply_filters( 'um_extend_account_settings', $um_account_settings );
+			wp_localize_script( 'um_admin_blocks_shortcodes', 'um_account_settings', $um_account_settings );
+
+			wp_enqueue_script( 'um_admin_blocks_shortcodes' );
 
 			wp_register_script( 'um_datetime', um_url . 'assets/js/pickadate/picker.js', array( 'jquery' ), ultimatemember_version, true );
 			wp_register_script( 'um_datetime_date', um_url . 'assets/js/pickadate/picker.date.js', array( 'jquery', 'um_datetime' ), ultimatemember_version, true );
@@ -127,6 +167,12 @@ if ( ! class_exists( 'um\admin\core\Admin_Enqueue' ) ) {
 			wp_register_script( 'um_dropdown', um_url . 'assets/js/dropdown' . $this->suffix . '.js', array( 'jquery' ), ultimatemember_version, true );
 			wp_register_script( 'um_members', um_url . 'assets/js/um-members' . $this->suffix . '.js', array( 'jquery', 'wp-util', 'jquery-ui-slider', 'um_dropdown', 'wp-hooks', 'jquery-masonry', 'um_scripts' ), ultimatemember_version, true );
 
+			wp_register_script( 'um_account', um_url . 'assets/js/um-account' . $this->suffix . '.js', array( 'jquery', 'wp-hooks' ), ultimatemember_version, true );
+			wp_register_script( 'um_scrollbar', um_url . 'assets/js/simplebar' . $this->suffix . '.js', array( 'jquery' ), ultimatemember_version, true );
+			wp_register_script( 'um_crop', um_url . 'assets/js/um-crop' . $this->suffix . '.js', array( 'jquery' ), ultimatemember_version, true );
+			wp_register_script( 'um_functions', um_url . 'assets/js/um-functions' . $this->suffix . '.js', array( 'jquery', 'jquery-masonry', 'wp-util', 'um_scrollbar' ), ultimatemember_version, true );
+			wp_register_script( 'um_responsive', um_url . 'assets/js/um-responsive' . $this->suffix . '.js', array( 'jquery', 'um_functions', 'um_crop' ), ultimatemember_version, true );
+
 			// render blocks
 			wp_enqueue_script( 'um_datetime' );
 			wp_enqueue_script( 'um_datetime_date' );
@@ -134,10 +180,20 @@ if ( ! class_exists( 'um\admin\core\Admin_Enqueue' ) ) {
 			wp_enqueue_script( 'um_conditional' );
 			wp_enqueue_script( 'um_dropdown' );
 			wp_enqueue_script( 'um_members' );
+			wp_enqueue_script( 'um_account' );
+			wp_enqueue_script( 'um_scrollbar' );
+			wp_enqueue_script( 'um_crop' );
+			wp_enqueue_script( 'um_functions' );
+			wp_enqueue_script( 'um_responsive' );
+
 			wp_enqueue_style( 'um_members' );
 			wp_enqueue_style( 'um_styles' );
+			wp_enqueue_style( 'um_profile' );
+			wp_enqueue_style( 'um_crop' );
+			wp_enqueue_style( 'um_responsive' );
+			wp_enqueue_style( 'um_account' );
 
-			$custom_css = '.um{opacity: 1;}';
+			$custom_css = '.um{opacity: 1;}.um_request_name {display: none !important;}';
 
 			wp_add_inline_style( 'um_styles', $custom_css );
 		}

includes/blocks/um-account/block.json

@@ -0,0 +1,15 @@
+{
+  "apiVersion": 2,
+  "name": "um-block/um-account",
+  "title": "Account",
+  "description": "Displaying the account page of the current user",
+  "icon": "id",
+  "category": "um-blocks",
+  "attributes": {
+    "tab": {
+      "type": "string"
+    }
+  },
+  "editorScript": "file:./build/index.js",
+  "textdomain": "ultimate-member"
+}

includes/blocks/um-account/src/index.js

@@ -0,0 +1,88 @@
+import { registerBlockType } from '@wordpress/blocks';
+import ServerSideRender from '@wordpress/server-side-render';
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {PanelBody, SelectControl} from "@wordpress/components";
+
+registerBlockType('um-block/um-account', {
+	edit: function (props) {
+		let { tab, setAttributes } = props.attributes;
+		const blockProps = useBlockProps();
+
+		function get_options() {
+			var option = [];
+
+			option.push( { label: wp.i18n.__( 'All', 'ultimate-member' ), value: 'all' } );
+
+			for ( var key in um_account_settings ) {
+				if ( um_account_settings.hasOwnProperty( key ) && um_account_settings[ key ]['enabled'] ) {
+					option.push(
+						{
+							label: um_account_settings[ key ]['label'],
+							value: key
+						}
+					)
+				}
+			}
+
+			return option;
+		}
+
+		function umShortcode( value ) {
+
+			var shortcode = '[ultimatemember_account';
+
+			if ( value !== 'all' ) {
+				shortcode = shortcode + ' tab="' + value + '"';
+			}
+
+			shortcode = shortcode + ']';
+
+			props.setAttributes({ content: shortcode });
+		}
+
+		return (
+			<div {...blockProps}>
+				<ServerSideRender block="um-block/um-account" attributes={props.attributes} />
+				<InspectorControls>
+					<PanelBody title={wp.i18n.__('Account Tab', 'ultimate-member')}>
+						<SelectControl
+							label={wp.i18n.__('Select Tab', 'ultimate-member')}
+							className="um_select_account_tab"
+							value={tab}
+							options={get_options()}
+							style={{ height: '35px', lineHeight: '20px', padding: '0 7px' }}
+							onChange={(value) => {
+								props.setAttributes({ tab: value });
+								umShortcode(value);
+							}}
+						/>
+					</PanelBody>
+				</InspectorControls>
+			</div>
+		);
+
+	},
+	save: function save(props) {
+		return null;
+	}
+});
+
+jQuery(window).on( 'load', function($) {
+	var observer = new MutationObserver(function(mutations) {
+		mutations.forEach(function(mutation) {
+
+			jQuery(mutation.addedNodes).find('.um.um-account').each(function() {
+				var current_tab = jQuery(this).find('.um-account-main').attr('data-current_tab');
+
+				if ( current_tab ) {
+					jQuery(this).find('.um-account-tab[data-tab="'+current_tab+'"]').show();
+					jQuery(this).find('.um-account-tab:not(:visible)').find( 'input, select, textarea' ).not( ':disabled' ).addClass('um_account_inactive').prop( 'disabled', true ).attr( 'disabled', true );
+					um_responsive();
+					um_modal_responsive();
+				}
+			});
+		});
+	});
+
+	observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});
+});

includes/core/class-blocks.php

@@ -56,6 +56,14 @@ if ( ! class_exists( 'um\core\Blocks' ) ) {
 				'um-block/um-password-reset'     => array(
 					'render_callback' => array( $this, 'um_password_reset_render' ),
 				),
+				'um-block/um-account'            => array(
+					'render_callback' => array( $this, 'um_account_render' ),
+					'attributes'      => array(
+						'tab' => array(
+							'type' => 'string',
+						),
+					),
+				),
 			);
 
 			foreach ( $blocks as $k => $block_data ) {
@@ -96,5 +104,18 @@ if ( ! class_exists( 'um\core\Blocks' ) ) {
 
 			return apply_shortcodes( $shortcode );
 		}
+
+
+		public function um_account_render( $atts ) {
+			$shortcode = '[ultimatemember_account';
+
+			if ( isset( $atts['tab'] ) && 'all' !== $atts['tab'] ) {
+				$shortcode .= ' tab="' . $atts['tab'] . '"';
+			}
+
+			$shortcode .= ']';
+
+			return apply_shortcodes( $shortcode );
+		}
 	}
 }

package.json

@@ -22,7 +22,8 @@
     "build:all-blocks": "npm-run-all --parallel build-block-*",
     "build-block-um-member-directories": "cd includes/blocks/um-member-directories && wp-scripts build src/index.js",
     "build-block-um-forms": "cd includes/blocks/um-forms && wp-scripts build src/index.js",
-    "build-block-um-password-reset": "cd includes/blocks/um-password-reset && wp-scripts build src/index.js"
+    "build-block-um-password-reset": "cd includes/blocks/um-password-reset && wp-scripts build src/index.js",
+    "build-block-um-account": "cd includes/blocks/um-account && wp-scripts build src/index.js"
   },
   "engines": {
     "node": ">= 0.10.0"