You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1 line
27 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(()=>{var e={967:(e,t)=>{var l;!function(){"use strict";var n={}.hasOwnProperty;function a(){for(var e="",t=0;t<arguments.length;t++){var l=arguments[t];l&&(e=r(e,o(l)))}return e}function o(e){if("string"==typeof e||"number"==typeof e)return e;if("object"!=typeof e)return"";if(Array.isArray(e))return a.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var t="";for(var l in e)n.call(e,l)&&e[l]&&(t=r(t,l));return t}function r(e,t){return t?e?e+" "+t:e+t:e}e.exports?(a.default=a,e.exports=a):void 0===(l=function(){return a}.apply(t,[]))||(e.exports=l)}()}},t={};function l(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,l),o.exports}l.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return l.d(t,{a:t}),t},l.d=(e,t)=>{for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";const e=window.React,t=window.lodash,n=(window.wp.i18n,window.wp.element),a=window.wp.domReady;var o=l.n(a);const r=window.wp.components,i=window.wp.apiFetch;var s=l.n(i);const c=(()=>{let e=!1;try{e=MFB.isPremium}catch(e){}return e})(),u={headers:{"Content-Type":"application/json"},method:"GET"};class d{constructor(e=""){e||(e=window.location.href),this.parsedURL=new URL(e)}get(e,t=null){return this.parsedURL.searchParams.get(e)||t}set(e,t,l=!0){this.parsedURL.searchParams.set(e,t),l&&history.pushState&&history.pushState({},null,this.parsedURL.href)}delete(e,t=!0){this.parsedURL.searchParams.delete(e),t&&history.pushState&&history.pushState({},null,this.parsedURL.href)}reload(){history?.go?history.go():window.location.reload()}getHref(){return this.parsedURL.href}}const m=(0,n.createContext)(),h=({title:t,description:l,children:n})=>(0,e.createElement)("div",{className:"settings-section"},t&&(0,e.createElement)("h3",{className:"settings-section__title"},t),l&&(0,e.createElement)("p",{className:"settings-section__description"},l),(0,e.createElement)("div",{className:"meta-box-sortables"},n));var f=l(967),p=l.n(f);const b=window.wp.url,g=({title:l,settingsName:a="mfb-settings",children:o,renderFooter:r=null,isFullRow:i=!1,isHeaderHidden:s=!1,className:c,initialOpen:u=!0})=>{const d=`${a}-${(0,b.cleanForSlug)(l)}`,[m,h]=((e,t=null)=>{const[l,a]=(0,n.useState)((()=>{try{const l=JSON.parse(localStorage.getItem(e));return isNil(l)?t:l}catch(e){return((e,t="log")=>{e&&"development"===window?.MFBLOG?.environmentType&&(["log","info","warn","error","debug","dir","table"].includes(t)?console[t](e):console.log(e))})(e,"error"),t}}));return[l,t=>{a(t),localStorage.setItem(e,JSON.stringify(t))}]})(d,!u);return(0,e.createElement)("div",{className:p()("postbox settings-widget",c,{closed:m,"is-full-row":i,"is-header-hidden":s})},!s&&(0,e.createElement)("div",{className:"postbox-header","aria-expanded":m?"false":"true",tabIndex:-1,onClick:e=>{e.preventDefault(),h(!m)}},(0,e.createElement)("h2",{className:"hndle"},l),(0,e.createElement)("div",{className:"handle-actions hide-if-no-js"},(0,e.createElement)("button",{type:"button",className:"handlediv","aria-expanded":m?"false":"true",onClick:e=>{e.preventDefault(),h(!m)}},(0,e.createElement)("span",{className:"screen-reader-text"},"Toggle panel: ",l),(0,e.createElement)("span",{className:"toggle-indicator","aria-hidden":m?"true":"false"})))),(0,e.createElement)("div",{className:"inside"},o),(0,t.isFunction)(r)&&(0,e.createElement)("div",{className:"postbox-footer"},r()))},y=({name:t,videos:l={}})=>{var n;const a=null!==(n=l[t])&&void 0!==n?n:null;return a?(0,e.createElement)(e.Fragment,null,a.title&&(0,e.createElement)("h4",null,a.title),(0,e.createElement)("video",{width:"1024",controls:"controls"},(0,e.createElement)("source",{src:a.url,type:"video/mp4"})),a.caption&&(0,e.createElement)("p",{className:"video-caption"},a.caption)):null},E=()=>{const{data:{videos:t={}}={}}=(0,n.useContext)(m);return(0,e.createElement)(g,{isHeaderHidden:!0,isFullRow:!0,className:"widget-welcome"},(0,e.createElement)("h1",null,"Welcome to Meta Field Block (MFB)"),(0,e.createElement)("div",{className:"welcome__description"},(0,e.createElement)("h2",null,"This single-block plugin helps you display your custom fields in WordPress Gutenberg effortlessly."),(0,e.createElement)("p",null,"You can display custom fields for posts, terms, or users that are registered through the core API functions (",(0,e.createElement)("a",{href:"https://developer.wordpress.org/reference/functions/register_meta/",target:"_blank"},"register_meta"),","," ",(0,e.createElement)("a",{href:"https://developer.wordpress.org/reference/functions/register_post_meta/",target:"_blank"},"register_post_meta"),", or"," ",(0,e.createElement)("a",{href:"https://developer.wordpress.org/reference/functions/register_term_meta/",target:"_blank"},"register_term_meta"),") or custom fields from any meta field framework. It supports all fields whose values can be retrieved by the core API functions (",(0,e.createElement)("a",{href:"https://developer.wordpress.org/reference/functions/get_post_meta/",target:"_blank"},"get_post_meta"),","," ",(0,e.createElement)("a",{href:"https://developer.wordpress.org/reference/functions/get_term_meta/",target:"_blank"},"get_term_meta"),","," ",(0,e.createElement)("a",{href:"https://developer.wordpress.org/reference/functions/get_user_meta/",target:"_blank"},"get_user_meta"),") and are strings or can be converted to strings. To display the field values in the Block Editor, they have to be accessible via the REST API or have the field type set to ",(0,e.createElement)("code",null,"dynamic"),"."),(0,e.createElement)("p",null,"This plugin also supports displaying custom fields created by the"," ",(0,e.createElement)("a",{href:"https://www.advancedcustomfields.com/",target:"_blank"},"Advanced Custom Fields")," ","plugin explicitly. It supports all"," ",(0,e.createElement)("a",{href:"https://www.advancedcustomfields.com/resources/#field-types",target:"_blank"},"ACF field types")," ","whose values are strings or can be converted to strings. Some other complex fields such as Image, Link, Page Link, True False, Checkbox, Select, Radio, Button Group, Taxonomy, User, Post Object and Relationship field types are also supported in basic formats."),(0,e.createElement)("p",null,"An edge-case where this block is really helpful is when you need to get the correct ",(0,e.createElement)("code",null,"post_id")," in your shortcode when you use it in a Query Loop. In that case, you can choose the field type as",(0,e.createElement)("code",null,"dynamic")," and input your shortcode in the field name. The block will show it correctly on both the front end and the editor."),(0,e.createElement)("h2",null,"Block attributes and block support features"),(0,e.createElement)("p",null,"This block is built using only native Gutenberg features. The details of block metadata are as follows:"),(0,e.createElement)("h3",null,"Block attributes"),(0,e.createElement)("ul",null,(0,e.createElement)("li",null,(0,e.createElement)("code",null,"fieldType"),"(string): It can be one of ",(0,e.createElement)("code",null,"meta"),","," ",(0,e.createElement)("code",null,"dynamic"),", ",(0,e.createElement)("code",null,"rest_field"),", or ",(0,e.createElement)("code",null,"acf"),". Default is ",(0,e.createElement)("code",null,"meta"),"."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"fieldName"),"(string): This is for inputting the name of your field. If your fields are registered with the"," ",(0,e.createElement)("code",null,"show in REST"),"option enabled, their names will appear below the input control for easy copying and pasting."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"fieldSettings"),"(object): The value of this attribute will be generated automatically when you input fieldType and fieldName."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"hideEmpty"),"(boolean): This setting allows you to hide the block if its value is empty. Default is false."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"emptyMessage"),"(string): This text will be shown if the value is empty"),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"prefix"),"(string): The text that will be shown before the field value."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"suffix"),"(string): The text that will be shown after the field value."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"labelAsPrefix"),"(boolean): If enabled, the field label will be used as prefix automatically. Its only for ACF fields."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"displayLayout"),"(string): It can be an empty value or",(0,e.createElement)("code",null,"inline-block"),", ",(0,e.createElement)("code",null,"block"),". Default is empty value. This setting allows you to choose a basic layout for value, prefix and suffix."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"tagName"),"(string): It can be one of the common HTML tags such as div, h1, …, h6, p, span, header, footer, section. Default is div."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"textAlign"),"(string): It is similar to the core text align attribute."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"showOutline"),"(boolean): If enabled, the block in the editor will be shown with a border. This setting wont affect the front end.")),(0,e.createElement)("h3",null,"Block support features"),(0,e.createElement)("ul",null,(0,e.createElement)("li",null,(0,e.createElement)("strong",null,"Typography:")," font family, font size, line height, font weight, font style, letter spacing, text transform, and text decoration."),(0,e.createElement)("li",null,(0,e.createElement)("strong",null,"Spacing:")," margin, padding, and block spacing."),(0,e.createElement)("li",null,(0,e.createElement)("strong",null,"Color:")," text, background, and link."),(0,e.createElement)("li",null,(0,e.createElement)("strong",null,"Border")," and ",(0,e.createElement)("strong",null,"radius"),"."),(0,e.createElement)("li",null,(0,e.createElement)("strong",null,"Align:")," full and wide.")),(0,e.createElement)("h2",null,"How to use it?"),(0,e.createElement)("p",null,"Similar to the core blocks, you can either use it by inserting it directly in the Editor or inputting it in a template file."),(0,e.createElement)(y,{name:"basicFields",videos:t}),(0,e.createElement)(y,{name:"siteEditorFields",videos:t}),(0,e.createElement)("h3",null,"How to use it in a template file:"),(0,e.createElement)("pre",null,'\x3c!-- wp:mfb/meta-field-block {"fieldType":"acf","fieldName":"image_field"} /--\x3e'),(0,e.createElement)("h3",null,"How to display the value in the Block Editor"),(0,e.createElement)("p",null,"Since version 1.2.3, you could use ",(0,e.createElement)("code",null,"dynamic")," field type to display private fields in the editor. The changes made by the hook",(0,e.createElement)("code",null,"meta_field_block_get_block_content")," can also be seen both on the front end and the editor with this field type."),(0,e.createElement)("p",null,"To display the value of a custom field in the Block Editor, you need to make your custom field accessible through the REST API. By doing this, the field name will also show up in the list of suggested names below the input field name control. To achieve this, you need to register your custom field with the ",(0,e.createElement)("code",null,"show_in_rest")," option enabled. It can be either a boolean value or an array, depending on the data type of the custom field. For example:",(0,e.createElement)("pre",null,"register_meta(\n 'post',\n 'post_meta_string',\n array(\n 'show_in_rest' => true,\n 'type' => 'string',\n 'default' => 'The default string value',\n 'single' => true,\n )\n);")),(0,e.createElement)("p",null,"For ACF fields, you need to enable the ",(0,e.createElement)("code",null,"Show in REST API")," ","setting in the ",(0,e.createElement)("code",null,"Settings → Group Settings")," section in the edit field group screen."),(0,e.createElement)("img",{alt:"ACF REST API enabled",src:"https://metafieldblock.com/docs/acf-rest-api-enabled.png"}),(0,e.createElement)("h2",null,"How to extend it with custom hooks?"),(0,e.createElement)("p",null,"For developers, this block provides hook APIs that allow you to display complex fields or change the output of your fields with your custom HTML output easily. You can also use this block as a placeholder to"," ",(0,e.createElement)("a",{href:"https://wordpress.org/support/topic/how-to-use-mfb-to-display-dynamic-fields/",target:"_blank"},"display any kind of content"),", not just real custom fields, with ",(0,e.createElement)("code",null,"$object_id")," (post_id, term_id, user_id) and ",(0,e.createElement)("code",null,"$object_type")," (post, term, user) as context parameters. This feature is very helpful if you want to display some custom dynamic content quickly using PHP code but you don't want to register your own custom blocks. Here are the details of hooks that you can use to extend it with custom PHP code:"),(0,e.createElement)("ul",null,(0,e.createElement)("li",null,(0,e.createElement)("code",null,"meta_field_block_get_block_content"),": This hook allows you to filter the block content before it is rendered. Here is a simple example of how to use it:",(0,e.createElement)("pre",null,"add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $object_id, $object_type ) {\n $field_name = $attributes['fieldName'] ?? '';\n\n // Replace your_field_name with your unique name.\n if ( 'your_field_name' === $field_name ) {\n // Do whatever you want here.\n $block_content = 'new content';\n }\n\n return $block_content;\n}, 10, 5);")),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"meta_field_block_get_acf_field"),": This hook allows you to filter the ACF field value before it is rendered. Here is a simple example of how to use it:",(0,e.createElement)("pre",null,"add_filter( 'meta_field_block_get_acf_field', function ( $field_value, $object_id, $field, $raw_value, $object_type ) {\n $field_name = $field['name'] ?? '';\n\n // Replace your_field_name with your unique name.\n if ( 'your_field_name' === $field_name ) {\n // Do whatever you want here.\n $field_value = 'new content';\n }\n\n return $field_value;\n}, 10, 5);")),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"meta_field_block_kses_allowed_html"),": By default, the",(0,e.createElement)("code",null,"block_content")," will be sanitized for allowed HTML tags, the default value for allowed HTML tags is"," ",(0,e.createElement)("code",null,"$allowedposttags"),". This hook allows you to filter the allowed HTML tags for the block content.")),(0,e.createElement)("p",null,"To learn more about the features of this plugin and how to extend it, please check out the"," ",(0,e.createElement)("a",{href:"https://metafieldblock.com?utm_source=Plugin+Dashboard&utm_campaign=Setting+Page&utm_medium=link&utm_content=Website",target:"_blank"},"website")," ","and",(0,e.createElement)("a",{href:"https://wordpress.org/plugins/display-a-meta-field-as-block/#description",target:"_blank"},"plugin description")," ","for details.")))},w=()=>(0,e.createElement)(h,null,(0,e.createElement)(E,null)),v=()=>{const{data:{videos:t={}}={}}=(0,n.useContext)(m);let l="Save your time with MFB Pro",a=(0,e.createElement)(e.Fragment,null,(0,e.createElement)("p",null,"The free version of MFB already supports most real-world use cases, and with custom hooks, you can display anything with ease. However, if you dont want to write custom hooks, we offer a Pro version of MFB with advanced features that can significantly save you time in developing your sites.")),o=(0,e.createElement)(e.Fragment,null,(0,e.createElement)("p",null,(0,e.createElement)("strong",null,"If you want to upgrade to the Pro version, click on the"," ",(0,e.createElement)("span",{style:{color:"#d20962"}},"Upgrade")," item on the top menu. If you don't like it over the next 14 days, we'll happily refund 100% of your money. No questions asked.")),(0,e.createElement)("p",null,(0,e.createElement)("strong",null,"If you don't want to upgrade, it's total fine. With custom hooks, you can do whatever you want with the free version.")),(0,e.createElement)("p",null,(0,e.createElement)("strong",null,"To learn more about the MFB Pro, please check out the"," ",(0,e.createElement)("a",{href:"https://metafieldblock.com/pro?utm_source=Plugin+Dashboard&utm_campaign=Setting+Page&utm_medium=link&utm_content=MFB+Pro",target:"_blank"},"website"),". You can create a playground site to test it for free at"," ",(0,e.createElement)("a",{href:"https://try.metafieldblock.com",target:"_blank"},"https://try.metafieldblock.com"),".")));return c&&(l="Thank you for choosing MFB Pro",o=null,a=null),(0,e.createElement)(g,{isHeaderHidden:!0,isFullRow:!0,className:"widget-welcome"},(0,e.createElement)("h1",null,l," - A page builder fits inside a single block"),(0,e.createElement)("div",{className:"welcome__description"},a,(0,e.createElement)("h2",null,"The main features of MFB Pro"),(0,e.createElement)("p",null,"Most of advanced features in the Pro version are for ACF fields. The following are the main features in the Pro version:"),(0,e.createElement)("h3",null,"Display setting fields"),(0,e.createElement)("p",null,"This feature allows you to display global setting fields (fields are registered with"," ",(0,e.createElement)("a",{href:"https://developer.wordpress.org/reference/hooks/register_setting/",target:"_blank"},"register_setting"),") similar to custom fields from posts, terms or users. It supports all fields whose values can be retrieved by the core API function (",(0,e.createElement)("a",{href:"https://developer.wordpress.org/reference/functions/get_option/",target:"_blank"},"get_option"),") and are strings or can be converted to strings. It also works with ACF option fields."),(0,e.createElement)(y,{name:"settingFields",videos:t}),(0,e.createElement)("h3",null,"Display ACF Relationship, or Post Object fields as Query Loop blocks"),(0,e.createElement)("p",null,"In the free version, query fields can only be rendered as a list of post links. In the Pro version, there is a setting called"," ",(0,e.createElement)("code",null,"Display as a query loop"),". By enabling this toggle, the field will be rendered as a core query loop block that has all the features come with it. You can also add other MFBs inside this nested query loop block, and it will display the fields that are related to that nested query loop. This feature is especially useful when you need to display multiple pieces of information from a related post type into the current post type."),(0,e.createElement)(y,{name:"queryFields",videos:t}),(0,e.createElement)("h3",null,"Display ACF advanced layout fields such as Group, Repeater, and Flexible content."),(0,e.createElement)("p",null,"With this feature, MFB turns into a page builder. You won't need to use the ACF Block API to register your custom blocks. Simply by inserting MFB into the editor and inputting the field name, the MFB will become a container block and all sub fields will become sub blocks. The new Sub Field Block (SFB) will be included in this Pro version. The block structure is determined based on the ACF field structure, and you can modify the structure by moving SFBs or adding new SFB or adjusting the field paths for each sub-block. You can also mix sub-blocks with core blocks or third-party blocks to build complex layouts. The Group, Repeater, or Flexible content field can also be nested in each other with unlimited nested levels. And similar to the core/group block, the ",(0,e.createElement)("code",null,"group")," variations of SFB also has four different display layouts: group, row, stack, and grid."),(0,e.createElement)(y,{name:"repeaterFields",videos:t}),(0,e.createElement)(y,{name:"groupFields",videos:t}),(0,e.createElement)(y,{name:"flexibleFields",videos:t}),(0,e.createElement)("h3",null,"Display an ACF Image field as a core/image block"),(0,e.createElement)("p",null,"By enabling this feature, the image field will be rendered as a core/image block with all the features from the core/image block."),(0,e.createElement)(y,{name:"imageFields",videos:t}),(0,e.createElement)("h3",null,"Display an ACF Gallery field"),(0,e.createElement)("p",null,"Display an ACF Gallery field as a gallery that supports lightbox, masonry layout, etc."),(0,e.createElement)(y,{name:"galleryFields",videos:t}),(0,e.createElement)("h3",null,"Display an ACF Link field as a core/button block"),(0,e.createElement)("p",null,"By enabling this feature, the link field will be rendered as a core/button block with all the features from the core/button block."),(0,e.createElement)(y,{name:"linkFields",videos:t}),(0,e.createElement)("h3",null,"Display an ACF URL field as a button block, an image block or a link"),(0,e.createElement)("p",null,"By enabling this feature, the URL field can be rendered as a core/button block or a link with custom label, or an image if its value is an image URL."),(0,e.createElement)(y,{name:"urlFields",videos:t}),(0,e.createElement)("h3",null,"Display an ACF Email/File field as a button block or a link"),(0,e.createElement)("p",null,"In the Pro version, these two field types Email, and File can be rendered a core/button block or a link."),(0,e.createElement)(y,{name:"emailFileFields",videos:t}),(0,e.createElement)("h3",null,"Display an ACF File field as a video block"),(0,e.createElement)("p",null,"The ACF File field type can also be displayed as a video block."),(0,e.createElement)(y,{name:"fileVideoFields",videos:t}),(0,e.createElement)("h3",null,"Add settings to input custom text values for the ACF True/false field"),(0,e.createElement)("p",null,"To display a true/false value, we usually have to use an user-friendly text value for it. In the Pro version, there will be settings right in the block inspector setting for you to input those texts."),(0,e.createElement)(y,{name:"booleanFields",videos:t}),(0,e.createElement)("h3",null,"Display fields from a specific item (post, term, user)."),(0,e.createElement)("p",null,"This feature allows you to display custom fields from any post, term or user."),(0,e.createElement)(y,{name:"otherItemFields",videos:t}),(0,e.createElement)(y,{name:"sampleItemFields",videos:t}),(0,e.createElement)("h3",null,"Load field information and display sample content when"," ",(0,e.createElement)("code",null,"post_id")," is not available"),(0,e.createElement)("p",null,"When working with MFB in the Site Editor, you may not be able to get the ",(0,e.createElement)("code",null,"post_id")," and ",(0,e.createElement)("code",null,"post_type")," from the context. In that case, you can choose a meta type that is not ",(0,e.createElement)("code",null,"auto")," ","and input a sample id for the block. This will allow the block to access the field information from the sample id and use all the advanced features for the field."),(0,e.createElement)("h2",null,"New block attributes for the MFB Pro"),(0,e.createElement)("ul",null,(0,e.createElement)("li",null,(0,e.createElement)("code",null,"metaType"),"(string): It can be an empty value or one of 'post', 'term', 'user' or 'option'. Default is an empty value. If the value is empty, the object type of the field will be determined by the current context. If the value is 'option', the block will display setting fields and the value of ",(0,e.createElement)("code",null,"fieldType")," ","attribute can be one of 'option' or 'acf'."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"isCustomSource"),"(boolean): If this value is true, then the block will display field from an item (post, term, user) that has the ID is from the ",(0,e.createElement)("code",null,"objectId")," attribute below."),(0,e.createElement)("li",null,(0,e.createElement)("code",null,"objectId"),"(integer): This value is used for two different use cases. The first is when we need to display fields from a specific item (when the ",(0,e.createElement)("code",null,"isCustomSource")," value is true). The second is when we need a sample object for the block to query sample data in the editor, for examle when we are adding MFBs in the Site Editor where we are not able to get the object id. This sample data is only for displaying in the editor, the real value on the frontend will be determined by the current context.")),(0,e.createElement)("h2",null,"The new Sub Field Block (SFB)"),(0,e.createElement)("p",null,"This block will only be available as a descendent block of MFB. It can be a container block or simple dynamic block depends on the field type of the sub field that is stored in the field path attribute. MFB and SFB have similar attributes and block support features. Some different between them are follows:"),(0,e.createElement)("h3",null,"Block attributes"),(0,e.createElement)("ul",null,(0,e.createElement)("li",null,(0,e.createElement)("code",null,"fieldPath"),"(array): This is the most important attribute of SFB. The block queries its value based on this path. Here is an example of its value:"," ",(0,e.createElement)("code",null,"['root_field_name', 'sub_group_field', 'sub_field_name']"),". If a SFB is nested inside a repeater field, then the root name of it (the first value of the array) will be the name of the repeater not the real root name from the MFB."),(0,e.createElement)("li",null,"SFB does not have following attributes: ",(0,e.createElement)("code",null,"fieldType"),","," ",(0,e.createElement)("code",null,"fieldName"),", ",(0,e.createElement)("code",null,"metaType"),","," ",(0,e.createElement)("code",null,"isCustomSource"),", ",(0,e.createElement)("code",null,"objectId"))),(0,e.createElement)("h3",null,"Block support features"),(0,e.createElement)("ul",null,(0,e.createElement)("li",null,(0,e.createElement)("strong",null,"layout"),": You can set a layout for ",(0,e.createElement)("code",null,"group")," ","variations of SFB. There four types of layouts: group, row, stack, and grid.")),o&&(0,e.createElement)(e.Fragment,null,(0,e.createElement)("hr",null),o)))},k=()=>(0,e.createElement)(h,null,(0,e.createElement)(v,null)),_=({children:t})=>(0,e.createElement)("div",{className:"metabox-holder"},t),F=()=>{const l=[{name:"getting-started",title:"Getting Started",className:"setting-tabs__getting-started"},{name:"mfb-pro",title:"MFB Pro",className:"setting-tabs__mfb-pro"}],a=new d,o=a.get("tab"),i=(0,t.findKey)(l,["name",o])?o:"getting-started",c=(()=>{const{loading:e,error:t,data:{data:l}={}}=((e,t={},l=[])=>{const[a,o]=(0,n.useState)(!0),[r,i]=(0,n.useState)(),[c,d]=(0,n.useState)(),m=(0,n.useCallback)((()=>{o(!0),i(void 0),d(void 0),s()({path:e,...{...u,...t}}).then(d).catch(i).finally((()=>o(!1)))}),l);return(0,n.useEffect)((()=>{m()}),[m]),{loading:a,error:r,data:c}})("mfb/v1/getDocs");return{loading:e,error:t,data:l}})();return(0,e.createElement)(m.Provider,{value:c},(0,e.createElement)(r.TabPanel,{tabs:l,className:"settings-tabs",activeClass:"is-active",initialTabName:i,onSelect:e=>{a.set("tab",e)}},(t=>{switch(t.name){case"getting-started":return(0,e.createElement)(_,null,(0,e.createElement)(w,null));case"mfb-pro":return(0,e.createElement)(_,null,(0,e.createElement)(k,null))}})))};o()((()=>{(0,n.render)((0,e.createElement)(F,null),document.querySelector(".js-mfb-settings-root"))}))})()})();