{"id":1730,"date":"2024-06-23T12:20:16","date_gmt":"2024-06-23T10:20:16","guid":{"rendered":"https:\/\/wypo.io\/documentations\/gutenberg-visibility\/"},"modified":"2024-06-23T12:51:46","modified_gmt":"2024-06-23T10:51:46","slug":"gutenberg-visibility","status":"publish","type":"wypo_documentations","link":"https:\/\/wypo.io\/en\/documentations\/gutenberg-visibility\/","title":{"rendered":"Gutenberg Visibility"},"content":{"rendered":"            <div class=\"hf_animated fade_bottom none default wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<h2 class=\"wp-block-heading   \" datalink=\"content-requirements\">Requirements<\/h2>\n\n\n\n<ul class=\"is-style-important wp-block-list\">\n<li class=\"\"><strong>WordPress<\/strong>: Version 5.9 or higher<\/li>\n\n\n\n<li class=\"\"><strong>PHP<\/strong>: Version 7.0 or higher<\/li>\n<\/ul>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n            <div class=\"is-style-normal wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<div class=\"wp-block-group   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-installation\">Installation<\/h2>\n\n\n\n<p class=\"\">To install the plugin, please refer to the &#8220;<a href=\"https:\/\/wypo.io\/en\/complete-guide-installing-wordpress-plugin\/\">Installing a plugin<\/a>&#8221; documentation.  <\/p>\n<\/div>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-example\">Example<\/h2>\n\n\n\n<p class=\"\"><strong>We invite you to minimize your window to reveal the following blocks.<\/strong><\/p>\n\n\n\n<p class=\"\">This block is always visible.<\/p>\n\n\n\n<p class=\" hf_hidden-xl\">This block is visible on screens larger than 1200px.<\/p>\n\n\n\n<p class=\" hf_hidden-lg\">This block is visible on screens larger than 992px.<\/p>\n\n\n\n<p class=\" hf_hidden-md\">This block is visible on screens larger than 768px.<\/p>\n\n\n\n<p class=\" hf_hidden-sm\">This block is visible on screens larger than 576px.<\/p>\n\n\n\n<p class=\" hf_hidden-xs\">This block is visible on screens larger than 400px.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-personalization\">Personalization<\/h2>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-blocks\">Blocks<\/h3>\n\n\n\n<p class=\"\">By default, settings are available on all blocks, but you can exclude blocks with the following PHP code in your theme&#8217;s <code>functions.php<\/code> file:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-209134037\"\n        id=\"codemirror-209134037\"\n      >add_filter( &quot;habefast_gutenberg_visibility_get_excludes_blocks&quot;,function($array){\n\t$exludesBlocks = &#91;&quot;core\/heading&quot;&#93;; \/\/array with excluded blocks name\n\treturn array_merge($exludesBlocks,$array);\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-209134037'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-breakpoints\">Breakpoints<\/h3>\n\n\n\n<p class=\"\">By default, the plugin adds the following breakpoints:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1109218243\"\n        id=\"codemirror-1109218243\"\n      >&#91;&quot;size&quot;=&gt;1200,&quot;prefix&quot;=&gt;&#039;xl&#039;&#93;,\n&#91;&quot;size&quot;=&gt;992,&quot;prefix&quot;=&gt;&#039;lg&#039;&#93;,\n&#91;&quot;size&quot;=&gt;768,&quot;prefix&quot;=&gt;&#039;md&#039;&#93;,\n&#91;&quot;size&quot;=&gt;576,&quot;prefix&quot;=&gt;&#039;sm&#039;&#93;,\n&#91;&quot;size&quot;=&gt;400,&quot;prefix&quot;=&gt;&#039;xs&#039;&#93;,<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1109218243'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-add-a-breakpoint\">Add a breakpoint<\/h4>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1391598975\"\n        id=\"codemirror-1391598975\"\n      >add_filter(&quot;habefast_gutenberg_visibility_get_breakpoints&quot;,function($array){\n \treturn array_merge(&#91;\n \t\t&#91;&quot;size&quot;=&gt;1500,&quot;prefix&quot;=&gt;&quot;xxl&quot;&#93;,\n \t&#93;,$array);\n },11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1391598975'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-edit-a-breakpoint\">Edit a breakpoint<\/h4>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-501984186\"\n        id=\"codemirror-501984186\"\n      >\/\/As the prefix is already in use, its value will be replaced by\nadd_filter(&quot;habefast_gutenberg_visibility_get_breakpoints&quot;,function($array){\n\treturn array_merge(&#91;\n \t\t&#91;&quot;size&quot;=&gt;600,&quot;prefix&quot;=&gt;&quot;md&quot;&#93;,\n \t&#93;,$array);\n },11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-501984186'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-delete-a-breakpoint\">Delete a breakpoint<\/h4>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-55920875\"\n        id=\"codemirror-55920875\"\n      >add_filter(&quot;habefast_gutenberg_visibility_get_breakpoints&quot;,function($array){\n\tunset($array&#91;1&#93;);\n\treturn $array;\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-55920875'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n","protected":false},"featured_media":0,"parent":0,"menu_order":46,"template":"","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Gutenberg Visibility plugin documentation [separator] [sitetitle]","hf_wpseo_meta_description":"The Gutenberg Visibility plugin lets you hide all Gutenberg blocks. You can define whether a block is visible on mobile or tablet devices using a breakpoint system.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","documentation_description":"The Gutenberg Visibility plugin lets you hide all Gutenberg blocks.\nYou can define whether a block is visible on mobile or tablet devices using a breakpoint system.","documentation_menu_text":"","documentation_related_pageid":1534,"wypo_hidden_role_wypo_users_not_logged":false,"wypo_visibility_role_wypo_users_not_logged":false,"wypo_hidden_role_administrator":false,"wypo_visibility_role_administrator":false,"wypo_hidden_role_habefast":false,"wypo_visibility_role_habefast":false,"wypo_hidden_role_customer":false,"wypo_visibility_role_customer":false,"wypo_hidden_role_habefast_manager":false,"wypo_visibility_role_habefast_manager":false,"wypo_hidden_for_role":false,"wypo_visibility_for_role":false},"class_list":["post-1730","wypo_documentations","type-wypo_documentations","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations\/1730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/wypo_documentations"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=1730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}