Skip to content

Commit

Permalink
star rating text position
Browse files Browse the repository at this point in the history
  • Loading branch information
farhan-shafi committed Jun 29, 2024
1 parent 5716118 commit 2696ca8
Show file tree
Hide file tree
Showing 13 changed files with 201 additions and 96 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' => '07ad0462e2eca31f5610');
<?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' => 'e2d7b1de3e4083df9901');
33 changes: 28 additions & 5 deletions dist/blocks.build.js
Original file line number Diff line number Diff line change
Expand Up @@ -78259,6 +78259,8 @@ function StarRating(props) {
_props$attributes = props.attributes,
starColor = _props$attributes.starColor,
blockID = _props$attributes.blockID,
textPosition = _props$attributes.textPosition,
starAlign = _props$attributes.starAlign,
setAttributes = props.setAttributes;
var _useSelect = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(function (select) {
var _ref = select("core/block-editor") || select("core/editor"),
Expand Down Expand Up @@ -78294,8 +78296,9 @@ function StarRating(props) {
}, [block.clientId]);
var blockProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)();
var styles = (0,_get_styles__WEBPACK_IMPORTED_MODULE_6__.getStyles)(props.attributes);
var alignClass = starAlign !== "" ? " ub-star-rating-align-".concat(starAlign) : "";
return /*#__PURE__*/React.createElement("div", blockProps, isSelected && (0,_components__WEBPACK_IMPORTED_MODULE_9__.blockControls)(props), isSelected && (0,_components__WEBPACK_IMPORTED_MODULE_9__.inspectorControls)(props), /*#__PURE__*/React.createElement("div", {
className: "ub-star-rating",
className: "ub-star-rating ub-star-rating-text-".concat(textPosition).concat(alignClass),
style: styles
}, (0,_components__WEBPACK_IMPORTED_MODULE_9__.editorDisplay)(_objectSpread(_objectSpread({}, props), {}, {
highlightedStars: highlightedStars,
Expand Down Expand Up @@ -78406,18 +78409,21 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
var blockControls = function blockControls(props) {
var attributes = props.attributes,
setAttributes = props.setAttributes;
var reviewTextAlign = attributes.reviewTextAlign;
var reviewTextAlign = attributes.reviewTextAlign,
starAlign = attributes.starAlign,
textPosition = attributes.textPosition;
return /*#__PURE__*/React.createElement(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.BlockControls, null, /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarGroup, null, ["left", "center", "right"].map(function (a) {
return /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, {
icon: "align-".concat(a),
isActive: starAlign === a,
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Align stars ".concat(a)),
onClick: function onClick() {
return setAttributes({
starAlign: a
});
}
});
})), /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarGroup, null, ["left", "center", "right", "justify"].map(function (a) {
})), (textPosition === "top" || textPosition === "bottom") && /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarGroup, null, ["left", "center", "right", "justify"].map(function (a) {
return /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, {
icon: "editor-".concat(a === "justify" ? a : "align" + a),
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)((a !== "justify" ? "Align " : "") + a[0].toUpperCase() + a.slice(1)),
Expand All @@ -78444,7 +78450,24 @@ var inspectorControls = function inspectorControls(props) {
}, /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("General"),
initialOpen: true
}, /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.RangeControl, {
}, /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_1__.CustomToggleGroupControl, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Text Position", "ultimate-blocks"),
attributeKey: "textPosition",
isBlock: true,
options: [{
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Top", "ultimate-blocks"),
value: "top"
}, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Right", "ultimate-blocks"),
value: "right"
}, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Bottom", "ultimate-blocks"),
value: "bottom"
}, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Left", "ultimate-blocks"),
value: "left"
}]
}), /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.RangeControl, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Number of stars"),
value: starCount,
onChange: function onChange(value) {
Expand Down Expand Up @@ -134166,7 +134189,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/star-rating-block","title":"Star Rating","category":"ultimateblocks","description":"Add Star ratings in your posts/pages. You can customize size, color, numbers of stars.","keywords":["star rating","review","Ultimate Blocks"],"attributes":{"blockID":{"type":"string","default":""},"starCount":{"type":"number","default":5},"textFontSize":{"type":"string","default":""},"starSize":{"type":"number","default":20},"starColor":{"type":"string","default":"#FFB901"},"selectedStars":{"type":"number","default":0},"reviewText":{"type":"string","default":""},"reviewTextAlign":{"type":"string","default":"text"},"reviewTextColor":{"type":"string","default":""},"starAlign":{"type":"string","default":"left"},"padding":{"type":"object","default":{}},"margin":{"type":"object","default":{}},"isShowReviewText":{"type":"boolean","default":true}},"supports":{}}');
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/star-rating-block","title":"Star Rating","category":"ultimateblocks","description":"Add Star ratings in your posts/pages. You can customize size, color, numbers of stars.","keywords":["star rating","review","Ultimate Blocks"],"attributes":{"blockID":{"type":"string","default":""},"starCount":{"type":"number","default":5},"textFontSize":{"type":"string","default":""},"textPosition":{"type":"string","default":"bottom"},"starSize":{"type":"number","default":20},"starColor":{"type":"string","default":"#FFB901"},"selectedStars":{"type":"number","default":0},"reviewText":{"type":"string","default":""},"reviewTextAlign":{"type":"string","default":"text"},"reviewTextColor":{"type":"string","default":""},"starAlign":{"type":"string","default":"left"},"padding":{"type":"object","default":{}},"margin":{"type":"object","default":{}},"isShowReviewText":{"type":"boolean","default":true}},"supports":{}}');

/***/ }),

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/star-rating/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
"type": "string",
"default": ""
},
"textPosition": {
"type": "string",
"default": "bottom"
},
"starSize": {
"type": "number",
"default": 20
Expand Down
1 change: 1 addition & 0 deletions readme.txt
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,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.
* NEW: Top, Right, Bottom, and Left position for the text in star rating block.

= 3.2.0 =

Expand Down
9 changes: 7 additions & 2 deletions src/blocks/star-rating/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ function StarRating(props) {
const [highlightedStars, setHighlightedStars] = useState(0);
const {
isSelected,
attributes: { starColor, blockID },
attributes: { starColor, blockID, textPosition, starAlign },
setAttributes,
} = props;
const { block, getBlock, parentID, getClientIdsWithDescendants, getBlocks } =
Expand Down Expand Up @@ -87,11 +87,16 @@ function StarRating(props) {
}, [block.clientId]);
const blockProps = useBlockProps();
const styles = getStyles(props.attributes);
const alignClass =
starAlign !== "" ? ` ub-star-rating-align-${starAlign}` : "";
return (
<div {...blockProps}>
{isSelected && blockControls(props)}
{isSelected && inspectorControls(props)}
<div className="ub-star-rating" style={styles}>
<div
className={`ub-star-rating ub-star-rating-text-${textPosition}${alignClass}`}
style={styles}
>
{editorDisplay({ ...props, highlightedStars, setHighlightedStars })}
</div>
</div>
Expand Down
138 changes: 71 additions & 67 deletions src/blocks/star-rating/block.json
Original file line number Diff line number Diff line change
@@ -1,68 +1,72 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "ub/star-rating-block",
"title": "Star Rating",
"category": "ultimateblocks",
"description": "Add Star ratings in your posts/pages. You can customize size, color, numbers of stars.",
"keywords": [
"star rating",
"review",
"Ultimate Blocks"
],
"attributes": {
"blockID": {
"type": "string",
"default": ""
},
"starCount": {
"type": "number",
"default": 5
},
"textFontSize": {
"type": "string",
"default": ""
},
"starSize": {
"type": "number",
"default": 20
},
"starColor": {
"type": "string",
"default": "#FFB901"
},
"selectedStars": {
"type": "number",
"default": 0
},
"reviewText": {
"type": "string",
"default": ""
},
"reviewTextAlign": {
"type": "string",
"default": "text"
},
"reviewTextColor": {
"type": "string",
"default": ""
},
"starAlign": {
"type": "string",
"default": "left"
},
"padding": {
"type": "object",
"default": {}
},
"margin": {
"type": "object",
"default": {}
},
"isShowReviewText": {
"type": "boolean",
"default": true
}
},
"supports": {}
}
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "ub/star-rating-block",
"title": "Star Rating",
"category": "ultimateblocks",
"description": "Add Star ratings in your posts/pages. You can customize size, color, numbers of stars.",
"keywords": [
"star rating",
"review",
"Ultimate Blocks"
],
"attributes": {
"blockID": {
"type": "string",
"default": ""
},
"starCount": {
"type": "number",
"default": 5
},
"textFontSize": {
"type": "string",
"default": ""
},
"textPosition": {
"type": "string",
"default": "bottom"
},
"starSize": {
"type": "number",
"default": 20
},
"starColor": {
"type": "string",
"default": "#FFB901"
},
"selectedStars": {
"type": "number",
"default": 0
},
"reviewText": {
"type": "string",
"default": ""
},
"reviewTextAlign": {
"type": "string",
"default": "text"
},
"reviewTextColor": {
"type": "string",
"default": ""
},
"starAlign": {
"type": "string",
"default": "left"
},
"padding": {
"type": "object",
"default": {}
},
"margin": {
"type": "object",
"default": {}
},
"isShowReviewText": {
"type": "boolean",
"default": true
}
},
"supports": {}
}
14 changes: 13 additions & 1 deletion src/blocks/star-rating/block.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,20 @@ function ub_render_star_rating_block($attributes){
return $svgAttributes[0];
}, $stars);
}
$classes = array( 'ub-star-rating' );
if( !empty($textPosition) ){
$classes[] = 'ub-star-rating-text-' . esc_attr($textPosition) ;
}
if( !empty($starAlign) ){
$classes[] = 'ub-star-rating-align-' . esc_attr($starAlign) ;
}

