Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BUG: Fix block styles not loading on frontend (fixed #1375) #1422

Merged
merged 2 commits into from
Jul 18, 2019

Conversation

nerrad
Copy link
Contributor

@nerrad nerrad commented Jul 17, 2019

Problem this Pull Request solves

See #1375 for details.

The fix implemented here may or may not be the chosen route for long term fixes.

In #1286 I introduced the automatic dependency generation script and logic which in turn introduced the bug in #1375 because the frontend script for blocks (/src/blocks/index-frontend.js) doesn't list any dependencies on components, hence the @eventespresso/components built module is not loaded on the frontend. That module is where the styles for the component the event attendees block uses (components/event-attendees/style.css) are found. There are two temporary solutions:

  1. Manually add @eventespresso/components as a dependency for the frontend css php side.
  2. Manually import any styles we want included into /src/blocks/index-frontend.js (which would then get built to the /src/blocks/index-frontend.css file).

I chose the second option for the following reasons:

  • Option 1 would result in a bigger package loaded over the wire on the frontend because ALL the styles for eventespresso components are loaded. Compounded with the yet unresolved problem of loading block assets on every route, this is not really desired.
  • Option 2 allows for targeting only what is needed for frontend block loads. The downside of course is that in the backend, styles will be duplicated in both the "frontend" css and the main blocks css (loaded for the editor). I think for the backend that's okay.

Going forward as you plan for more blocks (not for this pull - but for future pulls), I would suggest evaluating:

  • building block assets to their own files (I think this is what Jetpack does).
  • look into only loading block assets on the routes they are needed. I would register block assets on every route, but then hook into the block parser code server side to determine whether to wp_enqueue the block assets by what blocks are detected. There is a pre_render_block filter in wp core that you might be able to use to detect when blocks are being rendered for post content and use that to enqueue the script/style (print style inline or enqueue script for footer). The other option is to use the parse_blocks function in core on an early hook (as soon as you know post_content) to detect if the post content has blocks (which is what you might want to use on a single post view).

How has this been tested

  • Verify that the Event Attendee block assets load and display as expected on the frontend and the backend (editor).

Checklist

"version": "git+https://github.com/sindresorhus/del.git#51662acf8c0b0632ed577fc2bb64a65a677ead9b",
"from": "git+https://github.com/sindresorhus/del.git#51662acf8c0b0632ed577fc2bb64a65a677ead9b",
"version": "git+https://github.com/sindresorhus/del.git#ca05c65ca582b47a20e1b64539dd5ef45a0e8419",
"from": "git+https://github.com/sindresorhus/del.git",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I expected this to happen for the package-lock in this case because of all the dependency updates merged into master without any rebuilds (dependabot updates)

@tn3rb tn3rb removed their assignment Jul 17, 2019
@nerrad nerrad assigned joshfeck and unassigned nerrad Jul 17, 2019
@Pebblo
Copy link
Member

Pebblo commented Jul 18, 2019

Tested and confirmed the attendee block styles are applied in the admin and on the front end.

@Pebblo Pebblo merged commit c0fd1fe into master Jul 18, 2019
eeteamcodebase pushed a commit that referenced this pull request Jul 18, 2019
…block styles not loading on frontend (fixed #1375) (#1422)

* make sure frontend blocks includes stylesheet for event-attendees block

* update build files (dev)

js_only
"
@Pebblo Pebblo deleted the BUG/fix-block-styles-not-loading-on-frontend branch July 18, 2019 11:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants