From c27d1318fa79cbef3718f4ae21f96e69b929bcf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 29 Feb 2024 10:00:40 +0100 Subject: [PATCH 1/6] Revert "Frontend libs 9.5.0" --- CHANGELOG.md | 16 +-- package.json | 28 ++--- scripts/components/collapsable/collapsable.js | 11 +- .../color-picker-component.js | 19 +-- .../color-picker-component.scss | 13 ++ .../{toggle => icon-toggle}/docs/readme.mdx | 4 +- .../{toggle => icon-toggle}/docs/story.js | 18 +-- .../toggle.js => icon-toggle/icon-toggle.js} | 15 +-- scripts/components/index.js | 2 +- .../components/number-picker/number-picker.js | 109 +++++++--------- .../number-picker/number-picker.scss | 49 +++----- .../responsive-number-picker.js | 41 +++--- scripts/editor/icons/icons.js | 7 +- scripts/index.js | 2 +- styles/es-component-styles.scss | 1 + .../es-gutenberg-component-style-updates.scss | 2 +- styles/es-utility-classes.scss | 119 +++++------------- 17 files changed, 168 insertions(+), 288 deletions(-) create mode 100644 scripts/components/color-picker-component/color-picker-component.scss rename scripts/components/{toggle => icon-toggle}/docs/readme.mdx (94%) rename scripts/components/{toggle => icon-toggle}/docs/story.js (92%) rename scripts/components/{toggle/toggle.js => icon-toggle/icon-toggle.js} (91%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bbfe139f..f00102117 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,26 +4,12 @@ All notable changes to this project will be documented in this file. This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/). -## [9.5.0] - 2024-02-29 - -### Added -- New `es-size`, `es-min-size`, and `es-max-size` (+ `-nested` variants) utility classes for setting height and width at once -- New `prefix`, `suffix`, `extraButton`, and `noExtraButtonSeparator` props in `NumberPicker` -- `Collapsable` now has a `disabled` prop to disable the expand/collapse button -- 1 new UI icon +## [9.5.0] - 2024-02-21 ### Updated -- `NumberPicker` has been completely updated visually -- `ResponsiveNumberPicker` now better visually integrates the reset button - Fixed block renaming (due to recent Gutenberg changes) - `LinkInput` should now pop the suggestion panel only when focused into the input field - Fixed typo in `MultiSelect` story -- Tweaked Gutenberg override classes for `NumberControl` so they don't override FE libs `NumberPicker` -- Utility classes now use logical properties for paddings, margins, borders, widths, and heights -- `IconToggle` is now `Toggle`, but the previous name will also work (for now) -- Refreshed 3 UI icons -- Updated dependencies -- `ColorPicker` now has a slot for additional controls ## [9.4.2] - 2024-02-21 diff --git a/package.json b/package.json index dad607cc7..20a644e36 100644 --- a/package.json +++ b/package.json @@ -51,10 +51,10 @@ "@infinumjs/eslint-config-react-js": "^3.5.0", "@stylistic/stylelint-plugin": "^2.1.0", "@uidotdev/usehooks": "^2.4.1", - "@wordpress/api-fetch": "^6.49.0", - "@wordpress/block-editor": "^12.20.0", - "@wordpress/dependency-extraction-webpack-plugin": "^5.3.0", - "@wordpress/dom-ready": "^3.52.0", + "@wordpress/api-fetch": "^6.48.0", + "@wordpress/block-editor": "^12.19.1", + "@wordpress/dependency-extraction-webpack-plugin": "^5.2.0", + "@wordpress/dom-ready": "^3.51.0", "autoprefixer": "^10.4.17", "babel-loader": "^9.1.3", "browser-sync": "^3.0.2", @@ -64,7 +64,7 @@ "crypto-browserify": "^3.12.0", "css-loader": "^6.10.0", "css-minimizer-webpack-plugin": "^6.0.0", - "eslint": "^8.57.0", + "eslint": "^8.56.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", @@ -78,9 +78,9 @@ "just-kebab-case": "^4.2.0", "just-throttle": "^4.2.0", "media-blender": "^2.1.0", - "mini-css-extract-plugin": "^2.8.1", + "mini-css-extract-plugin": "^2.8.0", "postcss": "^8.4.35", - "postcss-loader": "^8.1.1", + "postcss-loader": "^8.1.0", "postcss-scss": "^4.0.9", "promisify-child-process": "^4.1.2", "raw-loader": "^4.0.2", @@ -91,9 +91,9 @@ "react-html-parser": "^2.0.2", "react-select": "^5.8.0", "regenerator-runtime": "^0.14.1", - "sass": "^1.71.1", - "sass-loader": "^14.1.1", - "storybook": "^7.6.17", + "sass": "^1.71.0", + "sass-loader": "^14.1.0", + "storybook": "^7.6.16", "stream-browserify": "^3.0.0", "style-loader": "^3.3.4", "stylelint": "^16.2.1", @@ -106,7 +106,7 @@ "webpack-merge": "^5.10.0" }, "devDependencies": { - "@babel/preset-env": "^7.24.0", + "@babel/preset-env": "^7.23.9", "@eightshift/storybook": "^1.6.1", "@jest/globals": "^29.7.0", "babel-jest": "^29.7.0", @@ -116,11 +116,11 @@ "jest-environment-jsdom": "^29.7.0", "lint-staged": "^15.2.2", "micromodal": "^0.4.10", - "ol": "^9.0.0", - "ol-mapbox-style": "^12.2.1", + "ol": "^8.2.0", + "ol-mapbox-style": "^12.2.0", "react-test-renderer": "^18.2.0", "replace-in-file": "^7.1.0", - "swiper": "^11.0.7" + "swiper": "^11.0.6" }, "sideEffects": false, "lint-staged": { diff --git a/scripts/components/collapsable/collapsable.js b/scripts/components/collapsable/collapsable.js index 8bd131cf7..f6a87028b 100644 --- a/scripts/components/collapsable/collapsable.js +++ b/scripts/components/collapsable/collapsable.js @@ -16,7 +16,7 @@ import { icons, AnimatedContentVisibility, Control, classnames } from '@eightshi * @param {string?} [props.additionalClasses] - If passed, the classes are appended to the component classes. * @param {React.Component?} [props.actions] - Actions to show to the right of the label. * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are kept visible when the component is expanded. - * @param {boolean} [props.disabled=false] - If `true`, the expand button is disabled. + * @returns */ export const Collapsable = ({ icon, @@ -32,15 +32,9 @@ export const Collapsable = ({ actions, keepActionsOnExpand = false, - - disabled = false, }) => { const [isOpen, setIsOpen] = useState(false); - if (disabled && isOpen) { - setIsOpen(false); - } - return ( diff --git a/scripts/components/color-picker-component/color-picker-component.js b/scripts/components/color-picker-component/color-picker-component.js index 806c66216..55d6287b5 100644 --- a/scripts/components/color-picker-component/color-picker-component.js +++ b/scripts/components/color-picker-component/color-picker-component.js @@ -37,7 +37,6 @@ import { ColorPalette } from '../color-palette-custom/color-palette-custom'; * @param {React.Component?} [props.buttonIconOverride] - If provided, overrides the default trigger button icon. * @param {object?} [props.additionalButtonArgs] - Allows passing additional arguments to the trigger button. * @param {object?} [props.additionalColorPaletteArgs] - Allows passing additional arguments to the color palette component. - * @param {React.Component?} [props.additionalControls] - Allows passing custom controls to the bottom of ColorPicker's popover. */ export const ColorPicker = (props) => { const { @@ -73,8 +72,6 @@ export const ColorPicker = (props) => { buttonIconOverride, additionalButtonArgs, additionalColorPaletteArgs, - - additionalControls, } = props; let defaultPopupTitle = __('Pick a color', 'eightshift-frontend-libs'); @@ -182,8 +179,8 @@ export const ColorPicker = (props) => { allowCloseFromChildren noArrow > -
-
+
+

