mariusmemberfix

Hi @rankmathsupport ,

Thank you for your reply.

Here is a screencast showing you the issue. https://www.loom.com/share/4d36e70bff1b4ebe983c8908befbe0c3

I am looking forward to hearing from you.

Best,
Marius

@threadi

Thank you so much; it worked!

Now the components are loading as they should.

So I added the dependencies, but the issue is still there.
The libraries are not loading.

Here is the controls.jsx file

import { __ } from '@wordpress/i18n';
import {
	TextareaControl,
	ToggleControl,
} from '@wordpress/components';

const MessageControl = ( { value, onChange } ) => {
	return (
		<TextareaControl
			label={ __( 'Message', 'demnme-learning' ) }
			value={ value }
			onChange={ onChange }
			__nextHasNoMarginBottom
		/>
	);
};

const DisplayControl = ( { value, onChange, label } ) => {
	return (
		<ToggleControl
			checked={ value }
			label={ label }
			onChange={ onChange }
			__nextHasNoMarginBottom
		/>
	);
};

const DisplayControlCheck = ({ value, onChange, label }) => {
  return (
    <div className="custom-toggle-control">
      <label>
        {label}
        <input
          type="checkbox"
          checked={value}
          onChange={onChange}
          style={{ marginLeft: '8px' }}
        />
      </label>
    </div>
  );
};

export { MessageControl, DisplayControl, DisplayControlCheck };

What is really weird is that the same component works fine on the LearnDash course page, but on user edit page is broken.

@threadi yes, the code is down below.

function boilerplate_load_assets() {
  wp_enqueue_script('mainjs', get_theme_file_uri('/build/index.js'), array('wp-element', 'wp-dom-ready'), '1.0', true);
  wp_enqueue_style('maincss', get_theme_file_uri('/build/index.css'));
}

add_action('admin_enqueue_scripts', 'boilerplate_load_assets');

Hi @threadi ,
Thank you for your reply.

// this is the index.js
import { CourseBuilder, LessonsList, UserSettings, UserProfile } from './components';
import React from "react"
import ReactDOM from "react-dom"
import domReady from '@wordpress/dom-ready';
import { createRoot } from '@wordpress/element';

domReady( () => {

  const courseBuilderRoot = document.querySelector("#course-builder-root");

  if(courseBuilderRoot) {
    const courseRoot = createRoot(courseBuilderRoot);
    courseRoot.render(<LessonsList />);
  }

  const studentBuilderRoot = document.querySelector("#student-builder-root");
  if (studentBuilderRoot) {
    const studentRoot = createRoot(studentBuilderRoot);
    studentRoot.render(<UserSettings />);
  }

} );

// this is the index.js
import { CourseBuilder, LessonsList, UserSettings, UserProfile } from './components';
import React from "react"
import ReactDOM from "react-dom"
import domReady from '@wordpress/dom-ready';
import { createRoot } from '@wordpress/element';

domReady( () => {

  const courseBuilderRoot = document.querySelector("#course-builder-root");

  if(courseBuilderRoot) {
    const courseRoot = createRoot(courseBuilderRoot);
    courseRoot.render(<LessonsList />);
  }

  const studentBuilderRoot = document.querySelector("#student-builder-root");
  if (studentBuilderRoot) {
    const studentRoot = createRoot(studentBuilderRoot);
    studentRoot.render(<UserSettings />);
  }

} );

//down below is the code that goes to functions.php
function display_courses_with_checkboxes($user) {
    $enrolled_courses_ids = learndash_user_get_enrolled_courses($user->ID);

    if (!empty($enrolled_courses_ids)) {
        echo '<h3>Show Solutions for LearnDash Courses</h3>';
        echo '<div id="student-builder-root"></div>';

    }

    wp_enqueue_style( 'wp-components' );

}
add_action('show_user_profile', 'display_courses_with_checkboxes');
add_action('edit_user_profile', 'display_courses_with_checkboxes');

Hi @yordansoares,

Is there any option I need to check in order to make it work?

WooCommerce marks the plugin as incompatible. The version of WooCommerce PDF Invoices & Packing Slips Professional is 2.7.3
You can see here: https://ibb.co/6HXyXsD