├── .babelrc ├── .gitignore ├── README.md ├── build ├── admin.css └── admin.js ├── classes └── class-widget-manager-loader.php ├── composer.json ├── elementor-widget-manager.php ├── package.json ├── phpcs.xml ├── src ├── index.js ├── setting.js └── setting.scss └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #npm 2 | /node_modules/ 3 | 4 | # Composer 5 | /vendor/ 6 | 7 | # Editors 8 | composer.lock 9 | package-lock.json 10 | 11 | .vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Elementor Widget Manager 2 | A simple way to deactivate/activate Elementor widgets from WP admin. 3 | 4 | ## How does it work? 5 | 1. Install and activate the plugin 6 | 2. Go to WP admin > Elementor > Widget Manager page. 7 | 3. Select the widgets that you want to deactivate/activate 8 | 4. That's all. 9 | 10 | ## FAQs 11 | ### 1. Will deactivating a widget remove the content from my site? 12 | No. The widgets are removed/uregistered only from Elementor Builder interface. 13 | 14 | ### 2. Why should I deactivate widgets? 15 | Deactivating the widgets will speed up the loading of Elementor builder interface and will consume lesser resources. 16 | 17 | ## About Us 18 | [IdeaBox](https://ideabox.io) is an exclusive WP design and development agency with over 8 years of experience. We are the makers of 19 | 1. [PowerPack for Elementor](https://powerpackelements.com) 20 | 2. [Dashboard Welcome for Elementor](https://wordpress.org/plugins/dashboard-welcome-for-elementor/) 21 | 3. [PowerPack for Beaver Builder](https://wpbeaveraddons.com) 22 | 4. [WPfomify Social Proof Marketing Plugin](https://wpfomify.com) 23 | 5. [Divi Monk - Template Cloud for Divi Theme](https://divimonk.com) 24 | -------------------------------------------------------------------------------- /build/admin.css: -------------------------------------------------------------------------------- 1 | #wpcontent { 2 | padding-left: 0; } 3 | 4 | .notice { 5 | display: none; } 6 | 7 | .notification-container-bottom-left { 8 | bottom: 30px !important; } 9 | 10 | .notification-container-mobile-bottom { 11 | bottom: 60px !important; } 12 | 13 | #ewm-setting-root .ewm-setting-header { 14 | padding: 20px 10px; 15 | background-color: white; 16 | box-shadow: 0px 1px 0px rgba(213, 213, 213, 0.5), 0px 1px 2px #eee; 17 | text-align: center; } 18 | #ewm-setting-root .ewm-setting-header .ewm-setting-title { 19 | margin: 0px auto; 20 | max-width: 750px; } 21 | #ewm-setting-root .ewm-setting-header .ewm-setting-title h1 { 22 | margin-top: 5px; } 23 | #ewm-setting-root .ewm-setting-header p:last-of-type { 24 | margin-bottom: 0; } 25 | 26 | #ewm-setting-root .ewm-setting-container { 27 | max-width: 750px; 28 | margin: auto; 29 | margin-top: 30px; } 30 | #ewm-setting-root .ewm-setting-container .components-panel__row { 31 | margin-top: 0px; 32 | display: block; } 33 | 34 | #ewm-setting-root .ewm-select-options-container { 35 | height: 40px; 36 | padding: 10px; 37 | display: flex; 38 | align-items: center; } 39 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-checkbox { 40 | width: 50px; 41 | text-align: center; } 42 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-checkbox input[type=checkbox] { 43 | margin: 0; } 44 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-select { 45 | width: 17%; } 46 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-button { 47 | width: 15%; } 48 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-button button { 49 | background-color: inherit; 50 | margin: 0; } 51 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-search { 52 | flex: 1; 53 | text-align: right; } 54 | 55 | #ewm-setting-root .ewm-setting-list { 56 | margin: 0; } 57 | #ewm-setting-root .ewm-setting-list .ewm-setting-list-item { 58 | padding: 10px; 59 | height: 40px; 60 | display: flex; 61 | align-items: center; 62 | border-bottom: 1px solid #e2e4e7; 63 | border-top: 1px solid #e2e4e7; 64 | margin-bottom: 0; } 65 | #ewm-setting-root .ewm-setting-list .ewm-setting-list-item input[type=checkbox] { 66 | margin: 0; } 67 | #ewm-setting-root .ewm-setting-list .ewm-setting-list-item h4 { 68 | margin: 0; 69 | font-size: 15px; } 70 | #ewm-setting-root .ewm-setting-list .ewm-setting-list-item .ewm-setting-list-item-container-checkbox { 71 | width: 50px; 72 | text-align: center; } 73 | #ewm-setting-root .ewm-setting-list .ewm-setting-list-item .ewm-setting-list-item-container-title { 74 | width: 70%; } 75 | #ewm-setting-root .ewm-setting-list .ewm-setting-list-item .ewm-setting-list-item-container-button { 76 | text-align: center; } 77 | #ewm-setting-root .ewm-setting-list .ewm-setting-list-item .ewm-setting-list-item-container-button .ewm-setting-list-button { 78 | border: none; 79 | background-color: inherit; 80 | padding: 10px; 81 | color: #499bc8; 82 | width: 100px; } 83 | #ewm-setting-root .ewm-setting-list .ewm-setting-list-item .ewm-setting-list-item-container-button .ewm-setting-list-button:hover { 84 | cursor: pointer; } 85 | 86 | #ewm-setting-root .ewm-empty-search { 87 | text-align: center; 88 | border-top: 1px solid #e2e4e7; } 89 | #ewm-setting-root .ewm-empty-search p { 90 | font-size: 30px; } 91 | 92 | #ewm-setting-root ul { 93 | list-style: none; } 94 | 95 | #ewm-setting-root li.activate { 96 | border-left: 4px solid #f1f1f1; } 97 | 98 | #ewm-setting-root li.deactivate { 99 | border-left: 4px solid #499bc8; 100 | background-color: aliceblue; } 101 | #ewm-setting-root li.deactivate .ewm-setting-list-button { 102 | color: #497e99 !important; 103 | font-weight: 900; } 104 | 105 | #ewm-setting-root button:hover { 106 | cursor: pointer; } 107 | 108 | #ewm-setting-root .components-placeholder { 109 | background: transparent; 110 | margin-top: 25vh; 111 | margin-bottom: 25vh; } 112 | 113 | @media screen and (max-width: 782px) { 114 | .auto-fold #wpcontent { 115 | padding-left: 0; } 116 | #ewm-setting-root .ewm-select-options-container { 117 | display: block; 118 | height: auto; } 119 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-checkbox { 120 | display: inline-block; } 121 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-select { 122 | width: auto; 123 | display: inline-block; } 124 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-button { 125 | display: inline-block; 126 | width: auto; 127 | margin-left: 10px; } 128 | #ewm-setting-root .ewm-select-options-container .ewm-select-options-container-search { 129 | text-align: left; 130 | margin-left: 50px; 131 | margin-top: 10px; } } 132 | 133 | .notification-container-bottom-center, .notification-container-bottom-left, .notification-container-bottom-right, .notification-container-center, .notification-container-top-center, .notification-container-top-left, .notification-container-top-right { 134 | width: 325px; 135 | position: absolute; 136 | pointer-events: all; } 137 | 138 | .notification-container-bottom-center, .notification-container-center, .notification-container-top-center { 139 | display: flex; 140 | justify-content: center; 141 | align-items: center; 142 | flex-direction: column; 143 | left: calc(50% - 162.5px); } 144 | 145 | .notification-container-center { 146 | top: 20px; 147 | height: 100%; 148 | pointer-events: none; } 149 | 150 | .notification-container-center .center-inner { 151 | width: 325px; 152 | display: flex; 153 | justify-content: center; 154 | align-items: center; 155 | flex-direction: column; 156 | pointer-events: all; } 157 | 158 | .notification-container-top-center { 159 | top: 20px; } 160 | 161 | .notification-container-bottom-center { 162 | bottom: 20px; } 163 | 164 | .notification-container-top-left { 165 | left: 20px; 166 | top: 20px; } 167 | 168 | .notification-container-top-right { 169 | right: 20px; 170 | top: 20px; } 171 | 172 | .notification-container-bottom-left { 173 | left: 20px; 174 | bottom: 20px; } 175 | 176 | .notification-container-bottom-right { 177 | bottom: 20px; 178 | right: 20px; } 179 | 180 | .notification-container-mobile-bottom, .notification-container-mobile-top { 181 | pointer-events: all; 182 | position: absolute; } 183 | 184 | .notification-container-mobile-top { 185 | right: 20px; 186 | left: 20px; 187 | top: 20px; } 188 | 189 | .notification-container-mobile-bottom { 190 | right: 20px; 191 | left: 20px; 192 | bottom: 20px; 193 | margin-bottom: -15px; } 194 | 195 | .notification-default { 196 | border-left: 8px solid #0562c7; } 197 | 198 | .notification-default, .notification-default .timer { 199 | background-color: #007bff; } 200 | 201 | .notification-default .timer-filler { 202 | background-color: #fff; } 203 | 204 | .notification-default .notification-close { 205 | background-color: #007bff; } 206 | 207 | .notification-success { 208 | border-left: 8px solid #1f8838; } 209 | 210 | .notification-success, .notification-success .timer { 211 | background-color: #28a745; } 212 | 213 | .notification-success .timer-filler { 214 | background-color: #fff; } 215 | 216 | .notification-success .notification-close { 217 | background-color: #28a745; } 218 | 219 | .notification-danger { 220 | border-left: 8px solid #bd1120; } 221 | 222 | .notification-danger, .notification-danger .timer { 223 | background-color: #dc3545; } 224 | 225 | .notification-danger .timer-filler { 226 | background-color: #fff; } 227 | 228 | .notification-danger .notification-close { 229 | background-color: #dc3545; } 230 | 231 | .notification-info { 232 | border-left: 8px solid #138b9e; } 233 | 234 | .notification-info, .notification-info .timer { 235 | background-color: #17a2b8; } 236 | 237 | .notification-info .timer-filler { 238 | background-color: #fff; } 239 | 240 | .notification-info .notification-close { 241 | background-color: #17a2b8; } 242 | 243 | .notification-warning { 244 | border-left: 8px solid #ce9c09; } 245 | 246 | .notification-warning, .notification-warning .timer { 247 | background-color: #eab000; } 248 | 249 | .notification-warning .timer-filler { 250 | background-color: #fff; } 251 | 252 | .notification-warning .notification-close { 253 | background-color: #eab000; } 254 | 255 | .notification-awesome { 256 | border-left: 8px solid #4c3fb1; } 257 | 258 | .notification-awesome, .notification-awesome .timer { 259 | background-color: #685dc3; } 260 | 261 | .notification-awesome .timer-filler { 262 | background-color: #fff; } 263 | 264 | .notification-awesome .notification-close { 265 | background-color: #685dc3; } 266 | 267 | @-webkit-keyframes timer { 268 | 0% { 269 | width: 100%; } 270 | to { 271 | width: 0; } } 272 | 273 | @keyframes timer { 274 | 0% { 275 | width: 100%; } 276 | to { 277 | width: 0; } } 278 | 279 | .react-notification-root { 280 | position: fixed; 281 | z-index: 9000; 282 | pointer-events: none; 283 | width: 100%; 284 | height: 100%; } 285 | 286 | .notification-item { 287 | display: flex; 288 | position: relative; 289 | border-radius: 3px; 290 | margin-bottom: 15px; 291 | box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2); 292 | cursor: pointer; } 293 | 294 | .notification-item .timer { 295 | width: 100%; 296 | margin-top: 10px; } 297 | 298 | .notification-item .timer, .notification-item .timer .timer-filler { 299 | height: 3px; 300 | border-radius: 5px; } 301 | 302 | .notification-item .notification-title { 303 | color: #fff; 304 | font-weight: 700; 305 | font-size: 14px; 306 | margin-top: 5px; 307 | margin-bottom: 5px; } 308 | 309 | .notification-item .notification-message { 310 | color: #fff; 311 | max-width: calc(100% - 15px); 312 | font-size: 14px; 313 | line-height: 150%; 314 | word-wrap: break-word; 315 | margin-bottom: 0; 316 | margin-top: 0; } 317 | 318 | .notification-item .notification-content { 319 | padding: 8px 15px; 320 | display: inline-block; 321 | width: 100%; } 322 | 323 | .notification-item .notification-close { 324 | width: 18px; 325 | height: 18px; 326 | border-radius: 50%; 327 | display: inline-block; 328 | position: absolute; 329 | right: 10px; 330 | top: 10px; } 331 | 332 | .notification-item .notification-close:after { 333 | content: "\D7"; 334 | position: absolute; 335 | transform: translate(-50%, -50%); 336 | color: #fff; 337 | font-size: 12px; 338 | left: 50%; 339 | top: 50%; } 340 | 341 | .notification-container-mobile-bottom .notification-item, .notification-container-mobile-bottom .notification-parent, .notification-container-mobile-top .notification-item, .notification-container-mobile-top .notification-parent { 342 | max-width: 100%; 343 | width: 100%; } 344 | 345 | .notification-container-bottom-right .notification-parent, .notification-container-top-right .notification-parent { 346 | margin-left: auto; } 347 | 348 | .notification-container-bottom-left .notification-parent, .notification-container-top-left .notification-parent { 349 | margin-right: auto; } 350 | 351 | .notification-container-mobile-bottom .notification-parent, .notification-container-mobile-top .notification-parent { 352 | margin-left: auto; 353 | margin-right: auto; } 354 | 355 | -------------------------------------------------------------------------------- /classes/class-widget-manager-loader.php: -------------------------------------------------------------------------------- 1 | get_registered_widgets() ); 47 | } 48 | } 49 | 50 | 51 | /** 52 | * Registering widget manager. 53 | * 54 | * @return void 55 | */ 56 | public function register_widget_manager_menu() { 57 | // Adding sub-menu to elementor. 58 | add_submenu_page( 59 | 'elementor', // Parent slug. 60 | __( 'Widget Manager', 'el-widget-manager' ), // Page title. 61 | __( 'Widget Manager', 'el-widget-manager' ), // Menu title. 62 | 'manage_options', // Capability. 63 | 'widget-manger', // Menu slug. 64 | array( $this, 'render_widget_manager_page' ) // Callback function. 65 | ); 66 | } 67 | 68 | /** 69 | * Includes widget manager page from react. 70 | * 71 | * @return void 72 | */ 73 | public function render_widget_manager_page() { 74 | echo "
"; 75 | } 76 | 77 | /** 78 | * Registering widget settings in rest-api. 79 | * 80 | * @return void 81 | */ 82 | public function register_plugin_settings() { 83 | register_setting( 84 | 'ewm-settings-group', 85 | 'ewm_widget', 86 | array( 87 | 'show_in_rest' => array( 88 | 'schema' => array( 89 | 'type' => 'array', 90 | 'items' => array( 91 | 'type' => 'string', 92 | ), 93 | ), 94 | ), 95 | 'default' => array(), 96 | ) 97 | ); 98 | } 99 | } 100 | 101 | 102 | $widget_manager_loader = new Widget_Manager_Loader(); 103 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ideabox/elementor-widget-manager", 3 | "description": "", 4 | "type": "wordpress-plugin", 5 | "authors": [ 6 | { 7 | "name": "IdeaBox Creations", 8 | "email": "hello@ideaboxcreatins.com" 9 | } 10 | ], 11 | "require": {}, 12 | "require-dev": { 13 | "squizlabs/php_codesniffer": "^3.5", 14 | "dealerdirect/phpcodesniffer-composer-installer": "^0.6.2", 15 | "wp-coding-standards/wpcs": "^2.2", 16 | "phpcompatibility/phpcompatibility-wp": "^2.1" 17 | }, 18 | "scripts": { 19 | "phpcsi": [ 20 | "phpcs -i" 21 | ], 22 | "phpcs": [ 23 | "phpcs -s -p ." 24 | ], 25 | "phpcbf": [ 26 | "phpcbf -p ." 27 | ], 28 | "phpcsv": "phpcs --version" 29 | }, 30 | "extra": { 31 | "script-description": { 32 | "phpcs": "Analyze code against the WordPress coding standards with PHP_CodeSniffer", 33 | "phpcbf": "Fix coding standards warnings/errors automatically with PHP Code Beautifier", 34 | "phpcsi": "List of all the coding standered default as well as custom" 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /elementor-widget-manager.php: -------------------------------------------------------------------------------- 1 | includes(); 154 | 155 | add_action( 'elementor/widgets/widgets_registered', array( $this, 'unregister_widgets' ), 99 ); 156 | } 157 | 158 | /** 159 | * Includes. 160 | * 161 | * Include required files. 162 | * 163 | * @since 1.0.0 164 | * 165 | * @return void 166 | */ 167 | public function includes() { 168 | require_once 'classes/class-widget-manager-loader.php'; 169 | } 170 | 171 | /** 172 | * Admin Notice 173 | * 174 | * Warning when site doesn't have Elementor installed or activated. 175 | * 176 | * @since 1.0.0 177 | * 178 | * @access public 179 | */ 180 | public function admin_notice_missing_main_plugin() { 181 | 182 | // Checcking if current plugin is activated and then unset it. 183 | if ( isset( $_GET['activate'] ) ) { 184 | 185 | // Reset the variable. 186 | unset ( $_GET['activate'] ); 187 | } 188 | 189 | // Printing the message. 190 | $message = sprintf( 191 | /* translators: 1: Plugin name 2: Elementor*/ 192 | esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'el-widget-manager' ), 193 | '' . esc_html__( 'Elementor Widget Manager', 'el-widget-manager' ) . '', 194 | '' . esc_html__( 'Elementor', 'el-widget-manager' ) . '' 195 | ); 196 | 197 | printf( '

%1$s

', $message ); 198 | 199 | } 200 | 201 | /** 202 | * Admin Notice Minimum Elementor Version. 203 | * 204 | * Warning when site does not meet minimum required Elementor version. 205 | * 206 | * @since 1.0.0 207 | * 208 | * @return void 209 | */ 210 | public function admin_notice_minimum_elementor_version() { 211 | // Check if current plugin is activated and then unset it. 212 | if ( isset( $_GET['activate'] ) ) { 213 | // Reset the variable. 214 | unset( $_GET['activate'] ); 215 | } 216 | 217 | // Printing the message. 218 | $message = sprintf( 219 | /* translators: 1: Plugin name 2: Elementor 3: Required Elementor version*/ 220 | esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'el-widget-manager' ), 221 | '' . esc_html__( 'Elementor Widget Manager', 'el-widget-manager' ) . '', 222 | '' . esc_html__( 'Elementor', 'el-widget-manager' ) . '', 223 | self::MINIMUM_ELEMENTOR_VERSION 224 | ); 225 | 226 | printf( '

%1$s

', $message ); 227 | 228 | } 229 | 230 | /** 231 | * Admin Notice Minimum PHP version. 232 | * 233 | * Warning when site does not meet minimum required PHP version. 234 | * 235 | * @since 1.0.0 236 | * 237 | * @return void 238 | */ 239 | public function admin_notice_minimum_php_version() { 240 | // Check if current plugin is activated and then unset it. 241 | if ( isset( $_GET['activate'] ) ) { 242 | 243 | // Reset the variable. 244 | unset ( $_GET['activate'] ); 245 | } 246 | 247 | // Printing the message. 248 | $message = sprintf( 249 | /* translators: 1: Plugin name 2: PHP 3: Required PHP version*/ 250 | esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'el-widget-manager' ), 251 | '' . esc_html__( 'Elementor Widget Manager', 'el-widget-manager' ) . '', 252 | '' . esc_html__( 'PHP', 'el-widget-manager' ) . '', 253 | self::MINIMUM_PHP_VERSION 254 | ); 255 | 256 | printf( '

%1$s

', $message ); 257 | } 258 | 259 | 260 | /** 261 | * Unregister Widget. 262 | * 263 | * Unregistering the selected widget. 264 | * 265 | * @since 1.0.0 266 | * 267 | * @return void 268 | */ 269 | public function unregister_widgets() { 270 | $elementor = Elementor\Plugin::instance(); 271 | 272 | if ( ! $elementor->editor->is_edit_mode() ) { 273 | return; 274 | } 275 | 276 | $selected_widgets = get_option( 'ewm_widget' ); 277 | 278 | if ( ! empty( $selected_widgets ) ) { 279 | foreach ( $selected_widgets as $widget ) { 280 | $elementor->widgets_manager->unregister_widget_type( $widget ); 281 | } 282 | } 283 | } 284 | 285 | /** 286 | * Get registered widgets. 287 | * 288 | * Get all registered widgets of Elementor. 289 | * 290 | * @since 1.0.0 291 | * 292 | * @return array 293 | */ 294 | public function get_registered_widgets() { 295 | if ( ! empty( $this->widgets ) ) { 296 | return $this->widgets; 297 | } 298 | 299 | $elementor = Elementor\Plugin::instance(); 300 | 301 | // Fetching all the widget types names and its properties. 302 | $types = $elementor->widgets_manager->get_widget_types(); 303 | 304 | $categories = $this->get_categories(); 305 | 306 | $widgets = array(); 307 | 308 | foreach ( $types as $type ) { 309 | // $widget_cat = $type->get_categories(); 310 | 311 | // if ( ! in_array( $widget_cat[0], $categories, true ) ) { 312 | // continue; 313 | // } 314 | $widgets[ $type->get_name() ] = $type->get_title(); 315 | } 316 | 317 | if ( isset( $widgets['common'] ) ) { 318 | unset( $widgets['common'] ); 319 | } 320 | 321 | asort( $widgets ); 322 | 323 | $this->widgets = $widgets; 324 | 325 | return $widgets; 326 | } 327 | 328 | /** 329 | * Categories Function. 330 | * 331 | * Getting Categories to compare with Elementor categories. 332 | * 333 | * @since 1.0.0 334 | * 335 | * @return array 336 | */ 337 | public function get_categories() { 338 | return array( 339 | 'basic', 340 | 'pro-elements', 341 | 'general', 342 | 'theme-elements', 343 | 'woocommerce-elements', 344 | 'wordpress', 345 | ); 346 | } 347 | } 348 | 349 | Elementor_Widget_Manager::instance(); 350 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elementor-widget-manager", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --open", 8 | "build": "webpack", 9 | "watch": "webpack --watch" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "react": "^16.13.1", 16 | "react-dom": "^16.13.1", 17 | "react-notifications-component": "^2.4.0" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.8.7", 21 | "@babel/preset-env": "^7.8.7", 22 | "@babel/preset-react": "^7.8.3", 23 | "autoprefixer": "^9.7.4", 24 | "babel-loader": "^8.0.6", 25 | "css-loader": "^3.4.2", 26 | "mini-css-extract-plugin": "^0.9.0", 27 | "node-sass": "^4.13.1", 28 | "postcss-loader": "^3.0.0", 29 | "sass-loader": "^8.0.2", 30 | "webpack": "^4.42.0", 31 | "webpack-cli": "^3.3.11", 32 | "webpack-dev-server": "^3.10.3" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /phpcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | A custom set of code standard rules to check for WordPress themes and plugins. 8 | 9 | 10 | assets/ 11 | src/ 12 | images/ 13 | languages/ 14 | */node_modules/* 15 | */vendor/* 16 | */css/* 17 | */js/* 18 | */style.css 19 | webpack.config.js 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | tests/ 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Settings from './setting'; 2 | const { render } = wp.element; 3 | 4 | 5 | render( , document.getElementById( 'ewm-setting-root' ) ); 6 | -------------------------------------------------------------------------------- /src/setting.js: -------------------------------------------------------------------------------- 1 | import './setting.scss'; 2 | import ReactNotification, { store } from 'react-notifications-component'; 3 | import 'react-notifications-component/dist/theme.css'; 4 | 5 | 6 | /** 7 | * WordPress dependencies 8 | */ 9 | const { __ } = wp.i18n; 10 | 11 | const { 12 | Panel, 13 | PanelRow, 14 | Placeholder, 15 | Spinner, 16 | } = wp.components; 17 | 18 | const { 19 | Component, 20 | Fragment, 21 | } = wp.element; 22 | 23 | 24 | class Settings extends Component { 25 | 26 | constructor( props ) { 27 | 28 | super( props ); 29 | 30 | this.state = { 31 | isAPILoaded: false, 32 | isAPISaving: false, 33 | select_option: '-1', 34 | el_widget_list: [], 35 | selected_widget: [], 36 | search: '', 37 | notification: null, 38 | 39 | } 40 | 41 | this.el_widgets = []; 42 | this.search_widget = []; 43 | 44 | this.changeStatus = this.changeStatus.bind( this ); 45 | this.changeOptions = this.changeOptions.bind( this ); 46 | this.selectCheckbox = this.selectCheckbox.bind( this ); 47 | this.selectApply = this.selectApply.bind( this ); 48 | } 49 | 50 | 51 | 52 | // Formatting to all the previous setting when the component is mounted. 53 | async componentDidMount() { 54 | 55 | // Making array of object. 56 | let { el_widget_list } = this.state 57 | 58 | Object.keys( ewm_widgets ).map( ( value,index ) => { 59 | 60 | el_widget_list[index] = { 61 | title: ewm_widgets[value], 62 | slug: value, 63 | status: true, 64 | }; 65 | } ); 66 | 67 | this.setState( { el_widget_list } ); 68 | this.search_widget = this.state.el_widget_list; 69 | 70 | // Getting data from setting model api. 71 | wp.api.loadPromise.then( () => { 72 | 73 | this.widget = new wp.api.models.Settings(); 74 | 75 | if( ! this.state.isAPILoaded ) { 76 | 77 | this.widget.fetch().then( response => { 78 | 79 | let { el_widget_list } = this.state; 80 | 81 | Object.keys( this.state.el_widget_list ).map( ( index ) => { 82 | 83 | if ( response.ewm_widget.some( (val) => val === this.state.el_widget_list[index].slug ) ) { 84 | 85 | el_widget_list[index].status = ! this.state.el_widget_list[index].status 86 | this.el_widgets.push( this.state.el_widget_list[index].slug ); 87 | } 88 | }) 89 | this.setState( { el_widget_list } ); 90 | this.setState( { isAPILoaded: true } ); 91 | } ) 92 | } 93 | } ) 94 | } 95 | 96 | 97 | 98 | 99 | 100 | // Renders search result. 101 | searchResult( e ) { 102 | 103 | this.setState( { search: e.target.value } ); 104 | let { el_widget_list } = this.state,i=0; 105 | 106 | if( '' != e.target.value ) { 107 | 108 | el_widget_list = []; 109 | 110 | Object.keys( this.search_widget ).map( ( index ) => { 111 | if( this.search_widget[index].title.toUpperCase().indexOf( e.target.value.toUpperCase() ) > -1 ) { 112 | 113 | el_widget_list.push( this.search_widget[index] ); 114 | } 115 | }); 116 | } else { 117 | 118 | el_widget_list = this.search_widget; 119 | } 120 | 121 | this.setState( { el_widget_list } ); 122 | } 123 | 124 | 125 | 126 | 127 | 128 | // Selected elements pushed into new array. 129 | selectCheckbox( e, index ) { 130 | 131 | let { selected_widget } = this.state; 132 | 133 | // Select those which are checked. 134 | if( e.target.checked ) { 135 | 136 | selected_widget.push( this.state.el_widget_list[index].slug ); 137 | } else { 138 | 139 | let itemIndex = this.state.selected_widget.indexOf( this.state.el_widget_list[index].slug ); 140 | selected_widget.splice( itemIndex, 1 ); 141 | } 142 | 143 | this.setState( { selected_widget } ); 144 | console.log( this.state.selected_widget ); 145 | } 146 | 147 | 148 | 149 | // Selecting particular option from select. 150 | selectOption( e ) { 151 | 152 | this.setState( { select_option: e.target.value } ); 153 | } 154 | 155 | 156 | 157 | // Selecting all the wigdets. 158 | selectAll( e ) { 159 | 160 | let { selected_widget } = this.state; 161 | 162 | if( e.target.checked ) { 163 | 164 | Object.keys( this.state.el_widget_list ).map( ( index ) => { 165 | 166 | selected_widget.push( this.state.el_widget_list[index].slug ); 167 | }); 168 | 169 | this.setState( { selected_widget } ); 170 | 171 | } else { 172 | 173 | this.setState( { selected_widget: [] } ); 174 | } 175 | } 176 | 177 | 178 | 179 | 180 | // For saving the setting changes in the setting api. 181 | changeOptions( option, value ) { 182 | 183 | this.setState( { isAPISaving: true } ); 184 | 185 | const model = new wp.api.models.Settings( { 186 | [option]: value 187 | } ); 188 | 189 | model.save().then( ( response,status ) => { 190 | 191 | store.removeNotification( this.state.notification ); 192 | console.log( response ); 193 | 194 | if ( 'success' == status ) { 195 | 196 | this.addNotification( __( 'Settings Saved' ), 'success' ); 197 | this.setState( { isAPISaving: false } ); 198 | } 199 | } ) 200 | } 201 | 202 | 203 | 204 | // Changes after clicking the apply button. 205 | selectApply() { 206 | 207 | if( '-1' != this.state.select_option ) { 208 | 209 | let { el_widget_list } = this.state; 210 | 211 | if( this.state.selected_widget.length != 0 ) { 212 | 213 | if( 'activate' == this.state.select_option ) { 214 | 215 | Object.keys( this.state.el_widget_list ).map( ( index ) => { 216 | 217 | if ( this.state.selected_widget.some( (val) => val === this.state.el_widget_list[index].slug ) && ! this.state.el_widget_list[index].status ) { 218 | el_widget_list[index].status = ! el_widget_list[index].status; 219 | 220 | let itemIndex = this.el_widgets.indexOf( this.state.el_widget_list[index].slug ); 221 | this.el_widgets.splice( itemIndex, 1 ); 222 | } 223 | }) 224 | this.addNotification( __( 'Activating Widget...' ), 'info' ); 225 | 226 | } else if( 'deactive' == this.state.select_option ) { 227 | 228 | Object.keys( this.state.el_widget_list ).map( ( index ) => { 229 | 230 | if ( this.state.selected_widget.some( (val) => val === this.state.el_widget_list[index].slug ) && this.state.el_widget_list[index].status ) { 231 | el_widget_list[index].status = ! el_widget_list[index].status; 232 | 233 | this.el_widgets.push( this.state.el_widget_list[index].slug ); 234 | } 235 | }) 236 | this.addNotification( __( 'Deactivating Widget...' ), 'info' ); 237 | } 238 | 239 | // To uncheck all the selection after applying the bulk action. 240 | this.setState( { selected_widget: [] } ); 241 | 242 | // To select the default option bulk action. 243 | this.setState( { select_option: '-1' } ); 244 | 245 | // Again upadating the state. 246 | this.setState( { el_widget_list } ); 247 | 248 | // Passing the updated blacklist widget to settings api. 249 | this.changeOptions( 'ewm_widget', this.el_widgets); 250 | } else { 251 | 252 | // To select the default option bulk action. 253 | this.setState( { select_option: '-1' } ); 254 | 255 | this.addNotification( __( 'Choose atleast One Option' ), 'warning' ); 256 | } 257 | } else { 258 | 259 | this.addNotification( __( 'Need to Choose Other Options' ), 'warning' ); 260 | } 261 | } 262 | 263 | 264 | 265 | // For changing the status from activate to deactivate and vice versa. 266 | changeStatus( index ) { 267 | 268 | let { el_widget_list } = this.state; 269 | el_widget_list[index].status = ! this.state.el_widget_list[index].status 270 | 271 | this.setState( { el_widget_list } ); 272 | 273 | // If the status is false then push otherwise pop. 274 | if( ! this.state.el_widget_list[index].status ) { 275 | 276 | this.addNotification( __( 'Deactivating Widget...' ), 'info' ); 277 | this.el_widgets.push( this.state.el_widget_list[index].slug ); 278 | } else { 279 | 280 | this.addNotification( __( 'Activating Widget...' ), 'info' ); 281 | let itemIndex = this.el_widgets.indexOf( this.state.el_widget_list[index].slug ); 282 | this.el_widgets.splice( itemIndex, 1 ); 283 | } 284 | 285 | this.changeOptions( 'ewm_widget', this.el_widgets); 286 | } 287 | 288 | 289 | 290 | 291 | // Handling the notification for state updating. 292 | addNotification( message, status ) { 293 | const notification = store.addNotification({ 294 | message: message, 295 | type: status, // 'default', 'success', 'info', 'warning' 296 | container: 'bottom-left', // where to position the notifications 297 | animationIn: ["animated", "fadeIn"], // animate.css classes that's applied 298 | animationOut: ["animated", "fadeOut"], // animate.css classes that's applied 299 | dismiss: { 300 | duration: 2000, 301 | showIcon: true, 302 | }, 303 | }) 304 | 305 | this.setState( { notification } ); 306 | } 307 | 308 | 309 | 310 | render() { 311 | if( ! this.state.isAPILoaded ) { 312 | 313 | return ( 314 | 315 | 316 | 317 | ) 318 | } 319 | 320 | return( 321 | 322 | 323 | 324 |
325 |
326 |

{ __( 'Elementor Widget Manager', 'el-widget-manager' ) }

327 |

by IdeaBox Creations

328 |
329 |
330 | 331 | 332 |
333 |
334 | this.selectAll( e ) } /> 335 |
336 | 337 |
338 | 343 |
344 | 345 |
346 | 347 |
348 | 349 |
350 | this.searchResult( e ) } 357 | /> 358 |
359 |
360 | 361 | 362 | { 363 | this.state.el_widget_list != ''? 364 |
    365 | { 366 | Object.keys( this.state.el_widget_list ).map( ( index ) => { 367 | return ( 368 |
  • 369 |
    370 | this.selectCheckbox( e, index ) } 374 | checked={ this.state.selected_widget.some( (val) => val === this.state.el_widget_list[index].slug ) } 375 | /> 376 |
    377 | 378 |
    379 |

    { __( this.state.el_widget_list[index].title ) }

    380 |
    381 | 382 |
    383 | 386 |
    387 |
    • 388 | ) 389 | }) 390 | } 391 |
