{"id":305,"date":"2025-02-02T18:09:51","date_gmt":"2025-02-02T18:09:51","guid":{"rendered":"https:\/\/demo.itthinx.com\/groups\/?page_id=305"},"modified":"2025-02-03T14:45:23","modified_gmt":"2025-02-03T14:45:23","slug":"content-sections","status":"publish","type":"page","link":"https:\/\/demo.itthinx.com\/groups\/content-sections\/","title":{"rendered":"Protecting Content with Blocks"},"content":{"rendered":"\n<p>Groups provides <a href=\"https:\/\/docs.itthinx.com\/document\/groups\/blocks\/\">Blocks<\/a> that are used to show content based on memberships.<\/p>\n\n\n\n<p>This page contains sections of content that are visible to anyone, sections of content which only members can see and other sections which are hidden from certain members.<\/p>\n\n\n\n<p>The examples on this page make use of two groups, the standard <em>Registered<\/em> group which exists by default and the <em>Premium<\/em> group which we added for our examples. Groups supports an unlimited amount of groups, but here we just use those two to keep things simple.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Members of the Registered Group<\/h2>\n\n\n\n<p>Here we have two blocks that show depending on whether you are logged in or not. One block shows if you are logged in, the other shows if you aren&#8217;t. Their condition to show is based on whether the visitor is a member of the <em>Registered<\/em> group, you will only see one block.<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\"><div class=\"groups-non-member-block-content\">\n<div class=\"wp-block-groups-groups-non-member\">\n<p class=\"is-style-default has-background\" style=\"background-color:#ffcc66\">You are not logged in.<\/p>\n<\/div>\n<\/div>\n\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Members of the Premium Group<\/h2>\n\n\n\n<p>Below this paragraph, we have two blocks. They are shown depending on whether you are a member of the <em>Premium<\/em> group or not, so you will only see one block.<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\"><div class=\"groups-non-member-block-content\">\n<div class=\"wp-block-groups-groups-non-member\">\n<p class=\"has-background\" style=\"background-color:#ffbaba\">You are not a member of the Premium group.<\/p>\n<\/div>\n<\/div>\n\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Nested Group Membership Blocks<\/h2>\n\n\n\n<p>Membership blocks can be nested. Below we have a content section that shows if you are logged in, within that section there are two blocks, one that shows if you belong to the <em>Premium<\/em> group and another which shows if you do not belong to that group. If you are not logged in, we show a login form instead.<\/p>\n\n\n<div class=\"groups-non-member-block-content\">\n<div class=\"wp-block-groups-groups-non-member\">\n<div class=\"wp-block-group has-accent-5-background-color has-background is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-386451ff wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<p class=\"has-text-align-center\">This example requires you to be logged in.<\/p>\n\n\n<form name=\"loginform\" id=\"loginform\" action=\"https:\/\/demo.itthinx.com\/groups\/wp-login.php\" method=\"post\"><p class=\"login-username\">\n\t\t\t\t<label for=\"user_login\">Username or Email Address<\/label>\n\t\t\t\t<input type=\"text\" name=\"log\" id=\"user_login\" autocomplete=\"username\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-password\">\n\t\t\t\t<label for=\"user_pass\">Password<\/label>\n\t\t\t\t<input type=\"password\" name=\"pwd\" id=\"user_pass\" autocomplete=\"current-password\" spellcheck=\"false\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-remember\"><label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Remember Me<\/label><\/p><p class=\"login-submit\">\n\t\t\t\t<input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button button-primary\" value=\"Log In\" \/>\n\t\t\t\t<input type=\"hidden\" name=\"redirect_to\" value=\"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/pages\/305\" \/>\n\t\t\t<\/p><\/form>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"border-style:none;border-width:0px\">Related Documentation<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/docs.itthinx.com\/document\/groups\/access-control\/content-sections\/\">Content Sections<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.itthinx.com\/document\/groups\/access-control\/blocks\/\">Blocks<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.itthinx.com\/document\/groups\/shortcodes\/\">Shortcodes<\/a><\/li>\n<\/ul>\n\n\n\n<style>\ninput#user_login,\ninput#user_pass {\n    width: 256px;\n    display: block;\n    padding: 8px;\n}\ninput#wp-submit {\n    padding: 8px;\n    background-color: #333;\n    color: #fff;\n    border: none;\n    font-size: 18px;\n    cursor: pointer;\n}\ninput#rememberme {\n    vertical-align: middle;\n}\n<\/style>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Blocks and Composition of this Page<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1bfc3b7852&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1bfc3b7852\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"206\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/demo.itthinx.com\/groups\/wp-content\/uploads\/2025\/02\/Structure-206x1024.png\" alt=\"\" class=\"wp-image-406\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1bfc3b7dd8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1bfc3b7dd8\" class=\"wp-block-image size-large is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"517\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/demo.itthinx.com\/groups\/wp-content\/uploads\/2025\/02\/Page-517x1024.png\" alt=\"\" class=\"wp-image-407\" style=\"width:580px;height:auto\" srcset=\"https:\/\/demo.itthinx.com\/groups\/wp-content\/uploads\/2025\/02\/Page-517x1024.png 517w, https:\/\/demo.itthinx.com\/groups\/wp-content\/uploads\/2025\/02\/Page-152x300.png 152w, https:\/\/demo.itthinx.com\/groups\/wp-content\/uploads\/2025\/02\/Page-768x1520.png 768w, https:\/\/demo.itthinx.com\/groups\/wp-content\/uploads\/2025\/02\/Page-776x1536.png 776w, https:\/\/demo.itthinx.com\/groups\/wp-content\/uploads\/2025\/02\/Page.png 949w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Groups provides Blocks that are used to show content based on memberships. This page contains sections of content that are visible to anyone, sections of content which only members can see and other sections which are hidden from certain members. The examples on this page make use of two groups, the standard Registered group which [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-305","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/pages\/305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":29,"href":"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/pages\/305\/revisions"}],"predecessor-version":[{"id":409,"href":"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/pages\/305\/revisions\/409"}],"wp:attachment":[{"href":"https:\/\/demo.itthinx.com\/groups\/wp-json\/wp\/v2\/media?parent=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}