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.

Sign up for GitHub

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

Zoom out: fix scaling issues #65998

Merged
merged 12 commits into from
Oct 10, 2024
Merged

Zoom out: fix scaling issues #65998

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6dcea75
changed from using borders to use pseudo elements
MaggieCabrera Oct 9, 2024
53fe5ab
added comments
MaggieCabrera Oct 9, 2024
22587a1
Include frame size in the scaling calculation
jeryj Oct 9, 2024
7dfed11
Account for scaling in the frame height
jeryj Oct 9, 2024
abe17a2
Calculation in CSS
ajlende Oct 9, 2024
c70f39a
Revert "Calculation in CSS"
jeryj Oct 10, 2024
a444cdb
Add comment about why the calculation for scaling needs to happen in …
jeryj Oct 10, 2024
7af85bd
Force px value for frameSize
jeryj Oct 10, 2024
4146bd3
Restore previous frameSize var setting
jeryj Oct 10, 2024
28e4dd0
Add back line break
jeryj Oct 10, 2024
03ed997
Use padding top/bottom instead of before/after for top/bottom frame
jeryj Oct 10, 2024
47b31ed
Remove more before/after css since we are using padding
jeryj Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add comment about why the calculation for scaling needs to happen in … 
…the JS
  • Loading branch information
@jeryj
jeryj committed Oct 10, 2024
commit a444cdbc2179dd45385839c8029ca47347016c8a
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,9 @@ function Iframe( {
iframeDocument.documentElement.classList.add( 'is-zoomed-out' );

const maxWidth = 750;
// This scaling calculation has to happen within the JS because CSS calc() can
// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
// but calc( 100px / 2px ) is not.
iframeDocument.documentElement.style.setProperty(
'--wp-block-editor-iframe-zoom-out-scale',
scale === 'default'
Expand Down