Messy PHP Output

  • Hi,


    It's been a few years since I've completed a project with Perch, am just getting stuck in again. My needs before and now are relatively basic so it's entirely possible I'm overlooking something here in terms of my setup.


    I've been experimenting with Perch Blocks in order to make a menu editable by the user, and I'm quite pleased with the results so far, in that it does exactly what I want it to do within the editor. My only bugbear is the formatting of the code that's being output, adding unnecessary lines to the document. I wouldn't mind if it was minifiable, but as far as I know it isn't, so..


    This is how my code looked before injecting Perch (I'm using Jade, this is the method I used to insert the perch script before and I've never had an issue - https://ibb.co/94XZrC0


    And how it's formatted now with Perch - https://ibb.co/FgqngPk

    PHP
    1. .menu
    2. .flex-grid
    3. .col-1
    4. |<?php perch_content('Menu Pricing'); ?>
    5. hr
    6. |<?php perch_content('Menu List'); ?>


    And here are my two templates: https://ibb.co/2Swq43S , https://ibb.co/jr5H17k


    Code
    1. <perch:blocks>
    2. <perch:block type="heading" label="Menu Pricing" icon="edit">
    3. <h2><perch:content type="text" id="menu_pricing" label="Menu Pricing" help="Edit the menu pricing heading." required="true"/></h2>`
    4. </perch:block>
    5. <perch:block type="description" label="Menu Description" icon="edit">
    6. <p><perch:content type="textarea" id="menu_description" label="Menu Description" help="Edit the menu description." required="true" editor="markitup"/></p>
    7. </perch:block>
    8. </perch:blocks>



    This is what the end source code looks like: https://ibb.co/bK1rQGD



    I also don't like that <ul> and </ul> tags are being inserted even if these aren't used, e.g. the user can save and add another and just use a heading or subheading, but the unordered list tags are still created in the source code. Is this just a limitation or something I'm doing wrong with my implementation?


    Any help is much appreciated, every else I need to do for this build is super simple and I'm familiar with from my previous project.


    Thanks in advance!

  • drewm

    Approved the thread.
  • I also don't like that <ul> and </ul> tags are being inserted even if these aren't used

    The perch:before and perch:after tags apply to the entire perch:blocks section, not to an individual block within it.


    Otherwise, is your complaint the whitespace? That's coming from the spaces in your template. Once your page is delivered, gzip will reduce that to having basically no impact on file size, so it shouldn't be an issue. You can hack around it using template comments to eat the space, but that'll make your templates harder to maintain and your time is almost certainly better spent improving parts of your site that actually have an impact.

  • Thanks for the info.


    The perch:before and perch:after tags apply to the entire perch:blocks section, not to an individual block within it.

    Sorry, not sure I follow. Are you saying I need to move the perch:before and perch:after tags above and below the perch:blocks open and close respectively? Will this prevent the <ul> tags being generated unless actually used? Do I even need these for a simple list? Not sure if I've misunderstood their purpose.


    On the whitespace, fair enough. I was just curious as to why as I found with my previous project the generated code was pretty much how I had it handwritten before. I wanted to check I wasn't using blocks incorrectly more than anything else - if that's the expected behaviour, then fine.


    My ideal solution would to be able to minify the .php file but I assume that's not really practical.

  • The perch:before and perch:after belong to the perch:blocks pair. The before is output before any blocks and the after is output after all blocks.


    The way you have them arranged at the moment looks like you intend the before and after to selectively apply only to the block that contains the <li>, but that's not how it works.


    My ideal solution would to be able to minify the .php file but I assume that's not really practical.

    It's totally doable, but it's not the job of a CMS.

  • Right ok. That was the intent yes - so is it not possible to open and close the <ul> and also do everything else I was doing within that one template, without generating the <ul> even when it isn't needed?


    As is it works for what I wanted to accomplish as the user can effectively edit the list item and add new headings wherever they like all within one section. I didn't really want to separate the headings and lists out in to seperate templates as it gives them less control, but I don't like extra tags being created when not required.

  • tclive might I suggest a task runner that you use to compile and minify your code? There are a few different options to choose from but they can minify your PHP, CSS, HTML and Javascript code on the fly.

    Thanks - I do use a complier (Prepros) that minifys most of my code, though not PHP. I will look more in to but I'm more familiar working with static projects. What I wasn't sure of here is if the user is editing the content on the live site and Perch is updating the source code, what bearing this has on minification. It was reading this thread that made me ask in the first place, but then the above suggests this is totally doable, so I'm confused.


    The perch:before and perch:after belong to the perch:blocks pair. The before is output before any blocks and the after is output after all blocks.


    The way you have them arranged at the moment looks like you intend the before and after to selectively apply only to the block that contains the <li>, but that's not how it works.

    I understand, thank you. I did move these so they're where they should be but I then ended up with tags inside the <uls> that shouldn't really be there, which while I'm sure would function fine would fail w3c.


    I don't think I even need to use blocks and was making more of a meal of this than I needed to. All I really need to do is to be able to insert a new <ul> along with a <h3> tag above each, all within one region, so they can have as many lists as necessary, and reorder them easily.


    I was playing around and have come up with the following template:


    Code
    1. <h3><perch:content type="text" id="menu_heading" label="Menu Heading" help="Add a heading to the menu." required="true" title="true"/></h3>
    2. <perch:repeater id="menu_list" label="Menu List">
    3. <perch:before><ul></perch:before>
    4. <li><perch:content type="text" id="menu_list_item" label="Menu List Item" help="Add a list item to the menu."/></li>
    5. <perch:after></ul><hr></perch:after>
    6. </perch:repeater>


    This seems to do exactly what I wanted in the editor, and also outputs the <uls> only as needed. Hopefully I'm not doing anything I shouldn't here?! :S