GreenShift: Tutor LMS Course Grid Layout

tutor-lms-course-grid.json

{
  "__file": "wp_block",
  "title": "Tutor LMS Course Grid",
  "content": "<!-- wp:html -->\n<style>\n/* Format course duration display */\n.course-duration {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25em; /* Optional spacing between elements */\n}\n\n/* Add \"h\" after the hours span */\n.course-duration .gspb_meta_result_tags span:first-child::after {\n    content: \"h\";\n    margin-right: 0.25em;\n}\n\n/* Add \"m\" after the minutes span */\n.course-duration .gspb_meta_result_tags span:nth-child(2)::after {\n    content: \"m\";\n}\n/* Hide the seconds span */\n.course-duration .gspb_meta_result_tags span:nth-child(3) {\n    display: none;\n}\n\n/* Grey out the course price when it is on sale */\n.course-cost-container .tutor-course-price {\n    color: inherit;\n    text-decoration: none;\n}\n.course-cost-container .tutor-course-price + .tutor-sale-price,\n.course-cost-container .tutor-sale-price ~ .tutor-course-price {\n    opacity: .5;\n    font-weight: 400;\n    text-decoration: line-through;\n}\n\n/* Replace one_time meta value for selling options with \"one time\" */\n.selling-option::before {\n    content: attr(tutor-selling-option);\n    white-space: pre;\n}\n.selling-option[tutor-selling-option=\"one_time\"]::before {\n    content: \"one time\";\n}\n</style>\n<!-- /wp:html -->\n\n<!-- wp:greenshift-blocks/querygrid {\"id\":\"gsbp-c4a7d20\",\"itemSpacing\":{\"margin\":{\"values\":{},\"locked\":false},\"padding\":{\"values\":{\"bottom\":[\"var(\\u002d\\u002dnormal-spacing)\"]},\"locked\":false},\"overflow\":[\"hidden\"]},\"border\":{\"borderRadius\":{\"values\":{\"topLeft\":[\"6px\"],\"topRight\":[\"6px\"],\"bottomRight\":[\"6px\"],\"bottomLeft\":[\"6px\"]},\"locked\":true},\"style\":{\"all\":[\"solid\"]},\"size\":{\"all\":[1]},\"color\":{\"all\":[\"#cdcfd5\"]},\"styleHover\":{},\"sizeHover\":{},\"colorHover\":{},\"custom\":{},\"customEnabled\":{}},\"background\":{\"color\":\"#ffffff\"},\"data_source\":\"cpt\",\"cat\":[],\"tag\":[],\"post_type\":\"courses\",\"tax_name\":\"\",\"ids\":[],\"type\":\"recent\",\"orderby\":\"\",\"enable_pagination\":\"2\",\"filter_enable_pagination\":\"0\",\"filterpanel\":[{\"id\":\"filter-1735048933634\",\"filtertitle\":\"Show all\",\"filtertype\":\"all\",\"filtermetakey\":null,\"filterpricerange\":null,\"filterorderby\":\"date\",\"filterorder\":\"DESC\",\"filtertaxkey\":null,\"filtertaxtermslug\":null,\"filtertaxcondition\":null,\"filterdate\":\"all\"}],\"columnGrid\":[3,2,2,1],\"container_link\":true,\"title\":\"\",\"flexbox\":{\"enable\":false,\"type\":\"grid\",\"useSplit\":true,\"gridtemplateRow\":[\"160px auto 1fr auto\"]},\"enableSearchFilters\":true,\"searchQueryId\":\"1\",\"className\":\"course-list-hover\"} -->\n<!-- wp:greenshift-blocks/dynamic-post-image {\"id\":\"gsbp-d726481\",\"link_enable\":false,\"image_size\":\"medium\",\"scale\":\"cover\",\"width\":[\"custom\",null,null,null],\"height\":[\"custom\",null,null,null],\"widthUnit\":[\"%\",\"px\",\"px\",\"px\"],\"customWidth\":[100,null,null,null],\"customHeight\":[160,null,null,null],\"post_type\":\"courses\",\"imageurl\":\"https://collabanthnetwork.org/courses/wp-content/uploads/sites/4/2025/01/course-placeholder.svg\"} /-->\n\n<!-- wp:greenshift-blocks/element {\"id\":\"gsbp-7b1b0fe\",\"type\":\"inner\",\"localId\":\"gsbp-7b1b0fe\",\"styleAttributes\":{\"display\":[\"flex\"],\"flexDirection\":[\"row\"],\"marginLink_Extra\":\"lr\",\"marginLeft\":[\"var(\\u002d\\u002dnormal-spacing)\"],\"marginRight\":[\"var(\\u002d\\u002dnormal-spacing)\"]}} -->\n<div class=\"gsbp-7b1b0fe\"><!-- wp:greenshift-blocks/progressbar {\"id\":\"gsbp-cf84719\",\"spacing\":{\"margin\":{\"values\":{\"top\":[\"6px\"],\"right\":[\"12px\"]},\"locked\":false},\"padding\":{\"values\":{},\"locked\":false}},\"progress\":4.25,\"maxvalue\":5,\"progressline\":\"#ed9700\",\"dynamicEnable\":true,\"dynamicField\":\"tutor_course_average_rating\",\"dynamicPostType\":\"courses\",\"typebar\":\"star\",\"className\":\"company-star-rating\"} -->\n<div class=\"wp-block-greenshift-blocks-progressbar gs-progressbar gs-progressbar-wrapper gspb_bar-id-gsbp-cf84719 company-star-rating\"><div class=\"star-rating\"><span style=\"width:85%\"></span></div></div>\n<!-- /wp:greenshift-blocks/progressbar -->\n\n<!-- wp:greenshift-blocks/element {\"id\":\"gsbp-9733974\",\"textContent\":\"\\u003cdynamictext\\u003e4.25\\u003c/dynamictext\\u003e\",\"tag\":\"span\",\"dynamictext\":{\"dynamicEnable\":true,\"dynamicType\":\"custom\",\"dynamicSource\":\"latest_item\",\"dynamicPostType\":\"courses\",\"dynamicPostId\":0,\"dynamicField\":\"tutor_course_average_rating\",\"postprocessor\":\"\"},\"localId\":\"gsbp-9733974\",\"styleAttributes\":{\"color\":[\"var(\\u002d\\u002dtutor-body-color)\"],\"fontWeight\":[\"500\"]}} -->\n<span class=\"gsbp-9733974\"><dynamictext>4.25</dynamictext></span>\n<!-- /wp:greenshift-blocks/element -->\n\n<!-- wp:greenshift-blocks/element {\"id\":\"gsbp-f39f365\",\"textContent\":\"\\u0026nbsp;(\\u003cdynamictext\\u003e4\\u003c/dynamictext\\u003e)\",\"tag\":\"span\",\"dynamictext\":{\"dynamicEnable\":true,\"dynamicType\":\"custom\",\"dynamicSource\":\"latest_item\",\"dynamicPostType\":\"courses\",\"dynamicPostId\":0,\"dynamicField\":\"tutor_course_rating_count\",\"postprocessor\":\"\",\"dynamicPostData\":\"comment_count\"},\"localId\":\"gsbp-f39f365\",\"styleAttributes\":{\"color\":[\"var(\\u002d\\u002dtutor-color-muted)\"]}} -->\n<span class=\"gsbp-f39f365\">&nbsp;(<dynamictext>4</dynamictext>)</span>\n<!-- /wp:greenshift-blocks/element --></div>\n<!-- /wp:greenshift-blocks/element -->\n\n<!-- wp:greenshift-blocks/element {\"id\":\"gsbp-0632d8f\",\"type\":\"inner\",\"localId\":\"gsbp-0632d8f\",\"styleAttributes\":{\"paddingLink_Extra\":\"all\",\"paddingTop\":[\"var(\\u002d\\u002dnormal-spacing)\"],\"paddingBottom\":[\"var(\\u002d\\u002dnormal-spacing)\"],\"paddingLeft\":[\"var(\\u002d\\u002dnormal-spacing)\"],\"paddingRight\":[\"var(\\u002d\\u002dnormal-spacing)\"]}} -->\n<div class=\"gsbp-0632d8f\"><!-- wp:greenshift-blocks/dynamic-post-title {\"id\":\"gsbp-8d0ce82\",\"spacing\":{\"margin\":{\"values\":{\"bottom\":[\"0px\"]},\"locked\":false},\"padding\":{\"values\":{},\"locked\":false}},\"typography\":{\"textShadow\":{},\"size\":[\"1rem\"],\"line_height\":[\"1.6rem\"],\"decoration\":\"remove\",\"color\":\"var(\\u002d\\u002dtutor-body-color)\",\"colorlinks\":\"var(\\u002d\\u002dtutor-body-color)\",\"customweight\":\"custom\",\"customweightnumber\":700,\"relativeHover\":true,\"hoverClass\":\".course-list-hover\",\"colorHover\":\"var(\\u002d\\u002dwp\\u002d\\u002dpreset\\u002d\\u002dcolor\\u002d\\u002dpalette-color-5, var(\\u002d\\u002dtheme-palette-color-5, #CF5E1D))\"}} /-->\n\n<!-- wp:greenshift-blocks/meta {\"id\":\"gsbp-1834853\",\"spacing\":{\"margin\":{\"values\":{\"bottom\":[null]},\"locked\":false},\"padding\":{\"values\":{},\"locked\":false}},\"typographyValue\":{\"textShadow\":{},\"colorlinks\":\"\",\"size\":[\"1rem\"],\"line_height\":[\"20px\"],\"customweight\":\"custom\",\"customweightnumber\":400,\"color\":\"var(\\u002d\\u002dtutor-color-muted)\"},\"typographyPrefix\":{\"textShadow\":{},\"color\":\"var(\\u002d\\u002dtutor-color-muted)\",\"size\":[\"1rem\"],\"customweight\":\"custom\",\"customweightnumber\":400},\"field\":\"author_name\",\"selectedPostId\":0,\"post_type\":\"courses\",\"type\":\"author_name\",\"typeselect\":\"authordata\",\"prefix\":\"\",\"postfix\":\"\",\"inlineFlex\":false} /--></div>\n<!-- /wp:greenshift-blocks/element -->\n\n<!-- wp:greenshift-blocks/element {\"id\":\"gsbp-3e7a665\",\"type\":\"inner\",\"localId\":\"gsbp-3e7a665\",\"styleAttributes\":{\"alignSelf\":[\"end\"]}} -->\n<div class=\"gsbp-3e7a665\"><!-- wp:greenshift-blocks/element {\"id\":\"gsbp-673acac\",\"type\":\"inner\",\"localId\":\"gsbp-673acac\",\"styleAttributes\":{\"display\":[\"flex\"],\"justifyContent\":[\"space-between\"],\"alignItems\":[\"center\"],\"paddingLink_Extra\":\"lr\",\"paddingLeft\":[\"var(\\u002d\\u002dnormal-spacing)\"],\"paddingRight\":[\"var(\\u002d\\u002dnormal-spacing)\"],\"paddingBottom\":[\"var(\\u002d\\u002dnormal-spacing)\"]}} -->\n<div class=\"gsbp-673acac\"><!-- wp:greenshift-blocks/meta {\"id\":\"gsbp-9e1b9d9\",\"field\":\"_course_duration\",\"postprocessor\":\"commatotags\",\"selectedPostId\":0,\"post_type\":\"courses\",\"tag_design\":{\"typography\":{\"textShadow\":{},\"color\":\"var(\\u002d\\u002dtutor-body-color)\",\"customweight\":\"custom\",\"customweightnumber\":500,\"size\":[\"rem\"]},\"background\":{},\"border\":{\"borderRadius\":{\"values\":{},\"locked\":true}},\"csstransform\":{},\"shadow\":{},\"spacing\":{\"margin\":{\"values\":{},\"locked\":false},\"padding\":{\"values\":{},\"locked\":false}}},\"className\":\"course-duration bb-icon-clock\"} /-->\n\n<!-- wp:greenshift-blocks/meta {\"id\":\"gsbp-63352bf\",\"typographyValue\":{\"textShadow\":{},\"transform\":\"capitalize\",\"customweight\":\"custom\",\"customweightnumber\":500,\"size\":[\"rem\"],\"color\":\"var(\\u002d\\u002dtutor-body-color)\"},\"field\":\"_tutor_course_level\",\"selectedPostId\":0,\"post_type\":\"courses\",\"className\":\"bb-icon-paper-plane\"} /--></div>\n<!-- /wp:greenshift-blocks/element -->\n\n<!-- wp:greenshift-blocks/element {\"id\":\"gsbp-8157096\",\"type\":\"inner\",\"className\":\"course-cost-container\",\"localId\":\"gsbp-8157096\",\"styleAttributes\":{\"paddingLink_Extra\":\"lr\",\"paddingLeft\":[\"var(\\u002d\\u002dnormal-spacing)\"],\"paddingRight\":[\"var(\\u002d\\u002dnormal-spacing)\"],\"borderLink_Extra\":true,\"borderTopWidth\":[\"1px\"],\"borderTopStyle\":[\"solid\"],\"borderTopColor\":[\"#cdcfd5\"],\"paddingTop\":[\"var(\\u002d\\u002dnormal-spacing)\"]}} -->\n<div class=\"course-cost-container gsbp-8157096\"><!-- wp:greenshift-blocks/visibility-block {\"id\":\"gsbp-d2b91f8\",\"query_by\":\"custom_meta\",\"not_show_for_selected\":true,\"custom_field_key\":\"_tutor_course_price_type\",\"custom_field_value\":\"paid\",\"conditions_arr\":[{\"title\":\"Condition #2\",\"query_by\":\"custom_meta\",\"tax_name\":\"\",\"tax_slug\":[],\"tax_slug_exclude\":[],\"custom_field_key\":\"tutor_course_price\",\"custom_field_value\":\"\",\"custom_field_compare\":\"exist\",\"url_path_field\":\"\",\"referal_source_field\":\"\",\"name_of_cookie\":\"\",\"compare_type_cookie\":\"exist\",\"equal_cookie\":\"\"}]} -->\n<div class=\"wp-block-greenshift-blocks-visibility-block gspb-content-visibility gspb_id-gsbp-d2b91f8\"><div class=\"gspbcssvisibilitycontent\"><!-- wp:greenshift-blocks/meta {\"id\":\"gsbp-e721cf0\",\"typographyValue\":{\"textShadow\":{},\"size\":[\"0.875rem\"],\"customweight\":\"custom\",\"customweightnumber\":500,\"transform\":\"capitalize\",\"color\":\"var(\\u002d\\u002dtutor-body-color)\"},\"field\":\"_tutor_course_price_type\",\"selectedPostId\":0,\"post_type\":\"courses\",\"inlineFlex\":true,\"blockVisibility\":{\"not_show_for_selected\":true,\"query_by\":\"custom_meta\",\"custom_field_key\":\"_tutor_course_price_type\",\"custom_field_compare\":\"equal\",\"type_of_condition\":\"and\",\"custom_field_value\":\"paid\"},\"conditions_arr_visibility\":[{\"title\":\"Condition #2\",\"query_by\":\"custom_meta\",\"tax_name\":\"\",\"tax_slug\":[],\"tax_slug_exclude\":[],\"custom_field_key\":\"tutor_course_price\",\"custom_field_value\":\"0\",\"custom_field_compare\":\"exist\",\"url_path_field\":\"\",\"referal_source_field\":\"\",\"name_of_cookie\":\"\",\"compare_type_cookie\":\"exist\",\"equal_cookie\":\"\"}]} /--></div></div>\n<!-- /wp:greenshift-blocks/visibility-block -->\n\n<!-- wp:greenshift-blocks/visibility-block {\"id\":\"gsbp-9a27237\",\"query_by\":\"custom_meta\",\"not_show_for_selected\":true,\"custom_field_key\":\"_tutor_course_price_type\",\"custom_field_value\":\"free\"} -->\n<div class=\"wp-block-greenshift-blocks-visibility-block gspb-content-visibility gspb_id-gsbp-9a27237\"><div class=\"gspbcssvisibilitycontent\"><!-- wp:greenshift-blocks/meta {\"id\":\"gsbp-411022c\",\"typographyValue\":{\"textShadow\":{},\"color\":\"var(\\u002d\\u002dtutor-body-color)\",\"size\":[\"0.875rem\"],\"customweight\":\"custom\",\"customweightnumber\":500},\"field\":\"tutor_course_sale_price\",\"selectedPostId\":0,\"post_type\":\"courses\",\"prefix\":\"$\",\"inlineFlex\":true,\"className\":\"tutor-sale-price\"} /-->\n\n<!-- wp:greenshift-blocks/meta {\"id\":\"gsbp-73191bd\",\"typographyValue\":{\"textShadow\":{},\"size\":[\"0.875rem\"],\"customweight\":\"custom\",\"customweightnumber\":500,\"color\":\"var(\\u002d\\u002dtutor-body-color)\"},\"field\":\"tutor_course_price\",\"selectedPostId\":0,\"post_type\":\"courses\",\"prefix\":\"$\",\"inlineFlex\":true,\"className\":\"tutor-course-price\",\"blockVisibility\":{\"not_show_for_selected\":true,\"query_by\":\"custom_meta\",\"custom_field_key\":\"_tutor_course_price_type\",\"custom_field_value\":\"free\",\"custom_field_compare\":\"equal\"}} /-->\n\n<!-- wp:greenshift-blocks/element {\"id\":\"gsbp-b7d881a\",\"textContent\":\"\\u0026nbsp;\",\"tag\":\"span\",\"dynamictext\":{\"dynamicEnable\":true,\"dynamicType\":\"custom\",\"dynamicSource\":\"latest_item\",\"dynamicPostType\":\"courses\",\"dynamicPostId\":0,\"dynamicField\":\"tutor_course_selling_option\",\"postprocessor\":\"\"},\"className\":\"selling-option\",\"localId\":\"gsbp-b7d881a\",\"dynamicAttributes\":[{\"name\":\"tutor-selling-option\",\"value\":\"one_time\"}],\"styleAttributes\":{\"fontSize\":[\"0.875rem\"],\"fontWeight\":[\"500\"],\"textTransform\":[\"none\"],\"color\":[\"var(\\u002d\\u002dtutor-body-color)\"]},\"blockVisibility\":{\"not_show_for_selected\":true,\"query_by\":\"custom_meta\",\"custom_field_key\":\"_tutor_course_price_type\",\"custom_field_value\":\"free\",\"custom_field_compare\":\"equal\"}} -->\n<span class=\"selling-option gsbp-b7d881a\" tutor-selling-option=\"one_time\">&nbsp;</span>\n<!-- /wp:greenshift-blocks/element --></div></div>\n<!-- /wp:greenshift-blocks/visibility-block --></div>\n<!-- /wp:greenshift-blocks/element --></div>\n<!-- /wp:greenshift-blocks/element -->\n<!-- /wp:greenshift-blocks/querygrid -->",
  "syncStatus": ""
}

This is a fully customizable course grid block pattern for the Tutor LMS plugin. It is built using GreenShift's advanced query blocks and saved as a block pattern. It employs variables supplied by the Tutor LMS plugin wherever possible to align it with Tutor's design settings.

It also uses the "Tutor LMS Advanced Customization Toolkit" plugin to save the tutor_course_average_rating and tutor_course_rating_count metadata in the postmeta table, which makes it accessible to query blocks like those found in GreenShift. That plugin also allows for overriding the Course Archive page using the Blocksy Theme's Content Blocks feature. However, if you do not want to use the "Tutor LMS Advanced Customization Toolkit" plugin you can simply remove the Div container block that contains the "Progress Bar/Rating" block and the 2 additional "Span Element" blocks.