return '<div class="wp-block-ub-star-rating ub-star-rating' . (isset($className) ? ' ' . esc_attr($className) : '') .
$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => implode(' ', $classes)
)
);
return '<div ' . $wrapper_attributes .
'"' . ($blockID === '' ? '' : ' id="ub-star-rating-' . esc_attr($blockID) . '"') . '>
<div class="ub-star-outer-container"' .
($blockID === '' ? ' style="justify-content:' . ($starAlign === 'center' ? 'center' :
Expand Down
50 changes: 34 additions & 16 deletions src/blocks/star-rating/components.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { Star } from "./icons";

import { CustomFontSizePicker, SpacingControl } from "../components";
import {
CustomFontSizePicker,
CustomToggleGroupControl,
SpacingControl,
} from "../components";
import { __ } from "@wordpress/i18n";
import {
InspectorControls,
Expand All @@ -19,32 +23,35 @@ import {
export const blockControls = (props) => {
const { attributes, setAttributes } = props;

const { reviewTextAlign } = attributes;
const { reviewTextAlign, starAlign, textPosition } = attributes;
return (
<BlockControls>
<ToolbarGroup>
{["left", "center", "right"].map((a) => (
<ToolbarButton
icon={`align-${a}`}
isActive={starAlign === a}
label={__(`Align stars ${a}`)}
onClick={() => setAttributes({ starAlign: a })}
/>
))}
</ToolbarGroup>
<ToolbarGroup>
{["left", "center", "right", "justify"].map((a) => (
<ToolbarButton
icon={`editor-${a === "justify" ? a : "align" + a}`}
label={__(
(a !== "justify" ? "Align " : "") +
a[0].toUpperCase() +
a.slice(1),
)}
isActive={reviewTextAlign === a}
onClick={() => setAttributes({ reviewTextAlign: a })}
/>
))}
</ToolbarGroup>
{(textPosition === "top" || textPosition === "bottom") && (
<ToolbarGroup>
{["left", "center", "right", "justify"].map((a) => (
<ToolbarButton
icon={`editor-${a === "justify" ? a : "align" + a}`}
label={__(
(a !== "justify" ? "Align " : "") +
a[0].toUpperCase() +
a.slice(1),
)}
isActive={reviewTextAlign === a}
onClick={() => setAttributes({ reviewTextAlign: a })}
/>
))}
</ToolbarGroup>
)}
</BlockControls>
);
};
Expand All @@ -64,6 +71,17 @@ export const inspectorControls = (props) => {
<>
<InspectorControls group="settings">
<PanelBody title={__("General")} initialOpen={true}>
<CustomToggleGroupControl
label={__("Text Position", "ultimate-blocks")}
attributeKey="textPosition"
isBlock
options={[
{ label: __("Top", "ultimate-blocks"), value: "top" },
{ label: __("Right", "ultimate-blocks"), value: "right" },
{ label: __("Bottom", "ultimate-blocks"), value: "bottom" },
{ label: __("Left", "ultimate-blocks"), value: "left" },
]}
/>
<RangeControl
label={__("Number of stars")}
value={starCount}
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/star-rating/style.css

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

Loading

0 comments on commit 2696ca8

Please sign in to comment.