Skip to content

Commit

Permalink
add counter label gap
Browse files Browse the repository at this point in the history
  • Loading branch information
farhan-shafi committed Jun 27, 2024
1 parent d1fae34 commit 4568923
Show file tree
Hide file tree
Showing 14 changed files with 127 additions and 90 deletions.
2 changes: 1 addition & 1 deletion dist/blocks.build.asset.php
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '6e33db2b7ebf3239e69d');
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '07ad0462e2eca31f5610');
12 changes: 10 additions & 2 deletions dist/blocks.build.js
Original file line number Diff line number Diff line change
Expand Up @@ -61179,10 +61179,12 @@ __webpack_require__.r(__webpack_exports__);
*/

function getStyles(attributes) {
var _getSpacingPresetCssV, _attributes$gap;
var padding = attributes.padding,
margin = attributes.margin;
var paddingObj = (0,_utils_styling_helpers__WEBPACK_IMPORTED_MODULE_1__.getSpacingCss)(padding);
var marginObj = (0,_utils_styling_helpers__WEBPACK_IMPORTED_MODULE_1__.getSpacingCss)(margin);
var gap = (_getSpacingPresetCssV = (0,_utils_styling_helpers__WEBPACK_IMPORTED_MODULE_1__.getSpacingPresetCssVar)((_attributes$gap = attributes.gap) === null || _attributes$gap === void 0 ? void 0 : _attributes$gap.all)) !== null && _getSpacingPresetCssV !== void 0 ? _getSpacingPresetCssV : "";
var styles = {
"--ub-counter-label-color": attributes === null || attributes === void 0 ? void 0 : attributes.labelColor,
"--ub-counter-font-size": attributes === null || attributes === void 0 ? void 0 : attributes.counterFontSize,
Expand All @@ -61194,7 +61196,8 @@ function getStyles(attributes) {
"--ub-counter-margin-top": marginObj === null || marginObj === void 0 ? void 0 : marginObj.top,
"--ub-counter-margin-right": marginObj === null || marginObj === void 0 ? void 0 : marginObj.right,
"--ub-counter-margin-bottom": marginObj === null || marginObj === void 0 ? void 0 : marginObj.bottom,
"--ub-counter-margin-left": marginObj === null || marginObj === void 0 ? void 0 : marginObj.left
"--ub-counter-margin-left": marginObj === null || marginObj === void 0 ? void 0 : marginObj.left,
"--ub-counter-gap": gap
};
return (0,lodash__WEBPACK_IMPORTED_MODULE_0__.omitBy)(styles, function (value) {
return (0,lodash__WEBPACK_IMPORTED_MODULE_0__.isUndefined)(value) || value === false || (0,lodash__WEBPACK_IMPORTED_MODULE_0__.trim)(value) === "" || (0,lodash__WEBPACK_IMPORTED_MODULE_0__.trim)(value) === "undefined undefined undefined" || (0,lodash__WEBPACK_IMPORTED_MODULE_0__.isEmpty)(value);
Expand Down Expand Up @@ -61413,6 +61416,11 @@ function Inspector(props) {
showByDefault: true,
attrKey: "margin",
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Margin", "ultimate-blocks")
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components__WEBPACK_IMPORTED_MODULE_4__.SpacingControl, {
showByDefault: true,
sides: ["all"],
attrKey: "gap",
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Gap", "ultimate-blocks")
}))));
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Inspector);
Expand Down Expand Up @@ -134004,7 +134012,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/tru
/***/ ((module) => {

"use strict";
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/counter","title":"Counter","category":"ultimateblocks","description":"Add animated number counters to display statistics and milestones.","keywords":["counter","ultimate counter"],"attributes":{"counterFontSize":{"type":"string","default":"48px"},"labelFontSize":{"type":"string","default":"16px"},"startNumber":{"type":"string","default":"0"},"endNumber":{"type":"string","default":"500"},"prefix":{"type":"string","default":""},"suffix":{"type":"string","default":""},"animationDuration":{"type":"number","default":2},"alignment":{"type":"string","default":"center"},"label":{"type":"string","default":""},"labelColor":{"type":"string","default":null},"labelPosition":{"type":"string","default":"bottom"},"padding":{"type":"object","default":{}},"margin":{"type":"object","default":{}}},"supports":{"align":true,"color":{"gradients":true,"link":true,"__experimentalDefaultControls":{"background":true,"text":true}}},"viewScript":"ub-counter-frontend-script"}');
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/counter","title":"Counter","category":"ultimateblocks","description":"Add animated number counters to display statistics and milestones.","keywords":["counter","ultimate counter"],"attributes":{"gap":{"type":"object","default":{}},"counterFontSize":{"type":"string","default":"48px"},"labelFontSize":{"type":"string","default":"16px"},"startNumber":{"type":"string","default":"0"},"endNumber":{"type":"string","default":"500"},"prefix":{"type":"string","default":""},"suffix":{"type":"string","default":""},"animationDuration":{"type":"number","default":2},"alignment":{"type":"string","default":"center"},"label":{"type":"string","default":""},"labelColor":{"type":"string","default":null},"labelPosition":{"type":"string","default":"bottom"},"padding":{"type":"object","default":{}},"margin":{"type":"object","default":{}}},"supports":{"align":true,"color":{"gradients":true,"link":true,"__experimentalDefaultControls":{"background":true,"text":true}}},"viewScript":"ub-counter-frontend-script"}');

/***/ }),

