워드프레스 내장 에디터 사용시 미디어 ui 깨지는 현상

qpress 2020년 1월 21일 33

Kboard를 사용하거나, 플러그인을 개발할 경우 Front에서 워드프레스 내장 에디터를 사용하는 경우가 많다.
그런데 유독 특정 테마에서 미디어 라이브러리 부분이 UI가 이상해지는 현상이 있다

이 문제 때문에 엄청난 구글링을 했으나 적절한 해결책을 찾지 못했고, 아래와 같이 CSS 코드를 사용중인 테마의 style.css 파일에 추가하는 일종의 편법으로 해결할 수 있었다.

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}