@wordpress/interface 4.15.1-next.957ca95e4c.0 → 4.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 4.16.0 (2022-09-13)
6
+
5
7
  ## 4.15.0 (2022-08-24)
6
8
 
7
9
  ## 4.14.0 (2022-08-10)
@@ -23,6 +23,7 @@ function BaseOption(_ref) {
23
23
  return (0, _element.createElement)("div", {
24
24
  className: "interface-preferences-modal__option"
25
25
  }, (0, _element.createElement)(_components.ToggleControl, {
26
+ __nextHasNoMarginBottom: true,
26
27
  help: help,
27
28
  label: label,
28
29
  checked: isChecked,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-base-option/index.js"],"names":["BaseOption","help","label","isChecked","onChange","children"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,UAAT,OAAsE;AAAA,MAAjD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,GAAiD;AACrE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAGJ,IADR;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAGC,SAHX;AAIC,IAAA,QAAQ,EAAGC;AAJZ,IADD,EAOGC,QAPH,CADD;AAWA;;eAEcL,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"interface-preferences-modal__option\">\n\t\t\t<ToggleControl\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"]}
1
+ {"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-base-option/index.js"],"names":["BaseOption","help","label","isChecked","onChange","children"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,UAAT,OAAsE;AAAA,MAAjD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,GAAiD;AACrE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,yBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,IAAI,EAAGJ,IAFR;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,OAAO,EAAGC,SAJX;AAKC,IAAA,QAAQ,EAAGC;AALZ,IADD,EAQGC,QARH,CADD;AAYA;;eAEcL,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"interface-preferences-modal__option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"]}
@@ -15,7 +15,9 @@ const Section = _ref => {
15
15
  } = _ref;
16
16
  return (0, _element.createElement)("fieldset", {
17
17
  className: "interface-preferences-modal__section"
18
- }, (0, _element.createElement)("legend", null, (0, _element.createElement)("h2", {
18
+ }, (0, _element.createElement)("legend", {
19
+ className: "interface-preferences-modal__section-legend"
20
+ }, (0, _element.createElement)("h2", {
19
21
  className: "interface-preferences-modal__section-title"
20
22
  }, title), description && (0, _element.createElement)("p", {
21
23
  className: "interface-preferences-modal__section-description"
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-section/index.js"],"names":["Section","description","title","children"],"mappings":";;;;;;;;;AAAA,MAAMA,OAAO,GAAG;AAAA,MAAE;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,KAAf;AAAsBC,IAAAA;AAAtB,GAAF;AAAA,SACf;AAAU,IAAA,SAAS,EAAC;AAApB,KACC,4CACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGD,KADH,CADD,EAIGD,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CALF,CADD,EAWGE,QAXH,CADe;AAAA,CAAhB;;eAgBeH,O","sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"interface-preferences-modal__section\">\n\t\t<legend>\n\t\t\t<h2 className=\"interface-preferences-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"interface-preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t{ children }\n\t</fieldset>\n);\n\nexport default Section;\n"]}
1
+ {"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-section/index.js"],"names":["Section","description","title","children"],"mappings":";;;;;;;;;AAAA,MAAMA,OAAO,GAAG;AAAA,MAAE;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,KAAf;AAAsBC,IAAAA;AAAtB,GAAF;AAAA,SACf;AAAU,IAAA,SAAS,EAAC;AAApB,KACC;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGD,KADH,CADD,EAIGD,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CALF,CADD,EAWGE,QAXH,CADe;AAAA,CAAhB;;eAgBeH,O","sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"interface-preferences-modal__section\">\n\t\t<legend className=\"interface-preferences-modal__section-legend\">\n\t\t\t<h2 className=\"interface-preferences-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"interface-preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t{ children }\n\t</fieldset>\n);\n\nexport default Section;\n"]}
@@ -16,6 +16,7 @@ function BaseOption(_ref) {
16
16
  return createElement("div", {
17
17
  className: "interface-preferences-modal__option"
18
18
  }, createElement(ToggleControl, {
19
+ __nextHasNoMarginBottom: true,
19
20
  help: help,
20
21
  label: label,
21
22
  checked: isChecked,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-base-option/index.js"],"names":["ToggleControl","BaseOption","help","label","isChecked","onChange","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,uBAA9B;;AAEA,SAASC,UAAT,OAAsE;AAAA,MAAjD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,GAAiD;AACrE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,aAAD;AACC,IAAA,IAAI,EAAGJ,IADR;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAGC,SAHX;AAIC,IAAA,QAAQ,EAAGC;AAJZ,IADD,EAOGC,QAPH,CADD;AAWA;;AAED,eAAeL,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"interface-preferences-modal__option\">\n\t\t\t<ToggleControl\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"]}
1
+ {"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-base-option/index.js"],"names":["ToggleControl","BaseOption","help","label","isChecked","onChange","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,uBAA9B;;AAEA,SAASC,UAAT,OAAsE;AAAA,MAAjD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,GAAiD;AACrE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,aAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,IAAI,EAAGJ,IAFR;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,OAAO,EAAGC,SAJX;AAKC,IAAA,QAAQ,EAAGC;AALZ,IADD,EAQGC,QARH,CADD;AAYA;;AAED,eAAeL,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"interface-preferences-modal__option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"]}
@@ -8,7 +8,9 @@ const Section = _ref => {
8
8
  } = _ref;
9
9
  return createElement("fieldset", {
10
10
  className: "interface-preferences-modal__section"
11
- }, createElement("legend", null, createElement("h2", {
11
+ }, createElement("legend", {
12
+ className: "interface-preferences-modal__section-legend"
13
+ }, createElement("h2", {
12
14
  className: "interface-preferences-modal__section-title"
13
15
  }, title), description && createElement("p", {
14
16
  className: "interface-preferences-modal__section-description"
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-section/index.js"],"names":["Section","description","title","children"],"mappings":";;AAAA,MAAMA,OAAO,GAAG;AAAA,MAAE;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,KAAf;AAAsBC,IAAAA;AAAtB,GAAF;AAAA,SACf;AAAU,IAAA,SAAS,EAAC;AAApB,KACC,8BACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGD,KADH,CADD,EAIGD,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CALF,CADD,EAWGE,QAXH,CADe;AAAA,CAAhB;;AAgBA,eAAeH,OAAf","sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"interface-preferences-modal__section\">\n\t\t<legend>\n\t\t\t<h2 className=\"interface-preferences-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"interface-preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t{ children }\n\t</fieldset>\n);\n\nexport default Section;\n"]}
1
+ {"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-section/index.js"],"names":["Section","description","title","children"],"mappings":";;AAAA,MAAMA,OAAO,GAAG;AAAA,MAAE;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,KAAf;AAAsBC,IAAAA;AAAtB,GAAF;AAAA,SACf;AAAU,IAAA,SAAS,EAAC;AAApB,KACC;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGD,KADH,CADD,EAIGD,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CALF,CADD,EAWGE,QAXH,CADe;AAAA,CAAhB;;AAgBA,eAAeH,OAAf","sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"interface-preferences-modal__section\">\n\t\t<legend className=\"interface-preferences-modal__section-legend\">\n\t\t\t<h2 className=\"interface-preferences-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"interface-preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t{ children }\n\t</fieldset>\n);\n\nexport default Section;\n"]}
@@ -160,7 +160,7 @@
160
160
  top: 0;
161
161
  }
162
162
  }
163
- .interface-complementary-area p {
163
+ .interface-complementary-area p:not(.components-base-control__help) {
164
164
  margin-top: 0;
165
165
  }
166
166
  .interface-complementary-area h2 {
@@ -505,6 +505,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
505
505
  margin: 0;
506
506
  }
507
507
 
508
+ .interface-preferences-modal__section-legend {
509
+ margin-bottom: 8px;
510
+ }
511
+
508
512
  .interface-preferences-modal__section-title {
509
513
  font-size: 0.9rem;
510
514
  font-weight: 600;
@@ -518,18 +522,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
518
522
  color: #757575;
519
523
  }
520
524
 
521
- .interface-preferences-modal__option .components-base-control .components-base-control__field {
522
- align-items: center;
523
- display: flex;
524
- margin-bottom: 0;
525
- }
526
- .interface-preferences-modal__option .components-base-control .components-base-control__field > label {
527
- flex-grow: 1;
528
- padding: 0.6rem 10px 0.6rem 0;
525
+ .interface-preferences-modal__option + .interface-preferences-modal__option {
526
+ margin-top: 16px;
529
527
  }
530
528
  .interface-preferences-modal__option .components-base-control__help {
531
- margin: -8px 58px 8px 0;
532
- font-size: 12px;
533
- font-style: normal;
534
- color: #757575;
529
+ margin-top: 0;
530
+ margin-right: 48px;
535
531
  }
@@ -160,7 +160,7 @@
160
160
  top: 0;
161
161
  }
162
162
  }
163
- .interface-complementary-area p {
163
+ .interface-complementary-area p:not(.components-base-control__help) {
164
164
  margin-top: 0;
165
165
  }
166
166
  .interface-complementary-area h2 {
@@ -505,6 +505,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
505
505
  margin: 0;
506
506
  }
507
507
 
508
+ .interface-preferences-modal__section-legend {
509
+ margin-bottom: 8px;
510
+ }
511
+
508
512
  .interface-preferences-modal__section-title {
509
513
  font-size: 0.9rem;
510
514
  font-weight: 600;
@@ -518,18 +522,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
518
522
  color: #757575;
519
523
  }
520
524
 
521
- .interface-preferences-modal__option .components-base-control .components-base-control__field {
522
- align-items: center;
523
- display: flex;
524
- margin-bottom: 0;
525
- }
526
- .interface-preferences-modal__option .components-base-control .components-base-control__field > label {
527
- flex-grow: 1;
528
- padding: 0.6rem 0 0.6rem 10px;
525
+ .interface-preferences-modal__option + .interface-preferences-modal__option {
526
+ margin-top: 16px;
529
527
  }
530
528
  .interface-preferences-modal__option .components-base-control__help {
531
- margin: -8px 0 8px 58px;
532
- font-size: 12px;
533
- font-style: normal;
534
- color: #757575;
529
+ margin-top: 0;
530
+ margin-left: 48px;
535
531
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/interface",
3
- "version": "4.15.1-next.957ca95e4c.0",
3
+ "version": "4.16.0",
4
4
  "description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -32,17 +32,17 @@
32
32
  ],
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.16.0",
35
- "@wordpress/a11y": "^3.16.1-next.957ca95e4c.0",
36
- "@wordpress/components": "^20.0.2-next.957ca95e4c.0",
37
- "@wordpress/compose": "^5.14.1-next.957ca95e4c.0",
38
- "@wordpress/data": "^7.0.1-next.957ca95e4c.0",
39
- "@wordpress/deprecated": "^3.16.1-next.957ca95e4c.0",
40
- "@wordpress/element": "^4.14.1-next.957ca95e4c.0",
41
- "@wordpress/i18n": "^4.16.1-next.957ca95e4c.0",
42
- "@wordpress/icons": "^9.7.1-next.957ca95e4c.0",
43
- "@wordpress/plugins": "^4.14.1-next.957ca95e4c.0",
44
- "@wordpress/preferences": "^2.8.1-next.957ca95e4c.0",
45
- "@wordpress/viewport": "^4.14.1-next.957ca95e4c.0",
35
+ "@wordpress/a11y": "^3.17.0",
36
+ "@wordpress/components": "^21.0.0",
37
+ "@wordpress/compose": "^5.15.0",
38
+ "@wordpress/data": "^7.1.0",
39
+ "@wordpress/deprecated": "^3.17.0",
40
+ "@wordpress/element": "^4.15.0",
41
+ "@wordpress/i18n": "^4.17.0",
42
+ "@wordpress/icons": "^9.8.0",
43
+ "@wordpress/plugins": "^4.15.0",
44
+ "@wordpress/preferences": "^2.9.0",
45
+ "@wordpress/viewport": "^4.15.0",
46
46
  "classnames": "^2.3.1"
47
47
  },
48
48
  "peerDependencies": {
@@ -52,5 +52,5 @@
52
52
  "publishConfig": {
53
53
  "access": "public"
54
54
  },
55
- "gitHead": "272a74bbbaab10ee24424eafe9578e705fbfbbb4"
55
+ "gitHead": "0d732d4b184adcb28cc83087603e81b764390d4b"
56
56
  }
@@ -31,7 +31,7 @@
31
31
  }
32
32
  }
33
33
 
34
- p {
34
+ p:not(.components-base-control__help) {
35
35
  margin-top: 0;
36
36
  }
37
37
 
@@ -7,6 +7,7 @@ function BaseOption( { help, label, isChecked, onChange, children } ) {
7
7
  return (
8
8
  <div className="interface-preferences-modal__option">
9
9
  <ToggleControl
10
+ __nextHasNoMarginBottom
10
11
  help={ help }
11
12
  label={ label }
12
13
  checked={ isChecked }
@@ -1,21 +1,10 @@
1
1
  .interface-preferences-modal__option {
2
- .components-base-control {
3
- .components-base-control__field {
4
- align-items: center;
5
- display: flex;
6
- margin-bottom: 0;
7
-
8
- & > label {
9
- flex-grow: 1;
10
- padding: 0.6rem 0 0.6rem 10px;
11
- }
12
- }
2
+ & + & {
3
+ margin-top: $grid-unit-20;
13
4
  }
14
5
 
15
6
  .components-base-control__help {
16
- margin: -$grid-unit-10 0 $grid-unit-10 58px;
17
- font-size: $helptext-font-size;
18
- font-style: normal;
19
- color: $gray-700;
7
+ margin-top: 0;
8
+ margin-left: 48px;
20
9
  }
21
10
  }
@@ -1,6 +1,6 @@
1
1
  const Section = ( { description, title, children } ) => (
2
2
  <fieldset className="interface-preferences-modal__section">
3
- <legend>
3
+ <legend className="interface-preferences-modal__section-legend">
4
4
  <h2 className="interface-preferences-modal__section-title">
5
5
  { title }
6
6
  </h2>
@@ -6,6 +6,10 @@
6
6
  }
7
7
  }
8
8
 
9
+ .interface-preferences-modal__section-legend {
10
+ margin-bottom: $grid-unit-10;
11
+ }
12
+
9
13
  .interface-preferences-modal__section-title {
10
14
  font-size: 0.9rem;
11
15
  font-weight: 600;