{pickerPopupTitle ?? defaultPopupTitle}

-
+
{
-
+
{ />
- {additionalControls && -
- {additionalControls} -
- } - {canReset && -
+
- - {extraButton && !noExtraButtonSeparator && -
- } - - {extraButton && -
- {extraButton} -
- }
); diff --git a/scripts/components/number-picker/number-picker.scss b/scripts/components/number-picker/number-picker.scss index 8f1630615..106f7963b 100644 --- a/scripts/components/number-picker/number-picker.scss +++ b/scripts/components/number-picker/number-picker.scss @@ -1,37 +1,26 @@ -// stylelint-disable declaration-no-important .es-number-picker { - .es-number-picker-container { - &:has(.components-input-control__input:focus-visible) { - box-shadow: 0 0 0 2px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important; - } - } - - .es-number-picker-input { - .components-input-control { - &__backdrop { - display: none !important; - } - - &__container { - border: none !important; - box-shadow: none !important; - background: none !important; - - min-height: auto !important; - } + .es-number-picker-input-value { + .components-input-control__input { + font-variant-numeric: tabular-nums; - &__input { - appearance: none; - - margin: 0 !important; - padding: 0 !important; - min-height: auto !important; + // stylelint-disable-next-line declaration-no-important + min-height: 2rem !important; + } - border: none !important; - box-shadow: none !important; + .components-input-control__backdrop { + // stylelint-disable declaration-no-important + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + // stylelint-enable declaration-no-important + } + } - width: var(--es-number-input-width) !important; - } + .components-button > svg { + transition: { + // stylelint-disable-next-line declaration-no-important + property: color, background-color, border-color, text-decoration-color, fill, stroke !important; + timing-function: var(--es-ease-out-cubic); + duration: 0.3s; } } } diff --git a/scripts/components/responsive-number-picker/responsive-number-picker.js b/scripts/components/responsive-number-picker/responsive-number-picker.js index b4739bcef..5a031d205 100644 --- a/scripts/components/responsive-number-picker/responsive-number-picker.js +++ b/scripts/components/responsive-number-picker/responsive-number-picker.js @@ -120,25 +120,29 @@ export const ResponsiveNumberPicker = (props) => { }; const nearestValid = getNearest(); + const parsedValue = parseFloat(inheritCheck(currentValue) ? nearestValid : currentValue); return ( - { - const newValue = stringValues ? `${currentValue}` : currentValue; - onChange({ - ...value, - [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, - }); - }} - noBottomSpacing - fixedWidth={fieldWidth} - min={min} - max={max} - step={step} - extraButton={typeof resetButton !== 'undefined' && +
+ { + const newValue = stringValues ? `${currentValue}` : currentValue; + onChange({ + ...value, + [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, + }); + }} + noBottomSpacing + fixedWidth={fieldWidth} + min={min} + max={max} + step={step} + {...additionalProps} + /> + + {typeof resetButton !== 'undefined' &&
); })} diff --git a/scripts/editor/icons/icons.js b/scripts/editor/icons/icons.js index 9dbc35cb2..df75c0cf2 100644 --- a/scripts/editor/icons/icons.js +++ b/scripts/editor/icons/icons.js @@ -369,7 +369,7 @@ export const icons = { dropdownCaret: , checkCircleFill: , componentGeneric: , - toggleOff: , + toggleOff: , toggleOn: , toggleOnAlt: , hyphenate: , @@ -724,8 +724,8 @@ export const icons = { textSizeAlt: , textLarger: , textSmaller: , - extract: , - extractAlt: , + extract: , + extractAlt: , tree: , treeAlt: , treeAlt2: , @@ -745,7 +745,6 @@ export const icons = { officeBuilding: , officeBuildings: , box: , - hoverBackgroundGlow: , }; /** diff --git a/scripts/index.js b/scripts/index.js index 323627b1d..0d21bd420 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -27,7 +27,7 @@ export { RangeSlider } from './components/custom-slider/custom-range-slider'; export { FancyDivider } from './components/fancy-divider/fancy-divider'; export { HelpModal } from './components/help-modal/help-modal'; export { IconLabel } from './components/icon-label/icon-label'; -export { Toggle, IconToggle } from './components/toggle/toggle'; +export { IconToggle } from './components/icon-toggle/icon-toggle'; export { Notification } from './components/inline-notification/inline-notification'; export { LinkInput, LinkEditComponent } from './components/link-input/link-input'; export { MatrixAlignControl } from './components/matrix-align-control/matrix-align-control'; diff --git a/styles/es-component-styles.scss b/styles/es-component-styles.scss index 6477e1714..580d6e70c 100644 --- a/styles/es-component-styles.scss +++ b/styles/es-component-styles.scss @@ -7,6 +7,7 @@ @import '../scripts//components/number-picker/number-picker.scss'; @import '../scripts/components/help-modal/help-modal'; @import '../scripts/components/custom-select/custom-select'; +@import '../scripts/components/color-picker-component/color-picker-component'; @import '../scripts/components/server-side-render/server-side-render'; @import '../scripts/components/color-palette-custom/color-palette-custom'; @import './es-shared/es-nested-collapsable'; diff --git a/styles/es-gutenberg-component-style-updates.scss b/styles/es-gutenberg-component-style-updates.scss index 827cbc266..384c5630f 100644 --- a/styles/es-gutenberg-component-style-updates.scss +++ b/styles/es-gutenberg-component-style-updates.scss @@ -75,7 +75,7 @@ } // Tweak NumberControl to better fit in. -.components-number-control:not(.es-number-picker .components-number-control) { +.components-number-control { .components-input-control__input { padding: 0 0.5rem !important; font-size: 0.78125rem !important; diff --git a/styles/es-utility-classes.scss b/styles/es-utility-classes.scss index 2c983c1ba..c844410bf 100644 --- a/styles/es-utility-classes.scss +++ b/styles/es-utility-classes.scss @@ -320,7 +320,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-t': ( - 'cssProp': 'border-block-start', + 'cssProp': 'border-top', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -329,7 +329,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-b': ( - 'cssProp': 'border-block-end', + 'cssProp': 'border-bottom', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -338,7 +338,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-l': ( - 'cssProp': 'border-inline-start', + 'cssProp': 'border-left', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -347,7 +347,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-r': ( - 'cssProp': 'border-inline-end', + 'cssProp': 'border-right', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -392,7 +392,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mt': ( - 'cssProp': 'margin-block-start', + 'cssProp': 'margin-top', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -401,7 +401,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mb': ( - 'cssProp': 'margin-block-end', + 'cssProp': 'margin-bottom', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -410,7 +410,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'ml': ( - 'cssProp': 'margin-inline-start', + 'cssProp': 'margin-left', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -419,7 +419,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mr': ( - 'cssProp': 'margin-inline-end', + 'cssProp': 'margin-right', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -455,7 +455,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pt': ( - 'cssProp': 'padding-block-start', + 'cssProp': 'padding-top', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -464,7 +464,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pb': ( - 'cssProp': 'padding-block-end', + 'cssProp': 'padding-bottom', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -473,7 +473,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pl': ( - 'cssProp': 'padding-inline-start', + 'cssProp': 'padding-left', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -482,7 +482,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pr': ( - 'cssProp': 'padding-inline-end', + 'cssProp': 'padding-right', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -500,7 +500,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'w': ( - 'cssProp': 'inline-size', + 'cssProp': 'width', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -509,7 +509,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'h': ( - 'cssProp': 'block-size', + 'cssProp': 'height', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -626,7 +626,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tl': ( - 'cssProp': 'border-start-start-radius', + 'cssProp': 'border-top-left-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -635,7 +635,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tr': ( - 'cssProp': 'border-start-end-radius', + 'cssProp': 'border-top-right-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -644,7 +644,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-bl': ( - 'cssProp': 'border-end-start-radius', + 'cssProp': 'border-bottom-left-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -653,7 +653,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-br': ( - 'cssProp': 'border-end-end-radius', + 'cssProp': 'border-bottom-right-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -1159,19 +1159,19 @@ $es-utility-props: ( } .es-border-t { - border-block-start: 1px solid currentColor; + border-top: 1px solid currentColor; } .es-border-b { - border-block-end: 1px solid currentColor; + border-bottom: 1px solid currentColor; } .es-border-l { - border-inline-start: 1px solid currentColor; + border-left: 1px solid currentColor; } .es-border-r { - border-inline-end: 1px solid currentColor; + border-right: 1px solid currentColor; } .es-border-x { @@ -1246,70 +1246,6 @@ $es-utility-props: ( } } -// Special 'size' utility class (w + h). -@each $name, $value in $es-spacings { - .es-size-#{$name} { - block-size: #{$value}; - inline-size: #{$value}; - } - - .es-size-#{$name}\! { - block-size: #{$value} !important; - inline-size: #{$value} !important; - } - - .es-min-size-#{$name} { - min-block-size: #{$value}; - min-inline-size: #{$value}; - } - - .es-min-size-#{$name}\! { - min-block-size: #{$value} !important; - min-inline-size: #{$value} !important; - } - - .es-max-size-#{$name} { - max-block-size: #{$value}; - max-inline-size: #{$value}; - } - - .es-max-size-#{$name}\! { - max-block-size: #{$value} !important; - max-inline-size: #{$value} !important; - } - - // 'nested' variants - .es-nested-size-#{$name} svg { - block-size: #{$value}; - inline-size: #{$value}; - } - - .es-nested-size-#{$name}\! svg { - block-size: #{$value} !important; - inline-size: #{$value} !important; - } - - .es-min-size-#{$name} svg { - min-block-size: #{$value}; - min-inline-size: #{$value}; - } - - .es-min-size-#{$name}\! svg { - min-block-size: #{$value} !important; - min-inline-size: #{$value} !important; - } - - .es-max-size-#{$name} svg { - max-block-size: #{$value}; - max-inline-size: #{$value}; - } - - .es-max-size-#{$name}\! svg { - max-block-size: #{$value} !important; - max-inline-size: #{$value} !important; - } -} - @each $size, $value in $es-square-button-sizes { .es-button-square-#{$size} { width: #{$value} !important; @@ -1346,15 +1282,16 @@ $es-utility-props: ( // Default WP field spacing. .es-has-wp-field-v-space { - margin-block: 1.5rem; + margin-top: 1.5rem; + margin-bottom: 1.5rem; } .es-has-wp-field-b-space { - margin-block-end: 1.5rem; + margin-bottom: 1.5rem; } .es-has-wp-field-t-space { - margin-block-start: 1.5rem; + margin-top: 1.5rem; } // A11y high-visibility outline. @@ -1677,10 +1614,10 @@ $es-utility-props: ( // Helper to disable default Gutenberg field spacing (e.g. for inlining input fields). .es-no-field-spacing { - margin-block-end: 0 !important; + margin-bottom: 0 !important; .components-base-control__field { - margin-block-end: 0 !important; + margin-bottom: 0 !important; } } From c18dbf7cf44e9d7ccb9751c9e596fcb48a0002ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Tue, 23 Apr 2024 14:02:17 +0200 Subject: [PATCH 2/6] sync files --- package.json | 2 +- scripts/components/collapsable/collapsable.js | 11 +- .../color-picker-component.js | 19 ++- .../color-picker-component.scss | 13 -- scripts/components/index.js | 2 +- .../components/number-picker/number-picker.js | 40 +++--- .../number-picker/number-picker.scss | 17 +-- .../responsive-number-picker.js | 41 +++--- .../icon-toggle.js => toggle/toggle.js} | 15 ++- scripts/editor/icons/icons.js | 6 +- scripts/index.js | 2 +- styles/es-component-styles.scss | 1 - .../es-gutenberg-component-style-updates.scss | 2 +- styles/es-utility-classes.scss | 119 +++++++++++++----- 14 files changed, 176 insertions(+), 114 deletions(-) delete mode 100644 scripts/components/color-picker-component/color-picker-component.scss rename scripts/components/{icon-toggle/icon-toggle.js => toggle/toggle.js} (91%) diff --git a/package.json b/package.json index 2a71dd74e..b44c2a3e9 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "crypto-browserify": "^3.12.0", "css-loader": "^7.1.1", "css-minimizer-webpack-plugin": "^6.0.0", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", diff --git a/scripts/components/collapsable/collapsable.js b/scripts/components/collapsable/collapsable.js index f6a87028b..8bd131cf7 100644 --- a/scripts/components/collapsable/collapsable.js +++ b/scripts/components/collapsable/collapsable.js @@ -16,7 +16,7 @@ import { icons, AnimatedContentVisibility, Control, classnames } from '@eightshi * @param {string?} [props.additionalClasses] - If passed, the classes are appended to the component classes. * @param {React.Component?} [props.actions] - Actions to show to the right of the label. * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are kept visible when the component is expanded. - * @returns + * @param {boolean} [props.disabled=false] - If `true`, the expand button is disabled. */ export const Collapsable = ({ icon, @@ -32,9 +32,15 @@ export const Collapsable = ({ actions, keepActionsOnExpand = false, + + disabled = false, }) => { const [isOpen, setIsOpen] = useState(false); + if (disabled && isOpen) { + setIsOpen(false); + } + return (
diff --git a/scripts/components/color-picker-component/color-picker-component.js b/scripts/components/color-picker-component/color-picker-component.js index 1a14674e3..c7954429c 100644 --- a/scripts/components/color-picker-component/color-picker-component.js +++ b/scripts/components/color-picker-component/color-picker-component.js @@ -37,6 +37,7 @@ import { ColorPalette } from '../color-palette-custom/color-palette-custom'; * @param {React.Component?} [props.buttonIconOverride] - If provided, overrides the default trigger button icon. * @param {object?} [props.additionalButtonArgs] - Allows passing additional arguments to the trigger button. * @param {object?} [props.additionalColorPaletteArgs] - Allows passing additional arguments to the color palette component. + * @param {React.Component?} [props.additionalControls] - Allows passing custom controls to the bottom of ColorPicker's popover. */ export const ColorPicker = (props) => { const { @@ -72,6 +73,8 @@ export const ColorPicker = (props) => { buttonIconOverride, additionalButtonArgs, additionalColorPaletteArgs, + + additionalControls, } = props; let defaultPopupTitle = __('Pick a color', 'eightshift-frontend-libs'); @@ -179,8 +182,8 @@ export const ColorPicker = (props) => { allowCloseFromChildren noArrow > -
-
+
+

{pickerPopupTitle ?? defaultPopupTitle}

-
+
{
-
+
{ />
+ {additionalControls && +
+ {additionalControls} +
+ } + {canReset && -
+
+ + {extraButton && !noExtraButtonSeparator && +
+ } + + {extraButton && +
+ {extraButton} +
+ }
); diff --git a/scripts/components/number-picker/number-picker.scss b/scripts/components/number-picker/number-picker.scss index 3efcb82e6..697858135 100644 --- a/scripts/components/number-picker/number-picker.scss +++ b/scripts/components/number-picker/number-picker.scss @@ -1,17 +1,8 @@ +// stylelint-disable declaration-no-important .es-number-picker { - .es-number-picker-input-value { - .components-input-control__input { - font-variant-numeric: tabular-nums; - - // stylelint-disable-next-line declaration-no-important - min-height: 2rem !important; - } - - .components-input-control__backdrop { - // stylelint-disable declaration-no-important - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - // stylelint-enable declaration-no-important + .es-number-picker-container { + &:has(.components-input-control__input:focus-visible) { + box-shadow: 0 0 0 2px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important; } } diff --git a/scripts/components/responsive-number-picker/responsive-number-picker.js b/scripts/components/responsive-number-picker/responsive-number-picker.js index 5a031d205..b4739bcef 100644 --- a/scripts/components/responsive-number-picker/responsive-number-picker.js +++ b/scripts/components/responsive-number-picker/responsive-number-picker.js @@ -120,29 +120,25 @@ export const ResponsiveNumberPicker = (props) => { }; const nearestValid = getNearest(); - const parsedValue = parseFloat(inheritCheck(currentValue) ? nearestValid : currentValue); return ( -
- { - const newValue = stringValues ? `${currentValue}` : currentValue; - onChange({ - ...value, - [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, - }); - }} - noBottomSpacing - fixedWidth={fieldWidth} - min={min} - max={max} - step={step} - {...additionalProps} - /> - - {typeof resetButton !== 'undefined' && + { + const newValue = stringValues ? `${currentValue}` : currentValue; + onChange({ + ...value, + [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, + }); + }} + noBottomSpacing + fixedWidth={fieldWidth} + min={min} + max={max} + step={step} + extraButton={typeof resetButton !== 'undefined' &&
+ {...additionalProps} + /> ); })} diff --git a/scripts/components/icon-toggle/icon-toggle.js b/scripts/components/toggle/toggle.js similarity index 91% rename from scripts/components/icon-toggle/icon-toggle.js rename to scripts/components/toggle/toggle.js index a406cea57..213fb6984 100644 --- a/scripts/components/icon-toggle/icon-toggle.js +++ b/scripts/components/toggle/toggle.js @@ -1,11 +1,11 @@ import React from 'react'; import { ToggleControl, CheckboxControl, Button } from '@wordpress/components'; -import { IconLabel, classnames, TileButton } from '../../../scripts'; +import { IconLabel, classnames, TileButton } from '../..'; /** - * Custom toggle control that can render as + * Custom toggle control. * - * @param {object} props - IconToggle options. + * @param {object} props - `Toggle` options. * @param {React.Component} props.icon - Icon to display. * @param {string} props.label - Usually component name. * @param {'toggle'|'checkbox'|'button'|'iconButton'|'tileButton'} [props.type='toggle'] - Kind of toggle to render. @@ -18,7 +18,7 @@ import { IconLabel, classnames, TileButton } from '../../../scripts'; * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. * @param {string?} [props.additionalClasses] - If provided, classes are passed to the underlying component. */ -export const IconToggle = ({ +export const Toggle = ({ icon, label, @@ -85,3 +85,10 @@ export const IconToggle = ({ /> ); }; + +/** + * Custom toggle control. + * + * @deprecated since 9.5.0 - renamed to `Toggle` + */ +export const IconToggle = (props) => ; diff --git a/scripts/editor/icons/icons.js b/scripts/editor/icons/icons.js index b8c8d515c..0a592fa7c 100644 --- a/scripts/editor/icons/icons.js +++ b/scripts/editor/icons/icons.js @@ -369,7 +369,7 @@ export const icons = { dropdownCaret: , checkCircleFill: , componentGeneric: , - toggleOff: , + toggleOff: , toggleOn: , toggleOnAlt: , hyphenate: , @@ -724,8 +724,8 @@ export const icons = { textSizeAlt: , textLarger: , textSmaller: , - extract: , - extractAlt: , + extract: , + extractAlt: , tree: , treeAlt: , treeAlt2: , diff --git a/scripts/index.js b/scripts/index.js index e8dd66865..651c9374f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -27,7 +27,7 @@ export { RangeSlider } from './components/custom-slider/custom-range-slider'; export { FancyDivider } from './components/fancy-divider/fancy-divider'; export { HelpModal } from './components/help-modal/help-modal'; export { IconLabel } from './components/icon-label/icon-label'; -export { IconToggle } from './components/icon-toggle/icon-toggle'; +export { Toggle, IconToggle } from './components/toggle/toggle'; export { Notification } from './components/inline-notification/inline-notification'; export { LinkInput, LinkEditComponent } from './components/link-input/link-input'; export { MatrixAlignControl } from './components/matrix-align-control/matrix-align-control'; diff --git a/styles/es-component-styles.scss b/styles/es-component-styles.scss index 580d6e70c..6477e1714 100644 --- a/styles/es-component-styles.scss +++ b/styles/es-component-styles.scss @@ -7,7 +7,6 @@ @import '../scripts//components/number-picker/number-picker.scss'; @import '../scripts/components/help-modal/help-modal'; @import '../scripts/components/custom-select/custom-select'; -@import '../scripts/components/color-picker-component/color-picker-component'; @import '../scripts/components/server-side-render/server-side-render'; @import '../scripts/components/color-palette-custom/color-palette-custom'; @import './es-shared/es-nested-collapsable'; diff --git a/styles/es-gutenberg-component-style-updates.scss b/styles/es-gutenberg-component-style-updates.scss index 384c5630f..827cbc266 100644 --- a/styles/es-gutenberg-component-style-updates.scss +++ b/styles/es-gutenberg-component-style-updates.scss @@ -75,7 +75,7 @@ } // Tweak NumberControl to better fit in. -.components-number-control { +.components-number-control:not(.es-number-picker .components-number-control) { .components-input-control__input { padding: 0 0.5rem !important; font-size: 0.78125rem !important; diff --git a/styles/es-utility-classes.scss b/styles/es-utility-classes.scss index 865a4d8e3..98211c075 100644 --- a/styles/es-utility-classes.scss +++ b/styles/es-utility-classes.scss @@ -320,7 +320,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-t': ( - 'cssProp': 'border-top', + 'cssProp': 'border-block-start', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -329,7 +329,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-b': ( - 'cssProp': 'border-bottom', + 'cssProp': 'border-block-end', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -338,7 +338,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-l': ( - 'cssProp': 'border-left', + 'cssProp': 'border-inline-start', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -347,7 +347,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-r': ( - 'cssProp': 'border-right', + 'cssProp': 'border-inline-end', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -392,7 +392,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mt': ( - 'cssProp': 'margin-top', + 'cssProp': 'margin-block-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -401,7 +401,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mb': ( - 'cssProp': 'margin-bottom', + 'cssProp': 'margin-block-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -410,7 +410,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'ml': ( - 'cssProp': 'margin-left', + 'cssProp': 'margin-inline-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -419,7 +419,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mr': ( - 'cssProp': 'margin-right', + 'cssProp': 'margin-inline-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -455,7 +455,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pt': ( - 'cssProp': 'padding-top', + 'cssProp': 'padding-block-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -464,7 +464,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pb': ( - 'cssProp': 'padding-bottom', + 'cssProp': 'padding-block-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -473,7 +473,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pl': ( - 'cssProp': 'padding-left', + 'cssProp': 'padding-inline-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -482,7 +482,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pr': ( - 'cssProp': 'padding-right', + 'cssProp': 'padding-inline-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -500,7 +500,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'w': ( - 'cssProp': 'width', + 'cssProp': 'inline-size', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -509,7 +509,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'h': ( - 'cssProp': 'height', + 'cssProp': 'block-size', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -626,7 +626,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tl': ( - 'cssProp': 'border-top-left-radius', + 'cssProp': 'border-start-start-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -635,7 +635,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tr': ( - 'cssProp': 'border-top-right-radius', + 'cssProp': 'border-start-end-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -644,7 +644,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-bl': ( - 'cssProp': 'border-bottom-left-radius', + 'cssProp': 'border-end-start-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -653,7 +653,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-br': ( - 'cssProp': 'border-bottom-right-radius', + 'cssProp': 'border-end-end-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -1168,19 +1168,19 @@ $es-utility-props: ( } .es-border-t { - border-top: 1px solid currentColor; + border-block-start: 1px solid currentColor; } .es-border-b { - border-bottom: 1px solid currentColor; + border-block-end: 1px solid currentColor; } .es-border-l { - border-left: 1px solid currentColor; + border-inline-start: 1px solid currentColor; } .es-border-r { - border-right: 1px solid currentColor; + border-inline-end: 1px solid currentColor; } .es-border-x { @@ -1255,6 +1255,70 @@ $es-utility-props: ( } } +// Special 'size' utility class (w + h). +@each $name, $value in $es-spacings { + .es-size-#{$name} { + block-size: #{$value}; + inline-size: #{$value}; + } + + .es-size-#{$name}\! { + block-size: #{$value} !important; + inline-size: #{$value} !important; + } + + .es-min-size-#{$name} { + min-block-size: #{$value}; + min-inline-size: #{$value}; + } + + .es-min-size-#{$name}\! { + min-block-size: #{$value} !important; + min-inline-size: #{$value} !important; + } + + .es-max-size-#{$name} { + max-block-size: #{$value}; + max-inline-size: #{$value}; + } + + .es-max-size-#{$name}\! { + max-block-size: #{$value} !important; + max-inline-size: #{$value} !important; + } + + // 'nested' variants + .es-nested-size-#{$name} svg { + block-size: #{$value}; + inline-size: #{$value}; + } + + .es-nested-size-#{$name}\! svg { + block-size: #{$value} !important; + inline-size: #{$value} !important; + } + + .es-min-size-#{$name} svg { + min-block-size: #{$value}; + min-inline-size: #{$value}; + } + + .es-min-size-#{$name}\! svg { + min-block-size: #{$value} !important; + min-inline-size: #{$value} !important; + } + + .es-max-size-#{$name} svg { + max-block-size: #{$value}; + max-inline-size: #{$value}; + } + + .es-max-size-#{$name}\! svg { + max-block-size: #{$value} !important; + max-inline-size: #{$value} !important; + } +} + @each $size, $value in $es-square-button-sizes { .es-button-square-#{$size} { width: #{$value} !important; @@ -1291,16 +1355,15 @@ $es-utility-props: ( // Default WP field spacing. .es-has-wp-field-v-space { - margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin-block: 1.5rem; } .es-has-wp-field-b-space { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .es-has-wp-field-t-space { - margin-top: 1.5rem; + margin-block-start: 1.5rem; } // A11y high-visibility outline. @@ -1623,10 +1686,10 @@ $es-utility-props: ( // Helper to disable default Gutenberg field spacing (e.g. for inlining input fields). .es-no-field-spacing { - margin-bottom: 0 !important; + margin-block-end: 0 !important; .components-base-control__field { - margin-bottom: 0 !important; + margin-block-end: 0 !important; } } From 8602c0ea18653c5e9f37967fd3bd2e87b0948063 Mon Sep 17 00:00:00 2001 From: DjidjaleskaSandra Date: Tue, 23 Apr 2024 13:46:18 +0200 Subject: [PATCH 3/6] Check if the path is wrong and return message --- setup/create-wp-project/src/basics/files.js | 8 ++++---- setup/create-wp-project/src/commands/theme.js | 10 +++++++++- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/setup/create-wp-project/src/basics/files.js b/setup/create-wp-project/src/basics/files.js index f9d91c531..94396d2e5 100644 --- a/setup/create-wp-project/src/basics/files.js +++ b/setup/create-wp-project/src/basics/files.js @@ -13,15 +13,15 @@ const installPath = async (requiredFolder = 'themes') => { const currentPath = path.join(process.cwd()); const currentDirName = path.basename(currentPath); - if (currentDirName === requiredFolder) { - return currentPath; - } + if (currentDirName === requiredFolder) { + return { path: currentPath, isCorrectFolder: true }; + } const requiredPath = (currentDirName === 'wp-content') ? `${currentPath}/${requiredFolder}` : `${currentPath}/wp-content/${requiredFolder}`; - return requiredPath; + return { path: requiredPath, isCorrectFolder: false }; }; /** diff --git a/setup/create-wp-project/src/commands/theme.js b/setup/create-wp-project/src/commands/theme.js index a23b0f1c8..fb0581120 100644 --- a/setup/create-wp-project/src/commands/theme.js +++ b/setup/create-wp-project/src/commands/theme.js @@ -36,6 +36,15 @@ exports.handler = async (argv) => { await clearConsole(); await writeIntro(); + // Check if you are in the required folder. + const { path: requiredPath, isCorrectFolder } = await installPath('themes'); + + if (!isCorrectFolder) { + console.log(chalk.red('Error: You must run this script from the "themes" directory.')); + process.exit(1); + } + + // Trigger prompts if any of the required arguments was not set const promptedInfo = await maybePrompt(scriptArguments, argv); @@ -44,7 +53,6 @@ exports.handler = async (argv) => { alertBox("Sit back and relax!\n", 'Setting up theme', 'success', { omitLastLine: true }); // Check if you are in the required folder - const requiredPath = await installPath('themes'); const projectPath = path.join(requiredPath, promptedInfo.package); const boilerplateRepoUrl = argv.eightshiftBoilerplateRepo ?? 'https://github.com/infinum/eightshift-boilerplate.git'; const boilerplateRepoBranch = argv.eightshiftBoilerplateBranch ?? ''; From 7af24aaaea4816c32bfcc31d5b04876cc6c4aa3c Mon Sep 17 00:00:00 2001 From: DjidjaleskaSandra Date: Thu, 25 Apr 2024 11:01:07 +0200 Subject: [PATCH 4/6] install theme from everywhere --- setup/create-wp-project/src/basics/files.js | 8 ++--- setup/create-wp-project/src/commands/theme.js | 35 ++++++++++++++++--- 2 files changed, 34 insertions(+), 9 deletions(-) diff --git a/setup/create-wp-project/src/basics/files.js b/setup/create-wp-project/src/basics/files.js index 94396d2e5..f9d91c531 100644 --- a/setup/create-wp-project/src/basics/files.js +++ b/setup/create-wp-project/src/basics/files.js @@ -13,15 +13,15 @@ const installPath = async (requiredFolder = 'themes') => { const currentPath = path.join(process.cwd()); const currentDirName = path.basename(currentPath); - if (currentDirName === requiredFolder) { - return { path: currentPath, isCorrectFolder: true }; - } + if (currentDirName === requiredFolder) { + return currentPath; + } const requiredPath = (currentDirName === 'wp-content') ? `${currentPath}/${requiredFolder}` : `${currentPath}/wp-content/${requiredFolder}`; - return { path: requiredPath, isCorrectFolder: false }; + return requiredPath; }; /** diff --git a/setup/create-wp-project/src/commands/theme.js b/setup/create-wp-project/src/commands/theme.js index fb0581120..993c62dd2 100644 --- a/setup/create-wp-project/src/commands/theme.js +++ b/setup/create-wp-project/src/commands/theme.js @@ -36,14 +36,38 @@ exports.handler = async (argv) => { await clearConsole(); await writeIntro(); - // Check if you are in the required folder. - const { path: requiredPath, isCorrectFolder } = await installPath('themes'); + const fs = require('fs'); - if (!isCorrectFolder) { - console.log(chalk.red('Error: You must run this script from the "themes" directory.')); - process.exit(1); + const findProjectRoot = (currentDir) => { + if (!currentDir || currentDir === '/') { + // Reached the root without finding wp-config.php + return null; + } + + const wpConfigPath = path.join(currentDir, 'wp-config.php'); + const wpConfigExists = fs.existsSync(wpConfigPath); + + if (wpConfigExists) { + // Found wp-config.php, return the current directory as the project root + return currentDir; + } + + // Move up one directory level and continue the search + const parentDir = path.dirname(currentDir); + return findProjectRoot(parentDir); + }; + + // Find the root directory of the WordPress project + const rootDir = findProjectRoot(process.cwd()); + + if (!rootDir) { + console.error('Unable to find project root.'); + process.exit(1); } + // Now you have the root directory, you can navigate to the themes folder relative to it + const themesDir = path.join(rootDir, 'wp-content', 'themes'); + process.chdir(themesDir); // Trigger prompts if any of the required arguments was not set const promptedInfo = await maybePrompt(scriptArguments, argv); @@ -53,6 +77,7 @@ exports.handler = async (argv) => { alertBox("Sit back and relax!\n", 'Setting up theme', 'success', { omitLastLine: true }); // Check if you are in the required folder + const requiredPath = await installPath('themes'); const projectPath = path.join(requiredPath, promptedInfo.package); const boilerplateRepoUrl = argv.eightshiftBoilerplateRepo ?? 'https://github.com/infinum/eightshift-boilerplate.git'; const boilerplateRepoBranch = argv.eightshiftBoilerplateBranch ?? ''; From 7c258071b1d622d8e2ebc53e26c123ad7c41dce0 Mon Sep 17 00:00:00 2001 From: DjidjaleskaSandra Date: Thu, 25 Apr 2024 11:12:28 +0200 Subject: [PATCH 5/6] update comments --- setup/create-wp-project/src/commands/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/setup/create-wp-project/src/commands/theme.js b/setup/create-wp-project/src/commands/theme.js index 993c62dd2..b05d3e5b8 100644 --- a/setup/create-wp-project/src/commands/theme.js +++ b/setup/create-wp-project/src/commands/theme.js @@ -65,7 +65,7 @@ exports.handler = async (argv) => { process.exit(1); } - // Now you have the root directory, you can navigate to the themes folder relative to it + // The root directory, navigate to the themes folder const themesDir = path.join(rootDir, 'wp-content', 'themes'); process.chdir(themesDir); From 85a607825197135873410f267087f85a8bcaba34 Mon Sep 17 00:00:00 2001 From: DjidjaleskaSandra Date: Thu, 25 Apr 2024 12:33:35 +0200 Subject: [PATCH 6/6] add same logic also for a plugin install --- .../create-wp-project/src/commands/plugin.js | 4 ++ setup/create-wp-project/src/commands/theme.js | 35 ++---------------- .../src/navigate-to-directory.js | 37 +++++++++++++++++++ 3 files changed, 44 insertions(+), 32 deletions(-) create mode 100644 setup/create-wp-project/src/navigate-to-directory.js diff --git a/setup/create-wp-project/src/commands/plugin.js b/setup/create-wp-project/src/commands/plugin.js index a50c3e802..264529b8c 100644 --- a/setup/create-wp-project/src/commands/plugin.js +++ b/setup/create-wp-project/src/commands/plugin.js @@ -24,6 +24,7 @@ const { scriptArguments } = require('../arguments'); const { installModifiedComposerDependencies, installModifiedNodeDependencies } = require('../dependencies'); const { alertBox } = require('../basics/misc'); const chalk = require('chalk'); +const { navigateToDirectory } = require('../navigate-to-directory'); exports.command = 'plugin'; exports.desc = 'Setup a new WordPress plugin. Should be run inside your plugins folder (wp-content/plugins).'; @@ -37,6 +38,9 @@ exports.handler = async (argv) => { const requiredPath = await installPath('plugins'); const projectPath = path.join(requiredPath, promptedInfo.package); + // Navigate to the plugins directory + navigateToDirectory('plugins'); + log(''); alertBox("Sit back and relax!\n", 'Setting up your plugin', 'success', { omitLastLine: true }); diff --git a/setup/create-wp-project/src/commands/theme.js b/setup/create-wp-project/src/commands/theme.js index b05d3e5b8..329fc8a6c 100644 --- a/setup/create-wp-project/src/commands/theme.js +++ b/setup/create-wp-project/src/commands/theme.js @@ -27,6 +27,7 @@ const { scriptArguments } = require('../arguments'); const { installModifiedNodeDependencies, installModifiedComposerDependencies } = require('../dependencies'); const { alertBox } = require('../basics/misc'); const chalk = require('chalk'); +const { navigateToDirectory } = require('../navigate-to-directory'); exports.command = ['*', 'theme']; exports.desc = 'Setup a new WordPress theme. Should be run inside your theme folder (wp-content/themes).'; @@ -36,38 +37,8 @@ exports.handler = async (argv) => { await clearConsole(); await writeIntro(); - const fs = require('fs'); - - const findProjectRoot = (currentDir) => { - if (!currentDir || currentDir === '/') { - // Reached the root without finding wp-config.php - return null; - } - - const wpConfigPath = path.join(currentDir, 'wp-config.php'); - const wpConfigExists = fs.existsSync(wpConfigPath); - - if (wpConfigExists) { - // Found wp-config.php, return the current directory as the project root - return currentDir; - } - - // Move up one directory level and continue the search - const parentDir = path.dirname(currentDir); - return findProjectRoot(parentDir); - }; - - // Find the root directory of the WordPress project - const rootDir = findProjectRoot(process.cwd()); - - if (!rootDir) { - console.error('Unable to find project root.'); - process.exit(1); - } - - // The root directory, navigate to the themes folder - const themesDir = path.join(rootDir, 'wp-content', 'themes'); - process.chdir(themesDir); + // Navigate to the themes directory + navigateToDirectory('themes'); // Trigger prompts if any of the required arguments was not set const promptedInfo = await maybePrompt(scriptArguments, argv); diff --git a/setup/create-wp-project/src/navigate-to-directory.js b/setup/create-wp-project/src/navigate-to-directory.js new file mode 100644 index 000000000..235dfc2ea --- /dev/null +++ b/setup/create-wp-project/src/navigate-to-directory.js @@ -0,0 +1,37 @@ +const fs = require('fs'); +const path = require('path'); + +const findProjectRoot = (currentDir) => { + if (!currentDir || currentDir === '/') { + // Reached the root without finding wp-config.php + return null; + } + + const wpConfigPath = path.join(currentDir, 'wp-config.php'); + const wpConfigExists = fs.existsSync(wpConfigPath); + + if (wpConfigExists) { + // Found wp-config.php, return the current directory as the project root + return currentDir; + } + + // Move up one directory level and continue the search + const parentDir = path.dirname(currentDir); + return findProjectRoot(parentDir); +}; + +const navigateToDirectory = (dirname) => { + const rootDir = findProjectRoot(process.cwd()); + + if (!rootDir) { + console.error('Unable to find project root.'); + process.exit(1); + } + + const directoryPath = path.join(rootDir, 'wp-content', dirname); + process.chdir(directoryPath); +}; + +module.exports = { + navigateToDirectory, +};