Handling for script and style tags

[chrismakesstuf]

Hi @vaakash!

I've now been using your plugin quite successfully, I'm not sure if you'd like a donation that I can give somewhere to help support your project.

One remaining thing that would be very helpful, is that for some pages I have a custom browser app I import into my Wordpress pages with:
<script src="https://resources.sienci.com/wp-content/react/wizard.js"></script>
<style>@import url('https://resources.sienci.com/wp-content/react/wizard.css')</style>

Right now, GIW seems to get stuck on these and instead only brings over
@import url('https://resources.sienci.com/wp-content/react/wizard.css')
and then gets stuck and doesn't process to import the rest of the page content. Is there a simple rule that could be added to handle this type of content similar to how handling of other common HTML elements is already implemented? I just want the raw HTML to be delivered to the other side for the WordPress page to receive and host.

Many thanks,
Chris

[todd-alex]

@SienciLabs I am not sure that this plugin is for deploying / rendering browser apps from markdown. I believe the focus is on automating and extending dealing with text and images in post workflows for Wordpress. I would recommend something like Vercel in your workflow to first deploy the app, get the URL, and maybe use iFrame in your markdown file.

Maybe it would even make it easier if there was a shortcode for iFrames.

But I would suggest to keep the application and WordPress content separate so you can reduce the potential for compatibility issues and maintain a clear boundary between content creation and application functionality.

Having Git It Write integrate WP post authoring workflows with Github is powerful.

For instance, you can setup a CI/CD workflow with YAML files like below in .github/workflows of your repo for each article.
This example YAML below uses Vercel and Github actions to automate deployment and publishing with Vercel as well as updating the published URL in an iFrame placeholder tag inside of each of your articles you want that browser app in.

You can remove the loop if you don't need it.

name: Deploy to Vercel and Update Markdown Files

on:
  push:
    branches:
      - main  # Adjust this to the branch you want to deploy from

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'  # Use the Node.js version compatible with your project

      - name: Install Dependencies
        run: npm install

      - name: Build Project
        run: npm run build  # Adjust this if your build process is different

      - name: Prepare Script and Style Deployment
        run: |
          # Create necessary directories for custom scripts and styles
          mkdir -p public/wp-content/react

          # Download the JavaScript and CSS files
          curl -o public/wp-content/react/wizard.js https://resources.sienci.com/wp-content/react/wizard.js
          curl -o public/wp-content/react/wizard.css https://resources.sienci.com/wp-content/react/wizard.css

      - name: Deploy to Vercel
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: |
          npm install -g vercel
          # Deploy to production and capture the published URL
          URL=$(vercel --prod --token $VERCEL_TOKEN --confirm)
          echo "Deployment URL: $URL"
          echo "URL=$URL" >> $GITHUB_ENV  # Save URL as an environment variable

      - name: Update Markdown Files with iFrame
        run: |
          # Define the list of Markdown files to update
          FILES=(
            "path/to/article1.md"
            "path/to/article2.md"
            "path/to/article3.md"
            # Add all your markdown files here
          )

          # Loop through each file and replace the placeholder with the iFrame
          for FILE in "${FILES[@]}"; do
            echo "Updating $FILE"
            # Replace the placeholder with the iFrame containing the deployment URL
            sed -i "s|<!-- URL_PLACEHOLDER -->|<iframe src=\"$URL\" width=\"100%\" height=\"600\"></iframe>|g" "$FILE"
          done

      - name: Commit and Push Changes
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          git config --global user.name "GitHub Actions"
          git config --global user.email "actions@github.com"
          git add path/to/article*.md  # Adjust this pattern to match all your Markdown files
          git commit -m "Update Markdown files with deployed URL"
          git push

[chrismakesstuf]

@todd-alex definitely, I'm not trying to make whole apps using markdown or anything like that. Thanks for the suggestions though.

I know there are a couple places I'd just find running a short HTML script useful which right now GIW isn't passing along to WP. This particular instance might not be the best demonstration of that, but hopefully it's understood. If not, I can look into implementing myself and submitting a PR but for maintainability I'd rather know first if it's something @vaakash would like to see implemented

[vaakash]

Hi @SienciLabs,

I have tested <script> and <style> tags and it had worked fine on my end.

I tried the same script and style tags you have shared and it worked without any tags getting stripped out.

Can you please check if the user publishing the post has capability to post unfilitered HTML? Are you able to insert the same <script> tags manually in the post?
https://www.google.com/search?q=wordpress+admin+user+unfiltered+html

Please let me know further on this.

Thanks

[chrismakesstuf]

Thanks @vaakash,

I tried a couple things:

1. I don't have a Multi-site, but I downloaded a 'User Role Editor' plugin and verified that I have 'unfiltered HTML' enabled as a capability
   
2. I made a test post similar to yours and when I pushed it through GIW the tags were stripped out again
   
   
3. When I manually inputted the HTML in the post and refreshed the page in WordPress, I can see that the tags were kept so I seems like the tags are working when they are inputted manually
   

I looked through more of the topics on Unfiltered HTML and can't find any other reason why I might be having this issue - so if you have any other ideas then I'd be happy to try them or send you more information.

Thanks,
Chris

[vaakash]

Hi Chris,

I see that the user has "editor" role on your side. Let me try the same on my end.

Meantime is it possible to confirm with a user of administrator role?
You can change it in the repo config settings under "Author to set for the posts"

Thanks,
Aakash

[chrismakesstuf]

Yes definitely! I tried it with an Administrator account and it was the same - although I do find that when I'm uploading a lot of media, sometimes it shows as being uploaded by the admin user, and other times it shows the uploader as blank..

[chrismakesstuf]

@vaakash did you find anything else on this yet?

[vaakash]

Hi @SienciLabs,

I tried to multiple times on my end but issue is not reproducible. I tried it on a fresh WP installation too. My guess is there is some plugin which is filtering out the HTML content when posted using wp_insert_post function call. Can you please narrow down the issue by disabling plugins one by one and see if there are any hints?