[{"data":1,"prerenderedAt":2367},["Reactive",2],{"/blog/improving-your-class-structures-with-acf-blocks":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"categories":11,"body":13,"_type":2362,"_id":2363,"_source":2364,"_file":2365,"_extension":2366},"/blog/improving-your-class-structures-with-acf-blocks","blog",false,"","Improving your class structures with ACF Blocks","Adapting Gutenberg classes into your ACF Blocks can be a pain. Let's look at ways to make that better.","2023-12-27T00:00:00.000Z",[12],"WordPress",{"type":14,"children":15,"toc":2355},"root",[16,24,29,34,41,46,1970,1976,1981,2002,2276,2282,2294,2299,2305,2318,2338,2344,2349],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":22,"value":23},"text","Advanced Custom Fields (ACF) is one of my favorite dev tools to use in a new theme, especially when I am working with the Gutenberg editor since the ACF Blocks are just so smooth to work with. If you are unfamiliar with ACF Blocks, I’d go check out this article first and get up to speed before we dive in.",{"type":17,"tag":18,"props":25,"children":26},{},[27],{"type":22,"value":28},"One of the annoyances when dealing with Gutenberg and ACF Blocks is the different ways that classes can be added to a block and keeping that consistent throughout your projects. It can also be annoying to deal with the dynamic ID that blocks assign, or whether or not your block is using a static anchor at the block level.",{"type":17,"tag":18,"props":30,"children":31},{},[32],{"type":22,"value":33},"In this post, we are going to look at ways that I have streamlined this process over the years and how you can use it in your next project.",{"type":17,"tag":35,"props":36,"children":38},"h2",{"id":37},"the-code",[39],{"type":22,"value":40},"The code",{"type":17,"tag":18,"props":42,"children":43},{},[44],{"type":22,"value":45},"Let’s jump straight into the code. This is a single PHP class that I use in all of my projects. I would highly recommend to keep it as a class, but you can customize the way it works within your theme and where it should be located.",{"type":17,"tag":47,"props":48,"children":53},"pre",{"className":49,"code":50,"filename":51,"language":52,"meta":7,"style":7},"language-php shiki shiki-themes material-theme-lighter material-theme-palenight","\u003C?php\n\nnamespace Blocks;\n\n/**\n * Block helper functions for the template files.\n */\nclass BlockTemplate\n{\n    protected $block;\n    protected $block_classes = [];\n\n    /**\n     * @param array $block ACF Block of data\n     */\n    public function __construct($block)\n    {\n        $this->block = $block;\n    }\n\n    /**\n     * Returns an escaped ID attribute.\n     * \n     * @return string\n     */\n    public function get_id()\n    {\n        $html_id = $this->block['id'];\n        if (!empty($this->block['anchor'])) {\n            $html_id = $this->block['anchor'];\n        }\n\n        return esc_attr($html_id);\n    }\n\n    /**\n     * Add classes to the template object.\n     * \n     * @param array $classes Array of classes\n     */\n    public function add_classes($classes)\n    {\n        $merged_classes = array_merge($this->block_classes, $classes);\n        $this->block_classes = array_unique($merged_classes, SORT_REGULAR);\n    }\n\n    /**\n     * Returns the escaped classes.\n     * \n     * @return string\n     */\n    public function get_classes()\n    {\n        // Check for custom classes\n        if (!empty($this->block['className'])) {\n            $this->block_classes[] = $this->block['className'];\n        }\n\n        // Check for the alignment\n        if (!empty($this->block['align'])) {\n            $this->block_classes[] = 'is-align-' . $this->block['align'];\n        }\n\n        // Check for a background color\n        if (!empty($this->block['backgroundColor'])) {\n            $this->block_classes[] = 'has-background';\n            $this->block_classes[] = 'has-' . $this->block['backgroundColor'] . '-background-color';\n        }\n\n        // Check for a text color\n        if (!empty($this->block['textColor'])) {\n            $this->block_classes[] = 'has-text-color';\n            $this->block_classes[] = 'has-' . $this->block['textColor'] . '-color';\n        }\n\n        // Checks for text alignment\n        if (!empty($this->block['alignText'])) {\n            $this->block_classes[] = ' has-text-align-' . $this->block['alignText'];\n        }\n\n        // Checks for vertical alignment\n        if (!empty($this->block['alignContent'])) {\n            $this->block_classes[] = ' is-vertically-aligned-' . $this->block['alignContent'];\n        }\n\n        $class_string = implode(' ', $this->block_classes);\n\n        return esc_attr($class_string);\n    }\n}\n","block-wrapper.php","php",[54],{"type":17,"tag":55,"props":56,"children":57},"code",{"__ignoreMap":7},[58,76,86,107,115,125,134,143,158,167,190,217,225,234,259,268,302,311,341,350,358,366,375,384,402,410,432,440,492,548,593,602,610,638,646,654,662,671,679,700,708,738,746,794,837,845,853,861,870,878,894,902,923,931,940,989,1040,1048,1056,1065,1114,1181,1189,1197,1206,1255,1292,1379,1387,1395,1404,1453,1490,1575,1583,1591,1600,1649,1714,1722,1730,1739,1788,1853,1861,1869,1920,1928,1953,1961],{"type":17,"tag":59,"props":60,"children":63},"span",{"class":61,"line":62},"line",1,[64,70],{"type":17,"tag":59,"props":65,"children":67},{"style":66},"--shiki-default:#39ADB5;--shiki-dark:#89DDFF",[68],{"type":22,"value":69},"\u003C?",{"type":17,"tag":59,"props":71,"children":73},{"style":72},"--shiki-default:#90A4AE;--shiki-dark:#BABED8",[74],{"type":22,"value":75},"php\n",{"type":17,"tag":59,"props":77,"children":79},{"class":61,"line":78},2,[80],{"type":17,"tag":59,"props":81,"children":83},{"emptyLinePlaceholder":82},true,[84],{"type":22,"value":85},"\n",{"type":17,"tag":59,"props":87,"children":89},{"class":61,"line":88},3,[90,96,102],{"type":17,"tag":59,"props":91,"children":93},{"style":92},"--shiki-default:#F76D47;--shiki-dark:#F78C6C",[94],{"type":22,"value":95},"namespace",{"type":17,"tag":59,"props":97,"children":99},{"style":98},"--shiki-default:#E2931D;--shiki-dark:#FFCB6B",[100],{"type":22,"value":101}," Blocks",{"type":17,"tag":59,"props":103,"children":104},{"style":66},[105],{"type":22,"value":106},";\n",{"type":17,"tag":59,"props":108,"children":110},{"class":61,"line":109},4,[111],{"type":17,"tag":59,"props":112,"children":113},{"emptyLinePlaceholder":82},[114],{"type":22,"value":85},{"type":17,"tag":59,"props":116,"children":118},{"class":61,"line":117},5,[119],{"type":17,"tag":59,"props":120,"children":122},{"style":121},"--shiki-default:#90A4AE;--shiki-dark:#676E95;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[123],{"type":22,"value":124},"/**\n",{"type":17,"tag":59,"props":126,"children":128},{"class":61,"line":127},6,[129],{"type":17,"tag":59,"props":130,"children":131},{"style":121},[132],{"type":22,"value":133}," * Block helper functions for the template files.\n",{"type":17,"tag":59,"props":135,"children":137},{"class":61,"line":136},7,[138],{"type":17,"tag":59,"props":139,"children":140},{"style":121},[141],{"type":22,"value":142}," */\n",{"type":17,"tag":59,"props":144,"children":146},{"class":61,"line":145},8,[147,153],{"type":17,"tag":59,"props":148,"children":150},{"style":149},"--shiki-default:#9C3EDA;--shiki-dark:#C792EA",[151],{"type":22,"value":152},"class",{"type":17,"tag":59,"props":154,"children":155},{"style":98},[156],{"type":22,"value":157}," BlockTemplate\n",{"type":17,"tag":59,"props":159,"children":161},{"class":61,"line":160},9,[162],{"type":17,"tag":59,"props":163,"children":164},{"style":66},[165],{"type":22,"value":166},"{\n",{"type":17,"tag":59,"props":168,"children":170},{"class":61,"line":169},10,[171,176,181,186],{"type":17,"tag":59,"props":172,"children":173},{"style":149},[174],{"type":22,"value":175},"    protected",{"type":17,"tag":59,"props":177,"children":178},{"style":66},[179],{"type":22,"value":180}," $",{"type":17,"tag":59,"props":182,"children":183},{"style":72},[184],{"type":22,"value":185},"block",{"type":17,"tag":59,"props":187,"children":188},{"style":66},[189],{"type":22,"value":106},{"type":17,"tag":59,"props":191,"children":193},{"class":61,"line":192},11,[194,198,202,207,212],{"type":17,"tag":59,"props":195,"children":196},{"style":149},[197],{"type":22,"value":175},{"type":17,"tag":59,"props":199,"children":200},{"style":66},[201],{"type":22,"value":180},{"type":17,"tag":59,"props":203,"children":204},{"style":72},[205],{"type":22,"value":206},"block_classes ",{"type":17,"tag":59,"props":208,"children":209},{"style":66},[210],{"type":22,"value":211},"=",{"type":17,"tag":59,"props":213,"children":214},{"style":66},[215],{"type":22,"value":216}," [];\n",{"type":17,"tag":59,"props":218,"children":220},{"class":61,"line":219},12,[221],{"type":17,"tag":59,"props":222,"children":223},{"emptyLinePlaceholder":82},[224],{"type":22,"value":85},{"type":17,"tag":59,"props":226,"children":228},{"class":61,"line":227},13,[229],{"type":17,"tag":59,"props":230,"children":231},{"style":121},[232],{"type":22,"value":233},"    /**\n",{"type":17,"tag":59,"props":235,"children":237},{"class":61,"line":236},14,[238,243,249,254],{"type":17,"tag":59,"props":239,"children":240},{"style":121},[241],{"type":22,"value":242},"     * ",{"type":17,"tag":59,"props":244,"children":246},{"style":245},"--shiki-default:#F76D47;--shiki-dark:#F78C6C;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[247],{"type":22,"value":248},"@param",{"type":17,"tag":59,"props":250,"children":251},{"style":245},[252],{"type":22,"value":253}," array",{"type":17,"tag":59,"props":255,"children":256},{"style":121},[257],{"type":22,"value":258}," $block ACF Block of data\n",{"type":17,"tag":59,"props":260,"children":262},{"class":61,"line":261},15,[263],{"type":17,"tag":59,"props":264,"children":265},{"style":121},[266],{"type":22,"value":267},"     */\n",{"type":17,"tag":59,"props":269,"children":271},{"class":61,"line":270},16,[272,277,282,288,293,297],{"type":17,"tag":59,"props":273,"children":274},{"style":149},[275],{"type":22,"value":276},"    public",{"type":17,"tag":59,"props":278,"children":279},{"style":149},[280],{"type":22,"value":281}," function",{"type":17,"tag":59,"props":283,"children":285},{"style":284},"--shiki-default:#6182B8;--shiki-dark:#82AAFF",[286],{"type":22,"value":287}," __construct",{"type":17,"tag":59,"props":289,"children":290},{"style":66},[291],{"type":22,"value":292},"($",{"type":17,"tag":59,"props":294,"children":295},{"style":72},[296],{"type":22,"value":185},{"type":17,"tag":59,"props":298,"children":299},{"style":66},[300],{"type":22,"value":301},")\n",{"type":17,"tag":59,"props":303,"children":305},{"class":61,"line":304},17,[306],{"type":17,"tag":59,"props":307,"children":308},{"style":66},[309],{"type":22,"value":310},"    {\n",{"type":17,"tag":59,"props":312,"children":314},{"class":61,"line":313},18,[315,320,325,329,333,337],{"type":17,"tag":59,"props":316,"children":317},{"style":66},[318],{"type":22,"value":319},"        $this->",{"type":17,"tag":59,"props":321,"children":322},{"style":72},[323],{"type":22,"value":324},"block ",{"type":17,"tag":59,"props":326,"children":327},{"style":66},[328],{"type":22,"value":211},{"type":17,"tag":59,"props":330,"children":331},{"style":66},[332],{"type":22,"value":180},{"type":17,"tag":59,"props":334,"children":335},{"style":72},[336],{"type":22,"value":185},{"type":17,"tag":59,"props":338,"children":339},{"style":66},[340],{"type":22,"value":106},{"type":17,"tag":59,"props":342,"children":344},{"class":61,"line":343},19,[345],{"type":17,"tag":59,"props":346,"children":347},{"style":66},[348],{"type":22,"value":349},"    }\n",{"type":17,"tag":59,"props":351,"children":353},{"class":61,"line":352},20,[354],{"type":17,"tag":59,"props":355,"children":356},{"emptyLinePlaceholder":82},[357],{"type":22,"value":85},{"type":17,"tag":59,"props":359,"children":361},{"class":61,"line":360},21,[362],{"type":17,"tag":59,"props":363,"children":364},{"style":121},[365],{"type":22,"value":233},{"type":17,"tag":59,"props":367,"children":369},{"class":61,"line":368},22,[370],{"type":17,"tag":59,"props":371,"children":372},{"style":121},[373],{"type":22,"value":374},"     * Returns an escaped ID attribute.\n",{"type":17,"tag":59,"props":376,"children":378},{"class":61,"line":377},23,[379],{"type":17,"tag":59,"props":380,"children":381},{"style":121},[382],{"type":22,"value":383},"     * \n",{"type":17,"tag":59,"props":385,"children":387},{"class":61,"line":386},24,[388,392,397],{"type":17,"tag":59,"props":389,"children":390},{"style":121},[391],{"type":22,"value":242},{"type":17,"tag":59,"props":393,"children":394},{"style":245},[395],{"type":22,"value":396},"@return",{"type":17,"tag":59,"props":398,"children":399},{"style":245},[400],{"type":22,"value":401}," string\n",{"type":17,"tag":59,"props":403,"children":405},{"class":61,"line":404},25,[406],{"type":17,"tag":59,"props":407,"children":408},{"style":121},[409],{"type":22,"value":267},{"type":17,"tag":59,"props":411,"children":413},{"class":61,"line":412},26,[414,418,422,427],{"type":17,"tag":59,"props":415,"children":416},{"style":149},[417],{"type":22,"value":276},{"type":17,"tag":59,"props":419,"children":420},{"style":149},[421],{"type":22,"value":281},{"type":17,"tag":59,"props":423,"children":424},{"style":284},[425],{"type":22,"value":426}," get_id",{"type":17,"tag":59,"props":428,"children":429},{"style":66},[430],{"type":22,"value":431},"()\n",{"type":17,"tag":59,"props":433,"children":435},{"class":61,"line":434},27,[436],{"type":17,"tag":59,"props":437,"children":438},{"style":66},[439],{"type":22,"value":310},{"type":17,"tag":59,"props":441,"children":443},{"class":61,"line":442},28,[444,449,454,458,463,467,472,477,483,487],{"type":17,"tag":59,"props":445,"children":446},{"style":66},[447],{"type":22,"value":448},"        $",{"type":17,"tag":59,"props":450,"children":451},{"style":72},[452],{"type":22,"value":453},"html_id ",{"type":17,"tag":59,"props":455,"children":456},{"style":66},[457],{"type":22,"value":211},{"type":17,"tag":59,"props":459,"children":460},{"style":66},[461],{"type":22,"value":462}," $this->",{"type":17,"tag":59,"props":464,"children":465},{"style":72},[466],{"type":22,"value":185},{"type":17,"tag":59,"props":468,"children":469},{"style":66},[470],{"type":22,"value":471},"[",{"type":17,"tag":59,"props":473,"children":474},{"style":66},[475],{"type":22,"value":476},"'",{"type":17,"tag":59,"props":478,"children":480},{"style":479},"--shiki-default:#91B859;--shiki-dark:#C3E88D",[481],{"type":22,"value":482},"id",{"type":17,"tag":59,"props":484,"children":485},{"style":66},[486],{"type":22,"value":476},{"type":17,"tag":59,"props":488,"children":489},{"style":66},[490],{"type":22,"value":491},"];\n",{"type":17,"tag":59,"props":493,"children":495},{"class":61,"line":494},29,[496,502,507,512,517,521,525,529,534,538,543],{"type":17,"tag":59,"props":497,"children":499},{"style":498},"--shiki-default:#39ADB5;--shiki-dark:#89DDFF;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[500],{"type":22,"value":501},"        if",{"type":17,"tag":59,"props":503,"children":504},{"style":66},[505],{"type":22,"value":506}," (!",{"type":17,"tag":59,"props":508,"children":509},{"style":284},[510],{"type":22,"value":511},"empty",{"type":17,"tag":59,"props":513,"children":514},{"style":66},[515],{"type":22,"value":516},"($this->",{"type":17,"tag":59,"props":518,"children":519},{"style":72},[520],{"type":22,"value":185},{"type":17,"tag":59,"props":522,"children":523},{"style":66},[524],{"type":22,"value":471},{"type":17,"tag":59,"props":526,"children":527},{"style":66},[528],{"type":22,"value":476},{"type":17,"tag":59,"props":530,"children":531},{"style":479},[532],{"type":22,"value":533},"anchor",{"type":17,"tag":59,"props":535,"children":536},{"style":66},[537],{"type":22,"value":476},{"type":17,"tag":59,"props":539,"children":540},{"style":66},[541],{"type":22,"value":542},"]))",{"type":17,"tag":59,"props":544,"children":545},{"style":66},[546],{"type":22,"value":547}," {\n",{"type":17,"tag":59,"props":549,"children":551},{"class":61,"line":550},30,[552,557,561,565,569,573,577,581,585,589],{"type":17,"tag":59,"props":553,"children":554},{"style":66},[555],{"type":22,"value":556},"            $",{"type":17,"tag":59,"props":558,"children":559},{"style":72},[560],{"type":22,"value":453},{"type":17,"tag":59,"props":562,"children":563},{"style":66},[564],{"type":22,"value":211},{"type":17,"tag":59,"props":566,"children":567},{"style":66},[568],{"type":22,"value":462},{"type":17,"tag":59,"props":570,"children":571},{"style":72},[572],{"type":22,"value":185},{"type":17,"tag":59,"props":574,"children":575},{"style":66},[576],{"type":22,"value":471},{"type":17,"tag":59,"props":578,"children":579},{"style":66},[580],{"type":22,"value":476},{"type":17,"tag":59,"props":582,"children":583},{"style":479},[584],{"type":22,"value":533},{"type":17,"tag":59,"props":586,"children":587},{"style":66},[588],{"type":22,"value":476},{"type":17,"tag":59,"props":590,"children":591},{"style":66},[592],{"type":22,"value":491},{"type":17,"tag":59,"props":594,"children":596},{"class":61,"line":595},31,[597],{"type":17,"tag":59,"props":598,"children":599},{"style":66},[600],{"type":22,"value":601},"        }\n",{"type":17,"tag":59,"props":603,"children":605},{"class":61,"line":604},32,[606],{"type":17,"tag":59,"props":607,"children":608},{"emptyLinePlaceholder":82},[609],{"type":22,"value":85},{"type":17,"tag":59,"props":611,"children":613},{"class":61,"line":612},33,[614,619,624,628,633],{"type":17,"tag":59,"props":615,"children":616},{"style":498},[617],{"type":22,"value":618},"        return",{"type":17,"tag":59,"props":620,"children":621},{"style":284},[622],{"type":22,"value":623}," esc_attr",{"type":17,"tag":59,"props":625,"children":626},{"style":66},[627],{"type":22,"value":292},{"type":17,"tag":59,"props":629,"children":630},{"style":72},[631],{"type":22,"value":632},"html_id",{"type":17,"tag":59,"props":634,"children":635},{"style":66},[636],{"type":22,"value":637},");\n",{"type":17,"tag":59,"props":639,"children":641},{"class":61,"line":640},34,[642],{"type":17,"tag":59,"props":643,"children":644},{"style":66},[645],{"type":22,"value":349},{"type":17,"tag":59,"props":647,"children":649},{"class":61,"line":648},35,[650],{"type":17,"tag":59,"props":651,"children":652},{"emptyLinePlaceholder":82},[653],{"type":22,"value":85},{"type":17,"tag":59,"props":655,"children":657},{"class":61,"line":656},36,[658],{"type":17,"tag":59,"props":659,"children":660},{"style":121},[661],{"type":22,"value":233},{"type":17,"tag":59,"props":663,"children":665},{"class":61,"line":664},37,[666],{"type":17,"tag":59,"props":667,"children":668},{"style":121},[669],{"type":22,"value":670},"     * Add classes to the template object.\n",{"type":17,"tag":59,"props":672,"children":674},{"class":61,"line":673},38,[675],{"type":17,"tag":59,"props":676,"children":677},{"style":121},[678],{"type":22,"value":383},{"type":17,"tag":59,"props":680,"children":682},{"class":61,"line":681},39,[683,687,691,695],{"type":17,"tag":59,"props":684,"children":685},{"style":121},[686],{"type":22,"value":242},{"type":17,"tag":59,"props":688,"children":689},{"style":245},[690],{"type":22,"value":248},{"type":17,"tag":59,"props":692,"children":693},{"style":245},[694],{"type":22,"value":253},{"type":17,"tag":59,"props":696,"children":697},{"style":121},[698],{"type":22,"value":699}," $classes Array of classes\n",{"type":17,"tag":59,"props":701,"children":703},{"class":61,"line":702},40,[704],{"type":17,"tag":59,"props":705,"children":706},{"style":121},[707],{"type":22,"value":267},{"type":17,"tag":59,"props":709,"children":711},{"class":61,"line":710},41,[712,716,720,725,729,734],{"type":17,"tag":59,"props":713,"children":714},{"style":149},[715],{"type":22,"value":276},{"type":17,"tag":59,"props":717,"children":718},{"style":149},[719],{"type":22,"value":281},{"type":17,"tag":59,"props":721,"children":722},{"style":284},[723],{"type":22,"value":724}," add_classes",{"type":17,"tag":59,"props":726,"children":727},{"style":66},[728],{"type":22,"value":292},{"type":17,"tag":59,"props":730,"children":731},{"style":72},[732],{"type":22,"value":733},"classes",{"type":17,"tag":59,"props":735,"children":736},{"style":66},[737],{"type":22,"value":301},{"type":17,"tag":59,"props":739,"children":741},{"class":61,"line":740},42,[742],{"type":17,"tag":59,"props":743,"children":744},{"style":66},[745],{"type":22,"value":310},{"type":17,"tag":59,"props":747,"children":749},{"class":61,"line":748},43,[750,754,759,763,768,772,777,782,786,790],{"type":17,"tag":59,"props":751,"children":752},{"style":66},[753],{"type":22,"value":448},{"type":17,"tag":59,"props":755,"children":756},{"style":72},[757],{"type":22,"value":758},"merged_classes ",{"type":17,"tag":59,"props":760,"children":761},{"style":66},[762],{"type":22,"value":211},{"type":17,"tag":59,"props":764,"children":765},{"style":284},[766],{"type":22,"value":767}," array_merge",{"type":17,"tag":59,"props":769,"children":770},{"style":66},[771],{"type":22,"value":516},{"type":17,"tag":59,"props":773,"children":774},{"style":72},[775],{"type":22,"value":776},"block_classes",{"type":17,"tag":59,"props":778,"children":779},{"style":66},[780],{"type":22,"value":781},",",{"type":17,"tag":59,"props":783,"children":784},{"style":66},[785],{"type":22,"value":180},{"type":17,"tag":59,"props":787,"children":788},{"style":72},[789],{"type":22,"value":733},{"type":17,"tag":59,"props":791,"children":792},{"style":66},[793],{"type":22,"value":637},{"type":17,"tag":59,"props":795,"children":797},{"class":61,"line":796},44,[798,802,806,810,815,819,824,828,833],{"type":17,"tag":59,"props":799,"children":800},{"style":66},[801],{"type":22,"value":319},{"type":17,"tag":59,"props":803,"children":804},{"style":72},[805],{"type":22,"value":206},{"type":17,"tag":59,"props":807,"children":808},{"style":66},[809],{"type":22,"value":211},{"type":17,"tag":59,"props":811,"children":812},{"style":284},[813],{"type":22,"value":814}," array_unique",{"type":17,"tag":59,"props":816,"children":817},{"style":66},[818],{"type":22,"value":292},{"type":17,"tag":59,"props":820,"children":821},{"style":72},[822],{"type":22,"value":823},"merged_classes",{"type":17,"tag":59,"props":825,"children":826},{"style":66},[827],{"type":22,"value":781},{"type":17,"tag":59,"props":829,"children":830},{"style":72},[831],{"type":22,"value":832}," SORT_REGULAR",{"type":17,"tag":59,"props":834,"children":835},{"style":66},[836],{"type":22,"value":637},{"type":17,"tag":59,"props":838,"children":840},{"class":61,"line":839},45,[841],{"type":17,"tag":59,"props":842,"children":843},{"style":66},[844],{"type":22,"value":349},{"type":17,"tag":59,"props":846,"children":848},{"class":61,"line":847},46,[849],{"type":17,"tag":59,"props":850,"children":851},{"emptyLinePlaceholder":82},[852],{"type":22,"value":85},{"type":17,"tag":59,"props":854,"children":856},{"class":61,"line":855},47,[857],{"type":17,"tag":59,"props":858,"children":859},{"style":121},[860],{"type":22,"value":233},{"type":17,"tag":59,"props":862,"children":864},{"class":61,"line":863},48,[865],{"type":17,"tag":59,"props":866,"children":867},{"style":121},[868],{"type":22,"value":869},"     * Returns the escaped classes.\n",{"type":17,"tag":59,"props":871,"children":873},{"class":61,"line":872},49,[874],{"type":17,"tag":59,"props":875,"children":876},{"style":121},[877],{"type":22,"value":383},{"type":17,"tag":59,"props":879,"children":881},{"class":61,"line":880},50,[882,886,890],{"type":17,"tag":59,"props":883,"children":884},{"style":121},[885],{"type":22,"value":242},{"type":17,"tag":59,"props":887,"children":888},{"style":245},[889],{"type":22,"value":396},{"type":17,"tag":59,"props":891,"children":892},{"style":245},[893],{"type":22,"value":401},{"type":17,"tag":59,"props":895,"children":897},{"class":61,"line":896},51,[898],{"type":17,"tag":59,"props":899,"children":900},{"style":121},[901],{"type":22,"value":267},{"type":17,"tag":59,"props":903,"children":905},{"class":61,"line":904},52,[906,910,914,919],{"type":17,"tag":59,"props":907,"children":908},{"style":149},[909],{"type":22,"value":276},{"type":17,"tag":59,"props":911,"children":912},{"style":149},[913],{"type":22,"value":281},{"type":17,"tag":59,"props":915,"children":916},{"style":284},[917],{"type":22,"value":918}," get_classes",{"type":17,"tag":59,"props":920,"children":921},{"style":66},[922],{"type":22,"value":431},{"type":17,"tag":59,"props":924,"children":926},{"class":61,"line":925},53,[927],{"type":17,"tag":59,"props":928,"children":929},{"style":66},[930],{"type":22,"value":310},{"type":17,"tag":59,"props":932,"children":934},{"class":61,"line":933},54,[935],{"type":17,"tag":59,"props":936,"children":937},{"style":121},[938],{"type":22,"value":939},"        // Check for custom classes\n",{"type":17,"tag":59,"props":941,"children":943},{"class":61,"line":942},55,[944,948,952,956,960,964,968,972,977,981,985],{"type":17,"tag":59,"props":945,"children":946},{"style":498},[947],{"type":22,"value":501},{"type":17,"tag":59,"props":949,"children":950},{"style":66},[951],{"type":22,"value":506},{"type":17,"tag":59,"props":953,"children":954},{"style":284},[955],{"type":22,"value":511},{"type":17,"tag":59,"props":957,"children":958},{"style":66},[959],{"type":22,"value":516},{"type":17,"tag":59,"props":961,"children":962},{"style":72},[963],{"type":22,"value":185},{"type":17,"tag":59,"props":965,"children":966},{"style":66},[967],{"type":22,"value":471},{"type":17,"tag":59,"props":969,"children":970},{"style":66},[971],{"type":22,"value":476},{"type":17,"tag":59,"props":973,"children":974},{"style":479},[975],{"type":22,"value":976},"className",{"type":17,"tag":59,"props":978,"children":979},{"style":66},[980],{"type":22,"value":476},{"type":17,"tag":59,"props":982,"children":983},{"style":66},[984],{"type":22,"value":542},{"type":17,"tag":59,"props":986,"children":987},{"style":66},[988],{"type":22,"value":547},{"type":17,"tag":59,"props":990,"children":992},{"class":61,"line":991},56,[993,998,1002,1007,1012,1016,1020,1024,1028,1032,1036],{"type":17,"tag":59,"props":994,"children":995},{"style":66},[996],{"type":22,"value":997},"            $this->",{"type":17,"tag":59,"props":999,"children":1000},{"style":72},[1001],{"type":22,"value":776},{"type":17,"tag":59,"props":1003,"children":1004},{"style":66},[1005],{"type":22,"value":1006},"[]",{"type":17,"tag":59,"props":1008,"children":1009},{"style":66},[1010],{"type":22,"value":1011}," =",{"type":17,"tag":59,"props":1013,"children":1014},{"style":66},[1015],{"type":22,"value":462},{"type":17,"tag":59,"props":1017,"children":1018},{"style":72},[1019],{"type":22,"value":185},{"type":17,"tag":59,"props":1021,"children":1022},{"style":66},[1023],{"type":22,"value":471},{"type":17,"tag":59,"props":1025,"children":1026},{"style":66},[1027],{"type":22,"value":476},{"type":17,"tag":59,"props":1029,"children":1030},{"style":479},[1031],{"type":22,"value":976},{"type":17,"tag":59,"props":1033,"children":1034},{"style":66},[1035],{"type":22,"value":476},{"type":17,"tag":59,"props":1037,"children":1038},{"style":66},[1039],{"type":22,"value":491},{"type":17,"tag":59,"props":1041,"children":1043},{"class":61,"line":1042},57,[1044],{"type":17,"tag":59,"props":1045,"children":1046},{"style":66},[1047],{"type":22,"value":601},{"type":17,"tag":59,"props":1049,"children":1051},{"class":61,"line":1050},58,[1052],{"type":17,"tag":59,"props":1053,"children":1054},{"emptyLinePlaceholder":82},[1055],{"type":22,"value":85},{"type":17,"tag":59,"props":1057,"children":1059},{"class":61,"line":1058},59,[1060],{"type":17,"tag":59,"props":1061,"children":1062},{"style":121},[1063],{"type":22,"value":1064},"        // Check for the alignment\n",{"type":17,"tag":59,"props":1066,"children":1068},{"class":61,"line":1067},60,[1069,1073,1077,1081,1085,1089,1093,1097,1102,1106,1110],{"type":17,"tag":59,"props":1070,"children":1071},{"style":498},[1072],{"type":22,"value":501},{"type":17,"tag":59,"props":1074,"children":1075},{"style":66},[1076],{"type":22,"value":506},{"type":17,"tag":59,"props":1078,"children":1079},{"style":284},[1080],{"type":22,"value":511},{"type":17,"tag":59,"props":1082,"children":1083},{"style":66},[1084],{"type":22,"value":516},{"type":17,"tag":59,"props":1086,"children":1087},{"style":72},[1088],{"type":22,"value":185},{"type":17,"tag":59,"props":1090,"children":1091},{"style":66},[1092],{"type":22,"value":471},{"type":17,"tag":59,"props":1094,"children":1095},{"style":66},[1096],{"type":22,"value":476},{"type":17,"tag":59,"props":1098,"children":1099},{"style":479},[1100],{"type":22,"value":1101},"align",{"type":17,"tag":59,"props":1103,"children":1104},{"style":66},[1105],{"type":22,"value":476},{"type":17,"tag":59,"props":1107,"children":1108},{"style":66},[1109],{"type":22,"value":542},{"type":17,"tag":59,"props":1111,"children":1112},{"style":66},[1113],{"type":22,"value":547},{"type":17,"tag":59,"props":1115,"children":1117},{"class":61,"line":1116},61,[1118,1122,1126,1130,1134,1139,1144,1148,1153,1157,1161,1165,1169,1173,1177],{"type":17,"tag":59,"props":1119,"children":1120},{"style":66},[1121],{"type":22,"value":997},{"type":17,"tag":59,"props":1123,"children":1124},{"style":72},[1125],{"type":22,"value":776},{"type":17,"tag":59,"props":1127,"children":1128},{"style":66},[1129],{"type":22,"value":1006},{"type":17,"tag":59,"props":1131,"children":1132},{"style":66},[1133],{"type":22,"value":1011},{"type":17,"tag":59,"props":1135,"children":1136},{"style":66},[1137],{"type":22,"value":1138}," '",{"type":17,"tag":59,"props":1140,"children":1141},{"style":479},[1142],{"type":22,"value":1143},"is-align-",{"type":17,"tag":59,"props":1145,"children":1146},{"style":66},[1147],{"type":22,"value":476},{"type":17,"tag":59,"props":1149,"children":1150},{"style":66},[1151],{"type":22,"value":1152}," .",{"type":17,"tag":59,"props":1154,"children":1155},{"style":66},[1156],{"type":22,"value":462},{"type":17,"tag":59,"props":1158,"children":1159},{"style":72},[1160],{"type":22,"value":185},{"type":17,"tag":59,"props":1162,"children":1163},{"style":66},[1164],{"type":22,"value":471},{"type":17,"tag":59,"props":1166,"children":1167},{"style":66},[1168],{"type":22,"value":476},{"type":17,"tag":59,"props":1170,"children":1171},{"style":479},[1172],{"type":22,"value":1101},{"type":17,"tag":59,"props":1174,"children":1175},{"style":66},[1176],{"type":22,"value":476},{"type":17,"tag":59,"props":1178,"children":1179},{"style":66},[1180],{"type":22,"value":491},{"type":17,"tag":59,"props":1182,"children":1184},{"class":61,"line":1183},62,[1185],{"type":17,"tag":59,"props":1186,"children":1187},{"style":66},[1188],{"type":22,"value":601},{"type":17,"tag":59,"props":1190,"children":1192},{"class":61,"line":1191},63,[1193],{"type":17,"tag":59,"props":1194,"children":1195},{"emptyLinePlaceholder":82},[1196],{"type":22,"value":85},{"type":17,"tag":59,"props":1198,"children":1200},{"class":61,"line":1199},64,[1201],{"type":17,"tag":59,"props":1202,"children":1203},{"style":121},[1204],{"type":22,"value":1205},"        // Check for a background color\n",{"type":17,"tag":59,"props":1207,"children":1209},{"class":61,"line":1208},65,[1210,1214,1218,1222,1226,1230,1234,1238,1243,1247,1251],{"type":17,"tag":59,"props":1211,"children":1212},{"style":498},[1213],{"type":22,"value":501},{"type":17,"tag":59,"props":1215,"children":1216},{"style":66},[1217],{"type":22,"value":506},{"type":17,"tag":59,"props":1219,"children":1220},{"style":284},[1221],{"type":22,"value":511},{"type":17,"tag":59,"props":1223,"children":1224},{"style":66},[1225],{"type":22,"value":516},{"type":17,"tag":59,"props":1227,"children":1228},{"style":72},[1229],{"type":22,"value":185},{"type":17,"tag":59,"props":1231,"children":1232},{"style":66},[1233],{"type":22,"value":471},{"type":17,"tag":59,"props":1235,"children":1236},{"style":66},[1237],{"type":22,"value":476},{"type":17,"tag":59,"props":1239,"children":1240},{"style":479},[1241],{"type":22,"value":1242},"backgroundColor",{"type":17,"tag":59,"props":1244,"children":1245},{"style":66},[1246],{"type":22,"value":476},{"type":17,"tag":59,"props":1248,"children":1249},{"style":66},[1250],{"type":22,"value":542},{"type":17,"tag":59,"props":1252,"children":1253},{"style":66},[1254],{"type":22,"value":547},{"type":17,"tag":59,"props":1256,"children":1258},{"class":61,"line":1257},66,[1259,1263,1267,1271,1275,1279,1284,1288],{"type":17,"tag":59,"props":1260,"children":1261},{"style":66},[1262],{"type":22,"value":997},{"type":17,"tag":59,"props":1264,"children":1265},{"style":72},[1266],{"type":22,"value":776},{"type":17,"tag":59,"props":1268,"children":1269},{"style":66},[1270],{"type":22,"value":1006},{"type":17,"tag":59,"props":1272,"children":1273},{"style":66},[1274],{"type":22,"value":1011},{"type":17,"tag":59,"props":1276,"children":1277},{"style":66},[1278],{"type":22,"value":1138},{"type":17,"tag":59,"props":1280,"children":1281},{"style":479},[1282],{"type":22,"value":1283},"has-background",{"type":17,"tag":59,"props":1285,"children":1286},{"style":66},[1287],{"type":22,"value":476},{"type":17,"tag":59,"props":1289,"children":1290},{"style":66},[1291],{"type":22,"value":106},{"type":17,"tag":59,"props":1293,"children":1295},{"class":61,"line":1294},67,[1296,1300,1304,1308,1312,1316,1321,1325,1329,1333,1337,1341,1345,1349,1353,1358,1362,1366,1371,1375],{"type":17,"tag":59,"props":1297,"children":1298},{"style":66},[1299],{"type":22,"value":997},{"type":17,"tag":59,"props":1301,"children":1302},{"style":72},[1303],{"type":22,"value":776},{"type":17,"tag":59,"props":1305,"children":1306},{"style":66},[1307],{"type":22,"value":1006},{"type":17,"tag":59,"props":1309,"children":1310},{"style":66},[1311],{"type":22,"value":1011},{"type":17,"tag":59,"props":1313,"children":1314},{"style":66},[1315],{"type":22,"value":1138},{"type":17,"tag":59,"props":1317,"children":1318},{"style":479},[1319],{"type":22,"value":1320},"has-",{"type":17,"tag":59,"props":1322,"children":1323},{"style":66},[1324],{"type":22,"value":476},{"type":17,"tag":59,"props":1326,"children":1327},{"style":66},[1328],{"type":22,"value":1152},{"type":17,"tag":59,"props":1330,"children":1331},{"style":66},[1332],{"type":22,"value":462},{"type":17,"tag":59,"props":1334,"children":1335},{"style":72},[1336],{"type":22,"value":185},{"type":17,"tag":59,"props":1338,"children":1339},{"style":66},[1340],{"type":22,"value":471},{"type":17,"tag":59,"props":1342,"children":1343},{"style":66},[1344],{"type":22,"value":476},{"type":17,"tag":59,"props":1346,"children":1347},{"style":479},[1348],{"type":22,"value":1242},{"type":17,"tag":59,"props":1350,"children":1351},{"style":66},[1352],{"type":22,"value":476},{"type":17,"tag":59,"props":1354,"children":1355},{"style":66},[1356],{"type":22,"value":1357},"]",{"type":17,"tag":59,"props":1359,"children":1360},{"style":66},[1361],{"type":22,"value":1152},{"type":17,"tag":59,"props":1363,"children":1364},{"style":66},[1365],{"type":22,"value":1138},{"type":17,"tag":59,"props":1367,"children":1368},{"style":479},[1369],{"type":22,"value":1370},"-background-color",{"type":17,"tag":59,"props":1372,"children":1373},{"style":66},[1374],{"type":22,"value":476},{"type":17,"tag":59,"props":1376,"children":1377},{"style":66},[1378],{"type":22,"value":106},{"type":17,"tag":59,"props":1380,"children":1382},{"class":61,"line":1381},68,[1383],{"type":17,"tag":59,"props":1384,"children":1385},{"style":66},[1386],{"type":22,"value":601},{"type":17,"tag":59,"props":1388,"children":1390},{"class":61,"line":1389},69,[1391],{"type":17,"tag":59,"props":1392,"children":1393},{"emptyLinePlaceholder":82},[1394],{"type":22,"value":85},{"type":17,"tag":59,"props":1396,"children":1398},{"class":61,"line":1397},70,[1399],{"type":17,"tag":59,"props":1400,"children":1401},{"style":121},[1402],{"type":22,"value":1403},"        // Check for a text color\n",{"type":17,"tag":59,"props":1405,"children":1407},{"class":61,"line":1406},71,[1408,1412,1416,1420,1424,1428,1432,1436,1441,1445,1449],{"type":17,"tag":59,"props":1409,"children":1410},{"style":498},[1411],{"type":22,"value":501},{"type":17,"tag":59,"props":1413,"children":1414},{"style":66},[1415],{"type":22,"value":506},{"type":17,"tag":59,"props":1417,"children":1418},{"style":284},[1419],{"type":22,"value":511},{"type":17,"tag":59,"props":1421,"children":1422},{"style":66},[1423],{"type":22,"value":516},{"type":17,"tag":59,"props":1425,"children":1426},{"style":72},[1427],{"type":22,"value":185},{"type":17,"tag":59,"props":1429,"children":1430},{"style":66},[1431],{"type":22,"value":471},{"type":17,"tag":59,"props":1433,"children":1434},{"style":66},[1435],{"type":22,"value":476},{"type":17,"tag":59,"props":1437,"children":1438},{"style":479},[1439],{"type":22,"value":1440},"textColor",{"type":17,"tag":59,"props":1442,"children":1443},{"style":66},[1444],{"type":22,"value":476},{"type":17,"tag":59,"props":1446,"children":1447},{"style":66},[1448],{"type":22,"value":542},{"type":17,"tag":59,"props":1450,"children":1451},{"style":66},[1452],{"type":22,"value":547},{"type":17,"tag":59,"props":1454,"children":1456},{"class":61,"line":1455},72,[1457,1461,1465,1469,1473,1477,1482,1486],{"type":17,"tag":59,"props":1458,"children":1459},{"style":66},[1460],{"type":22,"value":997},{"type":17,"tag":59,"props":1462,"children":1463},{"style":72},[1464],{"type":22,"value":776},{"type":17,"tag":59,"props":1466,"children":1467},{"style":66},[1468],{"type":22,"value":1006},{"type":17,"tag":59,"props":1470,"children":1471},{"style":66},[1472],{"type":22,"value":1011},{"type":17,"tag":59,"props":1474,"children":1475},{"style":66},[1476],{"type":22,"value":1138},{"type":17,"tag":59,"props":1478,"children":1479},{"style":479},[1480],{"type":22,"value":1481},"has-text-color",{"type":17,"tag":59,"props":1483,"children":1484},{"style":66},[1485],{"type":22,"value":476},{"type":17,"tag":59,"props":1487,"children":1488},{"style":66},[1489],{"type":22,"value":106},{"type":17,"tag":59,"props":1491,"children":1493},{"class":61,"line":1492},73,[1494,1498,1502,1506,1510,1514,1518,1522,1526,1530,1534,1538,1542,1546,1550,1554,1558,1562,1567,1571],{"type":17,"tag":59,"props":1495,"children":1496},{"style":66},[1497],{"type":22,"value":997},{"type":17,"tag":59,"props":1499,"children":1500},{"style":72},[1501],{"type":22,"value":776},{"type":17,"tag":59,"props":1503,"children":1504},{"style":66},[1505],{"type":22,"value":1006},{"type":17,"tag":59,"props":1507,"children":1508},{"style":66},[1509],{"type":22,"value":1011},{"type":17,"tag":59,"props":1511,"children":1512},{"style":66},[1513],{"type":22,"value":1138},{"type":17,"tag":59,"props":1515,"children":1516},{"style":479},[1517],{"type":22,"value":1320},{"type":17,"tag":59,"props":1519,"children":1520},{"style":66},[1521],{"type":22,"value":476},{"type":17,"tag":59,"props":1523,"children":1524},{"style":66},[1525],{"type":22,"value":1152},{"type":17,"tag":59,"props":1527,"children":1528},{"style":66},[1529],{"type":22,"value":462},{"type":17,"tag":59,"props":1531,"children":1532},{"style":72},[1533],{"type":22,"value":185},{"type":17,"tag":59,"props":1535,"children":1536},{"style":66},[1537],{"type":22,"value":471},{"type":17,"tag":59,"props":1539,"children":1540},{"style":66},[1541],{"type":22,"value":476},{"type":17,"tag":59,"props":1543,"children":1544},{"style":479},[1545],{"type":22,"value":1440},{"type":17,"tag":59,"props":1547,"children":1548},{"style":66},[1549],{"type":22,"value":476},{"type":17,"tag":59,"props":1551,"children":1552},{"style":66},[1553],{"type":22,"value":1357},{"type":17,"tag":59,"props":1555,"children":1556},{"style":66},[1557],{"type":22,"value":1152},{"type":17,"tag":59,"props":1559,"children":1560},{"style":66},[1561],{"type":22,"value":1138},{"type":17,"tag":59,"props":1563,"children":1564},{"style":479},[1565],{"type":22,"value":1566},"-color",{"type":17,"tag":59,"props":1568,"children":1569},{"style":66},[1570],{"type":22,"value":476},{"type":17,"tag":59,"props":1572,"children":1573},{"style":66},[1574],{"type":22,"value":106},{"type":17,"tag":59,"props":1576,"children":1578},{"class":61,"line":1577},74,[1579],{"type":17,"tag":59,"props":1580,"children":1581},{"style":66},[1582],{"type":22,"value":601},{"type":17,"tag":59,"props":1584,"children":1586},{"class":61,"line":1585},75,[1587],{"type":17,"tag":59,"props":1588,"children":1589},{"emptyLinePlaceholder":82},[1590],{"type":22,"value":85},{"type":17,"tag":59,"props":1592,"children":1594},{"class":61,"line":1593},76,[1595],{"type":17,"tag":59,"props":1596,"children":1597},{"style":121},[1598],{"type":22,"value":1599},"        // Checks for text alignment\n",{"type":17,"tag":59,"props":1601,"children":1603},{"class":61,"line":1602},77,[1604,1608,1612,1616,1620,1624,1628,1632,1637,1641,1645],{"type":17,"tag":59,"props":1605,"children":1606},{"style":498},[1607],{"type":22,"value":501},{"type":17,"tag":59,"props":1609,"children":1610},{"style":66},[1611],{"type":22,"value":506},{"type":17,"tag":59,"props":1613,"children":1614},{"style":284},[1615],{"type":22,"value":511},{"type":17,"tag":59,"props":1617,"children":1618},{"style":66},[1619],{"type":22,"value":516},{"type":17,"tag":59,"props":1621,"children":1622},{"style":72},[1623],{"type":22,"value":185},{"type":17,"tag":59,"props":1625,"children":1626},{"style":66},[1627],{"type":22,"value":471},{"type":17,"tag":59,"props":1629,"children":1630},{"style":66},[1631],{"type":22,"value":476},{"type":17,"tag":59,"props":1633,"children":1634},{"style":479},[1635],{"type":22,"value":1636},"alignText",{"type":17,"tag":59,"props":1638,"children":1639},{"style":66},[1640],{"type":22,"value":476},{"type":17,"tag":59,"props":1642,"children":1643},{"style":66},[1644],{"type":22,"value":542},{"type":17,"tag":59,"props":1646,"children":1647},{"style":66},[1648],{"type":22,"value":547},{"type":17,"tag":59,"props":1650,"children":1652},{"class":61,"line":1651},78,[1653,1657,1661,1665,1669,1673,1678,1682,1686,1690,1694,1698,1702,1706,1710],{"type":17,"tag":59,"props":1654,"children":1655},{"style":66},[1656],{"type":22,"value":997},{"type":17,"tag":59,"props":1658,"children":1659},{"style":72},[1660],{"type":22,"value":776},{"type":17,"tag":59,"props":1662,"children":1663},{"style":66},[1664],{"type":22,"value":1006},{"type":17,"tag":59,"props":1666,"children":1667},{"style":66},[1668],{"type":22,"value":1011},{"type":17,"tag":59,"props":1670,"children":1671},{"style":66},[1672],{"type":22,"value":1138},{"type":17,"tag":59,"props":1674,"children":1675},{"style":479},[1676],{"type":22,"value":1677}," has-text-align-",{"type":17,"tag":59,"props":1679,"children":1680},{"style":66},[1681],{"type":22,"value":476},{"type":17,"tag":59,"props":1683,"children":1684},{"style":66},[1685],{"type":22,"value":1152},{"type":17,"tag":59,"props":1687,"children":1688},{"style":66},[1689],{"type":22,"value":462},{"type":17,"tag":59,"props":1691,"children":1692},{"style":72},[1693],{"type":22,"value":185},{"type":17,"tag":59,"props":1695,"children":1696},{"style":66},[1697],{"type":22,"value":471},{"type":17,"tag":59,"props":1699,"children":1700},{"style":66},[1701],{"type":22,"value":476},{"type":17,"tag":59,"props":1703,"children":1704},{"style":479},[1705],{"type":22,"value":1636},{"type":17,"tag":59,"props":1707,"children":1708},{"style":66},[1709],{"type":22,"value":476},{"type":17,"tag":59,"props":1711,"children":1712},{"style":66},[1713],{"type":22,"value":491},{"type":17,"tag":59,"props":1715,"children":1717},{"class":61,"line":1716},79,[1718],{"type":17,"tag":59,"props":1719,"children":1720},{"style":66},[1721],{"type":22,"value":601},{"type":17,"tag":59,"props":1723,"children":1725},{"class":61,"line":1724},80,[1726],{"type":17,"tag":59,"props":1727,"children":1728},{"emptyLinePlaceholder":82},[1729],{"type":22,"value":85},{"type":17,"tag":59,"props":1731,"children":1733},{"class":61,"line":1732},81,[1734],{"type":17,"tag":59,"props":1735,"children":1736},{"style":121},[1737],{"type":22,"value":1738},"        // Checks for vertical alignment\n",{"type":17,"tag":59,"props":1740,"children":1742},{"class":61,"line":1741},82,[1743,1747,1751,1755,1759,1763,1767,1771,1776,1780,1784],{"type":17,"tag":59,"props":1744,"children":1745},{"style":498},[1746],{"type":22,"value":501},{"type":17,"tag":59,"props":1748,"children":1749},{"style":66},[1750],{"type":22,"value":506},{"type":17,"tag":59,"props":1752,"children":1753},{"style":284},[1754],{"type":22,"value":511},{"type":17,"tag":59,"props":1756,"children":1757},{"style":66},[1758],{"type":22,"value":516},{"type":17,"tag":59,"props":1760,"children":1761},{"style":72},[1762],{"type":22,"value":185},{"type":17,"tag":59,"props":1764,"children":1765},{"style":66},[1766],{"type":22,"value":471},{"type":17,"tag":59,"props":1768,"children":1769},{"style":66},[1770],{"type":22,"value":476},{"type":17,"tag":59,"props":1772,"children":1773},{"style":479},[1774],{"type":22,"value":1775},"alignContent",{"type":17,"tag":59,"props":1777,"children":1778},{"style":66},[1779],{"type":22,"value":476},{"type":17,"tag":59,"props":1781,"children":1782},{"style":66},[1783],{"type":22,"value":542},{"type":17,"tag":59,"props":1785,"children":1786},{"style":66},[1787],{"type":22,"value":547},{"type":17,"tag":59,"props":1789,"children":1791},{"class":61,"line":1790},83,[1792,1796,1800,1804,1808,1812,1817,1821,1825,1829,1833,1837,1841,1845,1849],{"type":17,"tag":59,"props":1793,"children":1794},{"style":66},[1795],{"type":22,"value":997},{"type":17,"tag":59,"props":1797,"children":1798},{"style":72},[1799],{"type":22,"value":776},{"type":17,"tag":59,"props":1801,"children":1802},{"style":66},[1803],{"type":22,"value":1006},{"type":17,"tag":59,"props":1805,"children":1806},{"style":66},[1807],{"type":22,"value":1011},{"type":17,"tag":59,"props":1809,"children":1810},{"style":66},[1811],{"type":22,"value":1138},{"type":17,"tag":59,"props":1813,"children":1814},{"style":479},[1815],{"type":22,"value":1816}," is-vertically-aligned-",{"type":17,"tag":59,"props":1818,"children":1819},{"style":66},[1820],{"type":22,"value":476},{"type":17,"tag":59,"props":1822,"children":1823},{"style":66},[1824],{"type":22,"value":1152},{"type":17,"tag":59,"props":1826,"children":1827},{"style":66},[1828],{"type":22,"value":462},{"type":17,"tag":59,"props":1830,"children":1831},{"style":72},[1832],{"type":22,"value":185},{"type":17,"tag":59,"props":1834,"children":1835},{"style":66},[1836],{"type":22,"value":471},{"type":17,"tag":59,"props":1838,"children":1839},{"style":66},[1840],{"type":22,"value":476},{"type":17,"tag":59,"props":1842,"children":1843},{"style":479},[1844],{"type":22,"value":1775},{"type":17,"tag":59,"props":1846,"children":1847},{"style":66},[1848],{"type":22,"value":476},{"type":17,"tag":59,"props":1850,"children":1851},{"style":66},[1852],{"type":22,"value":491},{"type":17,"tag":59,"props":1854,"children":1856},{"class":61,"line":1855},84,[1857],{"type":17,"tag":59,"props":1858,"children":1859},{"style":66},[1860],{"type":22,"value":601},{"type":17,"tag":59,"props":1862,"children":1864},{"class":61,"line":1863},85,[1865],{"type":17,"tag":59,"props":1866,"children":1867},{"emptyLinePlaceholder":82},[1868],{"type":22,"value":85},{"type":17,"tag":59,"props":1870,"children":1872},{"class":61,"line":1871},86,[1873,1877,1882,1886,1891,1896,1900,1904,1908,1912,1916],{"type":17,"tag":59,"props":1874,"children":1875},{"style":66},[1876],{"type":22,"value":448},{"type":17,"tag":59,"props":1878,"children":1879},{"style":72},[1880],{"type":22,"value":1881},"class_string ",{"type":17,"tag":59,"props":1883,"children":1884},{"style":66},[1885],{"type":22,"value":211},{"type":17,"tag":59,"props":1887,"children":1888},{"style":284},[1889],{"type":22,"value":1890}," implode",{"type":17,"tag":59,"props":1892,"children":1893},{"style":66},[1894],{"type":22,"value":1895},"(",{"type":17,"tag":59,"props":1897,"children":1898},{"style":66},[1899],{"type":22,"value":476},{"type":17,"tag":59,"props":1901,"children":1902},{"style":66},[1903],{"type":22,"value":1138},{"type":17,"tag":59,"props":1905,"children":1906},{"style":66},[1907],{"type":22,"value":781},{"type":17,"tag":59,"props":1909,"children":1910},{"style":66},[1911],{"type":22,"value":462},{"type":17,"tag":59,"props":1913,"children":1914},{"style":72},[1915],{"type":22,"value":776},{"type":17,"tag":59,"props":1917,"children":1918},{"style":66},[1919],{"type":22,"value":637},{"type":17,"tag":59,"props":1921,"children":1923},{"class":61,"line":1922},87,[1924],{"type":17,"tag":59,"props":1925,"children":1926},{"emptyLinePlaceholder":82},[1927],{"type":22,"value":85},{"type":17,"tag":59,"props":1929,"children":1931},{"class":61,"line":1930},88,[1932,1936,1940,1944,1949],{"type":17,"tag":59,"props":1933,"children":1934},{"style":498},[1935],{"type":22,"value":618},{"type":17,"tag":59,"props":1937,"children":1938},{"style":284},[1939],{"type":22,"value":623},{"type":17,"tag":59,"props":1941,"children":1942},{"style":66},[1943],{"type":22,"value":292},{"type":17,"tag":59,"props":1945,"children":1946},{"style":72},[1947],{"type":22,"value":1948},"class_string",{"type":17,"tag":59,"props":1950,"children":1951},{"style":66},[1952],{"type":22,"value":637},{"type":17,"tag":59,"props":1954,"children":1956},{"class":61,"line":1955},89,[1957],{"type":17,"tag":59,"props":1958,"children":1959},{"style":66},[1960],{"type":22,"value":349},{"type":17,"tag":59,"props":1962,"children":1964},{"class":61,"line":1963},90,[1965],{"type":17,"tag":59,"props":1966,"children":1967},{"style":66},[1968],{"type":22,"value":1969},"}\n",{"type":17,"tag":35,"props":1971,"children":1973},{"id":1972},"how-does-it-work",[1974],{"type":22,"value":1975},"How does it work?",{"type":17,"tag":18,"props":1977,"children":1978},{},[1979],{"type":22,"value":1980},"At the start of each ACF block file, you will initiate the class by passing in the $block variable that is already available in your PHP file - more info here. Next, the code will go through and look for the common classes that blocks have support for, including background colors, text colors, alignment, etc. Feel free add more, or remove some, as you see fit.",{"type":17,"tag":18,"props":1982,"children":1983},{},[1984,1986,1992,1994,2000],{"type":22,"value":1985},"The code allows you to use two functions for outputting the data: ",{"type":17,"tag":55,"props":1987,"children":1989},{"className":1988},[],[1990],{"type":22,"value":1991},"get_classes()",{"type":22,"value":1993}," and ",{"type":17,"tag":55,"props":1995,"children":1997},{"className":1996},[],[1998],{"type":22,"value":1999},"get_id()",{"type":22,"value":2001},". Here is a code sample of a block with a basic setup for reference:",{"type":17,"tag":47,"props":2003,"children":2006},{"className":49,"code":2004,"filename":2005,"language":52,"meta":7,"style":7},"\u003C?php\n\n$block_template = new BlockTemplate($block);\n$block_template = $block_template->add_classes(['sample-class']);\n\n?>\n\n\u003Cdiv class=\"\u003C?= $block_template->get_classes(); ?>\" id=\"\u003C?= $block_template->get_id() ?>\">\n  Content here\n\u003C/div>\n","sample-block.php",[2007],{"type":17,"tag":55,"props":2008,"children":2009},{"__ignoreMap":7},[2010,2021,2028,2067,2124,2131,2139,2146,2251,2259],{"type":17,"tag":59,"props":2011,"children":2012},{"class":61,"line":62},[2013,2017],{"type":17,"tag":59,"props":2014,"children":2015},{"style":66},[2016],{"type":22,"value":69},{"type":17,"tag":59,"props":2018,"children":2019},{"style":72},[2020],{"type":22,"value":75},{"type":17,"tag":59,"props":2022,"children":2023},{"class":61,"line":78},[2024],{"type":17,"tag":59,"props":2025,"children":2026},{"emptyLinePlaceholder":82},[2027],{"type":22,"value":85},{"type":17,"tag":59,"props":2029,"children":2030},{"class":61,"line":88},[2031,2036,2041,2045,2050,2055,2059,2063],{"type":17,"tag":59,"props":2032,"children":2033},{"style":66},[2034],{"type":22,"value":2035},"$",{"type":17,"tag":59,"props":2037,"children":2038},{"style":72},[2039],{"type":22,"value":2040},"block_template ",{"type":17,"tag":59,"props":2042,"children":2043},{"style":66},[2044],{"type":22,"value":211},{"type":17,"tag":59,"props":2046,"children":2047},{"style":92},[2048],{"type":22,"value":2049}," new",{"type":17,"tag":59,"props":2051,"children":2052},{"style":98},[2053],{"type":22,"value":2054}," BlockTemplate",{"type":17,"tag":59,"props":2056,"children":2057},{"style":66},[2058],{"type":22,"value":292},{"type":17,"tag":59,"props":2060,"children":2061},{"style":72},[2062],{"type":22,"value":185},{"type":17,"tag":59,"props":2064,"children":2065},{"style":66},[2066],{"type":22,"value":637},{"type":17,"tag":59,"props":2068,"children":2069},{"class":61,"line":109},[2070,2074,2078,2082,2086,2091,2096,2101,2106,2110,2115,2119],{"type":17,"tag":59,"props":2071,"children":2072},{"style":66},[2073],{"type":22,"value":2035},{"type":17,"tag":59,"props":2075,"children":2076},{"style":72},[2077],{"type":22,"value":2040},{"type":17,"tag":59,"props":2079,"children":2080},{"style":66},[2081],{"type":22,"value":211},{"type":17,"tag":59,"props":2083,"children":2084},{"style":66},[2085],{"type":22,"value":180},{"type":17,"tag":59,"props":2087,"children":2088},{"style":72},[2089],{"type":22,"value":2090},"block_template",{"type":17,"tag":59,"props":2092,"children":2093},{"style":66},[2094],{"type":22,"value":2095},"->",{"type":17,"tag":59,"props":2097,"children":2098},{"style":284},[2099],{"type":22,"value":2100},"add_classes",{"type":17,"tag":59,"props":2102,"children":2103},{"style":66},[2104],{"type":22,"value":2105},"([",{"type":17,"tag":59,"props":2107,"children":2108},{"style":66},[2109],{"type":22,"value":476},{"type":17,"tag":59,"props":2111,"children":2112},{"style":479},[2113],{"type":22,"value":2114},"sample-class",{"type":17,"tag":59,"props":2116,"children":2117},{"style":66},[2118],{"type":22,"value":476},{"type":17,"tag":59,"props":2120,"children":2121},{"style":66},[2122],{"type":22,"value":2123},"]);\n",{"type":17,"tag":59,"props":2125,"children":2126},{"class":61,"line":117},[2127],{"type":17,"tag":59,"props":2128,"children":2129},{"emptyLinePlaceholder":82},[2130],{"type":22,"value":85},{"type":17,"tag":59,"props":2132,"children":2133},{"class":61,"line":127},[2134],{"type":17,"tag":59,"props":2135,"children":2136},{"style":66},[2137],{"type":22,"value":2138},"?>\n",{"type":17,"tag":59,"props":2140,"children":2141},{"class":61,"line":136},[2142],{"type":17,"tag":59,"props":2143,"children":2144},{"emptyLinePlaceholder":82},[2145],{"type":22,"value":85},{"type":17,"tag":59,"props":2147,"children":2148},{"class":61,"line":145},[2149,2154,2159,2163,2167,2172,2177,2181,2185,2189,2194,2199,2203,2208,2212,2216,2220,2224,2228,2232,2237,2242,2246],{"type":17,"tag":59,"props":2150,"children":2151},{"style":66},[2152],{"type":22,"value":2153},"\u003C",{"type":17,"tag":59,"props":2155,"children":2156},{"style":72},[2157],{"type":22,"value":2158},"div ",{"type":17,"tag":59,"props":2160,"children":2161},{"style":149},[2162],{"type":22,"value":152},{"type":17,"tag":59,"props":2164,"children":2165},{"style":66},[2166],{"type":22,"value":211},{"type":17,"tag":59,"props":2168,"children":2169},{"style":66},[2170],{"type":22,"value":2171},"\"",{"type":17,"tag":59,"props":2173,"children":2174},{"style":479},[2175],{"type":22,"value":2176},"\u003C?= ",{"type":17,"tag":59,"props":2178,"children":2179},{"style":66},[2180],{"type":22,"value":2035},{"type":17,"tag":59,"props":2182,"children":2183},{"style":72},[2184],{"type":22,"value":2090},{"type":17,"tag":59,"props":2186,"children":2187},{"style":66},[2188],{"type":22,"value":2095},{"type":17,"tag":59,"props":2190,"children":2191},{"style":72},[2192],{"type":22,"value":2193},"get_classes",{"type":17,"tag":59,"props":2195,"children":2196},{"style":479},[2197],{"type":22,"value":2198},"(); ?>",{"type":17,"tag":59,"props":2200,"children":2201},{"style":66},[2202],{"type":22,"value":2171},{"type":17,"tag":59,"props":2204,"children":2205},{"style":72},[2206],{"type":22,"value":2207}," id",{"type":17,"tag":59,"props":2209,"children":2210},{"style":66},[2211],{"type":22,"value":211},{"type":17,"tag":59,"props":2213,"children":2214},{"style":66},[2215],{"type":22,"value":2171},{"type":17,"tag":59,"props":2217,"children":2218},{"style":479},[2219],{"type":22,"value":2176},{"type":17,"tag":59,"props":2221,"children":2222},{"style":66},[2223],{"type":22,"value":2035},{"type":17,"tag":59,"props":2225,"children":2226},{"style":72},[2227],{"type":22,"value":2090},{"type":17,"tag":59,"props":2229,"children":2230},{"style":66},[2231],{"type":22,"value":2095},{"type":17,"tag":59,"props":2233,"children":2234},{"style":72},[2235],{"type":22,"value":2236},"get_id",{"type":17,"tag":59,"props":2238,"children":2239},{"style":479},[2240],{"type":22,"value":2241},"() ?>",{"type":17,"tag":59,"props":2243,"children":2244},{"style":66},[2245],{"type":22,"value":2171},{"type":17,"tag":59,"props":2247,"children":2248},{"style":66},[2249],{"type":22,"value":2250},">\n",{"type":17,"tag":59,"props":2252,"children":2253},{"class":61,"line":160},[2254],{"type":17,"tag":59,"props":2255,"children":2256},{"style":72},[2257],{"type":22,"value":2258},"  Content here\n",{"type":17,"tag":59,"props":2260,"children":2261},{"class":61,"line":169},[2262,2267,2272],{"type":17,"tag":59,"props":2263,"children":2264},{"style":66},[2265],{"type":22,"value":2266},"\u003C/",{"type":17,"tag":59,"props":2268,"children":2269},{"style":72},[2270],{"type":22,"value":2271},"div",{"type":17,"tag":59,"props":2273,"children":2274},{"style":66},[2275],{"type":22,"value":2250},{"type":17,"tag":35,"props":2277,"children":2279},{"id":2278},"using-the-id",[2280],{"type":22,"value":2281},"Using the ID",{"type":17,"tag":18,"props":2283,"children":2284},{},[2285,2287,2292],{"type":22,"value":2286},"The function ",{"type":17,"tag":55,"props":2288,"children":2290},{"className":2289},[],[2291],{"type":22,"value":1999},{"type":22,"value":2293}," will either return the random ID string provided by ACF, or a custom ID that is passed to the block from the editor. For the custom ID, you will need to enable support for the \"anchor\" option. More info on that can be found in the official docs here.",{"type":17,"tag":18,"props":2295,"children":2296},{},[2297],{"type":22,"value":2298},"This ID is intended to be a totally unique ID to the page and can be safely used for inline CSS for targeting the block wrapper. For example, I'll use this with the ACF Image field to designate a background image that needs to be applied and use the Block ID as the target for the CSS.",{"type":17,"tag":35,"props":2300,"children":2302},{"id":2301},"using-classes",[2303],{"type":22,"value":2304},"Using classes",{"type":17,"tag":18,"props":2306,"children":2307},{},[2308,2310,2316],{"type":22,"value":2309},"As shown in the code above, there are two functions to use here for classes - first is ",{"type":17,"tag":55,"props":2311,"children":2313},{"className":2312},[],[2314],{"type":22,"value":2315},"add_classes()",{"type":22,"value":2317},". This is a function that accepts an array of classes that you can pass in and use as your wrapper class. For my use case, I usually have the name of the block as a class so I can more easily follow the BEM structure. Next, I'll pass in any conditional modifiers as needed. In some blocks this could be a boolean toggle to show/hide elements, or spacing classes, etc.",{"type":17,"tag":18,"props":2319,"children":2320},{},[2321,2323,2328,2330,2336],{"type":22,"value":2322},"Next, you'll use ",{"type":17,"tag":55,"props":2324,"children":2326},{"className":2325},[],[2327],{"type":22,"value":1991},{"type":22,"value":2329}," to actually retrieve and use the classes. At this point, the function will go through the ",{"type":17,"tag":55,"props":2331,"children":2333},{"className":2332},[],[2334],{"type":22,"value":2335},"$block",{"type":22,"value":2337}," array to retrieve all of the Gutenberg specific classes, grab any custom classes, and then turn it into a space-separated string of classes to use.",{"type":17,"tag":35,"props":2339,"children":2341},{"id":2340},"wrapping-up",[2342],{"type":22,"value":2343},"Wrapping up",{"type":17,"tag":18,"props":2345,"children":2346},{},[2347],{"type":22,"value":2348},"Gutenberg is ever evolving, so I highly recommend to use a class like this for all of your ACF blocks so you can make use of new features without needing to update every block individually. I hope this code benefits your codebase in some way and feel free to reach out if you have any suggestions for improvements!",{"type":17,"tag":2350,"props":2351,"children":2352},"style",{},[2353],{"type":22,"value":2354},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":78,"depth":78,"links":2356},[2357,2358,2359,2360,2361],{"id":37,"depth":78,"text":40},{"id":1972,"depth":78,"text":1975},{"id":2278,"depth":78,"text":2281},{"id":2301,"depth":78,"text":2304},{"id":2340,"depth":78,"text":2343},"markdown","content:blog:improving-your-class-structures-with-acf-blocks.md","content","blog/improving-your-class-structures-with-acf-blocks.md","md",1784603432922]