Expand Down
2 changes: 1 addition & 1 deletion dist/blocks.build.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/blocks.style.build.css

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions dist/blocks/counter/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
"ultimate counter"
],
"attributes": {
"gap": {
"type": "object",
"default": {}
},
"counterFontSize": {
"type": "string",
"default": "48px"
Expand Down
4 changes: 2 additions & 2 deletions includes/ultimate-blocks-styles-css-generator.php
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function get_spacing_css( $object ) {
* @param string $value - value.
*/
function is_undefined( $value ) {
return null === $value || ! isset( $value ) || empty( $value );
return !isset( $value ) || null === $value || empty( $value );
}

/**
Expand Down Expand Up @@ -146,4 +146,4 @@ function get_border_variables_css( $border, $slug ) {
}

return $borders;
}
}
1 change: 1 addition & 0 deletions readme.txt
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ That's it. You're done!

* IMPROVE: Run counter when it visible on the screen in the counter block.
* IMPROVE: Image width in image slider.
* NEW: Spacing between counter and label in counter block.

= 3.2.0 =

Expand Down
158 changes: 81 additions & 77 deletions src/blocks/counter/block.json
Original file line number Diff line number Diff line change
@@ -1,78 +1,82 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "ub/counter",
"title": "Counter",
"category": "ultimateblocks",
"description": "Add animated number counters to display statistics and milestones.",
"keywords": [
"counter",
"ultimate counter"
],
"attributes": {
"counterFontSize": {
"type": "string",
"default": "48px"
},
"labelFontSize": {
"type": "string",
"default": "16px"
},
"startNumber": {
"type": "string",
"default": "0"
},
"endNumber": {
"type": "string",
"default": "500"
},
"prefix": {
"type": "string",
"default": ""
},
"suffix": {
"type": "string",
"default": ""
},
"animationDuration": {
"type": "number",
"default": 2
},
"alignment": {
"type": "string",
"default": "center"
},
"label": {
"type": "string",
"default": ""
},
"labelColor": {
"type": "string",
"default": null
},
"labelPosition": {
"type": "string",
"default": "bottom"
},
"padding": {
"type": "object",
"default": {}
},
"margin": {
"type": "object",
"default": {}
}
},
"supports": {
"align": true,
"color": {
"gradients": true,
"link": true,
"__experimentalDefaultControls": {
"background": true,
"text": true
}
}
},
"viewScript": "ub-counter-frontend-script"
}
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "ub/counter",
"title": "Counter",
"category": "ultimateblocks",
"description": "Add animated number counters to display statistics and milestones.",
"keywords": [
"counter",
"ultimate counter"
],
"attributes": {
"gap": {
"type": "object",
"default": {}
},
"counterFontSize": {
"type": "string",
"default": "48px"
},
"labelFontSize": {
"type": "string",
"default": "16px"
},
"startNumber": {
"type": "string",
"default": "0"
},
"endNumber": {
"type": "string",
"default": "500"
},
"prefix": {
"type": "string",
"default": ""
},
"suffix": {
"type": "string",
"default": ""
},
"animationDuration": {
"type": "number",
"default": 2
},
"alignment": {
"type": "string",
"default": "center"
},
"label": {
"type": "string",
"default": ""
},
"labelColor": {
"type": "string",
"default": null
},
"labelPosition": {
"type": "string",
"default": "bottom"
},
"padding": {
"type": "object",
"default": {}
},
"margin": {
"type": "object",
"default": {}
}
},
"supports": {
"align": true,
"color": {
"gradients": true,
"link": true,
"__experimentalDefaultControls": {
"background": true,
"text": true
}
}
},
"viewScript": "ub-counter-frontend-script"
}
8 changes: 5 additions & 3 deletions src/blocks/counter/block.php
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ public function ub_get_counter_block_styles( $attributes ) {
$counter_font_size = $attributes['counterFontSize'];
$label_font_size = $attributes['labelFontSize'];
$label_color = $attributes['labelColor'];
$gap = isset($attributes['gap']['all']) ? Ultimate_Blocks\includes\spacing_preset_css_var($attributes['gap']['all']) : "";

$styles = array(
'--ub-counter-padding-top' => isset($padding['top']) ? $padding['top'] : "",
Expand All @@ -28,9 +29,10 @@ public function ub_get_counter_block_styles( $attributes ) {
'--ub-counter-margin-right' => isset($margin['left']) ? $margin['left'] : "",
'--ub-counter-margin-bottom' => isset($margin['right']) ? $margin['right'] : "",
'--ub-counter-margin-left' => isset($margin['bottom']) ? $margin['bottom'] : "",
'--ub-counter-font-size' => esc_attr($counter_font_size),
'--ub-counter-label-font-size' => esc_attr($label_font_size),
'--ub-counter-label-color' => esc_attr($label_color)
'--ub-counter-font-size' => $counter_font_size,
'--ub-counter-label-color' => $label_color,
'--ub-counter-label-font-size' => $label_font_size,
'--ub-counter-gap' => $gap
);

return Ultimate_Blocks\includes\generate_css_string( $styles );
Expand Down
8 changes: 6 additions & 2 deletions src/blocks/counter/get-styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
* WordPress Dependencies
*/
import { isUndefined, trim, isEmpty, omitBy } from "lodash";
import { getSpacingCss } from "../utils/styling-helpers";
import {
getSpacingCss,
getSpacingPresetCssVar,
} from "../utils/styling-helpers";
/**
*
* @param {Array} attributes
Expand All @@ -15,7 +18,7 @@ export function getStyles(attributes) {

const paddingObj = getSpacingCss(padding);
const marginObj = getSpacingCss(margin);

const gap = getSpacingPresetCssVar(attributes.gap?.all) ?? "";
let styles = {
"--ub-counter-label-color": attributes?.labelColor,
"--ub-counter-font-size": attributes?.counterFontSize,
Expand All @@ -28,6 +31,7 @@ export function getStyles(attributes) {
"--ub-counter-margin-right": marginObj?.right,
"--ub-counter-margin-bottom": marginObj?.bottom,
"--ub-counter-margin-left": marginObj?.left,
"--ub-counter-gap": gap,
};

return omitBy(styles, (value) => {
Expand Down
6 changes: 6 additions & 0 deletions src/blocks/counter/inspector.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,12 @@ function Inspector(props) {
attrKey="margin"
label={__("Margin", "ultimate-blocks")}
/>
<SpacingControl
showByDefault
sides={["all"]}
attrKey="gap"
label={__("Gap", "ultimate-blocks")}
/>
</PanelBody>
</InspectorControls>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/counter/style.css

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

4 changes: 4 additions & 0 deletions src/blocks/counter/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
color: var(--ub-counter-label-color);
}
& .ub_counter {
display: flex;
flex-direction: column;
gap: var(--ub-counter-gap);

.ub_counter-number-wrapper {
display: flex;
}
Expand Down
4 changes: 4 additions & 0 deletions src/defaults.php
Original file line number Diff line number Diff line change
Expand Up @@ -3044,6 +3044,10 @@
'type' => 'string',
'default' => 'bottom'
),
'gap' => array(
'type' => 'array',
'default' => array()
),
'padding' => array(
'type' => 'array',
'default' => array()
Expand Down

0 comments on commit 4568923

Please sign in to comment.