Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrades to React 18 and fixes minor bugs #2531

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import KirkiColorPaletteForm from './KirkiColorPaletteForm';

const wpReactRender = ( target, reactNode ) => {
if ( target ) {

if ( wp.element.createRoot ) {
wp.element.createRoot( target ).render( wp.element.reactNode );
} else {
wp.element.render( reactNode, target );
}
}
};

/**
* KirkiColorPaletteControl.
*
Expand Down Expand Up @@ -65,17 +76,18 @@ const KirkiColorPaletteControl = wp.customize.Control.extend({
renderContent: function renderContent() {
const control = this;

ReactDOM.render(
const reactElement = (
<KirkiColorPaletteForm
{...control.params}
control={control}
customizerSetting={control.setting}
setNotificationContainer={control.setNotificationCotainer}
value={control.params.value}
/>,
control.container[0]
/>
);

wpReactRender(control.container[0], reactElement)

if (false !== control.params.choices.allowCollapse) {
control.container.addClass('allowCollapse');
}
Expand Down
2 changes: 1 addition & 1 deletion kirki-packages/control-generic/dist/control.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion kirki-packages/control-generic/dist/control.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions kirki-packages/control-generic/src/control.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
wp.customize.controlConstructor["kirki-generic"] =
wp.customize.kirkiDynamicControl.extend({
initKirkiControl: function (control) {
control = control || this;
initKirkiControl: function (_control) {
const control = _control ?? this;
const params = control.params;

control.container.find("input, textarea").on("change input", function () {
const value = jQuery(this).val();
let value = jQuery(this).val();

if (
"kirki-generic" === params.type &&
Expand Down
13 changes: 12 additions & 1 deletion kirki-packages/control-react-select/src/KirkiSelectControl.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
/* global wp, jQuery, React, ReactDOM, _ */
import KirkiSelectForm from "./KirkiSelectForm";

const wpReactRender = ( target, reactNode ) => {
if ( target ) {

if ( wp.element.createRoot ) {
wp.element.createRoot( target ).render( wp.element.reactNode );
} else {
wp.element.render( reactNode, target );
}
}
};

/**
* KirkiSelectControl.
*
Expand Down Expand Up @@ -87,7 +98,7 @@ const KirkiSelectControl = wp.customize.Control.extend({
maxSelectionNumber={control.params.maxSelectionNumber}
/>
);
ReactDOM.render(form, control.container[0]);
wpReactRender(control.container[0], form);
},

/**
Expand Down
18 changes: 15 additions & 3 deletions kirki-packages/control-slider/src/KirkiSliderControl.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import KirkiSliderForm from './KirkiSliderForm';

const wpReactRender = ( target, reactNode ) => {
if ( target ) {

if ( wp.element.createRoot ) {
wp.element.createRoot( target ).render( wp.element.reactNode );
} else {
wp.element.render( reactNode, target );
}
}
};

/**
* KirkiSliderControl.
*
Expand Down Expand Up @@ -65,17 +76,18 @@ const KirkiSliderControl = wp.customize.Control.extend({
renderContent: function renderContent() {
const control = this;

ReactDOM.render(
const reactElement = (
<KirkiSliderForm
{...control.params}
control={control}
customizerSetting={control.setting}
setNotificationContainer={control.setNotificationCotainer}
value={control.params.value}
/>,
control.container[0]
/>
);

wpReactRender(control.container[0], reactElement);

if (false !== control.params.choices.allowCollapse) {
control.container.addClass('allowCollapse');
}
Expand Down
24 changes: 17 additions & 7 deletions kirki.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,10 @@ const definedPackages = {
path: "kirki-packages/control-repeater",
sources: ["src/control.js"],
},
"control-select": {
path: "kirki-packages/control-select",
sources: ["src/control.js"],
},
// "control-select": {
// path: "kirki-packages/control-select",
// sources: ["src/control.js"],
// },
"control-slider": {
path: "kirki-packages/control-slider",
sources: ["src/control.js"],
Expand Down Expand Up @@ -156,13 +156,23 @@ const program = sade("kirki");
program.version("5.1.0");

program
.command("build <packageName>")
.command("build [packageName]")
.describe("Build a package by package name")
.option("-d, --debug", "Build as unminified code for debugging purpose")
.option("-a, --all", "Build all packages, overriding the name supplied")
.example("build control-base")
.example("build control-base --debug")
.action((packageName, opts) => {
runParcel("build", packageName, opts);
if (opts.a) {
Object.keys(definedPackages).forEach(name => {
console.log(name);
runParcel("build", name, opts)
});
} else {
if (packageName) {
runParcel("build", packageName, opts);
}
}
});

program
Expand All @@ -186,4 +196,4 @@ program
shell.exec("bash build.sh");
});

program.parse(process.argv);
program.parse(process.argv);
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@
"dependencies": {
"colord": "^2.9.3",
"jquery": "^3.6.3",
"react": "^17.0.2",
"react": "^18.3.1",
"react-colorful": "^5.6.1",
"react-dom": "^17.0.2",
"react-dom": "^18.3.1",
"react-select": "^5.8.0",
"reactcss": "^1.2.3",
"sade": "^1.8.1",
"shelljs": "^0.8.5"
Expand Down
Loading