392 | :

{ __( 'Oops! Nothing Found' ) }

393 | } 394 | 395 | 396 | 397 | ) 398 | } 399 | } 400 | 401 | export default Settings; -------------------------------------------------------------------------------- /src/setting.scss: -------------------------------------------------------------------------------- 1 | #wpcontent { 2 | padding-left: 0; 3 | } 4 | 5 | .notice { 6 | display: none; 7 | } 8 | 9 | .notification-container-bottom-left{ 10 | bottom: 30px !important; 11 | } 12 | 13 | .notification-container-mobile-bottom{ 14 | bottom: 60px !important; 15 | } 16 | 17 | #ewm-setting-root { 18 | .ewm-setting-header { 19 | padding: 20px 10px; 20 | background-color: white; 21 | box-shadow: 0px 1px 0px rgba(213, 213, 213, 0.5), 0px 1px 2px #eee; 22 | text-align: center; 23 | .ewm-setting-title { 24 | margin: 0px auto; 25 | max-width: 750px; 26 | h1 { 27 | margin-top: 5px; 28 | } 29 | } 30 | p:last-of-type { 31 | margin-bottom: 0; 32 | } 33 | } 34 | .ewm-setting-container { 35 | max-width: 750px; 36 | margin: auto; 37 | margin-top: 30px; 38 | 39 | .components-panel__row { 40 | margin-top: 0px; 41 | display: block; 42 | } 43 | } 44 | .ewm-select-options-container { 45 | height: 40px; 46 | padding: 10px; 47 | display: flex; 48 | align-items: center; 49 | 50 | .ewm-select-options-container-checkbox { 51 | width: 50px; 52 | text-align: center; 53 | 54 | input[type=checkbox] { 55 | margin: 0; 56 | } 57 | } 58 | 59 | .ewm-select-options-container-select { 60 | width: 17%; 61 | } 62 | 63 | .ewm-select-options-container-button { 64 | width: 15%; 65 | 66 | button { 67 | background-color: inherit; 68 | margin: 0; 69 | } 70 | } 71 | 72 | .ewm-select-options-container-search { 73 | flex: 1; 74 | text-align: right; 75 | } 76 | } 77 | .ewm-setting-list { 78 | margin: 0; 79 | 80 | .ewm-setting-list-item { 81 | padding: 10px; 82 | height: 40px; 83 | display: flex; 84 | align-items: center; 85 | border-bottom: 1px solid #e2e4e7; 86 | border-top: 1px solid #e2e4e7; 87 | margin-bottom: 0; 88 | 89 | input[type=checkbox] { 90 | margin: 0; 91 | } 92 | 93 | h4 { 94 | margin: 0; 95 | font-size: 15px; 96 | } 97 | 98 | .ewm-setting-list-item-container-checkbox { 99 | width: 50px; 100 | text-align: center; 101 | } 102 | 103 | .ewm-setting-list-item-container-title { 104 | width: 70%; 105 | } 106 | 107 | .ewm-setting-list-item-container-button { 108 | text-align: center; 109 | 110 | .ewm-setting-list-button { 111 | border: none; 112 | background-color: inherit; 113 | padding: 10px; 114 | color: #499bc8; 115 | width: 100px; 116 | } 117 | 118 | .ewm-setting-list-button:hover { 119 | cursor: pointer; 120 | } 121 | } 122 | } 123 | } 124 | .ewm-empty-search { 125 | text-align: center; 126 | border-top: 1px solid #e2e4e7; 127 | 128 | p { 129 | font-size: 30px; 130 | } 131 | } 132 | ul { 133 | list-style: none; 134 | } 135 | li { 136 | &.activate { 137 | border-left: 4px solid #f1f1f1; 138 | } 139 | &.deactivate { 140 | border-left: 4px solid #499bc8; 141 | background-color: aliceblue; 142 | 143 | 144 | .ewm-setting-list-button { 145 | color: #497e99 !important; 146 | font-weight: 900; 147 | } 148 | } 149 | } 150 | button:hover { 151 | cursor: pointer; 152 | } 153 | .components-placeholder { 154 | background: transparent; 155 | margin-top: 25vh; 156 | margin-bottom: 25vh; 157 | } 158 | } 159 | 160 | @media screen and (max-width: 782px) { 161 | .auto-fold #wpcontent { 162 | padding-left: 0; 163 | } 164 | 165 | #ewm-setting-root { 166 | .ewm-select-options-container { 167 | display: block; 168 | height: auto; 169 | 170 | .ewm-select-options-container-checkbox{ 171 | display: inline-block; 172 | } 173 | 174 | .ewm-select-options-container-select{ 175 | width: auto; 176 | display: inline-block; 177 | } 178 | 179 | .ewm-select-options-container-button{ 180 | display: inline-block; 181 | width: auto; 182 | margin-left: 10px; 183 | } 184 | 185 | .ewm-select-options-container-search{ 186 | text-align: left; 187 | margin-left: 50px; 188 | margin-top: 10px; 189 | } 190 | } 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require( 'path' ); 2 | const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); 3 | const webpack = require( 'webpack' ); 4 | 5 | const config = { 6 | // Entry point. 7 | entry: { 8 | admin: ['./src/index.js'], 9 | }, 10 | 11 | // Output single file. 12 | output: { 13 | path: path.resolve( __dirname, 'build' ), 14 | filename: '[name].js', 15 | }, 16 | 17 | // Setting webpack dev server 18 | devServer: { 19 | contentBase: './build', 20 | }, 21 | 22 | // Setting mode for webpack. 23 | mode: 'development', 24 | 25 | // Setting rules for modules. 26 | module: { 27 | rules: [ 28 | { 29 | test: /\.js$/, 30 | use: { 31 | loader: 'babel-loader', 32 | } 33 | }, 34 | { 35 | test: /\.(css|scss)$/, 36 | use: [ 37 | { 38 | loader: MiniCssExtractPlugin.loader 39 | }, 40 | 'css-loader', 41 | { 42 | loader: 'postcss-loader', 43 | options: { 44 | plugins: [require( 'autoprefixer' )], 45 | } 46 | }, 47 | 'sass-loader', 48 | ] 49 | } 50 | ] 51 | }, 52 | plugins: [ 53 | new MiniCssExtractPlugin( { 54 | filename: 'admin.css' 55 | } ) 56 | ] 57 | 58 | } 59 | 60 | module.exports = config; 61 | --------------------------------------------------------------------------------