diff --git a/.stylelintrc b/.stylelintrc index 49ec365..750e53a 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,39 +1,39 @@ { - "extends": [ - "@wordpress/stylelint-config/scss", - "stylelint-config-recess-order" - ], - "customSyntax": "postcss-scss", - "overrides": [ - { - "files": ["**/*.scss"], - "customSyntax": "postcss-scss", - "rules": { - "at-rule-empty-line-before": null, - "at-rule-no-unknown": null, - "comment-empty-line-before": null, - "font-weight-notation": null, - "max-line-length": null, - "no-descending-specificity": null, - "rule-empty-line-before": null, - "selector-class-pattern": null, - "value-keyword-case": null, - "scss/operator-no-unspaced": null, - "scss/selector-no-redundant-nesting-selector": null, - "scss/at-import-partial-extension": null, - "scss/no-global-function-names": null, - "scss/comment-no-empty": null, - "scss/at-extend-no-missing-placeholder": null, - "scss/operator-no-newline-after": null, - "scss/at-if-closing-brace-newline-after": null, - "scss/at-else-empty-line-before": null, - "scss/at-if-closing-brace-space-after": null, - "no-invalid-position-at-import-rule": null, - "custom-property-pattern": null, - "indentation": 4, - "number-leading-zero": "never", - "string-quotes": "double" - } - } - ] -} \ No newline at end of file + "extends": [ + "@wordpress/stylelint-config/scss-stylistic", + "stylelint-config-recess-order" + ], + "customSyntax": "postcss-scss", + "overrides": [ + { + "files": ["**/*.scss"], + "customSyntax": "postcss-scss", + "rules": { + "at-rule-empty-line-before": null, + "at-rule-no-unknown": null, + "comment-empty-line-before": null, + "font-weight-notation": null, + "@stylistic/max-line-length": null, + "no-descending-specificity": null, + "rule-empty-line-before": null, + "selector-class-pattern": null, + "value-keyword-case": null, + "scss/operator-no-unspaced": null, + "scss/selector-no-redundant-nesting-selector": null, + "scss/at-import-partial-extension": null, + "scss/no-global-function-names": null, + "scss/comment-no-empty": null, + "scss/at-extend-no-missing-placeholder": null, + "scss/operator-no-newline-after": null, + "scss/at-if-closing-brace-newline-after": null, + "scss/at-else-empty-line-before": null, + "scss/at-if-closing-brace-space-after": null, + "no-invalid-position-at-import-rule": null, + "custom-property-pattern": null, + "@stylistic/indentation": 4, + "@stylistic/number-leading-zero": "never", + "@stylistic/string-quotes": "double" + } + } + ] +} diff --git a/package-lock.json b/package-lock.json index 7d8b547..9c1602c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,8 @@ "@wordpress/i18n": "^4.54.0", "@wordpress/icons": "^12.2.0", "@wordpress/primitives": "^3.52.0", - "@wordpress/scripts": "^30.17.0" + "@wordpress/scripts": "^30.17.0", + "stylelint-config-recess-order": "^7.7.0" } }, "node_modules/@ampproject/remapping": { @@ -20616,9 +20617,9 @@ } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.10", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz", + "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==", "dev": true, "funding": [ { @@ -20634,6 +20635,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -21252,6 +21254,17 @@ "node": ">=4" } }, + "node_modules/postcss-sorting": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-10.0.0.tgz", + "integrity": "sha512-TXbU+h6vVRW+86c/+ewhWq9k7pr7ijASTnepVhCQiC87zAOTkvB1v2dHyWP+ggstSTX/PNvjzS+IOqzejndz9w==", + "dev": true, + "license": "MIT", + "peer": true, + "peerDependencies": { + "postcss": "^8.4.20" + } + }, "node_modules/postcss-svgo": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.3.tgz", @@ -24226,6 +24239,17 @@ "node": ">=18.12.0" } }, + "node_modules/stylelint-config-recess-order": { + "version": "7.7.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-7.7.0.tgz", + "integrity": "sha512-TWRkg+BrwHOki4pi9y1emWgx6pFwZXOYZhNsbEObke/mzYUJVJvDEzJJQXhH7ajslQJGcrExy8ZvJqDiUbhFpA==", + "dev": true, + "license": "ISC", + "peerDependencies": { + "stylelint": "^16.18.0 || ^17.0.0", + "stylelint-order": "^7.0.0 || ^8.0.0" + } + }, "node_modules/stylelint-config-recommended": { "version": "14.0.1", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz", @@ -24271,6 +24295,24 @@ } } }, + "node_modules/stylelint-order": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-8.1.1.tgz", + "integrity": "sha512-LqsEB6VggJuu5v10RtkrQsBObcdwBE7GuAOlwfc/LR3VL/w8UqKX2BOLIjhyGt0Gne/njo7gRNGiJAKhfmPMNw==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "postcss": "^8.5.8", + "postcss-sorting": "^10.0.0" + }, + "engines": { + "node": ">=20.19.0" + }, + "peerDependencies": { + "stylelint": "^16.18.0 || ^17.0.0" + } + }, "node_modules/stylelint-scss": { "version": "6.14.0", "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.14.0.tgz", diff --git a/package.json b/package.json index 537434c..675ba1a 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "@wordpress/i18n": "^4.54.0", "@wordpress/icons": "^12.2.0", "@wordpress/primitives": "^3.52.0", - "@wordpress/scripts": "^30.17.0" + "@wordpress/scripts": "^30.17.0", + "stylelint-config-recess-order": "^7.7.0" }, "dependencies": { "@beapi/icons": "^1.2.5", @@ -38,4 +39,4 @@ "volta": { "node": "24.15.0" } -} +} \ No newline at end of file diff --git a/src/blockparty-tabs/editor.scss b/src/blockparty-tabs/editor.scss index 0599957..1420038 100644 --- a/src/blockparty-tabs/editor.scss +++ b/src/blockparty-tabs/editor.scss @@ -1,6 +1,8 @@ /* editor */ .wp-block-blockparty-tabs { + $block: &; + .editor-styles-wrapper & [data-block] { margin: 0; } @@ -64,17 +66,17 @@ } } - .has-align-sidebar-right &, - .has-align-sidebar-left & { - - &-panel-item { - - &.is-active { - display: flex; - } - - &.has-child-selected { - display: flex; + &.has-align-sidebar-right, + &.has-align-sidebar-left { + + > #{$block}-panels { + > #{$block}-panel-item { + &.is-active { + display: block; + } + &.has-child-selected { + display: flex; + } } } } diff --git a/src/blockparty-tabs/style.scss b/src/blockparty-tabs/style.scss index 8519a89..99dbbbd 100644 --- a/src/blockparty-tabs/style.scss +++ b/src/blockparty-tabs/style.scss @@ -8,6 +8,8 @@ --wp--blockparty--tabs--nav-border-active: 4px solid #000; --wp--blockparty--tabs--icon-size: 24px; --wp--blockparty--tabs--active-color: #efefef; + --wp--blockparty--tabs--sidebar-nav-width: 33.33333%; + --wp--blockparty--tabs--sidebar-panel-width: 66.66666%; $block: &; @@ -80,14 +82,12 @@ } &-panels { - .alignfull & { padding: 0 !important; } } &-panel { - &-item { padding: var(--wp--blockparty--tabs--panel-padding); background: transparent; @@ -96,108 +96,89 @@ } @media screen and (min-width: 782px) { - - &.has-align-sidebar-left, - &.has-align-sidebar-right { - display: flex; - align-items: stretch; - align-items: flex-start; + &-panel { + &-item { + &.is-hidden { + display: none; + } + } } - &-nav { - - .has-align-top-right & { + &.has-align-top-right { + > #{$block}-nav { justify-content: end; } + } - .has-align-sidebar-left &, - .has-align-sidebar-right & { + &.has-align-sidebar-left, + &.has-align-sidebar-right { + display: flex; + align-items: flex-start; + > #{$block}-nav { flex-wrap: wrap; } - - .has-align-sidebar-left & { - flex: 1 1 33.33333%; - } - - .has-align-sidebar-right & { - flex: 1 1 33.33333%; - order: 2; + > #{$block}-panels { + > #{$block}-panel-item { + height: 100%; + border-top: 0; + } } + } + &.has-align-sidebar-left { + > #{$block}-nav { + flex: 1 1 var(--wp--blockparty--tabs--sidebar-nav-width); - &-item { - - .has-align-sidebar-right & { - + > #{$block}-nav-item { &:hover, &:focus-within { + border-right: var(--wp--blockparty--tabs--nav-border-hover); border-bottom: 0; - border-left: var(--wp--blockparty--tabs--nav-border-hover); } &.is-active { + border-right: var(--wp--blockparty--tabs--nav-border-active); border-bottom: 0; - border-left: var(--wp--blockparty--tabs--nav-border-active); } width: 100%; + border-right: var(--wp--blockparty--tabs--nav-border); border-bottom: 0; - border-left: var(--wp--blockparty--tabs--nav-border); } - - .has-align-sidebar-left & { - + } + > #{$block}-panels { + flex: 1 1 66.66666%; + align-self: stretch; + > #{$block}-panel-item { + border-left: var(--wp--blockparty--tabs--panel-border); + } + } + } + &.has-align-sidebar-right { + > #{$block}-nav { + flex: 1 1 var(--wp--blockparty--tabs--sidebar-nav-width); + order: 2; + > #{$block}-nav-item { &:hover, &:focus-within { - border-right: var(--wp--blockparty--tabs--nav-border-hover); border-bottom: 0; + border-left: var(--wp--blockparty--tabs--nav-border-hover); } &.is-active { - border-right: var(--wp--blockparty--tabs--nav-border-active); border-bottom: 0; + border-left: var(--wp--blockparty--tabs--nav-border-active); } width: 100%; - border-right: var(--wp--blockparty--tabs--nav-border); border-bottom: 0; + border-left: var(--wp--blockparty--tabs--nav-border); } - } - } - - &-panels { - - .has-align-sidebar-right & { - flex: 1 1 66.66666%; + > #{$block}-panels { + flex: 1 1 var(--wp--blockparty--tabs--sidebar-panel-width); align-self: stretch; order: 1; - } - - .has-align-sidebar-left & { - flex: 1 1 66.66666%; - align-self: stretch; - } - } - - &-panel { - - &-item { - - &.is-hidden { - display: none; - } - - .has-align-sidebar-left &, - .has-align-sidebar-right & { - height: 100%; - border-top: 0; - } - - .has-align-sidebar-left & { - border-left: var(--wp--blockparty--tabs--panel-border); - } - - .has-align-sidebar-right & { + > #{$block}-panel-item { border-right: var(--wp--blockparty--tabs--panel-border); } }